Skip to content

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

feat:企业商城登录后快捷导航的显示

parent 42430d74
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 38 deletions
src/pages/lxMall/components/Information/index.tsx
View file @ f2f3c393
......@@ -7,8 +7,8 @@ import { LAYOUT_TYPE } from '@/constants'
import styles from './index.less'
interface InformationPropsType {
layoutType: LAYOUT_TYPE;
shopUrlParam: string;
layoutType?: LAYOUT_TYPE;
shopUrlParam?: string;
}
const Information: React.FC<InformationPropsType> = (props) => {
......@@ -147,7 +147,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
<>
{
index === 0 ? (
<a href="/">
<a href={toDetailLink(item.id)}>
<div className={styles.information_recommand}>
<div className={styles.information_recommand_img}>
<ImageBox width={220} height={146} imgUrl={item.imageUrl} />
......@@ -160,7 +160,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
</div>
</a>
) : (
<a href="/">
<a href={toDetailLink(item.id)}>
<div className={styles.news_list_item}>
<div className={styles.news_list_item_title}>{item.title}</div>
<div className={styles.news_list_item_date}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</div>
......@@ -168,7 +168,6 @@ const Information: React.FC<InformationPropsType> = (props) => {
</a>
)
}
</>
))
}
......
src/pages/lxMall/components/QuickNav/index.less
View file @ f2f3c393
......@@ -28,9 +28,12 @@
.welcome {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
padding: 20px;
&.center {
justify-content: center;
}
.welcome_avatar {
width: 40px;
......@@ -43,9 +46,23 @@
margin-right: 10px;
}
.welcome_textspan {
.welcome_text {
font-size: 12px;
color: #303133;
}
.roleTag {
background: #EBF7F2;
font-size: 12px;
color: #333333;
color: #00B37A;
height: 20px;
line-height: 20px;
padding: 0 8px;
&.supply {
background: #FFEBE6;
color: #E63F3B;
}
}
}
......@@ -86,6 +103,33 @@
}
}
.navList {
position: relative;
display: flex;
padding: 0 10px;
&_item {
flex: 1;
text-align: center;
&_count {
font-size: 20px;
line-height: 20px;
}
&_text {
margin-top: 10px;
font-size: 12px;
color: #909399;
&>a {
color: #909399;
}
}
}
}
.quick_tab {
height: 32px;
display: flex;
......@@ -127,14 +171,15 @@
}
&_icon {
width: 24px;
height: 24px;
width: 32px;
height: 32px;
}
&_text {
font-size: 12px;
margin-top: 16px;
line-height: 12px;
margin-top: 14px;
color: #333333;
}
}
......
src/pages/lxMall/components/QuickNav/index.tsx
View file @ f2f3c393
......@@ -14,6 +14,7 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
const { name } = props
const { userInfo } = props.UserStore
const [tabType, setTabType] = useState<number>(1) // 1; 卖家服务；2：买家服务
const [consumerNav, setConsumerNav] = useState<any>()
const handleChangeTabType = (type: number) => {
if (tabType !== type) {
......@@ -21,19 +22,28 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
}
}
useEffect(() => {
if (userInfo) {
getNavList()
}
}, [])
// 卖家服务快捷导航
const sell_quick_nav_list = [
{
path: '/memberCenter/commodityAbility/commodity/products/addProducts',
title: '上传商品',
icon: require('@/assets/mallHomeIcon/upload_icon.png')
},
{
path: '/memberCenter/tranactionAbility/enquiryOffer/addEnquiry',
title: '报价',
icon: require('@/assets/mallHomeIcon/offer_icon.png')
},
{
path: '/memberCenter/tranactionAbility/saleOrder',
title: '接单',
icon: require('@/assets/mallHomeIcon/order_icon.png')
},
]
......@@ -42,60 +52,153 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
{
path: '/memberCenter/tranactionAbility/enquirySubmit/addEnquiry',
title: '我要求购',
icon: require('@/assets/mallHomeIcon/buy_icon.png')
},
{
path: '/memberCenter/tranactionAbility/enquiryOffer/toSubmit',
title: '报价信息',
icon: require('@/assets/mallHomeIcon/offerinfo_icon.png')
},
{
path: '/memberCenter/tranactionAbility/purchaseOrder/orderList',
title: '我的订单',
icon: require('@/assets/mallHomeIcon/myorder_icon.png')
},
]
// 公用快捷导航
const quick_nav_list = [
{
path: '/commodity?priceType=1',
title: '找现货',
icon: require('@/assets/mallHomeIcon/prompt_icon.png')
},
{
path: '/commodity?priceType=2',
title: '找供应',
icon: require('@/assets/mallHomeIcon/find_supply_icon.png')
},
{
path: '/purchaseOnline',
title: '去求购',
icon: require('@/assets/mallHomeIcon/tobuy_icon.png')
},
{
path: '/shops',
title: '找店铺',
icon: require('@/assets/mallHomeIcon/findshops_icon.png')
},
{
path: '/pointsMall',
title: '换积分',
icon: require('@/assets/mallHomeIcon/integral.png')
},
{
path: '/infomation',
title: '看资讯',
icon: require('@/assets/mallHomeIcon/information_icon.png')
},
]
const getRoleName = () => {
let result = ""
if (userInfo && userInfo.roles) {
for (let item of userInfo.roles) {
if (item.memberRoleId === userInfo.memberRoleId) {
result = item.memberRoleName
}
}
}
return result
}
const getNavList = () => {
let component
if (userInfo.memberRoleType === 1) {
component = <div className={styles.navList}>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待审核</a></div>
</div>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待确认</a></div>
</div>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待发货</a></div>
</div>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待归档</a></div>
</div>
</div>
} else if (userInfo.memberRoleType === 2) {
component = <div className={styles.navList}>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待审核</a></div>
</div>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待支付</a></div>
</div>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待收货</a></div>
</div>
<div className={styles.navList_item}>
<div className={styles.navList_item_count}>0</div>
<div className={styles.navList_item_text}><a href={'/'}>待归档</a></div>
</div>
</div>
} else {
component = null
}
component && setConsumerNav(component)
}
const goToLink = (path: string) => {
if (userInfo) {
window.location.href = path
} else {
window.location.href = `/user/login?redirect=${btoa(encodeURIComponent(String(path)))}`
}
}
return (
<div className={styles.quikc_nav}>
<div className={styles.quikc_nav_right}>
<div className={styles.member_card}>
<div className={styles.member_no_login}>
<div className={styles.welcome}>
<div className={styles.welcome_avatar}>Hi</div>
<span className={styles.welcome_text}>Hi，欢迎来到{name}</span>
</div>
{
!userInfo && (
<div className={styles.btn_group}>
<div className={cx(styles.btn_item, styles.primary)}><Link to="/user/login">登陆</Link></div>
<div className={styles.btn_item}><Link to="/user/register">注册</Link></div>
</div>
)
!userInfo ? (
<>
<div className={cx(styles.welcome, styles.center)}>
<div className={styles.welcome_avatar}>Hi</div>
<span className={styles.welcome_text}>Hi, 欢迎来到{name}</span>
</div>
<div className={styles.btn_group}>
<div className={cx(styles.btn_item, styles.primary)}><Link to="/user/login">登陆</Link></div>
<div className={styles.btn_item}><Link to="/user/register">注册</Link></div>
</div>
</>
) :
(
<>
<div className={styles.welcome}>
<div className={styles.welcome_avatar}></div>
<div>
<span className={styles.welcome_text}>{userInfo.name}</span>
<div className={cx(styles.roleTag, userInfo.memberRoleType === 1 ? styles.supply : '')}>{getRoleName()}</div>
</div>
</div>
{consumerNav ? consumerNav : null}
</>
)
}
</div>
</div>
......@@ -106,23 +209,23 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
<div className={styles.quick_nav_list}>
{
tabType === 1 ? sell_quick_nav_list.map((item, index) => (
<a href={item.path} className={cx(styles.quick_nav_list_item, styles.bb)} key={`sell_quick_nav_list_item-${index}`}>
<img className={styles.quick_nav_list_item_icon} src={editIcon} />
<span onClick={() => goToLink(item.path)} className={cx(styles.quick_nav_list_item, styles.bb)} key={`sell_quick_nav_list_item-${index}`}>
<img className={styles.quick_nav_list_item_icon} src={item.icon} />
<span className={styles.quick_nav_list_item_text}>{item.title}</span>
</a>
</span>
)) : buy_quick_nav_list.map((item, index) => (
<a href={item.path} className={cx(styles.quick_nav_list_item, styles.bb)} key={`buy_quick_nav_list_item-${index}`}>
<img className={styles.quick_nav_list_item_icon} src={editIcon} />
<span onClick={() => goToLink(item.path)} className={cx(styles.quick_nav_list_item, styles.bb)} key={`buy_quick_nav_list_item-${index}`}>
<img className={styles.quick_nav_list_item_icon} src={item.icon} />
<span className={styles.quick_nav_list_item_text}>{item.title}</span>
</a>
</span>
))
}
{
quick_nav_list.map((item, index) => (
<a href={item.path} className={styles.quick_nav_list_item} key={`quick_nav_list_item-${index}`}>
<img className={styles.quick_nav_list_item_icon} src={editIcon} />
<span onClick={() => goToLink(item.path)} className={styles.quick_nav_list_item} key={`quick_nav_list_item-${index}`}>
<img className={styles.quick_nav_list_item_icon} src={item.icon} />
<span className={styles.quick_nav_list_item_text}>{item.title}</span>
</a>
</span>
))
}
</div>
......
src/pages/lxMall/components/SideNav/index.tsx
View file @ f2f3c393
......@@ -6,7 +6,7 @@ import FootPrint from './footprint'
import './index.less'
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1971099_fazltoyqwsg.js', // 在 iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/font_1971099_z2rvbdn6upl.js', // 在 iconfont.cn 上生成
});
interface SideNavPropsType {
......@@ -43,22 +43,22 @@ const SideNav: React.FC<SideNavPropsType> = (props) => {
<div className="side_nav_container">
<div className="side_nav_list">
<div className="side_nav_list_item">
<MyIcon type="icon-aixin" />
<MyIcon type="icon-guanzhu" />
</div>
<div className="side_nav_list_item">
<MyIcon type="icon-shoucang" />
<MyIcon type="icon-shoucang1" />
</div>
<div className="side_nav_list_item" onClick={() => linkToPurchaseOrder()}>
<MyIcon type="icon-cart" />
<MyIcon type="icon-gouwuche" />
</div>
<div className="side_nav_list_item">
<MyIcon type="icon-xiaoxi" />
<MyIcon type="icon-xiaoxi1" />
</div>
<div className="side_nav_list_item">
<MyIcon type="icon-erweima" />
<MyIcon type="icon-erweima1" />
</div>
<div className="side_nav_list_item" onClick={() => showToggleFootPrint()}>
<MyIcon type="icon-zuji" />
<MyIcon type="icon-jilu" />
</div>
</div>
<FootPrint visible={footPrintVisible} />
......
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