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-04-18 11:59:57 +08:00
parent dc0129402c
commit 5ac3850c18
6 changed files with 208 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app.config.ts
View File

@ -1,10 +1,7 @@
export default {
pages: [
'pages/index/index',
'pages/search/index',
'pages/user/index',
'pages/searchList/index',
'pages/details/index',
],
window: {
backgroundTextStyle: 'light',
@ -28,4 +25,30 @@ export default {
'backgroundColor': '#fff',
'borderStyle': 'white'
},
subPackages: [
{
root: "pages/search",
pages: [
"index"
]
},
{
root: "pages/details",
pages: [
"index"
]
},
{
root: "pages/searchList",
pages: [
"index"
]
},
{
root: "pages/userEdit",
pages: [
"index"
]
}
]
}

3
src/pages/user/index.config.ts
View File

@ -1,3 +1,4 @@
export default {
navigationBarTitleText: '我的'
navigationBarTitleText: '我的',
navigationStyle: 'custom'
}

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

@ -1,4 +1,97 @@
.main{
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-size: cover;
height: 710px;
position: relative;
.card-main{
margin-top: 33%;
}
}
.header-card{
position: absolute;left: 50%;bottom: 5%;
transform: translateX(-50%);
}
.crad{
width: 702px;
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 30px;
box-sizing: border-box;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.05);
}
.card-info{
display: flex;justify-content: space-between;
position: absolute;top: -16%;left: 0;right: 0;
width: 702px;
padding: 0 30px;
box-sizing: border-box;
}
.arcd-info-left{
display: flex;align-items: flex-end;
}
.arcd-info-left-portrait{
width: 170px;
height: 170px;
background: rgba(0,0,0,0.00);
border: 4px solid #ffffff;
border-radius: 50%;
overflow: hidden;
}
.arcd-info-left-portrait image{
width: 100%;
height: 100%;
object-fit: cover;
}
.arcd-info-left-desc{
margin-left: 24px;
}
.arcd-info-left-nickname{
font-size: 44px;
font-weight: 700;
color: #000000;
}
.arcd-info-left-phone{
font-size: 24px;
font-weight: 400;
color: #3c3c3c;
}
.card-info-right{
font-size: 26px;
}
.card-main-title{
display: flex;justify-content: space-between;
align-items: center;
border-bottom: 2px solid #dddddd;
padding: 0 5px 15px;
box-sizing: border-box;
}
.card-main-title text{
font-size: 22px;
font-weight: 400;
color: #ababab;
}
.card-main-title-content{
display: grid;
grid-template-columns: repeat(5,1fr);
}
.card-main-title-content-item{
font-size: 24px;
font-weight: 400;
color: #3c3c3c;
text-align: center;
margin-top: 30px;
}
.card-main-title-content-item image{
width: 68px;
height: 68px;
border: 2px solid #cccccc;
margin-bottom: 5px;
}
.main-card{
margin: 34px auto 0;
}
}

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

@ -1,13 +1,83 @@
import { View } from '@tarojs/components'
import Search from '@/components/search'
import { View,Image,Text } from "@tarojs/components"
import { memo } from "react"
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search disabled={true} style={{width: '263rpx'}}/>
</View>
</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']}>
1
</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>待配布</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>
)
})

0
src/pages/userEdit/index.scss Normal file
View File

6
src/pages/userEdit/index.tsx Normal file
View File

@ -0,0 +1,6 @@
import "./index.scss"
export default ()=>{
return "1"
}