xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

--我的页面更新新版本

Browse Source 
--码单管理完成
This commit is contained in:
li tong bao
2022-05-24 19:16:30 +08:00
parent 6ba8a7b137
commit 14216d3b0a
11 changed files with 538 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/user/index.module.scss
+52 -1
View File
@@ -52,6 +52,19 @@
font-size: 44px;
font-weight: 700;
color: #000000;
display: flex;
align-items: center;
}
.arcd-info-left-certification{
width: 94px;
height: 28px;
background: #C7F0DF;
border-radius: 4px;
display: flex;align-items: center;justify-content: center;
font-size: 18px;
font-weight: 400;
color: #07C160;
margin-left: 16px;
}
.arcd-info-left-phone{
font-size: 24px;
@@ -78,6 +91,9 @@
right: 0;top: 0;
}
.card-main{
margin: 20px auto 0;
}
.card-main-title{
display: flex;justify-content: space-between;
align-items: center;
@@ -120,10 +136,45 @@
display: flex;align-items: center;justify-content: center;
position: absolute;top: -10px;right: 0;
}
.assets{
}
.assets-title{
font-size: 28px;
font-weight: 700;
color: #3c3c3c;
margin-bottom: 20px;
}
.assets-content{
display: grid;
grid-template-columns: repeat(3,1fr);
}
.assets-content>view{
text-align: center;
}
.assets-content-item-top{
color: #007aff;
font-weight: 400;
}
.assets-content-item-top-before{
font-size: 20px;
}
.assets-content-item-top-content{
font-size: 36px;
}
.assets-content-item-top-after{
font-size: 20px;
}
.assets-content-item-tips{
font-size: 24px;
font-weight: 400;
color: #707070;
}
.main-card{
margin: 131px auto 0;
}
.card-main-list-content-item{
display: flex;align-items: center;
justify-content: space-between;
src/pages/user/index.tsx
+81 -23
View File
@@ -1,13 +1,16 @@
import { View, Image, Text, Navigator } from "@tarojs/components"
import { memo } from "react"
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>
)
@@ -17,7 +20,24 @@ export default () => {
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" }]
{ 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']}`}>
@@ -27,8 +47,14 @@ const Header = memo(() => {
<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']}>麦兜</View>
<View className={styles['arcd-info-left-phone']}>131****1132</View>
<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']}>
@@ -54,7 +80,7 @@ const Header = memo(() => {
<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']}>99+</View>
<View className={styles['card-main-title-content-item-badge']}>{index==2?"99+":10}</View>
</View>
)
})
@@ -67,30 +93,62 @@ const Header = memo(() => {
)
})
// 我的资产
const Assets = () => {
return (
<View 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>
</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['main-card']}`}>
<View className={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 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>
<View className={styles['card-main-list-content-item-right']}>
<Text className="iconfont icon-a-moreback"></Text>
</View>
</View>
)
})
}
</View>
</View>
)