From 55a0b7510b73751d415a3350fd6a12b73972a9f4 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Tue, 25 Jun 2024 17:14:03 +0800
Subject: [PATCH] add timekeeping order style

---
 src/components/order_list/timing/site.vue          |   0
 src/pages.json                                     |   6 ++
 src/subpackage/order/components/kv_line.vue        |  27 ++++++
 .../order/components/order_list/filter_modal.vue   |  18 +++-
 .../order/components/order_list/header.vue         |  17 +++-
 .../order/components/order_list/period_modal.vue   |  14 ++-
 src/subpackage/order/js/api.js                     |   1 +
 .../order/pages/order_list/order_list.vue          |  18 ++--
 .../order/pages/order_manage/order_manage.vue      |   2 +-
 .../pages/timekeeping/modules/person_list_item.vue | 105 +++++++++++++++++++++
 .../order/pages/timekeeping/order_list.vue         |  88 +++++++++++++++++
 11 files changed, 283 insertions(+), 13 deletions(-)
 delete mode 100644 src/components/order_list/timing/site.vue
 create mode 100644 src/subpackage/order/components/kv_line.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
 create mode 100644 src/subpackage/order/pages/timekeeping/order_list.vue

diff --git a/src/components/order_list/timing/site.vue b/src/components/order_list/timing/site.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages.json b/src/pages.json
index 4e3ef45..32d8d2f 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -492,6 +492,12 @@
 					}
 				},
 				{
+					"path": "pages/timekeeping/order_list",
+					"style" : {
+						"navigationBarTitleText": "计时订单" 
+					}
+				},
+				{
 					"path": "pages/stored_value_card/detail/detail",
 					"style" : {
 						"navigationBarTitleText": "储值卡订单详情" 
diff --git a/src/subpackage/order/components/kv_line.vue b/src/subpackage/order/components/kv_line.vue
new file mode 100644
index 0000000..19b6a81
--- /dev/null
+++ b/src/subpackage/order/components/kv_line.vue
@@ -0,0 +1,27 @@
+<template>
+    <view class="kv-line">
+        <view class="kl-name"><slot name="key">key：</slot></view>
+        <view class="kl-val"><slot name="value">value</slot></view>
+        <slot name="right"></slot>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.kv-line{
+    @include ctf;
+    .kl-name{
+        flex-shrink: 0;
+        @include flcw(28upx, 48upx, #9C9C9F);
+    }
+    .kl-val{
+        @include flcw(28upx, 48upx, #1A1A1A);
+        @include tHide;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/components/order_list/filter_modal.vue b/src/subpackage/order/components/order_list/filter_modal.vue
index b11a8b7..7a85c34 100644
--- a/src/subpackage/order/components/order_list/filter_modal.vue
+++ b/src/subpackage/order/components/order_list/filter_modal.vue
@@ -1,6 +1,6 @@
 <template>
-    <view class="filter-modal">
-        <view class="fm-container">
+    <view class="filter-modal" v-show="visibled" @click="hide">
+        <view class="fm-container" @click.stop="_=>false">
             <view class="fc-title">标题</view>
             <view class="fc-list">
                 <view class="fl-item" v-for="i in 5" :key="i">8848</view>
@@ -11,7 +11,19 @@
 
 <script>
 export default {
-
+    data(){
+        return {
+            visibled: false
+        }
+    },
+    methods: {
+        show(){
+            this.visibled = true;
+        },
+        hide(){
+            this.visibled = false;
+        }
+    }
 }
 </script>
 
diff --git a/src/subpackage/order/components/order_list/header.vue b/src/subpackage/order/components/order_list/header.vue
index 4d7f21a..e4db694 100644
--- a/src/subpackage/order/components/order_list/header.vue
+++ b/src/subpackage/order/components/order_list/header.vue
@@ -1,14 +1,17 @@
 <template>
     <view class="order-list-header">
+        <!-- 门店选择 -->
         <stadium-select 
             ref="stadiumSelect" 
             :visibled="isStadium"
             @change:stadium="$emit('change:stadium', $event)"
         ></stadium-select>
+        <!-- 时间段 -->
         <view class="olh-period">
             <view class="op-txt" @click="$emit('click:time')">2020.08.01-2020.08.27</view>
             <view class="op-icon" @click="$emit('click:time')"></view>
         </view>
+        <!-- 交易明细&按钮 -->
         <view class="olh-bot">
             <view class="ob-desc">
                 <text>成功交易0笔，退款0笔</text>
@@ -18,14 +21,20 @@
                 <image @click="$emit('click:filter')" class="ob-icon" src="../../static/images/filter.png"></image>
             </view>
         </view>
+        <!-- 时间段选择弹窗 -->
+        <period-modal 
+            ref="periodModal"
+        ></period-modal>
     </view>
 </template>
 
 <script>
 import stadiumSelect from './stadium_select.vue';
+import periodModal from "./period_modal.vue";
 export default {
     components: {
-        'stadium-select': stadiumSelect
+        'stadium-select': stadiumSelect,
+        'period-modal': periodModal
     },
     data(){
         return {
@@ -36,6 +45,12 @@ export default {
         initStadiumSelect(brand_id){
             this.isStadium = !!brand_id;
             return this.$refs.stadiumSelect.getStadiumList(brand_id);
+        },
+        showPeriodModal(e){
+            this.$refs.periodModal.show(e);
+        },
+        periodConfirm(e){
+            console.log('periodConfirm:', e)
         }
     }
 }
diff --git a/src/subpackage/order/components/order_list/period_modal.vue b/src/subpackage/order/components/order_list/period_modal.vue
index 6741fd5..7033a2b 100644
--- a/src/subpackage/order/components/order_list/period_modal.vue
+++ b/src/subpackage/order/components/order_list/period_modal.vue
@@ -33,10 +33,19 @@ export default {
         return {
             star: '',
             end: '',
-            visibled: false
+            visibled: false,
+            initOption: {
+                // success,
+            }
         }
     },
     methods: {
+        init(e){
+            this.star = e.star;
+            this.end = e.end;
+            this.initOption = e;
+            this.show();
+        },
         show(){
             this.visibled = true;
         },
@@ -50,9 +59,10 @@ export default {
             this.end = e.detail.value;
         },
         confirmPeriod(){
-            let { star, end } = this;
+            let { star, end, initOption } = this;
             if(!star || !end)return showNone('请选择日期范围！');
             this.hide();
+            initOption?.success?.({ star, end });
             this.$emit('click:cofirm', { star, end });
         }
     }
diff --git a/src/subpackage/order/js/api.js b/src/subpackage/order/js/api.js
index 8d54b35..2d9cd59 100644
--- a/src/subpackage/order/js/api.js
+++ b/src/subpackage/order/js/api.js
@@ -38,6 +38,7 @@ export const ORDER_API = {
 
 	// 20240624 tid1553 计时订单拆分
 	stadiumList: `${ORIGIN}/admin/stadium/list`,  //  店铺列表
+	billingOrderList: `${ORIGIN}/admin/stadium/billing/order/list`,  // 计时订单列表
 }
 
 export default ORDER_API;
\ No newline at end of file
diff --git a/src/subpackage/order/pages/order_list/order_list.vue b/src/subpackage/order/pages/order_list/order_list.vue
index 4c85d1f..5478a41 100644
--- a/src/subpackage/order/pages/order_list/order_list.vue
+++ b/src/subpackage/order/pages/order_list/order_list.vue
@@ -4,12 +4,12 @@
             ref="orderListHeader"
             @change:stadium="changeStadium"
             @click:time="showPeriodModal"
+            @click:filter="showFilterModal"
         ></order-list-header>
         <period-modal 
             ref="periodModal"
-            @click:cofirm="periodConfirm"
         ></period-modal>
-        <filter-modal></filter-modal>
+        <filter-modal ref="filterModal"></filter-modal>
     </view>
 </template>
 
@@ -27,15 +27,21 @@ export default {
         let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id)
     },
     methods: {
+        showFilterModal(){
+            this.$refs.filterModal.show();
+        },
         changeStadium(e){
             console.log('changeStadium:', e)
         },
         showPeriodModal(){
-            this.$refs.periodModal.show();
+            this.$refs.periodModal.init({
+                star: '2020-08-01',
+                end: '2020-08-27',
+                success: res=>{
+                    console.log('success:', res)
+                }
+            });
         },
-        periodConfirm(e){
-            console.log('periodConfirm:', e)
-        }
     }
 }
 </script>
diff --git a/src/subpackage/order/pages/order_manage/order_manage.vue b/src/subpackage/order/pages/order_manage/order_manage.vue
index 1c32702..2e1c109 100644
--- a/src/subpackage/order/pages/order_manage/order_manage.vue
+++ b/src/subpackage/order/pages/order_manage/order_manage.vue
@@ -57,7 +57,7 @@ function getTabList(){
         tabArr: [
             { id: 1, name: '订场订单', key: 1, iconName: 'order_14', orderType: 3 },
             { id: 2, name: '次卡订单', key: 2, iconName: 'order_2', orderType: 3 },
-            // { id: 3, name: '计时订单', key: 3, iconName: 'order_6', orderType: 1 },
+            { id: 3, name: '计时订单', key: 3, iconName: 'order_6', orderType: 1 },
             { id: 4, name: '储值卡订单', key: 4, iconName: 'order_1', orderType: 21 },
             { id: 10, name: '年月卡订单', key: 19, iconName: 'order_19', orderType: 20 },
             { id: 5, name: '课程订单', key: 5, iconName: 'order_8', orderType: 12 },
diff --git a/src/subpackage/order/pages/timekeeping/modules/person_list_item.vue b/src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
new file mode 100644
index 0000000..8f043dd
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/modules/person_list_item.vue
@@ -0,0 +1,105 @@
+<template>
+    <view class="list-item">
+        <view class="li-content">
+            <view class="lc-stadium-status">
+                <view class="lss-stadium">欧轩智能场馆(永泰店)</view>
+                <view class="lss-status">计费中</view>
+            </view>
+            <view class="lc-info">
+                <kv-line>
+                    <template v-slot:key>订单编号：</template>
+                    <template v-slot:value>qp20200150150245569</template>
+                    <template v-slot:right>
+                        <image class="li-icon"></image>
+                    </template>
+                </kv-line>
+                <kv-line>
+                    <template v-slot:key>项目类型：</template>
+                    <template v-slot:value>人时（1号门闸）</template>
+                </kv-line>
+                <kv-line>
+                    <template v-slot:key>计费时长：</template>
+                    <template v-slot:value><text style="color: #009874;">1小时58分46秒</text></template>
+                </kv-line>
+                <kv-line>
+                    <template v-slot:key>创建时间：</template>
+                    <template v-slot:value>2019-08-17 18:02:58</template>
+                </kv-line>
+            </view>
+            <view class="lc-btns">
+                <view class="lb-item">结束计费</view>
+            </view>
+            <view class="lc-price">
+                <text class="lp-txt">支付金额</text>¥240
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import pLine from "../../../components/p_line/p_line.vue";
+import kvLine from "../../../components/kv_line.vue";
+export default {
+    components: {
+        'p-line': pLine,
+        'kv-line': kvLine
+    }
+}
+</script>
+
+<style lang="scss">
+    .li-content{
+        padding: 0 20upx 30upx;
+        border-radius: 10upx;
+        background: #fff;
+        .lc-stadium-status{
+            padding: 30upx 0 26upx;
+            border-bottom: 1px solid #D8D8D8;
+            @include ctf(space-between);
+            .lss-stadium{
+                @include flcw(28upx, 40upx, #1A1A1A, 500);
+                @include tHide;
+            }
+            .lss-status{
+                flex-shrink: 0;
+                margin-left: 12upx;
+                @include flcw(28upx, 40upx, #9A9A9D);
+            }
+        }
+        .lc-info{
+            padding-top: 12upx;
+            .li-icon{
+                margin-left: auto;
+                flex-shrink: 0;
+                width: 32upx;
+                height: 32upx;
+                background: skyblue;
+            }
+        }
+        .lc-btns{
+            margin-top: 8upx;
+            @include ctf(flex-end);
+            .lb-item{
+                width: 192upx;
+                height: 80upx;
+                text-align: center;
+                border-radius: 10upx;
+                border: 2upx solid $mColor;
+                @include flcw(32upx, 76upx, $mColor, 500);
+            }
+        }
+        
+        .lc-price{
+            margin-top: 30upx;
+            padding-top: 20upx;
+            text-align: right;
+            border-top: 1px solid #D8D8D8;
+            @include flcw(28upx, 40upx, #1A1A1A);
+            @include tHide;
+            .lp-txt{
+                margin-right: 6upx;
+                color: #9C9C9F;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/order/pages/timekeeping/order_list.vue b/src/subpackage/order/pages/timekeeping/order_list.vue
new file mode 100644
index 0000000..3cd6b7b
--- /dev/null
+++ b/src/subpackage/order/pages/timekeeping/order_list.vue
@@ -0,0 +1,88 @@
+<template>
+    <view class="timekeeping-order-list">
+        <order-list-header 
+            ref="orderListHeader"
+            @change:stadium="changeStadium"
+            @click:time="showPeriodModal"
+            @click:filter="showFilterModal"
+        ></order-list-header>
+        <view class="tol-list">
+            <view class="tl-item">
+                <person-list-item></person-list-item>
+            </view>
+        </view>
+        <!-- 时间段选择 -->
+        <period-modal 
+            ref="periodModal"
+        ></period-modal>
+        <!-- status窗口 -->
+        <filter-modal ref="filterModal"></filter-modal>
+    </view>
+</template>
+
+<script>
+import orderListHeader from "../../components/order_list/header.vue";
+import periodModal from "../../components/order_list/period_modal.vue";
+import filterModal from "../../components/order_list/filter_modal.vue";
+import personListItem from "./modules/person_list_item.vue";
+import { ORDER_API } from '../../js/api';
+import server from '../../js/server';
+import { showLoad, hideLoad } from '@/utils/util';
+export default {
+    components: {
+        'order-list-header': orderListHeader,
+        'period-modal': periodModal,
+        'filter-modal': filterModal,
+        'person-list-item': personListItem
+    },
+    async onLoad(options){
+        let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id)
+    },
+    methods: {
+        showFilterModal(){
+            this.$refs.filterModal.show();
+        },
+        changeStadium(e){
+            console.log('changeStadium:', e)
+        },
+        showPeriodModal(){
+            this.$refs.periodModal.init({
+                star: '2020-08-01',
+                end: '2020-08-27',
+                success: res=>{
+                    console.log('success:', res)
+                }
+            });
+        },
+        getOrderList({ 
+            brand_id = '', stadium_id = '', 
+            status = '', start = '', end = '', 
+            order_type = ''
+        }){
+            util.showLoad();
+            server.get({
+                url: ORDER_API.matchOrderSonList,
+                data: { brand_id, stadium_id, status, start, end, order_type },
+                failMsg: '加载失败！'
+            })
+            .then(res=>{
+                util.hideLoad();
+                let _list = res.list || [];
+                this.sonList = _list;
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .timekeeping-order-list{
+
+    }
+    .tol-list{
+        padding: 0 24upx;
+        .tl-item + .tl-item{
+            margin-top: 24upx;
+        }
+    }
+</style>
\ No newline at end of file