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;
border: 1px solid #ffffff;
}
.address-list:hover{
.address-active{
border: 1px solid #68b4ff;
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.map((item,index)=>{
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">
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 className="address-list-bottom">
<View className="address-list-info">

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

@ -2,16 +2,16 @@
background-color: #F8F8F8;
height: 100vh;
.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;
height: 710px;
height: 560px;
position: relative;
.card-main{
margin-top: 33%;
}
}
.header-card{
position: absolute;left: 50%;bottom: 5%;
position: absolute;left: 50%;bottom: -18%;
transform: translateX(-50%);
}
.crad{
@ -100,14 +100,48 @@
color: #3c3c3c;
text-align: center;
margin-top: 30px;
position: relative;
}
.card-main-title-content-item image{
width: 68px;
height: 68px;
border: 2px solid #cccccc;
margin-bottom: 5px;
.card-main-title-content-item Text{
font-size: 56px;
color: #3C3C3C;
}
.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{
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;
}
}

162
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 styles from './index.module.scss'
import styles from './index.module.scss'
import classnames from "classnames";
export default () => {
return (
<View className={styles.main}>
<Header/>
<Main/>
</View>
)
return (
<View className={styles.main}>
<Header />
<Main />
</View>
)
}
// 头部 | 订单
const Header = memo(()=>{
let menu = [{text: "待配布"},{text: "待付款"},{text: "待发货"},{text: "已发货"},{text: "已发货"}]
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']}>麦兜</View>
<View className={styles['arcd-info-left-phone']}>131****1132</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']}>
<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>
)
})
}
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" }]
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']}>麦兜</View>
<View className={styles['arcd-info-left-phone']}>131****1132</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']}>99+</View>
</View>
)
})
}
</View>
</View>
</View>
</View>
)
</View>
</View>
</View>
</View>
)
})
// 功能
const Main = memo(()=>{
let menu = [{text: "我的收藏"},{text: "颜色对比"},{text: "分享推广"},{text: "团队邀请"}]
return (
<View className={`${styles.crad} ${styles['main-card']}`}>
<View className={styles['card-main']}>
<View style={{border: "none"}} className={styles['card-main-title']}>
<View>功能</View>
</View>
<View className={styles['card-main-title-content']}>
{
menu.map((item,index)=>{
return (
<View key={index} className={styles['card-main-title-content-item']}>
<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>
)
})
}
</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>
)
})
}
</View>
</View>
</View>
)
})

53
src/styles/iconfont.scss
View File

@ -76,6 +76,59 @@
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 {
content: "\e64c";
}

BIN
src/styles/iconfont.ttf
View File

Binary file not shown.