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

确认订单

Browse Source
This commit is contained in:
czm 2022-04-19 18:43:24 +08:00
parent a84d7f5d53
commit 8ebca1e661
6 changed files with 358 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.config.ts
View File

@ -87,7 +87,7 @@ export default {
]
},
{
root: "pages/weightListAdd",
root: "pages/order",
pages: [
"index"
]

23
src/pages/order/components/estimatedAmount/index.module.scss Normal file
View File

@ -0,0 +1,23 @@
.order_price{
font-weight: 700;
display: flex;
align-items: center;
.order_price_text{
font-size: $font_size_medium;
margin-right: 10px;
}
.order_price_num{
text{
&:nth-child(1) {
font-size: $font_size_min;
}
&:nth-child(2) {
font-size: $font_size_big;
}
&:nth-child(3) {
font-size: $font_size_medium;
}
}
}
}

17
src/pages/order/components/estimatedAmount/index.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Text, View } from "@tarojs/components"
import styles from './index.module.scss'
type Param = {
style?: Object
}
export default ({style}:Param) => {
return (
<View className={styles.order_price}>
<Text className={styles.order_price_text}>预估金额</Text>
<View className={styles.order_price_num} style={style}>
<Text>¥</Text>
<Text>6,001</Text>
<Text>.00</Text>
</View>
</View>
)
}

3
src/pages/order/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '确认订单'
}

207
src/pages/order/index.module.scss Normal file
View File

@ -0,0 +1,207 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
}
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
display: flex;
align-items: center;
padding: 30px;
box-sizing: border-box;
margin-top: 20px;
.order_address_icon{
font-size: 60px;
}
.order_address_text{
flex: 1;
font-size: $font_size;
font-weight: 700;
margin-left: 30px;
}
.order_address_more_icon{
color: $color_font_three;
font-size: $font_size;
}
}
.orders_list_con{
margin-top: 20px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
}
.order_list{
&:nth-child(n+2) {
margin-top: 30px;
}
.order_list_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
.num{
color: $color_font_two;
font-size: $font_size_min;
}
}
}
.order_list_scroll{
margin-top: 30px;
.order_list_item {
display: flex;
&:nth-child(2) {
margin-top: 30px;
}
.order_list_item_img{
width: 126px;
height: 126px;
border-radius: 20px;
background-color: red;
}
.order_list_item_con{
display: flex;
width: 100%;
flex:1;
border-bottom: 1px solid #f0f0f0;
height: 150px;
padding-top: 20px;
box-sizing: border-box;
}
.order_list_item_des{
flex:1;
box-sizing: border-box;
padding-left: 30px;
.order_list_item_title{
font-weight: 700;
font-size: $font_size;
margin-bottom: 15px;
}
.order_list_item_price{
font-size: 26px;
color: $color_font_three;
}
}
.order_list_item_count{
.count_num{
color: $color_main;
font-size: $font_size;
margin-bottom: 15px;
font-weight: 400;
text{
font-size: $font_size_min;
}
}
.count_price {
font-size: $font_size;
font-weight: 700;
text{
font-size: $font_size_min;
}
}
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;
flex-direction: column;
padding: 30px 0;
.order_price_des{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 0 30px;
height: 116px;
border-radius: 20px;
margin-top: 20px;
.order_desc_con{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 50px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 250px;
height: 90px;
opacity: 0.6;
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
}
}

107
src/pages/order/index.tsx Normal file
View File

@ -0,0 +1,107 @@
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import EstimatedAmount from "./components/estimatedAmount";
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.order_main}>
<View className={styles.order_title}>
<Text>收货方式</Text>
<View className={styles.order_status}>物流</View>
<View className={styles.order_status}>上门自提</View>
</View>
<View className={styles.order_address}>
<View className={classnames(styles.order_address_icon, 'iconfont icon-shaixuan')}></View>
<View className={styles.order_address_text}>请选择收货地址及信息</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
</View>
<View className={styles.orders_list_con}>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_estimated_amount}>
<EstimatedAmount/>
<View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
</View>
</View>
<View className={styles.order_desc}>
<View className={styles.order_desc_con}>订单备注</View>
<View className={styles.order_desc_text}>点击填写</View>
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
</View>
<View className={styles.submit_order}>
<EstimatedAmount style={{color:'#007AFF'}}/>
<View className={styles.order_btn}>提交订单</View>
</View>
<View className="common_safe_area_y"></View>
</View>
)
}