--我的页面完成部分
This commit is contained in:
li tong bao
@@ -1,6 +1,8 @@
|
||||
.main{
|
||||
background-color: #F8F8F8;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header{
|
||||
background: #68b4ff;
|
||||
background-size: cover;
|
||||
@@ -24,7 +26,7 @@
|
||||
}
|
||||
.card-info{
|
||||
display: flex;justify-content: space-between;
|
||||
position: absolute;top: -16%;left: 0;right: 0;
|
||||
position: absolute;top: -15%;left: 0;right: 0;
|
||||
width: 702px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
@@ -55,21 +57,21 @@
|
||||
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;
|
||||
font-weight: 400;
|
||||
color: #3c3c3c;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
}
|
||||
.arcd-info-left-phone button{
|
||||
padding: 0 10px;
|
||||
height: 42px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #cde5ff;
|
||||
border-radius: 20px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
}
|
||||
.card-info-right{
|
||||
font-size: 26px;
|
||||
@@ -105,6 +107,9 @@
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
}
|
||||
.card-main-title-content{
|
||||
display: grid;
|
||||
@@ -172,6 +177,9 @@
|
||||
.main-card{
|
||||
margin: 131px auto 0;
|
||||
}
|
||||
.card-feature{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.card-main-list-content-item{
|
||||
display: flex;align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -213,6 +221,8 @@
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
.auth-tips text{
|
||||
font-size: 17px;
|
||||
|
||||
+47
-37
@@ -4,31 +4,46 @@ import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { useSelector } from "@/reducers/hooks";
|
||||
import { GetAdminUserInfoApi } from "@/api/user";
|
||||
import { goLink } from "@/common/common";
|
||||
import { alert, goLink } from "@/common/common";
|
||||
|
||||
|
||||
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 />
|
||||
<Header data={adminUserInfo} userInfo={userInfo} />
|
||||
<Assets />
|
||||
<Main />
|
||||
<Modal/>
|
||||
<Modal data={adminUserInfo}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
const Modal = ()=>{
|
||||
const handleContent = ()=>{
|
||||
console.log(111);
|
||||
|
||||
}
|
||||
const Modal = memo((props:any)=>{
|
||||
const {data} = props;
|
||||
const handleouter = ()=>{
|
||||
console.log(222);
|
||||
|
||||
}
|
||||
return(
|
||||
<View style={{display: "none"}} onClick={handleouter} className={styles['modal']}>
|
||||
<>
|
||||
{!data?.is_authorize_phone&&
|
||||
<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']}>
|
||||
@@ -42,29 +57,24 @@ const Modal = ()=>{
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
// 头部 | 订单
|
||||
const Header = memo(() => {
|
||||
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 { fetchData, state } = GetAdminUserInfoApi();
|
||||
const {userInfo} = useSelector(state => state.userInfo);
|
||||
const [mUserInfo, setMUserInfo] = useState({
|
||||
phone: ""
|
||||
});
|
||||
const getData = ()=>{
|
||||
fetchData();
|
||||
const getPhoneNumber = (ev)=>{
|
||||
console.log(ev);
|
||||
if(ev.detail?.code){
|
||||
}else{
|
||||
alert.none("取消了授权");
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
setMUserInfo({
|
||||
...mUserInfo,
|
||||
phone: userInfo?.phone?.replace(userInfo?.phone?.substring(3,7), "****") as string
|
||||
})
|
||||
getData();
|
||||
},[])
|
||||
|
||||
return (
|
||||
<View className={styles.header}>
|
||||
@@ -72,17 +82,16 @@ const Header = memo(() => {
|
||||
<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" />
|
||||
<Image src={data?.avatar_url} />
|
||||
</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>
|
||||
{data?.user_name}
|
||||
</View>
|
||||
<View className={styles['arcd-info-left-phone']}>
|
||||
{userInfo?.phone||<Button openType="getPhoneNumber" onGetPhoneNumber={getPhoneNumber}>绑定手机号码</Button>}
|
||||
</View>
|
||||
<View className={styles['arcd-info-left-phone']}>佛山市带生纺织品有限公司</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles['card-info-right']}>
|
||||
@@ -102,7 +111,7 @@ const Header = memo(() => {
|
||||
<Text>1</Text>
|
||||
认证不通过
|
||||
</View>
|
||||
<View className={styles['auth-tips']}>重新认证 <Text className="iconfont icon-a-moreback"/></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']}>
|
||||
佛山市带生纺织品有限公司
|
||||
@@ -169,15 +178,16 @@ const Assets = () => {
|
||||
|
||||
// 功能
|
||||
const Main = memo(() => {
|
||||
let menu = [{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi" },
|
||||
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']}`}>
|
||||
<View className={`${styles.crad} ${styles['card-main']} ${styles['card-feature']}`}>
|
||||
<View className={styles['card-main-list-content']}>
|
||||
{
|
||||
menu.map((item, index) => {
|
||||
return (
|
||||
<View key={index} className={styles['card-main-list-content-item']}>
|
||||
<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>
|
||||
@@ -185,7 +195,7 @@ const Main = memo(() => {
|
||||
<View className={styles['card-main-list-content-item-right']}>
|
||||
<Text className="iconfont icon-a-moreback"></Text>
|
||||
</View>
|
||||
</View>
|
||||
</Navigator>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user