Commit 804c371b authored by GuanHua's avatar GuanHua

fix:商品没有图片时报错问题

parent 7f14904a
......@@ -437,7 +437,7 @@ const CommodityDetail = (props) => {
})
if (!judgeAttrValueInList(tempAttrList[tempAttrListIndex].customerAttributeValueList, attrListItem.customerAttributeValue.id)) {
if (tempAttrListIndex === 0) {
attrListItem.customerAttributeValue.commodityPic = item.commodityPic[0]
item.commodityPic && (attrListItem.customerAttributeValue.commodityPic = item.commodityPic[0])
}
tempAttrList[tempAttrListIndex].customerAttributeValueList = [...tempAttrList[tempAttrListIndex].customerAttributeValueList, attrListItem.customerAttributeValue]
}
......@@ -447,7 +447,7 @@ const CommodityDetail = (props) => {
temp.customerAttribute = attrListItem.customerAttribute
if (tempAttrList.length === 0) {
attrListItem.customerAttributeValue.commodityPic = item.commodityPic[0]
item.commodityPic && (attrListItem.customerAttributeValue.commodityPic = item.commodityPic[0])
temp.customerAttributeValueList = [attrListItem.customerAttributeValue]
} else {
temp.customerAttributeValueList = [attrListItem.customerAttributeValue]
......
......@@ -15,6 +15,10 @@
align-items: center;
margin-bottom: 30px;
a {
color: #333333;
}
&.first {
.information_lead_news_list_item_sort {
position: relative;
......@@ -40,6 +44,8 @@
white-space: normal;
font-weight: 500;
padding-left: 20px;
}
}
......@@ -101,6 +107,10 @@
font-size: 12px;
margin-top: 15px;
margin-bottom: 10px;
&>a {
color: #333333;
}
}
&_date {
......
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, Fragment } from 'react'
import cx from 'classnames'
import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox'
import { PublicApi } from '@/services/api'
import { Link } from 'umi'
import moment from 'moment'
import {
GetManageContentInformationFindAllByRecommendLabelResponse,
GetManageContentLabelHotResponse
} from '@/services/PassApi'
import styles from './index.less'
......@@ -54,12 +55,13 @@ const TAG_LIST = [
const InformationRight: React.FC = () => {
const [leadNews, setLeadNews] = useState<GetManageContentInformationFindAllByRecommendLabelResponse[]>([]) // 头条新闻
const [recommendNews, setRecommendNews] = useState<GetManageContentInformationFindAllByRecommendLabelResponse[]>([]) // 推荐新闻
const [leadNews, setLeadNews] = useState<any[]>([]) // 头条新闻
const [recommendNews, setRecommendNews] = useState<any[]>([]) // 推荐新闻
const [hotLabel, setHotLabel] = useState<GetManageContentLabelHotResponse>([]) // 热门标签
useEffect(() => {
Promise.all([fetchLeadNews(), fetchRecommomendNews()])
fetchHotLabl()
}, [])
/**
......@@ -118,28 +120,26 @@ const InformationRight: React.FC = () => {
<span>头条文章</span>
</div>
<div className={styles.information_lead_news}>
<ImageBox width={336} height={224} imgUrl={informationImg2} />
{
(leadNews && leadNews[0]) && (
<Link to={`/infomation/detail?id=${leadNews[0]?.id}`}>
<ImageBox width={336} height={224} imgUrl={leadNews[0]?.imageUrl} />
</Link>
)
}
<div className={styles.information_lead_news_list}>
<div className={cx(styles.information_lead_news_list_item, styles.first)}>
<div className={styles.information_lead_news_list_item_sort}>01</div>
<div className={styles.information_lead_news_list_item_title}>杨幂蔡依林撞包,原来今年时髦的包包长杨幂蔡依林撞包,原来今年时髦原来今年时髦原来今</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>02</div>
<div className={styles.information_lead_news_list_item_title}>维柯(VECO)公司——第20届中国国际展览盛大开幕</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>03</div>
<div className={styles.information_lead_news_list_item_title}>广交会同期2017秋季广州国际鞋类皮革鞋火爆开场热销</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>04</div>
<div className={styles.information_lead_news_list_item_title}>你有钱,我不一定有货!2017年涨价已成定局</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>05</div>
<div className={styles.information_lead_news_list_item_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</div>
</div>
{
leadNews && leadNews.map((item: any, index: number) => index < 5 && (
<div key={`information_lead_news_list_item_${item.id}`} className={cx(styles.information_lead_news_list_item, index === 0 ? styles.first : '')}>
<div className={styles.information_lead_news_list_item_sort}>{`0${index + 1}`}</div>
<div className={styles.information_lead_news_list_item_title}>
<Link to={`/infomation/detail?id=${item.id}`}>
{item.title}
</Link>
</div>
</div>
))
}
</div>
</div>
<div className={styles.information_title}>
......@@ -147,7 +147,7 @@ const InformationRight: React.FC = () => {
</div>
<div className={styles.information_new_label_list}>
{
TAG_LIST.map(item => (
hotLabel.map(item => (
<div key={`information_new_label_list_item_${item.id}`} className={styles.information_new_label_list_item}>
<span>{item.name}</span>
</div>
......@@ -158,31 +158,33 @@ const InformationRight: React.FC = () => {
<span>推荐阅读</span>
</div>
<div className={styles.information_recommend}>
<ImageBox width={336} height={224} imgUrl={informationImg2} />
<p className={styles.information_recommend_main_title}>收藏!制革污水新技术</p>
<div className={styles.information_recommend_date}>2019-09-15</div>
{
(recommendNews && recommendNews[0]) && (
<Fragment>
<Link to={`/infomation/detail?id=${recommendNews[0].id}`}>
<ImageBox width={336} height={224} imgUrl={recommendNews[0].imageUrl} />
</Link>
<p className={styles.information_recommend_main_title}>
<Link to={`/infomation/detail?id=${recommendNews[0].id}`}>
{recommendNews[0].title}
</Link>
</p>
<div className={styles.information_recommend_date}>{(moment(recommendNews[0].createTime).format('YYYY-MM-DD HH:mm:ss'))}</div>
</Fragment>
)
}
<div className={styles.information_recommend_list}>
<div className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
<div className={styles.information_recommend_list_item_main_date}>2019-09-15</div>
</div>
</div>
<div className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
<div className={styles.information_recommend_list_item_main_date}>2019-09-15</div>
</div>
</div>
<div className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
<div className={styles.information_recommend_list_item_main_date}>2019-09-15</div>
</div>
</div>
{
recommendNews && recommendNews.map((item: any, index: number) => index > 0 && (
<div key={`information_recommend_list_item_${item.id}`} className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>{item.title}</p>
<div className={styles.information_recommend_list_item_main_date}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</div>
</div>
</div>
))
}
</div>
</div>
</div>
......
......@@ -83,8 +83,14 @@
}
&_right {
position: relative;
display: flex;
flex-wrap: wrap;
.information_focus_imgbox_sub_1 {
position: relative;
height: 220px;
overflow: hidden;
&_img {
width: 598px;
......@@ -104,25 +110,32 @@
white-space: nowrap;
font-size: 14px;
margin-bottom: 0;
width: 100%;
}
.information_focus_imgbox_sub_2 {
position: relative;
margin-top: 4px;
height: 220px;
width: 297px;
overflow: hidden;
&:not(:last-child) {
margin-right: 4px;
}
&_img {
width: 297px;
height: 220px;
.common_background()
}
}
.information_focus_sub_bottom {
display: flex;
margin-top: 4px;
.information_focus_imgbox_sub_2 {
position: relative;
&:not(:last-child) {
margin-right: 4px;
}
&_img {
width: 297px;
height: 220px;
.common_background()
}
}
}
}
......@@ -295,6 +308,12 @@
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&:hover {
&>a {
color: #ffffff;
}
}
&>a {
color: #ffffff;
}
......
......@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import { Carousel, Pagination } from 'antd'
import { Link } from 'umi'
import moment from 'moment'
import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons'
import informationImg1 from '@/assets/imgs/information_1.png'
import informationImg2 from '@/assets/imgs/information_2.png'
......@@ -13,8 +14,8 @@ import {
GetManageContentInformationPageResponseDetail,
GetManageContentInformationFindAllByRecommendLabelResponse,
GetManageContentColumnAllResponse,
GetManageContentLabelHotResponse
} from '@/services/PassApi'
import { numFormat } from '@/utils/numberFomat'
import styles from './index.less'
interface InformationPropsType { }
......@@ -25,7 +26,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
const [allColumn, setAllColumn] = useState<GetManageContentColumnAllResponse>([]) // 所有栏目
const [newsList, setNewsList] = useState<GetManageContentInformationPageResponseDetail[]>([]) // 资讯列表
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(10)
const [pageSize] = useState<number>(10)
const [showColumnId, setShowColumnId] = useState<number>()
const [totalCount, setTotalCount] = useState<number>(0)
......@@ -127,6 +128,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
* @param page
*/
const handlePageChange = (page) => {
console.log(page, 'page')
setCurrent(page)
fetchNewsByColumn(showColumnId, page)
}
......@@ -143,35 +145,31 @@ const Information: React.FC<InformationPropsType> = (props) => {
pauseOnDotsHover
autoplaySpeed={3000}
>
<div className={styles.information_focus_carousel_item}>
<div className={styles.information_focus_imgbox_main}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
</div>
<div className={styles.information_focus_carousel_item}>
<div className={styles.information_focus_imgbox_main}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg2})` }} />
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
</div>
{
carouselNews && carouselNews.map((item: any) => (
<div className={styles.information_focus_carousel_item} key={`information_focus_carousel_item_${item.id}`}>
<div className={styles.information_focus_imgbox_main}>
<Link to={`/infomation/detail?id=${item.id}`}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${item.imageUrl})` }} />
</Link>
<p className={styles.information_focus_imgbox_main_title}>{item.title}</p>
</div>
</div>
))
}
</Carousel>
</div>
<div className={styles.information_focus_right}>
<div className={styles.information_focus_imgbox_sub_1}>
<div className={styles.information_focus_imgbox_sub_1_img} style={{ backgroundImage: `url(${informationImg2})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
<div className={styles.information_focus_sub_bottom}>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
</div>
{
photoNews && photoNews.map((item: any, index) => (
<div key={`information_focus_imgbox_sub_${item.id}`} className={index === 0 ? styles.information_focus_imgbox_sub_1 : styles.information_focus_imgbox_sub_2}>
<Link to={`/infomation/detail?id=${item.id}`}>
<div className={index === 0 ? styles.information_focus_imgbox_sub_1_img : styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${item.imageUrl})` }} />
</Link>
<p className={styles.information_focus_imgbox_sub_title}>{item.title}</p>
</div>
))
}
</div>
</div>
<div className={styles.information_wrap}>
......@@ -184,34 +182,46 @@ const Information: React.FC<InformationPropsType> = (props) => {
}
</div>
<div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}>
<ImageBox width={285} height={190} imgUrl={informationImg2} />
<div className={styles.information_latest_release_list_item_main}>
<p><Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案,如何实现全网整合</Link></p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
{
(newsList && newsList.length > 0) && newsList.map(item => (
<div className={styles.information_latest_release_list_item} key={`information_latest_release_list_item_${item.id}`}>
<Link to={`/infomation/detail?id=${item.id}`}>
<ImageBox width={285} height={190} imgUrl={item.imageUrl} />
</Link>
<div className={styles.information_latest_release_list_item_main}>
<p><Link to={`/infomation/detail?id=${item.id}`}>{item.title}</Link></p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>{numFormat(item.readCount)}</span>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
{item.digest}
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
{
item.contentLabelList && item.contentLabelList.map((labelItem: any) => (
<div className={styles.information_common_tag_list_item} key={`information_common_tag_list_item-${labelItem.id}`}>{labelItem.name}</div>
))
}
</div>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外,更应该为客户制定一套合理的电商系统平台整合解决方案…
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
</div>
</div>
</div>
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} total={totalCount} />
))
}
</div>
{
newsList && newsList.length > 0 && (
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} pageSize={pageSize} current={current} total={totalCount} />
</div>
)
}
</div>
<InformationRight />
</div>
......
......@@ -140,7 +140,7 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
categoryComponents ? categoryComponents : <FloorSkeleton type={LAYOUT_TYPE.shop} />
}
<Advert visible={secondAdvertList.length > 0} type="service" advertList={secondAdvertList} />
<Information />
{/* <Information /> */}
</div >
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment