194 lines
6.9 KiB
TypeScript
194 lines
6.9 KiB
TypeScript
import { View, Image, Text, Navigator, Button } from "@tarojs/components"
|
||
import { memo, useEffect, useState } from "react"
|
||
import styles from './index.module.scss'
|
||
import classnames from "classnames";
|
||
import { useSelector } from "@/reducers/hooks";
|
||
import { GetAdminUserInfoApi } from "@/api/user";
|
||
|
||
export default () => {
|
||
|
||
return (
|
||
<View className={styles.main}>
|
||
<Header />
|
||
<Assets />
|
||
<Main />
|
||
<Modal/>
|
||
</View>
|
||
)
|
||
}
|
||
const Modal = ()=>{
|
||
const handleContent = ()=>{
|
||
console.log(111);
|
||
|
||
}
|
||
const handleouter = ()=>{
|
||
console.log(222);
|
||
|
||
}
|
||
return(
|
||
<View style={{display: "none"}} onClick={handleouter} className={styles['modal']}>
|
||
<View className={styles['modal-content']} onClick={e=>e.stopPropagation()}>
|
||
<View className={styles['modal-title']}>首次登录提醒</View>
|
||
<View className={styles['modal-letter']}>
|
||
<View className={styles['modal-letter-beginn']}>To: 万丰园纺织科技</View>
|
||
<View className={styles['modal-letter-text']}>尊敬的老朋友，欢迎你使用小程序商城；由于您是我们长期合作的伙伴，你的组织已自动为你生成，关联后可查看历史订单哟。</View>
|
||
<View className={styles['modal-letter-end']}>信息错误请联系客服</View>
|
||
</View>
|
||
<View className={styles['modal-button']}>
|
||
<Button hoverClass="none" openType="concat">联系客服</Button>
|
||
<View>我知道</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
// 头部 | 订单
|
||
const Header = memo(() => {
|
||
let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" },
|
||
{ text: "待发货", icon: "icon-daifahuo" }, { text: "已发货", icon: "icon-yifahuo" },
|
||
{ text: "退款/售后", icon: "icon-a-tuikuanshouhou" }];
|
||
// 用户信息
|
||
const { fetchData, state } = GetAdminUserInfoApi();
|
||
const {userInfo} = useSelector(state => state.userInfo);
|
||
const [mUserInfo, setMUserInfo] = useState({
|
||
phone: ""
|
||
});
|
||
const getData = ()=>{
|
||
fetchData();
|
||
}
|
||
useEffect(()=>{
|
||
setMUserInfo({
|
||
...mUserInfo,
|
||
phone: userInfo?.phone?.replace(userInfo?.phone?.substring(3,7), "****") as string
|
||
})
|
||
getData();
|
||
},[])
|
||
|
||
return (
|
||
<View className={styles.header}>
|
||
<View className={`${styles.crad} ${styles['header-card']}`}>
|
||
<View className={styles['card-info']}>
|
||
<View className={styles['arcd-info-left']}>
|
||
<View className={styles['arcd-info-left-portrait']}>
|
||
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652840455&t=6d2fd53931578ef6e213a929a77d059c" />
|
||
</View>
|
||
<View className={styles['arcd-info-left-desc']}>
|
||
<View className={styles['arcd-info-left-nickname']}>
|
||
{/* {state.data.user_name} */}
|
||
麦兜
|
||
<View className={styles['arcd-info-left-certification']}>
|
||
已认证
|
||
</View>
|
||
</View>
|
||
<View className={styles['arcd-info-left-phone']}>佛山市带生纺织品有限公司</View>
|
||
</View>
|
||
</View>
|
||
<View className={styles['card-info-right']}>
|
||
<Navigator hoverClass="none" url="/pages/userEdit/index" className={styles['setup-icon']}>
|
||
<View className={classnames(
|
||
styles['icon-wrapper'],
|
||
'iconfont',
|
||
'icon-shezhi',
|
||
)}></View>
|
||
<View className={styles['icon-point']}></View>
|
||
</Navigator>
|
||
</View>
|
||
</View>
|
||
<View className={styles['auth']}>
|
||
<View className={styles['auth-top']}>
|
||
<View className={styles['auth-status']}>
|
||
<Text>1</Text>
|
||
认证不通过
|
||
</View>
|
||
<View className={styles['auth-tips']}>重新认证 <Text className="iconfont icon-a-moreback"/></View>
|
||
</View>
|
||
<View className={styles['auth-company']}>
|
||
佛山市带生纺织品有限公司
|
||
</View>
|
||
</View>
|
||
<View className={styles['card-main']}>
|
||
<View className={styles['card-main-title']}>
|
||
<View>订单</View>
|
||
<Text>全部</Text>
|
||
</View>
|
||
<View className={styles['card-main-title-content']}>
|
||
{
|
||
menu.map((item, index) => {
|
||
return (
|
||
<View className={styles['card-main-title-content-item']}>
|
||
<Text className={`iconfont ${item.icon}`}></Text>
|
||
<View>{item.text}</View>
|
||
<View className={styles['card-main-title-content-item-badge']}>{index==2?"99+":10}</View>
|
||
</View>
|
||
)
|
||
})
|
||
}
|
||
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
})
|
||
|
||
// 我的资产
|
||
const Assets = () => {
|
||
return (
|
||
<View className={`${styles.assets} ${styles.crad} ${styles['main-card']}`}>
|
||
<View className={`${styles['assets-title']}`}>我的资产</View>
|
||
<View className={`${styles['assets-content']}`}>
|
||
<Navigator hoverClass="none" url="/pages/depositBeforehand/index">
|
||
<View className={`${styles['assets-content-item-top']}`}>
|
||
<Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
|
||
<Text className={`${styles['assets-content-item-top-content']}`}>0</Text>
|
||
<Text className={`${styles['assets-content-item-top-after']}`}>.20</Text>
|
||
</View>
|
||
<Text className={`${styles['assets-content-item-tips']}`}>预存款</Text>
|
||
</Navigator>
|
||
<View>
|
||
<View className={`${styles['assets-content-item-top']}`}>
|
||
<Text className={`${styles['assets-content-item-top-content']}`}>4</Text>
|
||
<Text className={`${styles['assets-content-item-top-after']}`}>张</Text>
|
||
</View>
|
||
<Text className={`${styles['assets-content-item-tips']}`}>优惠券</Text>
|
||
</View>
|
||
<Navigator hoverClass="none" url="/pages/creditLine/index">
|
||
<View className={`${styles['assets-content-item-top']}`}>
|
||
<Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
|
||
<Text className={`${styles['assets-content-item-top-content']}`}>99999</Text>
|
||
<Text className={`${styles['assets-content-item-top-after']}`}>.-00</Text>
|
||
</View>
|
||
<Text className={`${styles['assets-content-item-tips']}`}>授信额度</Text>
|
||
</Navigator>
|
||
</View>
|
||
</View>
|
||
)
|
||
};
|
||
|
||
// 功能
|
||
const Main = memo(() => {
|
||
let menu = [{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi" },
|
||
{ text: "分享推广", icon: "icon-fenxiang" }, { text: "团队邀请", icon: "icon-yaoqingtuandui" }]
|
||
return (
|
||
<View className={`${styles.crad} ${styles['card-main']}`}>
|
||
<View className={styles['card-main-list-content']}>
|
||
{
|
||
menu.map((item, index) => {
|
||
return (
|
||
<View key={index} className={styles['card-main-list-content-item']}>
|
||
<View className={styles['card-main-list-content-item-left']}>
|
||
<Text className={`iconfont ${item.icon}`}></Text>
|
||
<View>{item.text}</View>
|
||
</View>
|
||
<View className={styles['card-main-list-content-item-right']}>
|
||
<Text className="iconfont icon-a-moreback"></Text>
|
||
</View>
|
||
</View>
|
||
)
|
||
})
|
||
}
|
||
</View>
|
||
</View>
|
||
)
|
||
}) |