确认订单

src/app.config.ts

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

src/pages/order/components/estimatedAmount/index.module.scss

@@ -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;
+            }
+        }
+    }
+    
+}

src/pages/order/components/estimatedAmount/index.tsx

@@ -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>
+    )
+}

src/pages/order/index.config.ts

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

src/pages/order/index.module.scss

@@ -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;
+        }
+    }
+    
+}

src/pages/order/index.tsx

@@ -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>
+     )
+ }