From b5c0deff4c70c72dad1c4296370a9480e9f4a562 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Wed, 29 Sep 2021 18:00:32 +0800
Subject: [PATCH] add order

---
 src/components/order_list/locker/locker.vue        |  71 ++++++
 src/pages.json                                     |   8 +-
 src/pages/order_list/order_list.vue                |   8 +
 .../order/pages/events/member_info/member_info.vue |  25 ++
 .../order/pages/locker/detail/detail.vue           | 270 +++++++++++++++++++++
 5 files changed, 381 insertions(+), 1 deletion(-)
 create mode 100644 src/components/order_list/locker/locker.vue
 create mode 100644 src/subpackage/order/pages/locker/detail/detail.vue

diff --git a/src/components/order_list/locker/locker.vue b/src/components/order_list/locker/locker.vue
new file mode 100644
index 0000000..8dd24bb
--- /dev/null
+++ b/src/components/order_list/locker/locker.vue
@@ -0,0 +1,71 @@
+<template>
+    <view class="locker-container">
+        <a-header :source="'地址'" :status="'状态'">
+            <view slot="line" class="lc-line">
+                <image class="ll-img" mode="aspectFit" src="/static/images/icon/location.png"></image>
+                <view class="ll-view">储物柜-B柜</view>
+            </view> 
+        </a-header>
+        
+        <view class="lc-info">
+            <a-line :value="'sc20 0822 0815 6894'">
+                <block slot="name">订单编号：</block> 
+            </a-line>
+            <a-line :value="'1小时58分46秒'">
+                <block slot="name">寄存时长：</block> 
+            </a-line>
+            <view class="li-total"><text class="lt-txt">合计支付：</text>¥6</view>
+        </view>
+
+    </view>
+</template>
+
+<script>
+import util from '../../../utils/util';
+import a_header from '../a_header/a_header.vue';
+import a_line from '../a_line/a_line.vue';
+export default {
+    components: {
+        'a-header': a_header,
+        'a-line': a_line,
+    },
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .locker-container{
+        background-color: #fff;
+        padding: 0 20upx 20upx;
+        border-radius: 10upx;
+    }
+    .lc-info{
+        padding-top: 20upx;
+        .li-total{
+            text-align: right;
+            line-height: 40upx;
+            font-weight: 500;
+            font-size: 28upx;
+            color: #333;
+            @include textHide(1);
+            .lt-txt{
+                font-weight: 400;
+            }
+        }
+    }
+    .lc-line{
+        margin-top: 10upx;
+        @include centerFlex(flex-start);
+        .ll-img{
+            flex-shrink: 0;
+            margin-right: 12upx;
+            height: 28upx;
+            width: 28upx;
+        }
+        .ll-view{
+            font-size: 24upx;
+            line-height: 34upx;
+            color: #9A9A9D;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 88af8ec..a5ca615 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -390,6 +390,12 @@
 			"root": "subpackage/order",
 			"pages": [
 				{
+					"path": "pages/locker/detail/detail",
+					"style" : {
+						"navigationBarTitleText": "储物柜订单详情" 
+					}
+				},
+				{
 					"path": "pages/events/member_info/member_info",
 					"style" : {
 						"navigationBarTitleText": "查看成员" 
@@ -404,7 +410,7 @@
 				{
 					"path": "pages/events/detail/detail",
 					"style" : {
-						"navigationBarTitleText": "赛事订单列表" 
+						"navigationBarTitleText": "赛事订单详情" 
 					}
 				},
 				{
diff --git a/src/pages/order_list/order_list.vue b/src/pages/order_list/order_list.vue
index 3a678d0..8b5fe85 100644
--- a/src/pages/order_list/order_list.vue
+++ b/src/pages/order_list/order_list.vue
@@ -52,10 +52,16 @@
                 <integral-order :order-info="e" v-if="orderType == 5"></integral-order>
                 <timing-order  :order-info="e" v-if="orderType == 1"></timing-order>
                 <organize-order  :order-info="e" v-if="orderType == 10" @refreshList="refreshList"></organize-order>
+
                 <curriculum :order-info="e" v-if="orderType == 12"></curriculum>
                 <value-card :order-info="e" v-if="orderType == 18"></value-card>
                 <spectacular-monent :order-info="e" v-if="orderType == 15"></spectacular-monent>
                 <club-rental :order-info="e" v-if="orderType == 16"></club-rental>
+
+                
+            </view>
+            <view class="ool-item">
+                <locker></locker>
             </view>
             <!-- <view class="ool-item">
                 <spectacular-monent></spectacular-monent>
@@ -120,6 +126,7 @@
 	import curriculum from '../../components/order_list/curriculum/curriculum.vue';
 	import spectacular_monent from '../../components/order_list/spectacular_monent/spectacular_monent.vue';
 	import club_rental from '../../components/order_list/club_rental/club_rental.vue';
+	import locker from '../../components/order_list/locker/locker.vue';
 
     import util from '../../utils/util';
     import { servers } from '../../js/server';
@@ -139,6 +146,7 @@
             'value-card': value_card,
             'curriculum': curriculum,
             'club-rental': club_rental,
+            'locker': locker,
         },
         computed:{
             isStoreInfo(){
diff --git a/src/subpackage/order/pages/events/member_info/member_info.vue b/src/subpackage/order/pages/events/member_info/member_info.vue
index 18699f2..07ae0af 100644
--- a/src/subpackage/order/pages/events/member_info/member_info.vue
+++ b/src/subpackage/order/pages/events/member_info/member_info.vue
@@ -1,5 +1,6 @@
 <template>
     <view class="menber-info">
+        <view class="mi-name ed-box">成员姓名：周校学</view>
         <view class="ed-type-box">
             <view class="ed-tit">保险信息</view>
             <a-line :value="'阿拉斯加山脉'">
@@ -55,14 +56,38 @@ export default {
 
 <style lang="scss">
     @import '~style/public.scss';
+    .mi-name{   
+        line-height: 44upx;
+        font-size: 32upx;
+        font-weight: 500;
+        color: #1a1a1a;
+    }
     .ed-box{
         margin-bottom: 24upx;
         padding: 30upx;
         background-color: #fff;
     }
+    .ed-tit{
+        margin-bottom: 20upx;
+        font-size: 32upx;
+        line-height: 44upx;
+        color: #1a1a1a;
+    }
     .ed-type-box{
         padding: 30upx;
         margin-bottom: 2upx;
         background-color: #fff;
     }
+    .ed-img-list{
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        image{
+            margin-right: 30upx;
+            margin-bottom: 30upx;
+            width: 180upx;
+            height: 180upx;
+            background-color: skyblue;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/locker/detail/detail.vue b/src/subpackage/order/pages/locker/detail/detail.vue
new file mode 100644
index 0000000..8acf786
--- /dev/null
+++ b/src/subpackage/order/pages/locker/detail/detail.vue
@@ -0,0 +1,270 @@
+<template>
+    <view class="locker-order-info">
+        <o-header></o-header>
+        <view class="loi-box">
+            <view class="lb-tit">租用详情</view>
+            <a-line :value="'欧轩智能储物柜'">
+                <block slot="name">设备名称：</block> 
+            </a-line>
+            <a-line :value="'7号柜'">
+                <block slot="name">柜子编号：</block> 
+            </a-line>
+            <a-line :value="'2020-01-10 15:02:24 '">
+                <block slot="name">租借时间：</block> 
+            </a-line>
+            <a-line :value="'2020-01-10 17:37:33'">
+                <block slot="name">归还时间：</block> 
+            </a-line>
+            <a-line :value="'2小时35分9秒'" value-color="#019874">
+                <block slot="name">租借时长：</block> 
+            </a-line>
+        </view>
+        <view class="loi-box">
+            <view class="lb-tit">费用详情</view>
+            <view class="lb-section">
+                <view class="ls-header">
+                    <view class="over-time"><text>超时时长：</text>1小时35分9秒 </view>
+                    <view class="over-price">缴欠费金额：<text>￥4</text> （超时费用计算标准：1元/小时）</view>
+                </view>
+                <view class="lb-price">
+                    <s-line :keyname="'商品金额小计'" :value="'¥6'"></s-line>
+                    <s-line :keyname="'金额折扣'" :value="'¥6'"></s-line>
+                    <s-line :keyname="'积分抵扣'" :value="'¥6'"></s-line>
+                    <s-line :keyname="'优惠券优惠'" :value="'¥6'"></s-line>
+                    <view class="lp-total"><text>合计支付：</text>￥5</view>
+                </view>
+                <view class="lb-line"></view>
+                
+                <view class="lb-pay-info">
+                    <p-line :keyname="'下单时间'" :value="'2020-08-22   10:30:40'" isbtn></p-line>
+                    <p-line :keyname="'订单编号'" :value="'sc20 0822 0815 6894'"></p-line>
+                    <p-line :keyname="'支付方式'" :value="'会员卡支付'"></p-line>
+                    <p-line :keyname="'交易流水号'" :value="'202009181255364564612622'"></p-line>
+                </view>
+            </view>
+            <view class="lb-section">
+                <view class="ls-header">
+                    <view class="prestore-line">
+                        <view>预寄存时长：1小时</view>
+                        <view>预寄存时长数量：2</view>
+                    </view>
+                    <view class="prestore-line">
+                        <view>收费标准：2元/小时  </view>
+                        <view>合计预寄存时长：2小时  </view>
+                    </view>
+                </view>
+                <view class="lb-price">
+                    <s-line :keyname="'商品金额小计'" :value="'¥6'"></s-line>
+                    <s-line :keyname="'金额折扣'" :value="'¥6'"></s-line>
+                    <s-line :keyname="'积分抵扣'" :value="'¥6'"></s-line>
+                    <s-line :keyname="'优惠券优惠'" :value="'¥6'"></s-line>
+                    <view class="lp-total"><text>合计支付：</text>￥5</view>
+                </view>
+                <view class="lb-line"></view>
+                
+                <view class="lb-pay-info">
+                    <p-line :keyname="'下单时间'" :value="'2020-08-22   10:30:40'" ></p-line>
+                    <p-line :keyname="'订单编号'" :value="'sc20 0822 0815 6894'" isbtn></p-line>
+                    <p-line :keyname="'支付方式'" :value="'会员卡支付'"></p-line>
+                    <p-line :keyname="'交易流水号'" :value="'202009181255364564612622'"></p-line>
+                </view>
+            </view>
+        </view>
+        <view class="loi-btn">结束计费</view>
+        <view class="loi-mask">
+            <view class="lm-content">
+                <view class="lc-tit">结束计费</view>
+                <view class="lc-info">
+                    <a-line :value="'张贺语'">
+                        <block slot="name">操作人：</block> 
+                    </a-line>
+                    <a-line :value="'1小时25分9秒'" value-color="#019874">
+                        <block slot="name">时长合计：</block> 
+                    </a-line>
+                    <a-line :value="'¥100.2'" value-color="#ff873e">
+                        <block slot="name">金额合计：</block> 
+                    </a-line>
+                </view>
+                <view class="lc-ipt">
+                    <view class="li-txt"><text>*</text>请输入金额</view>
+                    <view class="li-frame"><input /></view>
+                </view>
+                <view class="lc-btn">确认</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import header from '../../../components/header/header.vue';
+import a_line from '../../../../../components/order_list/a_line/a_line.vue';
+import s_line from '../../../components/s_line/s_line.vue';
+import p_line from '../../../components/p_line/p_line.vue';
+export default {
+    components: {
+        'o-header': header,
+        'a-line': a_line,
+        's-line': s_line,
+        'p-line': p_line,
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .locker-order-info{
+        padding-bottom: 0upx;
+        padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .loi-box{
+        margin-bottom: 24upx;
+        padding: 30upx;
+        background-color: #fff;
+    }
+    .lb-tit{
+        margin-bottom: 18upx;
+        font-size: 32upx;
+        line-height: 44upx;
+        color: #333;
+    }
+    .lb-section{
+        margin-bottom: 24upx;
+        background-color: #f6f6f6;
+        border-radius: 10upx;
+        .ls-header{
+            padding: 40upx 30upx;   
+            border-radius: 10upx;
+            background-color: #f1f1f1;
+            .over-time{
+                margin-bottom: 12upx;
+                font-size: 28upx;
+                line-height: 40upx;
+                color: #e6081a;
+                @include textHide(1);
+                >text{
+                    color: #333333;
+                }
+            }
+            .over-price{
+                line-height: 40upx;
+                font-size: 28upx;
+                color: #333;
+                >text{
+                    color: #fe873d;
+                }
+            }
+            .prestore-line{
+                margin-bottom: 12upx;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                >view{
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    line-height: 40upx;
+                    width: 50%;
+                    font-size: 28upx;
+                    color: #333333;
+                }
+            }
+            
+        }
+        .lb-price{
+            padding: 44upx 30upx 0;
+            .lp-total{
+                text-align: right;
+                font-size: 28upx;
+                font-weight: 500;
+                color: #ff873d;
+                @include textHide(1);
+                >text{
+                    font-weight: 400;
+                    color: #333;
+                }
+            }
+        }
+        .lb-line{
+            margin: 20upx 0 0;
+            height: 0;
+            border-top: 2upx dashed #fff;
+        }
+        .lb-pay-info{
+            padding: 40upx 30upx;
+            
+        }
+    }
+    .loi-btn{
+        margin: 0 auto;
+        width: 702upx;
+        text-align: center;
+        line-height: 112upx;
+        border-radius: 10upx;
+        font-size: 32upx;
+        background-color: $themeColor;
+        color: #fff;
+    }
+    .loi-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba($color: #000000, $alpha: .5);
+        .lm-content{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            padding: 80upx;
+            width: 620upx;
+            background-color: #fff;
+            border-radius: 10upx;
+            .lc-tit{
+                margin-bottom: 34upx;
+                text-align: center;
+                line-height: 44upx;
+                font-size: 32upx;
+                font-weight: 500;
+                color: #333;
+            }
+            .lc-info{
+                margin-bottom: 34upx;
+            }
+            .lc-ipt{
+                margin-bottom: 60upx;
+                .li-txt{
+                    margin-bottom: 8upx;
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #333;
+                    >text{
+                        color: #EA5061;
+                    }
+                }
+                .li-frame{
+                    padding: 0 20upx;
+                    height: 88upx;
+                    border-radius: 10upx;
+                    border: 2upx solid #D8D8D8;
+                    >input{
+                        width: 100%;
+                        height: 100%;
+                        font-size: 28upx;
+                        color: #333;
+                    }
+                }
+            }
+            .lc-btn{
+                margin: 0 auto;
+                width: 240upx;
+                line-height: 88upx;
+                text-align: center;
+                border-radius: 10upx;
+                color: #fff;
+                background-color: $themeColor;
+                font-size: 32upx;
+            }
+        }
+    }
+</style>
\ No newline at end of file