2022-06-13 20:30:47 +08:00

208 lines
7.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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";
import { alert, goLink } from "@/common/common";
import useLogin from '@/use/useLogin'
import {BASE_URL} from '@/common/constant'
export default () => {
// 用户信息
const { fetchData, state } = GetAdminUserInfoApi();
const {adminUserInfo, 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.main}>
<Header data={adminUserInfo} userInfo={userInfo} />
<Assets />
<Main />
<Modal data={adminUserInfo}/>
{/* 测试暂时添加 */}
<View style={{fontSize:'26rpx', textAlign:'center'}}>{BASE_URL}</View>
</View>
)
}
const Modal = memo((props:any)=>{
const {data} = props;
const [modalShow, setModalShow]=useState(true);
const handleouter = ()=>{
}
return(
<>
{!data?.is_authorize_phone&&modalShow&&
<View onClick={handleouter} catchMove 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 onClick={()=>setModalShow(false)}></View>
</View>
</View>
</View>
}
</>
)
})
// 头部 | 订单
const Header = memo((props:any) => {
const {data, userInfo} = props;
let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" },
{ text: "待发货", icon: "icon-daifahuo" }, { text: "已发货", icon: "icon-yifahuo" },
{ text: "退款/售后", icon: "icon-a-tuikuanshouhou" }];
const { getPhoneNumber } = useLogin();
const mGetPhoneNumber = (ev)=>{
try {
getPhoneNumber(ev.detail.code);
} catch (error) {
alert.none("绑定失败!");
}
}
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={data?.avatar_url} />
</View>
<View className={styles['arcd-info-left-desc']}>
<View className={styles['arcd-info-left-nickname']}>
{/* {state.data.user_name} */}
{data?.user_name}
</View>
<View className={styles['arcd-info-left-phone']}>
{userInfo?.phone?.replace(userInfo?.phone?.substring(3,7), "****")||<Button openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}></Button>}
</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>
<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}> <Text className="iconfont icon-a-moreback"/></Navigator>
</View>
<View className={styles['auth-company']}>
{data?.company_name}
</View>
</View>
<View className={styles['card-main']}>
<View className={styles['card-main-title']}>
<View></View>
<Text onClick={() => goLink('/pages/orderList/index')}></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",url: "/pages/addressManager/index" },{ text: "码单管理", icon: "icon-shoucang",url: "/pages/weightList/index" },
{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi" },
{ text: "分享推广", icon: "icon-fenxiang" }, { text: "团队邀请", icon: "icon-yaoqingtuandui" }]
return (
<View className={`${styles.crad} ${styles['card-main']} ${styles['card-feature']}`}>
<View className={styles['card-main-list-content']}>
{
menu.map((item, index) => {
return (
<Navigator hoverClass="none" url={item.url} 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>
</Navigator>
)
})
}
</View>
</View>
)
})