From 3096f37f777c633680ee63a5c4adeae76c49dd34 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Mon, 13 Sep 2021 18:04:47 +0800
Subject: [PATCH] add order model

---
 src/components/order_list/a_header/a_header.vue    |  41 +++--
 .../order_list/curriculum/curriculum.vue           |  29 +++-
 .../spectacular_monent/spectacular_monent.vue      |  48 +++++-
 src/pages.json                                     |  11 ++
 src/pages/order_list/order_list.vue                |  20 ++-
 .../order/pages/value_card/value_card.vue          | 170 +++++++++++++++++++++
 6 files changed, 290 insertions(+), 29 deletions(-)
 create mode 100644 src/subpackage/order/pages/value_card/value_card.vue

diff --git a/src/components/order_list/a_header/a_header.vue b/src/components/order_list/a_header/a_header.vue
index ff6efc7..911878c 100644
--- a/src/components/order_list/a_header/a_header.vue
+++ b/src/components/order_list/a_header/a_header.vue
@@ -1,7 +1,11 @@
 <template>
         <view class="header-container">
-            <view class="hc-view">欧轩智能羽毛球馆(永泰店)</view>
-            <view class="hc-view">使用中</view>
+            <view class="hc-bar">
+                <view class="hc-view">欧轩智能羽毛球馆(永泰店)</view>
+                <view class="hc-view">使用中</view>
+            </view>
+            <slot name="line"></slot>
+            <!-- <view class="hc-line" style="margin-top: 12upx;font-size: 24upx;line-height: 34upx;color: #9A9A9D;">下单时间：2021-07-01 15:25:25</view> -->
         </view>
         
 </template>
