Skip to content

J
jinfa-platform
Commit 8c0beaf4 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:被冻结状态的店铺显示

parent 317be9e8
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 88 deletions
src/pages/lxMall/channel/index.tsx
View file @ 8c0beaf4
......@@ -27,6 +27,7 @@ const ChannelIndex: React.FC<ChannelIndexPropsType> = (props) => {
const [firstAdvertList, setFirstAdvertList] = useState([])
const [secondAdvertList, setSecondAdvertList] = useState([])
const [categoryComponents, setCategoryComponents] = useState<React.ReactNode>()
const [loading, setLoading] = useState<boolean>(true)
useEffect(() => {
if (shopInfo) {
......@@ -45,6 +46,8 @@ const ChannelIndex: React.FC<ChannelIndexPropsType> = (props) => {
getCategoryComponents(templateId)
findFirstAdvertsByType(templateId)
findSecondAdvertsByType(templateId)
} else {
setLoading(false)
}
}
}, [shopInfo])
......@@ -137,6 +140,7 @@ const ChannelIndex: React.FC<ChannelIndexPropsType> = (props) => {
)
}
setCategoryComponents(result)
setLoading(false)
}
......@@ -150,7 +154,7 @@ const ChannelIndex: React.FC<ChannelIndexPropsType> = (props) => {
<FloorAnchor anchorList={categoryList} type="shop" />
<CommonTitle title="热销商品" type="primary" />
{
categoryComponents ? categoryComponents : <FloorSkeleton type={LAYOUT_TYPE.shop} />
categoryComponents ? categoryComponents : loading ? <FloorSkeleton type={LAYOUT_TYPE.shop} /> : null
}
<Advert type="service" advertList={secondAdvertList} />
<CommonTitle title="关于我们" type="primary" />
......
src/pages/lxMall/components/SearchNoResult/index.less
View file @ 8c0beaf4
......@@ -7,6 +7,10 @@
font-weight: 500;
display: flex;
&_text {
line-height: 30px;
}
&_search {
color: #303133;
}
......
src/pages/lxMall/components/SearchNoResult/index.tsx
View file @ 8c0beaf4
import React from 'react'
import noResultIcon from '@/assets/imgs/no_result_icon.png'
import styles from './index.less'
interface NoResultPropsType {
......@@ -11,7 +12,9 @@ const SearchNoResult: React.FC<NoResultPropsType> = (props) => {
return (
<div className={styles.no_result}>
<div className={styles.no_result_tip}>
<div className={styles.no_result_tip_img}></div>
<div className={styles.no_result_tip_img}>
<img src={noResultIcon} />
</div>
<div className={styles.no_result_tip_text}>
{
search ? (
......
src/pages/lxMall/components/SearchShopResult/index.less 0 → 100644
View file @ 8c0beaf4
.no_result_container {
width: 1200px;
margin: 0 auto;
}
.no_result {
width: 300px;
margin: 0 auto;
padding: 200px 0;
&_tip {
font-size: 14px;
color: #D32F2F;
font-weight: 500;
display: flex;
&_text {
line-height: 30px;
}
&_search {
color: #303133;
}
&_img {
width: 30px;
height: 30px;
overflow: hidden;
margin-right: 16px;
&>img {
width: 30px;
height: 30px;
}
}
}
&_suggest {
margin-top: 12px;
font-size: 12px;
color: #909399;
padding-left: 46px;
&_list {
padding: 0;
margin: 0;
&>li {
list-style: none;
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/SearchShopResult/index.tsx 0 → 100644
View file @ 8c0beaf4
import React from 'react'
import noResultIcon from '@/assets/imgs/no_result_icon.png'
import styles from './index.less'
interface NoResultPropsType {
search?: string,
}
const SearchShopResult: React.FC<NoResultPropsType> = (props) => {
const { search } = props
return (
<div className={styles.no_result_container}>
<div className={styles.no_result}>
<div className={styles.no_result_tip}>
<div className={styles.no_result_tip_img}>
<img src={noResultIcon} />
</div>
<div className={styles.no_result_tip_text}>
{
search ? (
<>
抱歉，没有找到与“
<span className={styles.no_result_tip_search}>{search}</span>
”相关的店铺
</>
) : (
<>
抱歉，没有找到相关的店铺
</>
)
}
</div>
</div>
<div className={styles.no_result_suggest}>
<ul className={styles.no_result_suggest_list}>
<li>出现的可能原因：</li>
<li>1、管理员冻结了该店铺</li>
<li>2、店铺链接出现错误</li>
</ul>
</div>
</div>
</div>
)
}
export default SearchShopResult
src/pages/lxMall/components/ShopHeader/index.tsx
View file @ 8c0beaf4
......@@ -89,60 +89,66 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
<div className={styles.logo}>
<a href="/"><img src={logo} /></a>
</div>
<div className={styles.shop_header_split}></div>
<div className={styles.shop_header_info}>
<div className={styles.shop_header_info_logo}>
<img src={shopInfo?.logo} />
</div>
<div className={styles.shop_header_info_content}>
<div className={styles.shop_header_info_content_name}>
<span>{shopInfo?.company}</span>
<CaretDownOutlined className={styles.shop_header_info_content_icon} />
</div>
<div className={styles.shop_header_info_content_about}>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>{shopInfo?.registerYears}</span>
<span>年</span>
</div>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>{200}</span>
</div>
</div>
</div>
<div className={styles.shop_info}>
<div className={styles.shop_info_title}>
<div className={styles.shop_info_title_split}></div>
<div className={styles.shop_info_title_text}>会员认证</div>
<div className={styles.shop_info_title_split}></div>
</div>
<div className={styles.shop_info_list}>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>满意度：</div>
<div className={styles.breif}><Rate className={styles.star} count={4} disabled defaultValue={4} /></div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>注册资本：</div>
<div className={styles.breif}>1000万元</div>
{
shopInfo ? (
<>
<div className={styles.shop_header_split}></div>
<div className={styles.shop_header_info}>
<div className={styles.shop_header_info_logo}>
<img src={shopInfo?.logo} />
</div>
<div className={styles.shop_header_info_content}>
<div className={styles.shop_header_info_content_name}>
<span>{shopInfo?.company}</span>
<CaretDownOutlined className={styles.shop_header_info_content_icon} />
</div>
<div className={styles.shop_header_info_content_about}>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>{shopInfo?.registerYears}</span>
<span>年</span>
</div>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>{200}</span>
</div>
</div>
</div>
<div className={styles.shop_info}>
<div className={styles.shop_info_title}>
<div className={styles.shop_info_title_split}></div>
<div className={styles.shop_info_title_text}>会员认证</div>
<div className={styles.shop_info_title_split}></div>
</div>
<div className={styles.shop_info_list}>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>满意度：</div>
<div className={styles.breif}><Rate className={styles.star} count={4} disabled defaultValue={4} /></div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>注册资本：</div>
<div className={styles.breif}>1000万元</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>成立日期：</div>
<div className={styles.breif}>2020-09-01</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>营业执照：</div>
<div className={styles.breif}><span className={styles.certified}>{shopInfo?.outerStatus === 3 ? '[已认证]' : '[未认证]'}</span></div>
</div>
</div>
<div className={styles.dashed_split}></div>
<div className={styles.shop_info_btn_group}>
<div className={styles.shop_info_btn}><Link to={`/shop?shopId=${shopUrlParam}`}>进入店铺</Link></div>
<div className={cx(styles.shop_info_btn, collectState ? styles.active : '')} onClick={() => handleCollect()}>{collectState ? '已收藏本店' : '收藏本店'}</div>
</div>
<Button loading={applyLoading} className={styles.apply_member_btn} onClick={() => applyFroVip()}>申请成为本店会员</Button>
</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>成立日期：</div>
<div className={styles.breif}>2020-09-01</div>
</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>营业执照：</div>
<div className={styles.breif}><span className={styles.certified}>{shopInfo?.outerStatus === 3 ? '[已认证]' : '[未认证]'}</span></div>
</div>
</div>
<div className={styles.dashed_split}></div>
<div className={styles.shop_info_btn_group}>
<div className={styles.shop_info_btn}><Link to={`/shop?shopId=${shopUrlParam}`}>进入店铺</Link></div>
<div className={cx(styles.shop_info_btn, collectState ? styles.active : '')} onClick={() => handleCollect()}>{collectState ? '已收藏本店' : '收藏本店'}</div>
</div>
<Button loading={applyLoading} className={styles.apply_member_btn} onClick={() => applyFroVip()}>申请成为本店会员</Button>
</div>
</div>
</>
) : null
}
<div className={styles.mall_search}>
<div className={styles.mall_search_box}>
<Input className={styles.mall_search_input} value={searchValue} placeholder="请输入关键词" onChange={e => setSearchValue(e.target.value)} onPressEnter={() => handleSearchCommodity()} />
......
src/pages/lxMall/index/index.tsx
View file @ 8c0beaf4
......@@ -23,12 +23,15 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
const [firstAdvertList, setFirstAdvertList] = useState([])
const [secondAdvertList, setSecondAdvertList] = useState([])
const [categoryComponents, setCategoryComponents] = useState<React.ReactNode>()
const [loading, setLoading] = useState<boolean>(true)
useEffect(() => {
if (mallTemplateId) {
getCategoryComponents()
findFirstAdvertsByType()
findSecondAdvertsByType()
} else {
setLoading(false)
}
}, [mallTemplateId])
......@@ -133,6 +136,7 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
}
}
setCategoryComponents(result)
setLoading(false)
}
......@@ -146,7 +150,7 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
useMemo(() => <Advert type="interact" advertList={secondAdvertList} />, [secondAdvertList])
}
{
categoryComponents ? categoryComponents : <FloorSkeleton type={LAYOUT_TYPE.mall} />
categoryComponents ? categoryComponents : loading ? <FloorSkeleton type={LAYOUT_TYPE.mall} /> : null
}
<FindMore />
<Information {...props} />
......
src/pages/lxMall/layouts/LXChannelLayout.tsx
View file @ 8c0beaf4
......@@ -43,9 +43,13 @@ const LXChannelLayout: React.FC<LXChannelLayoutPropsType> = (props) => {
const menuRouter = getMenuRouter(menuData, location.pathname)
useEffect(() => {
let queryParam = channelId ? atob(channelId) : undefined
queryParam = queryParam ? JSON.parse(queryParam) : {}
setQuery(queryParam)
try {
let queryParam = channelId ? atob(channelId) : undefined
queryParam = queryParam ? JSON.parse(queryParam) : {}
setQuery(queryParam)
} catch (error) {
}
}, [])
useEffect(() => {
......
src/pages/lxMall/layouts/LXIChannelLayout.tsx
View file @ 8c0beaf4
......@@ -42,9 +42,14 @@ const LXIChannelLayout: React.FC<LXIChannelLayoutPropsType> = (props) => {
const menuRouter = getMenuRouter(menuData, location.pathname)
useEffect(() => {
let queryParam = channelId ? atob(channelId) : undefined
queryParam = queryParam ? JSON.parse(queryParam) : {}
setQuery(queryParam)
try {
let queryParam = channelId ? atob(channelId) : undefined
queryParam = queryParam ? JSON.parse(queryParam) : {}
setQuery(queryParam)
} catch (error) {
}
}, [])
useEffect(() => {
......
src/pages/lxMall/layouts/LXShopLayout.tsx
View file @ 8c0beaf4
......@@ -13,6 +13,7 @@ import SideNav from '../components/SideNav'
import Footer from '../components/Footer'
import { PublicApi } from '@/services/api'
import { GetTemplateShopFindShopResponse } from '@/services/TemplateApi'
import SearchShopResult from '../components/SearchShopResult'
import { LAYOUT_TYPE } from '@/constants'
import { GlobalConfig } from '@/global/config'
import styles from './index.less'
......@@ -41,10 +42,13 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
const [mallInfo, setMallInfo] = useState<any>({})
useEffect(() => {
let queryParam = shopId ? atob(shopId) : undefined
queryParam = queryParam ? JSON.parse(queryParam) : {}
setQuery(queryParam)
try {
let queryParam = shopId ? atob(shopId) : undefined
queryParam = queryParam ? JSON.parse(queryParam) : {}
setQuery(queryParam)
} catch (error) {
console.log(error)
}
getWebMallInfo()
}, [])
......@@ -99,7 +103,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
<ShopHeader logo={mallInfo.logoUrl} shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} updateShopInfo={() => handleUpdate()} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.shop} shopId={query.shopId} shopUrlParam={shopId} />
{
children && React.Children.map(children, (child: any) => {
shopInfo ? shopInfo.status === 1 ? children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.shop,
......@@ -110,7 +114,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
updateShopInfo: () => handleUpdate()
},
);
})
}) : <SearchShopResult search={shopInfo.company} /> : <SearchShopResult />
}
</div>
<Footer />
......
src/pages/lxMall/shop/index.tsx
View file @ 8c0beaf4
......@@ -10,7 +10,6 @@ import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplateShopFindShopResponse, GetTemplatePlatformFindAllFirstCategoryResponse } from '@/services/TemplateApi'
import styles from './index.less'
import { LaptopOutlined } from '@ant-design/icons'
interface ChannelIndexPropsType {
SiteStore?: any;
......@@ -27,6 +26,7 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
const [firstAdvertList, setFirstAdvertList] = useState([])
const [secondAdvertList, setSecondAdvertList] = useState([])
const [categoryComponents, setCategoryComponents] = useState<React.ReactNode>()
const [loading, setLoading] = useState<boolean>(true)
useEffect(() => {
if (shopInfo) {
......@@ -34,6 +34,8 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
getCategoryComponents()
findFirstAdvertsByType()
findSecondAdvertsByType()
} else {
setLoading(false)
}
}
}, [shopInfo])
......@@ -102,26 +104,30 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
const getCategoryComponents = async () => {
let result = []
let firstCategory: any = await fetchFirstCategory()
if (firstCategory && firstCategory.length > 0) {
for (let item of firstCategory) {
let categoryDetail: any = await fetchCategoryById(item.id)
result.push(
<ShopFloorLine
anchor={`floorline_${item.id}`}
linkUrl={`/shop/commodity?shopId=${shopUrlParam}&categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
key={item.id}
title={item.name}
>
<ShopFloorLine.Category
categoryAdvertPicUrl={categoryDetail.categoryAdvertPicUrl}
categoryList={categoryDetail.categoryBOList}
linkUrl={`/shop/commodity?shopId=${shopUrlParam}`}
/>
<ShopFloorLine.Goods goodsList={categoryDetail.goodsBOList} linkUrl={`/shop/commodity/detail?shopId=${shopUrlParam}`} />
</ShopFloorLine>
)
}
setCategoryComponents(result)
} else {
for (let item of firstCategory) {
let categoryDetail: any = await fetchCategoryById(item.id)
result.push(
<ShopFloorLine
anchor={`floorline_${item.id}`}
linkUrl={`/shop/commodity?shopId=${shopUrlParam}&categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
key={item.id}
title={item.name}
>
<ShopFloorLine.Category
categoryAdvertPicUrl={categoryDetail.categoryAdvertPicUrl}
categoryList={categoryDetail.categoryBOList}
linkUrl={`/shop/commodity?shopId=${shopUrlParam}`}
/>
<ShopFloorLine.Goods goodsList={categoryDetail.goodsBOList} linkUrl={`/shop/commodity/detail?shopId=${shopUrlParam}`} />
</ShopFloorLine>
)
}
setCategoryComponents(result)
setLoading(false)
}
......@@ -137,7 +143,7 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
<AboutUs shopInfo={shopInfo} shopUrlParam={shopUrlParam} type={LAYOUT_TYPE.shop} />
<CommonTitle title="热销商品" type="primary" />
{
categoryComponents ? categoryComponents : <FloorSkeleton type={LAYOUT_TYPE.shop} />
categoryComponents ? categoryComponents : loading ? <FloorSkeleton type={LAYOUT_TYPE.shop} /> : null
}
<Advert visible={secondAdvertList.length > 0} type="service" advertList={secondAdvertList} />
{/* <Information /> */}
......
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