From c36ac39eb4c7e4207f34ab9922b4504145044e4a Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Tue, 18 May 2021 17:04:09 +0800
Subject: [PATCH] add style

---
 src/pages.json                                     |  24 +++
 src/pages/index/index.vue                          |   2 +-
 .../write_off/confirm_order/confirm_order.vue      | 194 +++++++++++++++++++++
 src/pages/write_off/null/null.vue                  |  54 ++++++
 src/pages/write_off/operate/operate.vue            | 121 +++++++++++++
 .../write_off/search_result/search_result.vue      | 188 ++++++++++++++++++++
 6 files changed, 582 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/write_off/confirm_order/confirm_order.vue
 create mode 100644 src/pages/write_off/null/null.vue
 create mode 100644 src/pages/write_off/operate/operate.vue
 create mode 100644 src/pages/write_off/search_result/search_result.vue

diff --git a/src/pages.json b/src/pages.json
index 1e85383..4011ded 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -133,6 +133,30 @@
 			}
 		},
 		{
+			"path": "pages/write_off/search_result/search_result",
+			"style": {
+				"navigationBarTitleText": "核销查询"
+			}
+		},
+		{
+			"path": "pages/write_off/operate/operate",
+			"style": {
+				"navigationBarTitleText": "核销订单"
+			}
+		},
+		{
+			"path": "pages/write_off/confirm_order/confirm_order",
+			"style": {
+				"navigationBarTitleText": "核销订单"
+			}
+		},
+		{
+			"path": "pages/write_off/null/null",
+			"style": {
+				"navigationBarTitleText": "确认订单信息"
+			}
+		},
+		{
 			"path": "pages/employee/review_list/review_list",
 			"style": {
 				"navigationBarTitleText": "员工管理"
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 314ff13..8961d5d 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -96,7 +96,7 @@
 		{
 			id: 4,
 			name: '核销查询',
-			path: '/pages/write_off/list/list',
+			path: '/pages/write_off/search_result/search_result',
 			serverKey: 1008  // 后端对应权限编号
 		},
 		{
diff --git a/src/pages/write_off/confirm_order/confirm_order.vue b/src/pages/write_off/confirm_order/confirm_order.vue
new file mode 100644
index 0000000..33c557d
--- /dev/null
+++ b/src/pages/write_off/confirm_order/confirm_order.vue
@@ -0,0 +1,194 @@
+<template>
+    <view class="confirm-order">
+        <view class="co-container">
+            <view class="c-store-name">欧轩智能羽毛球馆(永泰店)</view>
+            <view class="c-main-section">
+                <view class="s-line">
+                    <view>
+                        <text>订单编号：</text>
+                        <view><view>20195175645666</view></view> 
+                    </view>
+                    <view>(次卡)</view>
+                </view>
+                <view class="s-line">
+                    <view>
+                        <text>用户昵称：</text>
+                        <view><view>周大强</view></view>
+                    </view>
+                </view>
+                <view class="s-line">
+                    <view>
+                        <text>预订项目：</text>
+                        <view><view>单人羽毛球次卡 (可随时使用) </view></view>
+                    </view>
+                </view>
+                <view class="s-line">
+                    <view>
+                        <text>预定日期：</text>
+                        <view><view>2019-05-18   周五</view></view>
+                    </view>
+                </view>
+                <view class="s-line">
+                    <view>
+                        <text>预定场次：</text>
+                        <view>
+                            <view>平日+上午</view>
+                            <view>平日+上午</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="c-more-ticket">
+                <view class="mt-tip">该次卡订单有多张票，请选择验证码核销（多选）</view>
+                <view class="mt-lines">
+                    <view v-for="i in 3" :key="i">
+                        <view>20121 0152 1252</view>
+                        <image></image>
+                    </view>
+                </view>
+            </view>
+            <view class="c-dotted-line"></view>
+            <view class="c-btns">
+                <view>确认核销</view>
+                <view>不核销</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: $themeColor;
+    }
+    .confirm-order{
+        padding-top: 46upx;
+        .co-container{
+            position: relative;
+            margin: 0 auto;
+            padding: 0 40upx 60upx;
+            width: 702upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            .c-store-name{
+                line-height: 108upx;
+                font-size: 32upx;
+                font-weight: 500;
+                border-bottom: 2upx solid #D8D8D8;
+                color: #1A1A1A;
+                @include textHide(1);
+            }
+            .c-main-section{
+                padding: 20upx 0 24upx;
+                .s-line{
+                    display: flex;
+                    align-items: baseline;
+                    >view{
+                        display: flex;
+                        align-items: baseline;
+                        >view{
+                            >view{
+                                min-width: 0;
+                                font-size: 28upx;
+                                line-height: 60upx;
+                                color: #1A1A1A;
+                                @include textHide(1);
+                            }
+                        }
+                        >text{
+                            flex-shrink: 0;
+                            font-size: 28upx;
+                            line-height: 60upx;
+                            color: #9C9C9F;
+                        }
+                        
+                        &+view{
+                            flex-shrink: 0;
+                            font-size: 28upx;
+                            line-height: 60upx;
+                            color: $themeColor;
+                        }
+                    }
+                }
+            }
+            .c-more-ticket{
+                padding-top: 32upx;
+                padding-bottom: 32upx;
+                border-top: 2upx solid #D8D8D8;
+                .mt-tip{
+                    margin-bottom: 28upx;
+                    line-height: 34upx;
+                    font-size: 24upx;
+                    color: #9C9C9F;
+                }
+                .mt-lines{
+                    >view{
+                        &:not(:last-child){
+                            margin-bottom: 24upx;
+                        }
+                        @include centerFlex(space-between);
+                        >view{
+                            min-width: 0;
+                            font-size: 28upx;
+                            line-height: 40upx;
+                            color: #1a1a1a;
+                        }
+                        >image{
+                            flex-shrink: 0;
+                            width: 40upx;
+                            height: 40upx;
+                            background-color: skyblue;
+                        }
+                    }
+                }
+            }
+            .c-dotted-line{
+                position: absolute;
+                left: 0;
+                width: 100%;
+                border-bottom: 2upx dotted #D8D8D8;
+                &::before,&::after{
+                    content: '';
+                    position: absolute;
+                    top: -9upx;
+                    display: block;
+                    width: 20upx;
+                    height: 20upx;
+                    border-radius: 50%;
+                    background-color: $themeColor;
+                }
+                &::before{
+                    left: -10upx;
+                }
+                &::after{
+                    right: -10upx;
+                }
+                
+            }
+            .c-btns{
+                padding-top: 58upx;
+                >view{
+                    height: 112upx;
+                    text-align: center;
+                    line-height: 108upx;
+                    border-radius: 10upx;
+                    border: 2upx solid $themeColor;
+                    font-size: 32upx;
+                    color: $themeColor;
+                    &:first-child{
+                        margin-bottom: 24upx;
+                        color: #fff;
+                        background-color: $themeColor;
+                    }
+                }
+            }
+
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/write_off/null/null.vue b/src/pages/write_off/null/null.vue
new file mode 100644
index 0000000..66df89d
--- /dev/null
+++ b/src/pages/write_off/null/null.vue
@@ -0,0 +1,54 @@
+<template>
+    <view class="null-container">
+        <image @click="isScan = !isScan"></image>
+        <view class="c-tip" v-if="isScan">很抱歉！获取不到二维码订单信息</view>
+        <view class="c-tip" v-else>很抱歉！获取不到验证码订单信息</view>
+        <view class="c-btn">返回</view>
+    </view>
+</template>
+
+<script>
+export default {
+
+    data(){
+        return {
+            isScan: false
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: #fff;
+    }
+    .null-container{
+        padding-top: 90upx;
+        >image{
+            display: block;
+            margin: 0 auto 86upx;
+            width: 420upx;
+            height: 420upx;
+            background-color: skyblue;
+        }
+        .c-tip{
+            margin-bottom: 260upx;
+            line-height: 40upx;
+            text-align: center;
+            font-size: 28upx;
+            color: #9c9c9f;
+        }
+        .c-btn{
+            margin: 0 auto;
+            width: 280upx;
+            text-align: center;
+            height: 92upx;
+            line-height: 88upx;
+            font-size: 32upx;
+            border: 2upx solid $themeColor;
+            color: $themeColor;
+            border-radius: 46upx;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/write_off/operate/operate.vue b/src/pages/write_off/operate/operate.vue
new file mode 100644
index 0000000..a8dcaf4
--- /dev/null
+++ b/src/pages/write_off/operate/operate.vue
@@ -0,0 +1,121 @@
+<template>
+    <view class="operate-container">
+        <view class="store-bar">
+            <text>当前门店</text>
+            <picker>
+                <view>
+                    <input />
+                    <image></image>
+                </view>
+            </picker>
+        </view>
+        <view class="c-scan-btn">
+            <image></image>
+        </view>
+        <view class="c-verification-code">
+            <view><input placeholder="输入订单验证码" /></view>
+            <view @click="confirmBtn">确认核销</view>
+        </view>
+    </view>
+</template>
+
+<script>
+import util from '../../../utils/util'
+export default {
+    methods: {
+        confirmBtn(){
+            let _timeSta = new Date().getTime();
+            if(_timeSta%3 == 0)return util.routeTo(`/pages/write_off/confirm_order/confirm_order`, 'nT');
+            if(_timeSta%2 < 1)return util.routeTo(`/pages/write_off/null/null`, 'nT');
+            return util.routeTo(`/pages/write_off/confirm_order/confirm_order`, 'nT');
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    page{
+        background-color: #f2f2f7;
+    }
+    .operate-container{
+        .store-bar{
+            margin-bottom: 24upx;
+            padding: 0 24upx;
+            height: 144upx;
+            background-color: #fff;
+            @include centerFlex(space-between);
+            >text{
+                margin-right: 20upx;
+                flex-shrink: 0;
+                font-size: 28upx;
+                color: #9C9C9F;
+            }
+            >picker{
+                flex-grow: 1;
+            }
+            view{
+                padding: 0 20upx;
+                height: 92upx;
+                border-radius: 10upx;
+                background: #f2f2f2;
+                @include centerFlex(space-between);
+                >input{
+                    flex-grow: 1;
+                    height: 100%;
+                    font-size: 28upx;
+                    color: #333;
+                }
+                >image{
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    width: 28upx;
+                    height: 28upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+        .c-scan-btn{
+            margin: 0 auto 24upx;
+            width: 702upx;
+            height: 360upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            @include centerFlex(center);
+            >image{
+                width: 172upx;
+                height: 172upx;
+                background-color: skyblue;
+            }
+        }
+        .c-verification-code{
+            padding: 40upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            >view{
+                &:first-child{
+                    margin-bottom: 30upx;
+                    padding: 0 20upx;
+                    height: 112upx;
+                    border-radius: 10upx;
+                    background-color: #f2f2f7;
+                    >input{
+                        height: 100%;
+                        width: 100%;
+                        font-size: 32upx;
+                        color: #1a1a1a;
+                    }
+                }
+                &+view{
+                    height: 112upx;
+                    text-align: center;
+                    line-height: 112upx;
+                    border-radius: 10upx;
+                    font-size: 32upx;
+                    color: #fff;
+                    background-color: $themeColor;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/write_off/search_result/search_result.vue b/src/pages/write_off/search_result/search_result.vue
new file mode 100644
index 0000000..eb1be25
--- /dev/null
+++ b/src/pages/write_off/search_result/search_result.vue
@@ -0,0 +1,188 @@
+<template>
+    <view class="search-result">
+        <view class="store-bar">
+            <text>当前门店</text>
+            <picker>
+                <view>
+                    <input />
+                    <image></image>
+                </view>
+            </picker>
+        </view>
+        <view class="r-timer-select">
+            <picker>
+                <view>
+                    <text>核销日期：2020-08-27</text>
+                    <image></image>
+                </view>
+            </picker>
+            <view>核销数量：30</view>
+        </view>
+        <view class="r-order-list">
+            <view class="l-item" v-for="i in 10" :key="i">
+                <view class="i-name">欧轩智能羽毛球馆(永泰店)</view>
+                <view class="i-lines">
+                    <view>
+                        <view>订单编号：20195175645666</view>
+                        <view>（租场）</view>
+                    </view>
+                    <view>
+                        <view>用户昵称：周大强</view>
+                    </view>
+                    <view>
+                        <view>核销码： 200801108978</view>
+                    </view>
+                    <view>
+                        <view>验证方式：扫码器验证(pad)</view>
+                    </view>
+                    <view>
+                        <view>核销时间：2021-05-17 11:12:58</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="r-bottom-btn"><view @click="toOperate">核销订单</view></view>
+    </view>
+</template>
+
+<script>
+import util from '../../../utils/util'
+export default {
+    methods: {
+        toOperate(){
+            util.routeTo(`/pages/write_off/operate/operate`, 'nT');
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: #f2f2f7;
+    }
+    .search-result{
+        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 */
+        .store-bar{
+            padding: 0 24upx;
+            height: 144upx;
+            background-color: #fff;
+            @include centerFlex(space-between);
+            >text{
+                margin-right: 20upx;
+                flex-shrink: 0;
+                font-size: 28upx;
+                color: #9C9C9F;
+            }
+            >picker{
+                flex-grow: 1;
+            }
+            view{
+                padding: 0 20upx;
+                height: 92upx;
+                border-radius: 10upx;
+                background: #f2f2f2;
+                @include centerFlex(space-between);
+                >input{
+                    flex-grow: 1;
+                    height: 100%;
+                    font-size: 28upx;
+                    color: #333;
+                }
+                >image{
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    width: 28upx;
+                    height: 28upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+        .r-timer-select{
+            padding: 0 24upx;
+            margin-bottom: 10upx;
+            @include centerFlex(space-between);
+            picker{
+                flex-shrink: 0;
+                view{
+                    padding: 24upx 0;
+                    >text{
+                        font-weight: 500;
+                        font-size: 32upx;
+                    }   
+                    >image{
+                        margin-left: 16upx;
+                        vertical-align: middle;
+                        width: 22upx;
+                        height: 22upx;
+                        background-color: skyblue;
+                    }
+                }
+            }
+            >view{
+                max-width: 40%;
+                text-align: right;
+                font-weight: 500;
+                font-size: 32upx;
+                @include textHide(1);
+            }
+        }
+        .r-order-list{
+            padding: 0 24upx;
+            .l-item{
+                margin-bottom: 24upx;
+                padding: 0 20upx;
+                border-radius: 10upx;
+                background-color: #fff;
+                .i-name{
+                    height: 100upx;
+                    line-height: 98upx;
+                    border-bottom: 2upx solid #D8D8D8;
+                    font-weight: 500;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                }
+                .i-lines{
+                    padding-top: 8upx;
+                    padding-bottom: 32upx;
+                    >view{
+                        display: flex;
+                        >view{
+                            min-width: 0;
+                            line-height: 52upx;
+                            font-size: 28upx;
+                            color: #9c9c9f;
+                            @include textHide(1);
+                            &+view{
+                                flex-shrink: 0;
+                                color: $themeColor;
+                            }
+                        }
+                        
+                    }
+                }
+            }
+        }
+        .r-bottom-btn{
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            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 */
+            background-color: #f2f2f7;
+            >view{
+                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