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-20 11:26:56 +08:00
parent 2731717a7d
commit 948bf72622
4 changed files with 191 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/pages/order/components/kindList/index.module.scss Normal file
View File

@ -0,0 +1,100 @@
.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;
}
}
}

88
src/pages/order/components/kindList/index.tsx Normal file
View File

@ -0,0 +1,88 @@
import { View } from "@tarojs/components"
import { useState } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
return (
<>
<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 number={price}/>
<View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
</View>
</View>
</>
)
}

98
src/pages/order/index.module.scss
View File

@ -54,105 +54,7 @@
font-size: $font_size; 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{ .order_desc{
display: flex; display: flex;
align-items: center; align-items: center;

78
src/pages/order/index.tsx
View File

@ -2,6 +2,7 @@ import { Text, View } from "@tarojs/components"
import classnames from "classnames"; import classnames from "classnames";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import EstimatedAmount from "./components/estimatedAmount"; import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
import styles from './index.module.scss' import styles from './index.module.scss'
export default () => { export default () => {
@ -19,82 +20,7 @@ import styles from './index.module.scss'
<View className={styles.order_address_text}>请选择收货地址及信息</View> <View className={styles.order_address_text}>请选择收货地址及信息</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View> <View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
</View> </View>
<View className={styles.orders_list_con}> <KindList/>
<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 number={price}/>
<View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
</View>
</View>
<View className={styles.order_desc}> <View className={styles.order_desc}>
<View className={styles.order_desc_con}>订单备注</View> <View className={styles.order_desc_con}>订单备注</View>
<View className={styles.order_desc_text}>点击填写</View> <View className={styles.order_desc_text}>点击填写</View>