Skip to content

J
jinfa-platform
Commit 804c371b authored by GuanHua's avatar GuanHua
Browse files
Options

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

parent 7f14904a
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 118 deletions
src/pages/lxMall/commodityDetail/index.tsx
View file @ 804c371b
...@@ -437,7 +437,7 @@ const CommodityDetail = (props) => { ...@@ -437,7 +437,7 @@ const CommodityDetail = (props) => {
}) })
if (!judgeAttrValueInList(tempAttrList[tempAttrListIndex].customerAttributeValueList, attrListItem.customerAttributeValue.id)) { if (!judgeAttrValueInList(tempAttrList[tempAttrListIndex].customerAttributeValueList, attrListItem.customerAttributeValue.id)) {
if (tempAttrListIndex === 0) { 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] tempAttrList[tempAttrListIndex].customerAttributeValueList = [...tempAttrList[tempAttrListIndex].customerAttributeValueList, attrListItem.customerAttributeValue]
} }
...@@ -447,7 +447,7 @@ const CommodityDetail = (props) => { ...@@ -447,7 +447,7 @@ const CommodityDetail = (props) => {
temp.customerAttribute = attrListItem.customerAttribute temp.customerAttribute = attrListItem.customerAttribute
if (tempAttrList.length === 0) { if (tempAttrList.length === 0) {
attrListItem.customerAttributeValue.commodityPic = item.commodityPic[0] item.commodityPic && (attrListItem.customerAttributeValue.commodityPic = item.commodityPic[0])
temp.customerAttributeValueList = [attrListItem.customerAttributeValue] temp.customerAttributeValueList = [attrListItem.customerAttributeValue]
} else { } else {
temp.customerAttributeValueList = [attrListItem.customerAttributeValue] temp.customerAttributeValueList = [attrListItem.customerAttributeValue]
......
src/pages/lxMall/information/components/informationRight/index.less
View file @ 804c371b
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
a {
color: #333333;
}
&.first { &.first {
.information_lead_news_list_item_sort { .information_lead_news_list_item_sort {
position: relative; position: relative;
...@@ -40,6 +44,8 @@ ...@@ -40,6 +44,8 @@
white-space: normal; white-space: normal;
font-weight: 500; font-weight: 500;
padding-left: 20px; padding-left: 20px;
} }
} }
...@@ -101,6 +107,10 @@ ...@@ -101,6 +107,10 @@
font-size: 12px; font-size: 12px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 10px; margin-bottom: 10px;
&>a {
color: #333333;
}
} }
&_date { &_date {
......
src/pages/lxMall/information/components/informationRight/index.tsx
View file @ 804c371b
import React, { useState, useEffect } from 'react' import React, { useState, useEffect, Fragment } from 'react'
import cx from 'classnames' import cx from 'classnames'
import informationImg2 from '@/assets/imgs/information_2.png' import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox' import ImageBox from '@/components/ImageBox'
import { PublicApi } from '@/services/api' import { PublicApi } from '@/services/api'
import { Link } from 'umi'
import moment from 'moment'
import { import {
GetManageContentInformationFindAllByRecommendLabelResponse,
GetManageContentLabelHotResponse GetManageContentLabelHotResponse
} from '@/services/PassApi' } from '@/services/PassApi'
import styles from './index.less' import styles from './index.less'
...@@ -54,12 +55,13 @@ const TAG_LIST = [ ...@@ -54,12 +55,13 @@ const TAG_LIST = [
const InformationRight: React.FC = () => { const InformationRight: React.FC = () => {
const [leadNews, setLeadNews] = useState<GetManageContentInformationFindAllByRecommendLabelResponse[]>([]) // 头条新闻 const [leadNews, setLeadNews] = useState<any[]>([]) // 头条新闻
const [recommendNews, setRecommendNews] = useState<GetManageContentInformationFindAllByRecommendLabelResponse[]>([]) // 推荐新闻 const [recommendNews, setRecommendNews] = useState<any[]>([]) // 推荐新闻
const [hotLabel, setHotLabel] = useState<GetManageContentLabelHotResponse>([]) // 热门标签 const [hotLabel, setHotLabel] = useState<GetManageContentLabelHotResponse>([]) // 热门标签
useEffect(() => { useEffect(() => {
Promise.all([fetchLeadNews(), fetchRecommomendNews()]) Promise.all([fetchLeadNews(), fetchRecommomendNews()])
fetchHotLabl()
}, []) }, [])
/** /**
...@@ -118,28 +120,26 @@ const InformationRight: React.FC = () => { ...@@ -118,28 +120,26 @@ const InformationRight: React.FC = () => {
<span>头条文章</span> <span>头条文章</span>
</div> </div>
<div className={styles.information_lead_news}> <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={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> leadNews && leadNews.map((item: any, index: number) => index < 5 && (
<div className={styles.information_lead_news_list_item_title}>杨幂蔡依林撞包，原来今年时髦的包包长杨幂蔡依林撞包，原来今年时髦原来今年时髦原来今</div> <div key={`information_lead_news_list_item_${item.id}`} className={cx(styles.information_lead_news_list_item, index === 0 ? styles.first : '')}>
</div> <div className={styles.information_lead_news_list_item_sort}>{`0${index + 1}`}</div>
<div className={styles.information_lead_news_list_item}> <div className={styles.information_lead_news_list_item_title}>
<div className={styles.information_lead_news_list_item_sort}>02</div> <Link to={`/infomation/detail?id=${item.id}`}>
<div className={styles.information_lead_news_list_item_title}>维柯（VECO）公司——第20届中国国际展览盛大开幕</div> {item.title}
</div> </Link>
<div className={styles.information_lead_news_list_item}> </div>
<div className={styles.information_lead_news_list_item_sort}>03</div> </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>
</div> </div>
</div> </div>
<div className={styles.information_title}> <div className={styles.information_title}>
...@@ -147,7 +147,7 @@ const InformationRight: React.FC = () => { ...@@ -147,7 +147,7 @@ const InformationRight: React.FC = () => {
</div> </div>
<div className={styles.information_new_label_list}> <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}> <div key={`information_new_label_list_item_${item.id}`} className={styles.information_new_label_list_item}>
<span>{item.name}</span> <span>{item.name}</span>
</div> </div>
...@@ -158,31 +158,33 @@ const InformationRight: React.FC = () => { ...@@ -158,31 +158,33 @@ const InformationRight: React.FC = () => {
<span>推荐阅读</span> <span>推荐阅读</span>
</div> </div>
<div className={styles.information_recommend}> <div className={styles.information_recommend}>
<ImageBox width={336} height={224} imgUrl={informationImg2} /> {
<p className={styles.information_recommend_main_title}>收藏！制革污水新技术</p> (recommendNews && recommendNews[0]) && (
<div className={styles.information_recommend_date}>2019-09-15</div> <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}>
<div className={styles.information_recommend_list_item}> {
<ImageBox imgUrl={informationImg2} /> recommendNews && recommendNews.map((item: any, index: number) => index > 0 && (
<div className={styles.information_recommend_list_item_main}> <div key={`information_recommend_list_item_${item.id}`} className={styles.information_recommend_list_item}>
<p className={styles.information_recommend_list_item_main_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</p> <ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main_date}>2019-09-15</div> <div className={styles.information_recommend_list_item_main}>
</div> <p className={styles.information_recommend_list_item_main_title}>{item.title}</p>
</div> <div className={styles.information_recommend_list_item_main_date}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</div>
<div className={styles.information_recommend_list_item}> </div>
<ImageBox imgUrl={informationImg2} /> </div>
<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> </div>
</div> </div>
</div> </div>
......
src/pages/lxMall/information/index.less
View file @ 804c371b
...@@ -83,8 +83,14 @@ ...@@ -83,8 +83,14 @@
} }
&_right { &_right {
position: relative;
display: flex;
flex-wrap: wrap;
.information_focus_imgbox_sub_1 { .information_focus_imgbox_sub_1 {
position: relative; position: relative;
height: 220px;
overflow: hidden;
&_img { &_img {
width: 598px; width: 598px;
...@@ -104,25 +110,32 @@ ...@@ -104,25 +110,32 @@
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
margin-bottom: 0; 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 { .information_focus_sub_bottom {
display: flex; display: flex;
margin-top: 4px; 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 @@ ...@@ -295,6 +308,12 @@
background-color: var(--mall_main_color); background-color: var(--mall_main_color);
border-color: var(--mall_main_color); border-color: var(--mall_main_color);
&:hover {
&>a {
color: #ffffff;
}
}
&>a { &>a {
color: #ffffff; color: #ffffff;
} }
......
src/pages/lxMall/information/index.tsx
View file @ 804c371b
...@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react' ...@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
import cx from 'classnames' import cx from 'classnames'
import { Carousel, Pagination } from 'antd' import { Carousel, Pagination } from 'antd'
import { Link } from 'umi' import { Link } from 'umi'
import moment from 'moment'
import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons' import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons'
import informationImg1 from '@/assets/imgs/information_1.png' import informationImg1 from '@/assets/imgs/information_1.png'
import informationImg2 from '@/assets/imgs/information_2.png' import informationImg2 from '@/assets/imgs/information_2.png'
...@@ -13,8 +14,8 @@ import { ...@@ -13,8 +14,8 @@ import {
GetManageContentInformationPageResponseDetail, GetManageContentInformationPageResponseDetail,
GetManageContentInformationFindAllByRecommendLabelResponse, GetManageContentInformationFindAllByRecommendLabelResponse,
GetManageContentColumnAllResponse, GetManageContentColumnAllResponse,
GetManageContentLabelHotResponse
} from '@/services/PassApi' } from '@/services/PassApi'
import { numFormat } from '@/utils/numberFomat'
import styles from './index.less' import styles from './index.less'
interface InformationPropsType { } interface InformationPropsType { }
...@@ -25,7 +26,7 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -25,7 +26,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
const [allColumn, setAllColumn] = useState<GetManageContentColumnAllResponse>([]) // 所有栏目 const [allColumn, setAllColumn] = useState<GetManageContentColumnAllResponse>([]) // 所有栏目
const [newsList, setNewsList] = useState<GetManageContentInformationPageResponseDetail[]>([]) // 资讯列表 const [newsList, setNewsList] = useState<GetManageContentInformationPageResponseDetail[]>([]) // 资讯列表
const [current, setCurrent] = useState<number>(1) const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(10) const [pageSize] = useState<number>(10)
const [showColumnId, setShowColumnId] = useState<number>() const [showColumnId, setShowColumnId] = useState<number>()
const [totalCount, setTotalCount] = useState<number>(0) const [totalCount, setTotalCount] = useState<number>(0)
...@@ -127,6 +128,7 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -127,6 +128,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
* @param page * @param page
*/ */
const handlePageChange = (page) => { const handlePageChange = (page) => {
console.log(page, 'page')
setCurrent(page) setCurrent(page)
fetchNewsByColumn(showColumnId, page) fetchNewsByColumn(showColumnId, page)
} }
...@@ -143,35 +145,31 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -143,35 +145,31 @@ const Information: React.FC<InformationPropsType> = (props) => {
pauseOnDotsHover pauseOnDotsHover
autoplaySpeed={3000} autoplaySpeed={3000}
> >
<div className={styles.information_focus_carousel_item}> {
<div className={styles.information_focus_imgbox_main}> carouselNews && carouselNews.map((item: any) => (
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg1})` }} /> <div className={styles.information_focus_carousel_item} key={`information_focus_carousel_item_${item.id}`}>
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗！大美图像惊艳亮相</p> <div className={styles.information_focus_imgbox_main}>
</div> <Link to={`/infomation/detail?id=${item.id}`}>
</div> <div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${item.imageUrl})` }} />
<div className={styles.information_focus_carousel_item}> </Link>
<div className={styles.information_focus_imgbox_main}> <p className={styles.information_focus_imgbox_main_title}>{item.title}</p>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg2})` }} /> </div>
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗！大美图像惊艳亮相</p> </div>
</div> ))
</div> }
</Carousel> </Carousel>
</div> </div>
<div className={styles.information_focus_right}> <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})` }} /> photoNews && photoNews.map((item: any, index) => (
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗！大美图像惊艳亮相</p> <div key={`information_focus_imgbox_sub_${item.id}`} className={index === 0 ? styles.information_focus_imgbox_sub_1 : styles.information_focus_imgbox_sub_2}>
</div> <Link to={`/infomation/detail?id=${item.id}`}>
<div className={styles.information_focus_sub_bottom}> <div className={index === 0 ? styles.information_focus_imgbox_sub_1_img : styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${item.imageUrl})` }} />
<div className={styles.information_focus_imgbox_sub_2}> </Link>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} /> <p className={styles.information_focus_imgbox_sub_title}>{item.title}</p>
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗！大美图像惊艳亮相</p> </div>
</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>
</div> </div>
</div> </div>
<div className={styles.information_wrap}> <div className={styles.information_wrap}>
...@@ -184,34 +182,46 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -184,34 +182,46 @@ const Information: React.FC<InformationPropsType> = (props) => {
} }
</div> </div>
<div className={styles.information_latest_release_list}> <div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}> {
<ImageBox width={285} height={190} imgUrl={informationImg2} /> (newsList && newsList.length > 0) && newsList.map(item => (
<div className={styles.information_latest_release_list_item_main}> <div className={styles.information_latest_release_list_item} key={`information_latest_release_list_item_${item.id}`}>
<p><Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link></p> <Link to={`/infomation/detail?id=${item.id}`}>
<div className={styles.information_common_view}> <ImageBox width={285} height={190} imgUrl={item.imageUrl} />
<div className={styles.information_common_view_item}> </Link>
<ClockCircleOutlined /> <div className={styles.information_latest_release_list_item_main}>
<span className={styles.information_common_view_item_text}>2019-09-25</span> <p><Link to={`/infomation/detail?id=${item.id}`}>{item.title}</Link></p>
</div> <div className={styles.information_common_view}>
<div className={styles.information_common_view_item}> <div className={styles.information_common_view_item}>
<EyeOutlined /> <ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>11,245</span> <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> </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> </div>
{
newsList && newsList.length > 0 && (
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} pageSize={pageSize} current={current} total={totalCount} />
</div>
)
}
</div> </div>
<InformationRight /> <InformationRight />
</div> </div>
......
src/pages/lxMall/shop/index.tsx
View file @ 804c371b
...@@ -140,7 +140,7 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => { ...@@ -140,7 +140,7 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
categoryComponents ? categoryComponents : <FloorSkeleton type={LAYOUT_TYPE.shop} /> categoryComponents ? categoryComponents : <FloorSkeleton type={LAYOUT_TYPE.shop} />
} }
<Advert visible={secondAdvertList.length > 0} type="service" advertList={secondAdvertList} /> <Advert visible={secondAdvertList.length > 0} type="service" advertList={secondAdvertList} />
<Information /> {/* <Information /> */}
</div > </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