From 02286c80c317d1b09a16496c8ee87501d0c6d69c Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Wed, 22 Dec 2021 16:30:23 +0800
Subject: [PATCH] add mall write off

---
 src/pages.json                                     |  18 ++
 src/pages/write_off/mall/confirm/confirm.vue       | 199 +++++++++++++++++++++
 src/pages/write_off/mall/list/list.vue             | 152 ++++++++++++++++
 src/pages/write_off/mall/success/success.vue       | 135 ++++++++++++++
 .../number_of_people/number_of_people.vue          |  91 +++++++++-
 5 files changed, 594 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/write_off/mall/confirm/confirm.vue
 create mode 100644 src/pages/write_off/mall/list/list.vue
 create mode 100644 src/pages/write_off/mall/success/success.vue

diff --git a/src/pages.json b/src/pages.json
index c8cc1fc..4c5beba 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -134,6 +134,24 @@
 			}
 		},
 		{
+			"path": "pages/write_off/mall/success/success",
+			"style": {
+				"navigationBarTitleText": "核销订单"
+			}
+		},
+		{
+			"path": "pages/write_off/mall/confirm/confirm",
+			"style": {
+				"navigationBarTitleText": "核销订单"
+			}
+		},
+		{
+			"path": "pages/write_off/mall/list/list",
+			"style": {
+				"navigationBarTitleText": "商城订单核销"
+			}
+		},
+		{
 			"path": "pages/write_off/number_of_people/number_of_people",
 			"style": {
 				"navigationBarTitleText": "查询"
diff --git a/src/pages/write_off/mall/confirm/confirm.vue b/src/pages/write_off/mall/confirm/confirm.vue
new file mode 100644
index 0000000..0ab34a9
--- /dev/null
+++ b/src/pages/write_off/mall/confirm/confirm.vue
@@ -0,0 +1,199 @@
+<template>
+    <view class="mall-ls-confirm">
+        <view class="mlc-status">待发货</view>
+        <view class="mlc-main">
+            <view class="mm-top mm-box">
+                <view class="mt-line">
+                    <view>下单时间</view>
+                    <view>2020-08-22 10:30:40</view>
+                    <view>复制</view>
+                </view>
+                <view class="mt-line">
+                    <view>订单编号</view>
+                    <view>sc20 0822 0815 6894</view>
+                </view>
+            </view>
+            <view class="mm-user-info mm-box">
+                <view class="mm-tit">收货人信息</view>
+                <view class="mui-info">
+                    <view class="mi-line">配送方式：自提</view>
+                    <view class="mi-line">李晓娜 18087690993</view>
+                    <view class="mi-line">欧轩智能羽毛球馆（永泰店）</view>
+                    <view class="mi-addr">广州市白云区永泰街道世联空间D2栋5楼</view>
+                </view>
+                <view class="mui-code">取货码：2009 1808 8956</view>
+            </view>
+            <view class="mm-goods">
+                <view class="mm-tit">商品信息</view>
+                <view class="mg-ls">
+                    <view class="ml-item" v-for="i in 3" :key="i">
+                        <image></image>
+                        <view class="mi-info">
+                            <view class="mi-name">克洛斯威羽毛球拍2支装正品碳素成人进攻型羽毛</view>
+                            <view class="mi-spec">
+                                <view>比赛专用；黑色</view>
+                                <view>×1</view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="mlc-fixd-btn">确认核销</view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .mall-ls-confirm{
+        padding-bottom: 132upx;
+        padding-bottom: calc( 132upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 132upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .mlc-status{
+        padding: 0 44upx;
+        height: 106upx;
+        line-height: 106upx;
+        font-size: 36upx;
+        color: #fff;
+        font-weight: 500;
+        background-color: $themeColor;
+    }
+    .mlc-main{
+        padding: 24upx;
+        .mm-box{
+            margin-bottom: 24upx;
+            padding: 30upx 28upx;
+            background-color: #fff;
+            border-radius: 10upx;
+        }
+        .mm-tit{
+            padding-bottom: 20upx;
+            line-height: 44upx;
+            font-weight: 500;
+            font-size: 28upx;
+            color: #333;
+            border-bottom: 2upx solid #F2F2F7;
+        }
+        .mm-top{
+            .mt-line{
+                @include centerFlex(flex-start);
+                >view{
+                    font-size: 28upx;
+                    line-height: 60upx;
+                    color: #333;
+                    &:first-child{
+                        margin-right: 60upx;
+                        flex-shrink: 0;
+                        flex-grow: 0;
+                        color: #9A9A9D;
+                    }
+                    &:nth-child(2){
+                        @include textHide(1);
+                    }
+                    &:nth-child(3){
+                        margin-left: 30upx;
+                        flex-shrink: 0;
+                        color: $themeColor;
+                    }
+                }
+            }
+        }
+        .mm-user-info{
+            .mui-info{
+                padding: 20upx 0;
+                border-bottom: 2upx solid #F2F2F7;
+                .mi-line{
+                    margin-bottom: 14upx;
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #333;
+                    @include textHide(1);
+                }
+                .mi-addr{
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #9C9C9F;
+                }
+            }
+            .mui-code{
+                padding-top: 30upx;
+                font-weight: 500;
+                font-size: 32upx;
+                color: #333;
+            }
+        }
+        .mm-goods{
+            padding: 22upx 28upx 0;
+            border-radius: 10upx;
+            background-color: #fff;
+            .mg-ls{
+                .ml-item{
+                    padding: 30upx 0upx;
+                    @include centerFlex(space-between);
+                    &:not(:last-child){
+                        border-bottom: 2upx solid #F2F2F7;
+                    }
+                    >image{
+                        flex-shrink: 0;
+                        margin-right: 20upx;
+                        width: 180upx;
+                        height: 180upx;
+                        background-color: skyblue;
+                    }
+                    .mi-info{
+                        flex-grow: 1;
+                        .mi-name{
+                            width: 330upx;
+                            margin-bottom: 12upx;
+                            font-size: 28upx;
+                            line-height: 40upx;
+                            color: #333;
+                            @include textHide(2);
+                        }
+                        .mi-spec{
+                            width: 100%;
+                            @include centerFlex(space-between);
+                            >view{
+                                font-size: 24upx;
+                                line-height: 34upx;
+                                color: #9A9A9D;
+                                @include textHide(1);
+                                &:first-child{
+                                    flex-grow: 1;
+                                }   
+                                &+view{
+                                    flex-shrink: 0;
+                                    margin-left: 20upx;
+                                    max-width: 30%;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .mlc-fixd-btn{
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 10upx;
+        bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        width: 622upx;
+        height: 112upx;
+        line-height: 112upx;
+        text-align: center;
+        font-size: 32upx;
+        border-radius: 10upx;
+        color: #fff;
+        background-color: $themeColor;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/write_off/mall/list/list.vue b/src/pages/write_off/mall/list/list.vue
new file mode 100644
index 0000000..e1cf36d
--- /dev/null
+++ b/src/pages/write_off/mall/list/list.vue
@@ -0,0 +1,152 @@
+<template>
+    <view class="mall-order-ls">
+        <view class="mol-date">
+            <view class="md-txt">核销日期</view>
+            <view class="md-picker">
+                <picker>
+                    <view>
+                        <input :value="'2019-05-17'" />
+                        <image></image>
+                    </view>
+                </picker>
+            </view>
+            <view class="md-txt">至</view>
+            <view class="md-picker">
+                <picker>
+                    <view>
+                        <input :value="'2019-05-17'" />
+                        <image></image>
+                    </view>
+                </picker>
+            </view>
+        </view>
+        <view class="mol-list">
+            <view class="ml-item" v-for="i in 5" :key="i">
+                <view class="mi-order-no">
+                    <view class="mon-num">订单编号：20195171564566</view>
+                    <view class="mon-btn">复制</view>
+                </view>
+                <view class="mi-info">
+                    <view class="mi-line">取货码：200801108978</view>
+                    <view class="mi-line">取货人：梁小姐 18316553857</view>
+                    <view class="mi-line">商品：运动服（M)x1 ；运动服（M)x2</view>
+                    <view class="mi-line">核验人：李小雨</view>
+                    <view class="mi-line">取货时间：2019-05-17 11:12:58</view>
+                </view>
+            </view>
+        </view>
+        
+        <view class="mol-fixed">
+            <view>核销订单</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .mall-order-ls{
+        padding-bottom: 122upx;
+        padding-bottom: calc( 122upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 122upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .mol-date{
+        padding: 0 28upx;
+        height: 148upx;
+        background-color: #fff;
+        @include centerFlex(flex-start);
+        .md-txt{
+            font-size: 32upx;
+            line-height: 44upx;
+            color: #1a1a1a;
+        }
+        .md-picker{
+            margin: 0 20upx;
+            width: 226upx;
+            border: 2upx solid #D8D8D8;
+            border-radius: 10upx;
+            overflow: hidden;
+            view{
+                padding: 0 20upx;
+                height: 88upx;
+                background-color: #f2f2f7;
+                @include centerFlex(space-between);
+                >input{
+                    flex-grow: 1;
+                    height: 100%;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                }
+                >image{
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    width: 22upx;
+                    height: 22upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+    }
+
+    .mol-list{
+        padding: 24upx;
+        .ml-item{
+            margin-bottom: 24upx;
+            padding: 0 24upx;
+            background-color: #fff;
+            .mi-order-no{
+                padding: 30upx 4upx;
+                border-bottom: 2upx solid #f2f2f7;
+                @include centerFlex(space-between);
+                .mon-num{
+                    font-size: 28upx;
+                    font-weight: 500;
+                    line-height: 40upx;
+                    color: #1a1a1a;
+                }
+                .mon-btn{
+                    flex-shrink: 0;
+                    margin-left: 20upx;
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: $themeColor;
+
+                }
+            }
+            .mi-info{
+                padding: 30upx 4upx;
+                .mi-line{
+                    font-size: 28upx;
+                    line-height: 52upx;
+                    color: #9C9C9F;
+                    @include textHide(1);
+                }
+            }
+        }
+    }
+
+    .mol-fixed{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: #fff;
+        padding: 10upx 40upx;
+        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{
+            height: 112upx;
+            line-height: 112upx;
+            text-align: center;
+            font-size: 32upx;
+            color: #fff;
+            background-color: $themeColor;
+            border-radius: 10upx;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/write_off/mall/success/success.vue b/src/pages/write_off/mall/success/success.vue
new file mode 100644
index 0000000..536e14f
--- /dev/null
+++ b/src/pages/write_off/mall/success/success.vue
@@ -0,0 +1,135 @@
+<template>
+    <view class="confirm-success">
+        <view class="cs-tip">
+            <image></image>
+            <view>核销成功</view>
+        </view>
+        <view class="cs-goods">
+            <view class="cg-tit">请将以下商品取给客户</view>
+            <view class="mm-goods">
+                <view class="mm-tit">商品信息</view>
+                <view class="mg-ls">
+                    <view class="ml-item" v-for="i in 3" :key="i">
+                        <image></image>
+                        <view class="mi-info">
+                            <view class="mi-name">克洛斯威羽毛球拍2支装正品碳素成人进攻型羽毛</view>
+                            <view class="mi-spec">
+                                <view>比赛专用；黑色</view>
+                                <view>×1</view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="mlc-fixd-btn">确认核销</view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .confirm-success{
+        padding-bottom: 132upx;
+        padding-bottom: calc( 132upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 132upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .cs-tip{
+        padding: 84upx 0upx 104upx;
+        >image{
+            display: block;
+            margin: 0 auto 46upx;
+            width: 100upx;
+            height: 100upx;
+            background-color: skyblue;
+        }
+        >view{
+            text-align: center;
+            line-height: 66upx;
+            font-size: 48upx;
+            font-weight: 500;
+            color: #333;
+        }
+    }
+    .cs-goods{
+        padding: 0 24upx;
+        .cg-tit{
+            margin-bottom: 20upx;
+            font-weight: 500;
+            font-size: 32upx;
+            line-height: 44upx;
+            color: #1a1a1a;
+        }
+        .mm-goods{
+            padding: 22upx 28upx 0;
+            border-radius: 10upx;
+            background-color: #fff;
+            .mg-ls{
+                .ml-item{
+                    padding: 30upx 0upx;
+                    @include centerFlex(space-between);
+                    &:not(:last-child){
+                        border-bottom: 2upx solid #F2F2F7;
+                    }
+                    >image{
+                        flex-shrink: 0;
+                        margin-right: 20upx;
+                        width: 180upx;
+                        height: 180upx;
+                        background-color: skyblue;
+                    }
+                    .mi-info{
+                        flex-grow: 1;
+                        .mi-name{
+                            width: 330upx;
+                            margin-bottom: 12upx;
+                            font-size: 28upx;
+                            line-height: 40upx;
+                            color: #333;
+                            @include textHide(2);
+                        }
+                        .mi-spec{
+                            width: 100%;
+                            @include centerFlex(space-between);
+                            >view{
+                                font-size: 24upx;
+                                line-height: 34upx;
+                                color: #9A9A9D;
+                                @include textHide(1);
+                                &:first-child{
+                                    flex-grow: 1;
+                                }   
+                                &+view{
+                                    flex-shrink: 0;
+                                    margin-left: 20upx;
+                                    max-width: 30%;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .mlc-fixd-btn{
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 10upx;
+        bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        width: 622upx;
+        height: 112upx;
+        line-height: 112upx;
+        text-align: center;
+        font-size: 32upx;
+        border-radius: 10upx;
+        color: #fff;
+        background-color: $themeColor;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/write_off/number_of_people/number_of_people.vue b/src/pages/write_off/number_of_people/number_of_people.vue
index 8cebbd4..777aecb 100644
--- a/src/pages/write_off/number_of_people/number_of_people.vue
+++ b/src/pages/write_off/number_of_people/number_of_people.vue
@@ -17,7 +17,23 @@
                 <text>温馨提示：\n\r修改现场人数可能会影响现场灯光开关，请谨慎操作！ 如后台有开启散客开关灯功能的，则散客人数达到阶梯最低X人时，对应灯光会自动开灯;少于X人的已开启的灯会自动关闭。</text>
             </view>
         </view>
-        
+        <view class="ox-dark-mask">
+            <view class="nop-modifies-modal">
+                <image class="nmm-close"></image>
+                <view class="nmm-tit">修改现场散客人数</view>
+                <view class="nmm-info">
+                    <view class="ni-num">当前现场散客人数为：69</view>
+                    <view class="ni-ipt">
+                        <input placeholder="请输入散客人数" />
+                    </view>
+                    <view class="ni-tip">修改现场人数可能会影响现场灯光开关，请谨慎操作！</view>
+                </view>
+                <view class="nmm-btns">
+                    <view>取消</view>
+                    <view>确认</view>
+                </view>
+            </view>
+        </view>
     </view>
 </template>
 
@@ -99,5 +115,78 @@ export default {
             }
 
         }
+        .nop-modifies-modal{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            padding-top: 78upx;
+            width: 620upx;
+            height: 706upx;
+            background-color: #fff;
+            border-radius: 10upx;
+            .nmm-close{
+                position: absolute;
+                right: 30upx;
+                top: 30upx;
+                width: 34upx;
+                height: 34upx;
+                background-color: skyblue;
+            }
+            .nmm-tit{
+                line-height: 44upx;
+                text-align: center;
+                font-weight: 500;
+                font-size: 32upx;
+                color: #1A1A1A;
+            }
+            .nmm-info{
+                padding: 54upx 80upx 80upx;
+                .ni-num{
+                    margin-bottom: 30upx;
+                    font-size: 28upx;
+                    line-height: 48upx;
+                    color: #1A1A1A;
+                    @include textHide(1);
+                }
+                .ni-ipt{
+                    margin-bottom: 26upx;
+                    padding: 0 20upx;
+                    height: 88upx;
+                    border-radius: 10upx;
+                    border: 2upx solid #D8D8D8;
+                    >input{
+                        flex-grow: 1;
+                        height: 100%;
+                        font-size: 28upx;
+                        color: #1A1A1A;
+                    }
+                }
+                .ni-tip{
+                    font-size: 24upx;
+                    line-height: 34upx;
+                    color: #EA5061;
+                }
+            }
+            .nmm-btns{
+                @include centerFlex(center);
+                >view{
+                    margin: 0 10upx;
+                    width: 240upx;
+                    height: 88upx;
+                    line-height: 84upx;
+                    text-align: center;
+                    font-size: 32upx;
+                    border-radius: 10upx;
+                    border: 2upx solid $themeColor;
+                    color: $themeColor;
+                    &+view{
+                        color: #fff;
+                        background-color: $themeColor;
+                    }
+                }
+            }
+
+        }
     }
 </style>
\ No newline at end of file