TestRestructureWechatLymarketDist/src/pages/user/index.tsx

import { View, Image, Text, Navigator } 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 />
		</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['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 (
		<Navigator hoverClass="none" url="/pages/depositBeforehand/index" className={`${styles.assets} ${styles.crad} ${styles['main-card']}`}>
			<View className={`${styles['assets-title']}`}>我的资产</View>
			<View className={`${styles['assets-content']}`}>
				<View>
					<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>
				</View>
				<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>
				<View>
					<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>
				</View>
			</View>
		</Navigator>
	)
};

// 功能
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>
	)
})