xuan/TestRestructureWechatLymarketDist
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-11 14:16:24 +08:00
parent 08acb37769
commit 231423a03b
6 changed files with 187 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AddressList/index.scss
View File

@ -18,7 +18,7 @@
margin: 18px auto 0; margin: 18px auto 0;
border: 1px solid #ffffff; border: 1px solid #ffffff;
} }
.address-list:hover{ .address-active{
border: 1px solid #68b4ff; border: 1px solid #68b4ff;
box-shadow: 0px 0px 10px 0px rgba(0,122,255,0.27); box-shadow: 0px 0px 10px 0px rgba(0,122,255,0.27);
} }

8
src/components/AddressList/index.tsx
View File

@ -28,11 +28,13 @@ const AddressList = memo((props:Params)=>{
data.length>0? data.length>0?
data.map((item,index)=>{ data.map((item,index)=>{
return( return(
<View onClick={()=>props.onSelect&&props.onSelect(item,index)} className="address-list"> <View onClick={()=>props.onSelect&&props.onSelect(item,index)} className={`address-list ${index==0&&'address-active'}`}>
<View className="address-user"> <View className="address-user">
XL纺织 XL纺织
<Text className="address-list-default">默认</Text> {
{/* <Text className="address-list-phone">1656488999</Text> */} index==0?<Text className="address-list-default">默认</Text>:
<Text className="address-list-phone">1656488999</Text>
}
</View> </View>
<View className="address-list-bottom"> <View className="address-list-bottom">
<View className="address-list-info"> <View className="address-list-info">

52
src/pages/user/index.module.scss
View File

@ -2,16 +2,16 @@
background-color: #F8F8F8; background-color: #F8F8F8;
height: 100vh; height: 100vh;
.header{ .header{
background-image: url(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); background: #68b4ff;
background-size: cover; background-size: cover;
height: 710px; height: 560px;
position: relative; position: relative;
.card-main{ .card-main{
margin-top: 33%; margin-top: 33%;
} }
} }
.header-card{ .header-card{
position: absolute;left: 50%;bottom: 5%; position: absolute;left: 50%;bottom: -18%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.crad{ .crad{
@ -100,14 +100,48 @@
color: #3c3c3c; color: #3c3c3c;
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
position: relative;
} }
.card-main-title-content-item image{ .card-main-title-content-item Text{
width: 68px; font-size: 56px;
height: 68px; color: #3C3C3C;
border: 2px solid #cccccc; }
margin-bottom: 5px; .card-main-title-content-item-badge{
padding: 0 10px;
height: 32px;
background: #007aff;
border: 2px solid #ffffff;
border-radius: 32px;
box-sizing: border-box;
overflow: hidden;
font-size: 18px;
font-weight: 700;
color: #ffffff;
display: flex;align-items: center;justify-content: center;
position: absolute;top: -10px;right: 0;
} }
.main-card{ .main-card{
margin: 34px auto 0; margin: 131px auto 0;
}
.card-main-list-content-item{
display: flex;align-items: center;
justify-content: space-between;
height: 90px;
}
.card-main-list-content-item-left{
font-size: 26px;
font-weight: 400;
text-align: left;
color: #707070;
display: flex;align-items: center;
}
.card-main-list-content-item-left text{
margin-right: 35px;
font-size: 56px;
color: #707070;
}
.card-main-list-content-item-right text{
font-size: 30px;
} }
} }

164
src/pages/user/index.tsx
View File

@ -1,91 +1,97 @@
import { View,Image,Text, Navigator } from "@tarojs/components" import { View, Image, Text, Navigator } from "@tarojs/components"
import { memo } from "react" import { memo } from "react"
import styles from './index.module.scss' import styles from './index.module.scss'
import classnames from "classnames"; import classnames from "classnames";
export default () => { export default () => {
return ( return (
<View className={styles.main}> <View className={styles.main}>
<Header/> <Header />
<Main/> <Main />
</View> </View>
) )
} }
// 头部 | 订单 // 头部 | 订单
const Header = memo(()=>{ const Header = memo(() => {
let menu = [{text: "待配布"},{text: "待付款"},{text: "待发货"},{text: "已发货"},{text: "已发货"}] let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" },
return ( { text: "待发货", icon: "icon-daifahuo" }, { text: "已发货", icon: "icon-yifahuo" },
<View className={styles.header}> { text: "退款/售后", icon: "icon-a-tuikuanshouhou" }]
<View className={`${styles.crad} ${styles['header-card']}`}> return (
<View className={styles['card-info']}> <View className={styles.header}>
<View className={styles['arcd-info-left']}> <View className={`${styles.crad} ${styles['header-card']}`}>
<View className={styles['arcd-info-left-portrait']}> <View className={styles['card-info']}>
<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 className={styles['arcd-info-left']}>
</View> <View className={styles['arcd-info-left-portrait']}>
<View className={styles['arcd-info-left-desc']}> <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 className={styles['arcd-info-left-nickname']}>麦兜</View> </View>
<View className={styles['arcd-info-left-phone']}>131****1132</View> <View className={styles['arcd-info-left-desc']}>
</View> <View className={styles['arcd-info-left-nickname']}>麦兜</View>
</View> <View className={styles['arcd-info-left-phone']}>131****1132</View>
<View className={styles['card-info-right']}> </View>
<Navigator hoverClass="none" url="/pages/userEdit/index" className={styles['setup-icon']}> </View>
<View className={classnames( <View className={styles['card-info-right']}>
styles['icon-wrapper'], <Navigator hoverClass="none" url="/pages/userEdit/index" className={styles['setup-icon']}>
'iconfont', <View className={classnames(
'icon-shezhi', styles['icon-wrapper'],
)}></View> 'iconfont',
<View className={styles['icon-point']}></View> 'icon-shezhi',
</Navigator> )}></View>
</View> <View className={styles['icon-point']}></View>
</View> </Navigator>
<View className={styles['card-main']}> </View>
<View className={styles['card-main-title']}> </View>
<View>订单</View> <View className={styles['card-main']}>
<Text>全部</Text> <View className={styles['card-main-title']}>
</View> <View>订单</View>
<View className={styles['card-main-title-content']}> <Text>全部</Text>
{ </View>
menu.map((item,index)=>{ <View className={styles['card-main-title-content']}>
return ( {
<View className={styles['card-main-title-content-item']}> menu.map((item, index) => {
<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"/> return (
<View>{item.text}</View> <View className={styles['card-main-title-content-item']}>
</View> <Text className={`iconfont ${item.icon}`}></Text>
) <View>{item.text}</View>
}) <View className={styles['card-main-title-content-item-badge']}>99+</View>
} </View>
)
</View> })
</View> }
</View>
</View> </View>
) </View>
</View>
</View>
)
}) })
// 功能 // 功能
const Main = memo(()=>{ const Main = memo(() => {
let menu = [{text: "我的收藏"},{text: "颜色对比"},{text: "分享推广"},{text: "团队邀请"}] let menu = [{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi" },
return ( { text: "分享推广", icon: "icon-fenxiang" }, { text: "团队邀请", icon: "icon-yaoqingtuandui" }]
<View className={`${styles.crad} ${styles['main-card']}`}> return (
<View className={styles['card-main']}> <View className={`${styles.crad} ${styles['main-card']}`}>
<View style={{border: "none"}} className={styles['card-main-title']}> <View className={styles['card-main']}>
<View>功能</View> <View className={styles['card-main-list-content']}>
</View> {
<View className={styles['card-main-title-content']}> menu.map((item, index) => {
{ return (
menu.map((item,index)=>{ <View key={index} className={styles['card-main-list-content-item']}>
return ( <View className={styles['card-main-list-content-item-left']}>
<View key={index} className={styles['card-main-title-content-item']}> <Text className={`iconfont ${item.icon}`}></Text>
<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>{item.text}</View>
<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> })
</View> }
) </View>
</View>
</View>
)
}) })

53
src/styles/iconfont.scss
View File

@ -76,6 +76,59 @@
content: "\e64a"; content: "\e64a";
} }
.icon-qingkong:before {
content: "\e64c";
}
.icon-jia:before {
content: "\e64d";
}
.icon-jian:before {
content: "\e64e";
}
.icon-shoucang-pressed:before {
content: "\e64f";
}
.icon-shoucang:before {
content: "\e650";
}
.icon-phone:before {
content: "\e651";
}
.icon-tick:before {
content: "\e653";
}
.icon-a-moreback:before {
content: "\e654";
}
.icon-fenlei:before {
content: "\e657";
}
.icon-bianji:before {
content: "\e658";
}
.icon-wode:before {
content: "\e659";
}
.icon-sort-up-full:before {
content: "\ea4c";
}
.icon-sort-down-full:before {
content: "\ea4d";
}
.icon-qingkong:before { .icon-qingkong:before {
content: "\e64c"; content: "\e64c";
} }

BIN
src/styles/iconfont.ttf
View File

Binary file not shown.