From 603e7ad4b1c0fb1ff86f8c839cadd54e37503218 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Tue, 12 Oct 2021 18:01:19 +0800
Subject: [PATCH] add order

---
 src/components/order_list/mall/mall.vue            | 157 +++++++++++++++++++++
 src/pages.json                                     |   8 +-
 src/pages/order_list/order_list.vue                |   6 +
 .../order/pages/mall/refund_list/refund_list.vue   | 152 ++++++++++++++++++++
 .../pages/mall/refund_operate/refund_operate.vue   | 155 ++++++++++++++++++++
 .../order/pages/mall/send_out/send_out.vue         |   1 +
 6 files changed, 478 insertions(+), 1 deletion(-)
 create mode 100644 src/components/order_list/mall/mall.vue
 create mode 100644 src/subpackage/order/pages/mall/refund_list/refund_list.vue

diff --git a/src/components/order_list/mall/mall.vue b/src/components/order_list/mall/mall.vue
new file mode 100644
index 0000000..4628a40
--- /dev/null
+++ b/src/components/order_list/mall/mall.vue
@@ -0,0 +1,157 @@
+<template>
+    <view class="mall-order">
+        <view class="mo-num">
+            <view class="mn-view">订单号：sh20201111152456789</view>
+            <view class="mn-view">待发货</view>
+        </view>
+        <view class="mo-goods-ls">
+            <view class="rgi-list" v-if="false">
+                <view class="rl-item" v-for="i in 3" :key="i">
+                    <image class="ri-img"></image>
+                    <view class="ri-view">克洛羽毛球…</view>
+                </view>
+            </view>
+            <view class="rgi-single">
+                <image class="rs-img"></image>
+                <view class="rs-view">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球比赛用</view>
+            </view>
+            <view class="rgi-total"><text>共3件</text><image class="rt-img"></image></view>
+        </view>
+        <view class="mo-total"><text class="mt-txt">商品金额合计：</text>¥239.6</view>
+        <view class="mo-bot">
+            <view class="mb-express">配送方式：快递</view>
+            <view class="mb-btn">发货</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .mall-order{
+        background-color: #fff;
+        padding: 30upx 20upx;
+        border-radius: 10upx;
+
+    }
+    .mo-num{
+        margin-bottom: 20upx;
+        @include centerFlex(space-between);
+        .mn-view{
+            font-size: 28upx;
+            line-height: 40upx;
+            &:first-child{
+                flex-grow: 1;
+                color: #1A1A1A;
+                @include textHide(1);
+            }
+            &+.mn-view{
+                flex-shrink: 0;
+                max-width: 30%;
+                color: $themeColor;
+                @include textHide(1);
+            }
+        }
+    }
+    .mo-goods-ls{
+        margin-bottom: 30upx;
+        @include centerFlex(space-between);
+        .rgi-list{
+            display: flex;
+            .rl-item{
+                flex-shrink: 0;
+                .ri-img{
+                    margin-bottom: 6upx;
+                    width: 152upx;
+                    height: 152upx;
+                    border-radius: 10upx;
+                    background-color: skyblue;
+
+                }
+                .ri-view{
+                    width: 152upx;
+                    line-height: 34upx;
+                    font-size: 24upx;
+                    color: #333;
+                    @include textHide(1);
+                }
+                &:not(:last-child){
+                    margin-right: 20upx;
+                }
+            }
+        }
+        .rgi-single{
+            margin-right: 34upx;
+            display: flex;
+            align-items: flex-start;
+            .rs-img{
+                flex-shrink: 0;
+                margin-right: 22upx;
+                width: 152upx;
+                height: 152upx;
+                border-radius: 10upx;
+                background-color: skyblue;
+            }
+            .rs-view{
+                @include textHide(3);
+                font-size: 24upx;
+                line-height: 34upx;
+                color: #1a1a1a;
+            }
+        }
+        .rgi-total{
+            flex-shrink: 0;
+            line-height: 34upx;
+            font-size: 24upx;
+            color: #9a9a9d;
+            .rt-img{
+                margin-left: 8upx;
+                vertical-align: middle;
+                width: 30upx;
+                height: 30upx;
+                background-color: skyblue;
+            }
+        }
+    }
+    .mo-total{
+        margin-bottom: 30upx;
+        font-size: 24upx;
+        line-height: 34upx;
+        text-align: right;
+        color: #1a1a1a;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        .mt-txt{
+            color: #9A9A9D;
+        }
+    }   
+    .mo-bot{
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        .mb-express{
+            font-size: 24upx;
+            line-height: 34upx;
+            color: #9A9A9D;
+            @include textHide(1);
+        }   
+        .mb-btn{
+            flex-shrink: 0;
+            margin-left: 20upx;
+            width: 190upx;
+            line-height: 80upx;
+            text-align: center;
+            border-radius: 10upx;
+            font-size: 32upx;
+            color: #fff;
+            background-color: $themeColor;
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index eb476cf..42816ea 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -390,9 +390,15 @@
 			"root": "subpackage/order",
 			"pages": [
 				{
+					"path": "pages/mall/refund_list/refund_list",
+					"style" : {
+						"navigationBarTitleText": "退款" 
+					}
+				},
+				{
 					"path": "pages/mall/refund_operate/refund_operate",
 					"style" : {
-						"navigationBarTitleText": "查看物流" 
+						"navigationBarTitleText": "退款" 
 					}
 				},
 				{
diff --git a/src/pages/order_list/order_list.vue b/src/pages/order_list/order_list.vue
index abcfaf6..fc0cf8f 100644
--- a/src/pages/order_list/order_list.vue
+++ b/src/pages/order_list/order_list.vue
@@ -61,11 +61,15 @@
                 
             </view>
             <view class="ool-item">
+                <mall></mall>
+            </view>
+            <view class="ool-item">
                 <locker></locker>
             </view>
             <view class="ool-item">
                 <rent-and-sale></rent-and-sale>
             </view>
+            
             <!-- <view class="ool-item">
                 <spectacular-monent></spectacular-monent>
             </view>
@@ -131,6 +135,7 @@
 	import club_rental from '../../components/order_list/club_rental/club_rental.vue';
 	import locker from '../../components/order_list/locker/locker.vue';
 	import rent_and_sale from '../../components/order_list/rent_and_sale/rent_and_sale.vue';
+	import mall from '../../components/order_list/mall/mall.vue';
 
     import util from '../../utils/util';
     import { servers } from '../../js/server';
@@ -152,6 +157,7 @@
             'club-rental': club_rental,
             'locker': locker,
             'rent-and-sale': rent_and_sale,
+            'mall': mall,
         },
         computed:{
             isStoreInfo(){
diff --git a/src/subpackage/order/pages/mall/refund_list/refund_list.vue b/src/subpackage/order/pages/mall/refund_list/refund_list.vue
new file mode 100644
index 0000000..0157a9f
--- /dev/null
+++ b/src/subpackage/order/pages/mall/refund_list/refund_list.vue
@@ -0,0 +1,152 @@
+<template>
+    <view class="refund-list">
+        <view class="rl-num">订单编号     sc20 0822 0815 6894</view>
+        <view class="rl-tit">请选择商品发货</view>
+        <view class="rl-goods-list">
+            <view class="rgl-item" v-for="i in 3" :key="i">
+                <view class="ri-icon"></view>
+                <image class="ri-img"></image>
+                <view class="ri-info">
+                    <view class="ri-name">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球比赛用</view>
+                    <view class="ri-spec"><view>比赛专用；黑色</view><view>×1</view></view>
+                    <view class="ri-price">实付：¥<text>59.9</text></view>
+                </view>
+            </view>
+        </view>
+        <view class="rl-fixed-bar">
+            <view class="rfb-select">
+                <view></view>
+                <view>全选</view>
+            </view>
+            <div class="rfb-btn">下一步</div>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .refund-list{
+        padding: 40upx 24upx;
+        .rl-num{
+            margin-bottom: 34upx;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #1a1a1a;
+            @include textHide(1);
+        }
+        .rl-tit{
+            margin-bottom: 20upx;
+            font-size: 32upx;
+            font-weight: 500;
+            line-height: 44upx;
+            color: #1a1a1a;
+        }
+        .rl-goods-list{
+            padding: 20upx 0;
+            background-color: #fff;
+            .rgl-item{
+                padding: 20upx;
+                @include centerFlex(space-between);
+                .ri-icon{
+                    margin-right: 20upx;
+                    flex-shrink: 0;
+                    width: 32upx;
+                    height: 32upx;
+                    border-radius: 50%;
+                    box-shadow: 0 0 0 2upx #9A9A9D;
+                }
+                .ri-img{
+                    margin-right: 20upx;
+                    width: 180upx;
+                    height: 180upx;
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    border-radius: 10upx;
+                    background-color: skyblue;
+                }
+                .ri-info{
+                    flex-grow: 1;
+                    .ri-name{
+                        margin-bottom: 12upx;
+                        line-height: 40upx;
+                        font-size: 28upx;
+                        color: #1a1a1a;
+                        @include textHide(2);
+                    }
+                    .ri-spec{
+                        margin-bottom: 4upx;
+                        @include centerFlex(space-between);
+                        >view{
+                            font-size: 24upx;
+                            line-height: 34upx;
+                            color: #9a9a9d;
+                            &:first-child{
+                                flex-grow: 1;
+                                @include textHide(1);
+                            }
+                            &+view{
+                                flex-shrink: 0;
+                                max-width: 20%;
+                                @include textHide(1);
+                            }
+                        }
+                    }
+                    .ri-price{
+                        font-size: 28upx;
+                        line-height: 40upx;
+                        color: #FF873D;
+                        @include textHide(1);
+                        >text{
+                            font-size: 32upx;
+                            font-weight: 500;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .rl-fixed-bar{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: #f2f2f7;
+        padding: 10upx 24upx;
+        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        .rfb-select{
+            margin-bottom: 34upx;
+            @include centerFlex(flex-start);
+            >view{
+                &:first-child{
+                    flex-shrink: 0;
+                    margin-right: 20upx;
+                    width: 32upx;
+                    height: 32upx;
+                    border-radius: 50%;
+                    box-shadow: 0 0 0 2upx #dadada;
+                }
+                &+view{
+                    line-height: 40upx;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                }
+            }
+
+        }
+        .rfb-btn{
+            line-height: 112upx;
+            text-align: center;
+            font-size: 32upx;
+            border-radius: 10upx;
+            background-color: $themeColor;
+            color: #fff;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/mall/refund_operate/refund_operate.vue b/src/subpackage/order/pages/mall/refund_operate/refund_operate.vue
index e445199..af50b4f 100644
--- a/src/subpackage/order/pages/mall/refund_operate/refund_operate.vue
+++ b/src/subpackage/order/pages/mall/refund_operate/refund_operate.vue
@@ -1,6 +1,34 @@
 <template>
     <view class="refund-operate">
         <view class="ro-num">订单编号     sc20 0822 0815 6894</view>
+        <view class="ro-box ro-goods-info">
+            <view class="rgi-list" v-if="false">
+                <view class="rl-item" v-for="i in 3" :key="i">
+                    <image></image>
+                    <view>克洛羽毛球…</view>
+                </view>
+            </view>
+            <view class="rgi-single">
+                <image></image>
+                <view>克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球比赛用</view>
+            </view>
+            <view class="rgi-total"><text>共3件</text><image></image></view>
+        </view>
+        <view class="ro-box ro-refund-info">
+            <view class="rri-txt">最大可退金额 <text>￥179.7</text>（含运费￥0）</view>
+            <view class="rri-txt">可退积分：100积分</view>
+            <view class="rri-line">
+                <view class="rl-name"><text>*</text>退款金额</view>
+                <view class="rl-frame"><input /></view>
+            </view>
+            <view class="rri-line">
+                <view class="rl-name"><text>*</text>回退积分</view>
+                <view class="rl-frame"><input /></view>
+            </view>
+        </view>
+        <view class="ro-bar">
+            <view>确定</view>
+        </view>
     </view>
 </template>
 
@@ -14,6 +42,8 @@ export default {
     @import '~style/public.scss';
     .refund-operate{
         padding: 40upx 24upx 140upx;
+        padding-bottom: calc( 140upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 140upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
         .ro-num{
             margin-bottom: 40upx;
             font-size: 28upx;
@@ -22,4 +52,129 @@ export default {
             @include textHide(1);
         }
     }
+    .ro-box{
+        margin-bottom: 24upx;
+        padding: 30upx 20upx;
+        border-radius: 10upx;
+        background-color: #fff;
+
+    }
+    .ro-goods-info{
+        @include centerFlex(space-between);
+        .rgi-total{
+            flex-shrink: 0;
+            line-height: 34upx;
+            font-size: 24upx;
+            color: #9a9a9d;
+            >image{
+                margin-left: 8upx;
+                vertical-align: middle;
+                width: 30upx;
+                height: 30upx;
+                background-color: skyblue;
+            }
+        }
+        .rgi-list{
+            display: flex;
+            .rl-item{
+                flex-shrink: 0;
+                >image{
+                    margin-bottom: 6upx;
+                    width: 152upx;
+                    height: 152upx;
+                    border-radius: 10upx;
+                    background-color: skyblue;
+
+                }
+                >view{
+                    width: 152upx;
+                    line-height: 34upx;
+                    font-size: 24upx;
+                    color: #333;
+                    @include textHide(1);
+                }
+                &:not(:last-child){
+                    margin-right: 20upx;
+                }
+            }
+        }
+        .rgi-single{
+            margin-right: 34upx;
+            display: flex;
+            align-items: flex-start;
+            >image{
+                flex-shrink: 0;
+                margin-right: 22upx;
+                width: 152upx;
+                height: 152upx;
+                border-radius: 10upx;
+                background-color: skyblue;
+            }
+            >view{
+                @include textHide(3);
+                font-size: 24upx;
+                line-height: 34upx;
+                color: #1a1a1a;
+            }
+        }
+    }
+    .ro-refund-info{
+        .rri-txt{
+            margin-bottom: 20upx;
+            font-size: 28upx;
+            line-height: 40upx;
+            color: #1a1a1a;
+            >text{
+                color: #ff873d;
+            }
+        }
+        .rri-line{
+            margin-bottom: 30upx;
+            @include centerFlex(flex-start);
+            .rl-name{
+                margin-right: 40upx;
+                flex-shrink: 0;
+                font-size: 28upx;
+                line-height: 40upx;
+                color: #9A9A9D;
+                >text{
+                    margin-right: 10upx;
+                    color: #EA5061;
+                }
+            }
+            .rl-frame{
+                flex-grow: 1;
+                padding: 0 24upx;
+                height: 88upx;
+                border-radius: 10upx;
+                border: 2upx solid #979797;
+                >input{
+                    width: 100%;
+                    height: 100%;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                }
+            }
+
+        }
+    }
+    .ro-bar{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        padding: 10upx 24upx;
+        padding-bottom: 10upx;
+        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        >view{
+            line-height: 112upx;
+            text-align: center;
+            font-size: 32upx;
+            color: #fff;
+            border-radius: 10upx;
+            background-color: $themeColor;
+        }
+    }
+    
 </style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/mall/send_out/send_out.vue b/src/subpackage/order/pages/mall/send_out/send_out.vue
index b4f4f54..4cc1ade 100644
--- a/src/subpackage/order/pages/mall/send_out/send_out.vue
+++ b/src/subpackage/order/pages/mall/send_out/send_out.vue
@@ -135,6 +135,7 @@ export default {
 <style lang='scss'>
     @import '~style/public.scss';
     .order-send-out{
+        padding-bottom: 140upx;
         padding-bottom: calc( 140upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
         padding-bottom: calc( 140upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
     }