@@ -17,19 +21,28 @@ export default {
     .header-container{
         padding: 30upx 0;
         border-bottom: 2upx solid #D8D8D8;
-        @include centerFlex(space-between);
-        .hc-view{
-            font-size: 28upx;
-            line-height: 40upx;
-            &:first-child{
-                font-weight: 500;
-                color: #1a1a1a;
-            }
-            &+.hc-view{
-                flex-shrink: 0;
-                margin-left: 10upx;
-                color: $themeColor;
+        .hc-bar{
+            @include centerFlex(space-between);
+            .hc-view{
+                font-size: 28upx;
+                line-height: 40upx;
+                &:first-child{
+                    font-weight: 500;
+                    color: #1a1a1a;
+                }
+                &+.hc-view{
+                    flex-shrink: 0;
+                    margin-left: 10upx;
+                    color: $themeColor;
+                }
             }
+           
+        }
+        .hc-line{
+            margin-top: 12upx;
+            font-size: 24upx;
+            line-height: 34upx;
+            color: #9A9A9D;
         }
     }
 </style>
\ No newline at end of file
diff --git a/src/components/order_list/curriculum/curriculum.vue b/src/components/order_list/curriculum/curriculum.vue
index b1febde..f155c20 100644
--- a/src/components/order_list/curriculum/curriculum.vue
+++ b/src/components/order_list/curriculum/curriculum.vue
@@ -1,8 +1,15 @@
 <template>
     <view class="value-card-container">
-        <a-header></a-header>
+        <a-header>
+            <view slot="line" class="hc-line" style="margin-top: 12upx;font-size: 24upx;line-height: 34upx;color: #9A9A9D;">下单时间：2021-07-01 15:25:25</view>
+        </a-header>
         <view class="vcc-info">
-            <a-line></a-line>
+            <a-line :value="'kc20082208156894'">
+                <block slot="name">订单编号：</block> 
+            </a-line>
+        </view>
+        <view class="vcc-total">
+            <view class="vt-view"><text class="vv-text">支付金额：</text>￥24</view>
         </view>
     </view>
 </template>
@@ -22,10 +29,24 @@ export default {
     @import '~style/public.scss';
     .value-card-container{
         background-color: #fff;
-        padding: 0 20upx;
+        padding: 0 20upx 20upx;
         border-radius: 10upx;
         .vcc-info{
-            padding: 20upx 0;
+            padding-top: 20upx;
+        }
+    }
+    .vcc-total{
+        padding: 10upx 0;
+        @include centerFlex(flex-end);
+        .vt-view{
+            font-weight: 500;
+            font-size: 28upx;
+            color: #333;
+            @include textHide(1);
+            .vv-text{
+                font-weight: 400;
+                color: #9A9A9D;
+            }
         }
     }
 </style>
\ No newline at end of file
diff --git a/src/components/order_list/spectacular_monent/spectacular_monent.vue b/src/components/order_list/spectacular_monent/spectacular_monent.vue
index 852bda8..1fa009b 100644
--- a/src/components/order_list/spectacular_monent/spectacular_monent.vue
+++ b/src/components/order_list/spectacular_monent/spectacular_monent.vue
@@ -1,13 +1,55 @@
 <template>
-    <view>23</view>
+    <view class="value-card-container">
+        <a-header>
+            <view slot="line" class="hc-line" style="margin-top: 12upx;font-size: 24upx;line-height: 34upx;color: #9A9A9D;">购买时间：2021-07-01 15:25:25</view>
+        </a-header>
+        <view class="vcc-info">
+            <a-line :value="'kc20082208156894'">
+                <block slot="name">订单编号：</block> 
+            </a-line>
+            <a-line :value="'季畅想包'">
+                <block slot="name">类型：</block> 
+            </a-line>
+        </view>
+        <view class="vcc-total">
+            <view class="vt-view"><text class="vv-text">支付金额：</text>￥24</view>
+        </view>
+    </view>
 </template>
 
 <script>
+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';
+    .value-card-container{
+        background-color: #fff;
+        padding: 0 20upx 20upx;
+        border-radius: 10upx;
+        .vcc-info{
+            padding-top: 20upx;
+        }
+    }
+    .vcc-total{
+        padding: 10upx 0;
+        @include centerFlex(flex-end);
+        .vt-view{
+            font-weight: 500;
+            font-size: 28upx;
+            color: #333;
+            @include textHide(1);
+            .vv-text{
+                font-weight: 400;
+                color: #9A9A9D;
+            }
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 116db35..ebce81d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -385,6 +385,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/order",
+			"pages": [
+			  {
+					"path": "pages/value_card/value_card",
+					"style" : {
+						"navigationBarTitleText": "储值卡详情" 
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {
diff --git a/src/pages/order_list/order_list.vue b/src/pages/order_list/order_list.vue
index 3d0c7ea..d8d4387 100644
--- a/src/pages/order_list/order_list.vue
+++ b/src/pages/order_list/order_list.vue
@@ -48,13 +48,15 @@
                 <timing-order  :order-info="e" v-if="orderType == 1"></timing-order>
                 <organize-order  :order-info="e" v-if="orderType == 10" @refreshList="refreshList"></organize-order>
             </view>
-            <view class="ool-i">
+            <view class="ool-item">
                 <spectacular-monent></spectacular-monent>
             </view>
-            <view class="ool-i">
-            <value-card></value-card>
+            <view class="ool-item">
+                <value-card></value-card>
+            </view>
+            <view class="ool-item">
+                <curriculum></curriculum>
             </view>
-            
       </view>
       <!-- 分类tab -->
       <view class="ox-dark-mask" v-if="isShowClassify" @click="hideClassify">
@@ -105,11 +107,12 @@
     import reservation_order from '../../components/reservation_order/reservation_order';
     import integral_order from '../../components/integral_order/integral_order';
     import membership_order from '../../components/membership_order/membership_order';
-	import timing_order from '../../components/timing_order/timing_order.vue'
-	import organize_order from '../../components/organize_order/organize_order.vue'
+	import timing_order from '../../components/timing_order/timing_order.vue';
+	import organize_order from '../../components/organize_order/organize_order.vue';
     // 20210910 新增订单模块
-	import spectacular_monent from '../../components/order_list/spectacular_monent/spectacular_monent.vue'
-	import value_card from '../../components/order_list/value_card/value_card.vue'
+	import spectacular_monent from '../../components/order_list/spectacular_monent/spectacular_monent.vue';
+	import value_card from '../../components/order_list/value_card/value_card.vue';
+	import curriculum from '../../components/order_list/curriculum/curriculum.vue';
 
     import util from '../../utils/util';
     import { servers } from '../../js/server';
@@ -127,6 +130,7 @@
 			'organize-order': organize_order,
             'spectacular-monent': spectacular_monent,
             'value-card': value_card,
+            'curriculum': curriculum,
         },
         computed:{
             isStoreInfo(){
diff --git a/src/subpackage/order/pages/value_card/value_card.vue b/src/subpackage/order/pages/value_card/value_card.vue
new file mode 100644
index 0000000..c46adfd
--- /dev/null
+++ b/src/subpackage/order/pages/value_card/value_card.vue
@@ -0,0 +1,170 @@
+<template>
+    <view class="value-card-order-info">
+        <view class="i-box vc-header">
+            <view class="vh-name">
+                <view>欧轩智能场馆(羽毛球永泰店)</view>
+            </view>
+            <view class="vh-info">
+                <view class="vi-line">储值卡卡号：124646</view>
+                <view class="vi-line">手机号码：18316466456</view>
+                <view class="vi-line">储值卡余额：1000</view>
+            </view>
+            <view class="vh-btns">
+                <view>消费记录</view>
+                <view class="red">扣费</view>
+                <view class="orange">充值</view>
+            </view>
+        </view>
+        <view class="i-box vc-info">
+            <view class="vc-tit">储值卡信息</view>
+            <a-line :value="'yiming'">
+                <block slot="name">微信昵称：</block> 
+            </a-line>
+            <a-line :value="'白金储值卡'">
+                <block slot="name">储值卡名称：</block> 
+            </a-line>
+            <a-line :value="'个人卡（1/1 ）'">
+                <block slot="name">卡类型：</block> 
+            </a-line>
+            <a-line :value="'至2022.08.28'">
+                <block slot="name">有效期：</block> 
+            </a-line>
+        </view>
+
+        <view class="i-box vc-record">
+            <view class="vc-tit">购卡记录</view>
+            <view class="vr-tit">升级  2020-05-23  13:25</view>
+            <a-line :value="'黄金储值卡'">
+                <block slot="name">名称：</block> 
+            </a-line>
+            <a-line :value="'1000元'">
+                <block slot="name">面值：</block> 
+            </a-line>
+            <a-line :value="'￥1999'">
+                <block slot="name">售价：</block> 
+            </a-line>
+            <a-line :value="'￥1000'">
+                <block slot="name">支付金额：</block> 
+            </a-line>
+            <a-line :value="'￥10（30天内有效）'">
+                <block slot="name">赠送金额：</block> 
+            </a-line>
+            <a-line :value="'小程序'">
+                <block slot="name">途径：</block> 
+            </a-line>
+
+            <view class="vr-border"></view>
+            
+            <view class="vr-tit">升级  2020-05-23  13:25</view>
+            <a-line :value="'黄金储值卡'">
+                <block slot="name">名称：</block> 
+            </a-line>
+            <a-line :value="'1000元'">
+                <block slot="name">面值：</block> 
+            </a-line>
+            <a-line :value="'￥1999'">
+                <block slot="name">售价：</block> 
+            </a-line>
+            <a-line :value="'￥1000'">
+                <block slot="name">支付金额：</block> 
+            </a-line>
+            <a-line :value="'￥10（30天内有效）'">
+                <block slot="name">赠送金额：</block> 
+            </a-line>
+            <a-line :value="'小程序'">
+                <block slot="name">途径：</block> 
+            </a-line>
+        </view>
+    </view>
+</template>
+
+<script>
+import a_line from '../../../../components/order_list/a_line/a_line.vue';
+export default {
+    components: {
+        'a-line': a_line,
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .value-card-order-info{
+        padding: 24upx;
+        >.i-box{
+            position: relative;
+            margin: 0 auto 24upx;
+            padding: 30upx;
+            border-radius: 10upx;
+            background-color: #fff;
+        }
+        .vc-tit{
+            margin-bottom: 20upx;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #9C9C9F;
+        }
+        .vc-header{
+            .vh-name{
+                padding-bottom: 26upx;
+                border-bottom: 2upx solid #D8D8D8;
+                >view{
+                    line-height: 40upx;
+                    font-weight: 500;
+                    font-size: 28upx;
+                    color: #333;
+                    @include textHide(1);
+                }
+                
+            }
+            .vh-info{
+                padding: 20upx 0 30upx;
+                .vi-line{
+                    line-height: 48upx;
+                    font-size: 28upx;
+                    color: #1a1a1a;
+                    @include textHide(1);
+                }
+            }
+            .vh-btns{
+                @include centerFlex(center);
+                >view{
+                    margin: 0 30upx;
+                    width: 176upx;
+                    height: 80upx;
+                    border: 2upx solid #9A9A9D;
+                    border-radius: 10upx;
+                    text-align: center;
+                    line-height: 76upx;
+                    font-size: 32upx;
+                    color: #9a9a9d;
+                    &.red{
+                        color: #EA5061;
+                        border-color: #EA5061;
+                    }
+                    &.orange{
+                        color: #FF873D;
+                        border-color: #FF873D;
+                    }
+                }
+            }
+        }
+        .vc-info{
+            margin-bottom: 24upx;
+        }
+        .vc-record{
+            .vr-tit{
+                line-height: 52upx;
+                font-weight: 500;
+                font-size: 28upx;
+                color: #1a1a1a;
+            }
+            .vr-border{
+                margin: 30upx 0;
+                height: 2upx;
+                background-color: #D8D8D8;
+            }
+        }
+    }   
+    
+</style>
\ No newline at end of file