add tid1553 logic

src/pages.json

@@ -498,6 +498,18 @@
 					}
 				},
 				{
+					"path": "pages/timekeeping/order_detail/site",
+					"style" : {
+						"navigationBarTitleText": "场地计时订单详情" 
+					}
+				},
+				{
+					"path": "pages/timekeeping/order_detail/deposit",
+					"style" : {
+						"navigationBarTitleText": "场地计时订单详情" 
+					}
+				},
+				{
 					"path": "pages/stored_value_card/detail/detail",
 					"style" : {
 						"navigationBarTitleText": "储值卡订单详情" 

src/subpackage/order/components/order_list/filter_modal.vue

@@ -1,9 +1,15 @@
 <template>
     <view class="filter-modal" v-show="visibled" @click="hide">
         <view class="fm-container" @click.stop="_=>false">
-            <view class="fc-title">标题</view>
+            <view class="fc-title">{{ title }}</view>
             <view class="fc-list">
-                <view class="fl-item" v-for="i in 5" :key="i">8848</view>
+                <view 
+                    class="fl-item" 
+                    :class="{ active: curStatus === e.status }"
+                    v-for="(e, i) in list" 
+                    :key="i"
+                    @click="itemClick(e)"
+                >{{ e.name }}</view>
             </view>
         </view>
     </view>
@@ -13,7 +19,13 @@
 export default {
     data(){
         return {
-            visibled: false
+            visibled: false,
+            title: '',
+            list: [],
+            curStatus: '',
+            initOption: {
+                // success,
+            }
         }
     },
     methods: {
@@ -22,6 +34,17 @@ export default {
         },
         hide(){
             this.visibled = false;
+        },
+        init(e){
+            this.title = e.title;
+            this.list = e.list;
+            this.curStatus = e.curStatus;
+            this.initOption = e;
+            this.show();
+        },
+        itemClick(e){
+            this.initOption?.success?.(e);
+            this.hide();
         }
     }
 }

src/subpackage/order/components/order_list/header.vue

@@ -8,13 +8,13 @@
         ></stadium-select>
         <!-- 时间段 -->
         <view class="olh-period">
-            <view class="op-txt" @click="$emit('click:time')">2020.08.01-2020.08.27</view>
+            <view class="op-txt" @click="$emit('click:time')">{{ startTime || '' }} ~ {{ endTime || '' }}</view>
             <view class="op-icon" @click="$emit('click:time')"></view>
         </view>
         <!-- 交易明细&按钮 -->
         <view class="olh-bot">
             <view class="ob-desc">
-                <text>成功交易0笔，退款0笔</text>
+                <text>成功交易{{ successCount || 0 }}笔，退款{{ refundCount || 0 }}笔</text>
             </view>
             <view class="ob-btns">
                 <image class="ob-icon" src="../../static/images/search.png"></image>
@@ -36,6 +36,12 @@ export default {
         'stadium-select': stadiumSelect,
         'period-modal': periodModal
     },
+    props: {
+        startTime: String,
+        endTime: String,
+        successCount: Number,
+        refundCount: Number,
+    },
     data(){
         return {
             isStadium: false

src/subpackage/order/components/order_list/period_modal.vue

@@ -2,16 +2,16 @@
     <view class="period-modal" v-show="visibled" @click="hide">
         <view class="pm-period" @click.stop="()=>false">
               <view class="pp-tit">日期范围</view>
-              <picker class="pp-picker" mode="date" @change="startTimeChange">
+              <picker class="pp-picker" mode="date" @change="startTimeChange" :value="start">
                   <view class="pp-time">
                       <text class="pt-txt">开始时间</text>
                       <view class="pt-right">
-                          <input class="pr-ipt" placeholder="选择时间" disabled :value="star" />
+                          <input class="pr-ipt" placeholder="选择时间" disabled :value="start" />
                           <image class="pr-img" mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
                       </view>
                   </view>
               </picker>
-              <picker class="pp-picker" mode="date" @change="endTimeChange">
+              <picker class="pp-picker" mode="date" @change="endTimeChange" :value="end">
                   <view class="pp-time">
                       <text class="pt-txt">截止时间</text>
                       <view class="pt-right">
@@ -31,7 +31,7 @@ export default {
     
     data(){
         return {
-            star: '',
+            start: '',
             end: '',
             visibled: false,
             initOption: {
@@ -41,7 +41,7 @@ export default {
     },
     methods: {
         init(e){
-            this.star = e.star;
+            this.start = e.start;
             this.end = e.end;
             this.initOption = e;
             this.show();
@@ -53,17 +53,24 @@ export default {
             this.visibled = false;
         },
         startTimeChange(e){
-            this.star = e.detail.value;
+            this.start = e.detail.value;
         },
         endTimeChange(e){
             this.end = e.detail.value;
         },
         confirmPeriod(){
-            let { star, end, initOption } = this;
-            if(!star || !end)return showNone('请选择日期范围！');
+            let { start, end, initOption } = this;
+            
+            if(!start || !end)return showNone('请选择日期范围！');
+
+            if(
+                new Date(start.replace(/\-/g,'/')).getTime() 
+                > new Date(end.replace(/\-/g,'/')).getTime()
+            )return showNone('请选择合理时间！');
+
             this.hide();
-            initOption?.success?.({ star, end });
-            this.$emit('click:cofirm', { star, end });
+            initOption?.success?.({ start, end });
+            this.$emit('click:cofirm', { start, end });
         }
     }
 }

src/subpackage/order/pages/timekeeping/modules/order_detail/bottom_fixed.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="bottom-fixed">
-        <view class="bf-placeholder"></view>
+        <view class="bf-placeholder" :style="'height:' + placeholderHeight +'px;'"></view>
         <view class="bf-content">
             <view class="bc-btns">
                 <slot></slot>
@@ -11,14 +11,27 @@
 
 <script>
 export default {
+    data(){
+        return {
+            placeholderHeight: 0,
+        }
+    },
     created(){
-        console.log('bottom_fixed')
+        let query = uni.createSelectorQuery().in(this);
+        query.select('.bf-content')
+        .fields(
+            { size:true },
+            data => {
+                this.placeholderHeight = data.height;
+            }
+        );
+        query.exec()
     }
 }
 </script>
 
 <style lang="scss">
-.bottom-fixed{
+.bf-content{
     position: fixed;
     bottom: 0;
     left: 0;

src/subpackage/order/pages/timekeeping/modules/order_detail/fixed_button.vue

@@ -0,0 +1,23 @@
+<template>
+    <view class="fixed-button">
+        <slot>click</slot>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.fixed-button{
+    padding: 0 32upx;
+    display: inline-block;
+    min-width: 192upx;
+    text-align: center;
+    border-radius: 10upx;
+    background: #fff;
+    @include flcw(32upx, 88upx, $mColor, 500);
+}
+</style>

src/subpackage/order/pages/timekeeping/modules/order_list/item_temp.vue

@@ -1,12 +1,15 @@
 <template>
     <view class="list-item-temp">
         <view class="lit-stadium-status">
-            <view class="lss-stadium">欧轩智能场馆(永泰店)</view>
-            <view class="lss-status">计费中</view>
+            <view class="lss-stadium">{{ stadium_name || '' }}</view>
+            <view 
+                class="lss-status"
+                :class="{ active: statusActive }"
+            >{{ status }}</view>
         </view>
         <slot name="default">content</slot>
-        <view class="lit-price">
-            <text class="lp-txt">支付金额</text>¥240
+        <view class="lit-price" v-if="priceShow">
+            <text class="lp-txt">支付金额</text>¥{{ price || 0 }}
         </view>
         <slot name="bottom"></slot>
     </view>
@@ -14,6 +17,13 @@
 
 <script>
 export default {
+    props: {
+        stadium: String,
+        status: String,
+        price: String,
+        statusActive: Boolean,
+        priceShow: Boolean
+    },
     data(){
         return{ }
     }
@@ -37,6 +47,9 @@ export default {
                 flex-shrink: 0;
                 margin-left: 12upx;
                 @include flcw(28upx, 40upx, #9A9A9D);
+                &.active{
+                    color: $mColor;
+                }
             }
         }
         .lit-price{

src/subpackage/order/pages/timekeeping/modules/order_list/person.vue

@@ -1,25 +1,27 @@
 <template>
-    <list-item-temp>
+    <list-item-temp
+        :stadium="order.stadium_name || ''"
+        :status="order.status_text || ''"
+        :price="order.pay_amount || ''"
+        :status-active="['待支付', '计费中'].includes(order.status_text)"
+        :price-show="['待支付', '已完成', '已退款'].includes(order.status_text)"
+    >
         <template v-slot:default>
             <view class="lc-info">
                 <kv-line label="订单编号：">
-                    <template v-slot:default>qp20200150150245569</template>
+                    <template v-slot:default>{{ order.order_no || '' }}</template>
                     <template v-slot:right>
-                        <image class="li-icon"></image>
+                        <image class="li-icon" src="../../../../static/images/arrow.png"></image>
                     </template>
                 </kv-line>
-                <kv-line label="项目类型：">
-                    人时（1号门闸）
-                </kv-line>
+                <kv-line label="项目类型：">人时（{{ order.project_type_name || '-' }}）</kv-line>
                 <kv-line label="计费时长：">
-                    <text style="color: #009874;">1小时58分46秒</text>
-                </kv-line>
-                <kv-line label="创建时间：">
-                    2019-08-17 18:02:58
+                    <text :style="order.status_text === '计费中' ? 'color: #009874;' : ''">{{ (order.extension&&order.extension.duration) || '' }}</text>
                 </kv-line>
+                <kv-line label="创建时间：">{{ order.created_at || '' }}</kv-line>
             </view>
         </template>
-        <template v-slot:bottom>
+        <template v-slot:bottom v-if="order.status_text === '计费中'">
             <view class="lc-btns">
                 <view class="lb-item">结束计费</view>
             </view>
@@ -31,6 +33,12 @@
 import kvLine from "../../../../components/kv_line.vue";
 import listItemTemp from "./item_temp.vue";
 export default {
+    props: {
+        order: {
+            type: Object,
+            default: () => ({})
+        }
+    },
     components: {
         'kv-line': kvLine,
         'list-item-temp': listItemTemp
@@ -46,7 +54,6 @@ export default {
             flex-shrink: 0;
             width: 32upx;
             height: 32upx;
-            background: skyblue;
         }
     }
 

src/subpackage/order/pages/timekeeping/order_detail/deposit.vue

@@ -0,0 +1,120 @@
+<template>
+    <view class="deposit-order-detail">
+        <header-temp>
+            <kv-line label="订单编号：">
+                <template v-slot:default>qp20200150150245569qp20200150150245569qp20200150150245569</template>
+                <template v-slot:right>
+                    <text class="dod-status">已完成</text>
+                </template>
+            </kv-line>
+            <kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
+            <kv-line label="手机号码：">18316553478</kv-line>
+            <kv-line label="用户昵称：">i术生</kv-line>
+            <kv-line label="订单来源：">占用分享(张三)</kv-line>
+            <kv-line label="订单备注：">订单备注</kv-line>
+        </header-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="场地计时信息">
+            <kv-line label="项目类型：">茶室(1号茶室)</kv-line>
+            <kv-line label="进场时间：">2020-01-10 15:02:24</kv-line>
+            <kv-line label="离场时间：">现场扫码结算</kv-line>
+            <kv-line label="时长合计：">00小时00分00秒</kv-line>
+
+            <view class="od-pay-info">
+                <kvs-line label="金额小计">¥10.5</kvs-line>
+                <kvs-line label="折扣金额">-¥0</kvs-line>
+                <kvs-line label="积分抵扣">-¥0</kvs-line>
+                <kvs-line label="优惠券优惠">-¥1</kvs-line>
+            </view>
+            <view class="od-total">
+                <text class="ot-name">合计支付：</text>￥9.5
+            </view>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="关联押金订单">
+            <kv-line label="押金订单号：">
+                <template v-slot:default>qp20200150150245569</template>
+                <template v-slot:right>
+                    <text class="od-check">查看押金订单</text>
+                </template>
+            </kv-line>
+            <kv-line label="押金金额：">￥50</kv-line>
+            <kv-line label="订单状态：">已退款</kv-line>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="支付信息">
+            <kv-line label="支付方式：">微信支付</kv-line>
+            <kv-line label="支付时间：">2019-05-17 11:12:58</kv-line>
+            <kv-line label="交易流水：">4200225665566566565455</kv-line>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="退款信息2">
+            <kv-line label="退款金额：">￥998</kv-line>
+            <kv-line label="退款单号：">TF-20195171564566</kv-line>
+            <kv-line label="退款时间：">2019-05-17 11:12:58</kv-line>
+            <kv-line label="退款原因：">商家主动退款</kv-line>
+        </info-temp>
+
+        <bottom-fixed>
+            <fixed-button>退款</fixed-button>
+        </bottom-fixed>
+    </view>
+</template>
+
+<script>
+import headerTemp from "../modules/order_detail/header_temp.vue";
+import infoTemp from "../modules/order_detail/info_temp.vue";
+import kvLine from "../../../components/kv_line.vue";
+import kvsLine from "../../../components/kvs_line.vue";
+import bottomFixed from "../modules/order_detail/bottom_fixed.vue";
+import fixedButton from "../modules/order_detail/fixed_button.vue";
+export default {
+    components: {
+        'header-temp': headerTemp,
+        'info-temp': infoTemp,
+        'kv-line': kvLine,
+        'kvs-line': kvsLine,
+        'bottom-fixed': bottomFixed,
+        'fixed-button': fixedButton,
+    }
+}
+</script>
+
+<style lang="scss">
+.deposit-order-detail{
+    padding: 24upx;
+    .dod-status{
+        margin-left: auto;
+        flex-shrink: 0;
+        @include flcw(28upx, 40upx, #9C9C9F);
+    }
+
+    .od-margin{
+        height: 24upx;
+        background: transparent;
+    }
+    .od-pay-info{
+        margin-top: 20upx;
+        border-top: 1px solid #D8D8D8;
+    }
+    .od-total{
+        padding-top: 10upx;
+        text-align: right;
+        @include flcw(28upx, 50upx, #1A1A1A, 500);
+        @include tHide;
+        .ot-name{
+            color: #9A9A9D;
+            font-weight: 400;
+        }
+    }
+    .od-check{
+        margin-left: auto;
+        flex-shrink: 0;
+        @include flcw(24upx, 40upx, $mColor);
+    }
+}
+</style>

src/subpackage/order/pages/timekeeping/order_detail/person.vue

@@ -53,9 +53,9 @@
             <view class="pf-btn">取消预约</view>
         </view> -->
         <bottom-fixed>
-            <view class="pf-btn">取消预约</view>
+            <fixed-button>取消预约</fixed-button>
         </bottom-fixed>
-
+        
         <end-billing-modal></end-billing-modal>
     </view>
 </template>
@@ -67,6 +67,7 @@ import kvLine from "../../../components/kv_line.vue";
 import kvsLine from "../../../components/kvs_line.vue";
 import endBillingModal from "../modules/order_detail/end_billing_modal.vue";
 import bottomFixed from "../modules/order_detail/bottom_fixed.vue";
+import fixedButton from "../modules/order_detail/fixed_button.vue";
 // import bottomFixed from "../modules/order_detail/bf_button.vue";
 export default {
     components: {
@@ -75,15 +76,15 @@ export default {
         'kv-line': kvLine,
         'kvs-line': kvsLine,
         'end-billing-modal': endBillingModal,
-        'bottom-fixed': bottomFixed
+        'bottom-fixed': bottomFixed,
+        'fixed-button': fixedButton,
     }
 }
 </script>
 
 <style lang="scss">
     .person-order-detail{
-        padding: 24upx 24upx 132upx;
-        @include isPd(132upx);
+        padding: 24upx;
         .pod-status{
             margin-left: auto;
             flex-shrink: 0;
@@ -115,23 +116,4 @@ export default {
         background: $mColor;
         @include flcw(32upx, 112upx, #fff, 500);
     }
-
-    .pod-fixed{
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        padding: 10upx 24upx;
-        background: #f2f2f7;
-        @include ctf(flex-end);
-        
-    }
-    .pf-btn{
-        padding: 0 32upx;
-        display: inline-block;
-        text-align: center;
-        border-radius: 10upx;
-        background: #fff;
-        @include flcw(32upx, 88upx, $mColor, 500);
-    }
 </style>

src/subpackage/order/pages/timekeeping/order_detail/site.vue

@@ -0,0 +1,150 @@
+<template>
+    <view class="site-order-detail">
+        <header-temp>
+            <kv-line label="订单编号：">
+                <template v-slot:default>qp20200150150245569qp20200150150245569qp20200150150245569</template>
+                <template v-slot:right>
+                    <text class="od-status">已完成</text>
+                </template>
+            </kv-line>
+            <kv-line label="创建时间：">2019-08-17 18:02:58</kv-line>
+            <kv-line label="手机号码：">18316553478</kv-line>
+            <kv-line label="用户昵称：">i术生</kv-line>
+        </header-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="场地计时信息">
+            <kv-line label="项目类型：">茶室(1号茶室)</kv-line>
+            <kv-line label="进场时间：">2020-01-10 15:02:24</kv-line>
+            <kv-line label="离场时间：">现场扫码结算</kv-line>
+            <kv-line label="时长合计：">00小时00分00秒</kv-line>
+
+            <view class="od-pay-info">
+                <kvs-line label="金额小计">¥10.5</kvs-line>
+                <kvs-line label="折扣金额">-¥0</kvs-line>
+                <kvs-line label="积分抵扣">-¥0</kvs-line>
+                <kvs-line label="优惠券优惠">-¥1</kvs-line>
+            </view>
+            <view class="od-total">
+                <text class="pt-name">合计支付：</text>￥9.5
+            </view>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="关联押金订单">
+            <kv-line label="押金订单号：">
+                <template v-slot:default>qp20200150150245569</template>
+                <template v-slot:right>
+                    <text class="od-check">查看押金订单</text>
+                </template>
+            </kv-line>
+            <kv-line label="押金金额：">￥50</kv-line>
+            <kv-line label="订单状态：">
+                <template v-slot:default>已退款</template>
+                <template v-slot:right>
+                    <text class="od-deposit-explain">(押金已原路退返账户，请留意查收!)</text>
+                </template>
+            </kv-line>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp>
+            <kv-line label="取消时间：">2019-05-17 11:12:58</kv-line>
+            <kv-line label="取消原因：">商家主动取消</kv-line>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="支付信息">
+            <kv-line label="支付方式：">微信支付</kv-line>
+            <kv-line label="支付时间：">2019-05-17 11:12:58</kv-line>
+            <kv-line label="交易流水：">4200225665566566565455</kv-line>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="费用详情">
+            <kv-line label="产生费用："><text class="od-check">￥10</text></kv-line>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="退款信息1">
+            <kv-line label="退款金额：">￥998</kv-line>
+            <kv-line label="退款单号：">TF-20195171564566</kv-line>
+            <kv-line label="退款时间：">2019-05-17 11:12:58</kv-line>
+            <kv-line label="退款原因：">商家主动退款</kv-line>
+        </info-temp>
+
+        <view class="od-margin"></view>
+        <info-temp title="退款信息2">
+            <kv-line label="退款金额：">￥998</kv-line>
+            <kv-line label="退款单号：">TF-20195171564566</kv-line>
+            <kv-line label="退款时间：">2019-05-17 11:12:58</kv-line>
+            <kv-line label="退款原因：">商家主动退款</kv-line>
+        </info-temp>
+        
+        <bottom-fixed>
+            <fixed-button>取消预约</fixed-button>
+        </bottom-fixed>
+    </view>
+</template>
+
+<script>
+import headerTemp from "../modules/order_detail/header_temp.vue";
+import infoTemp from "../modules/order_detail/info_temp.vue";
+import kvLine from "../../../components/kv_line.vue";
+import kvsLine from "../../../components/kvs_line.vue";
+import bottomFixed from "../modules/order_detail/bottom_fixed.vue";
+import fixedButton from "../modules/order_detail/fixed_button.vue";
+export default {
+    components: {
+        'header-temp': headerTemp,
+        'info-temp': infoTemp,
+        'kv-line': kvLine,
+        'kvs-line': kvsLine,
+        'bottom-fixed': bottomFixed,
+        'fixed-button': fixedButton,
+    }
+}
+</script>
+
+<style lang="scss">
+    .site-order-detail{
+        padding: 24upx;
+        .od-status{
+            margin-left: auto;
+            flex-shrink: 0;
+            @include flcw(28upx, 40upx, #9C9C9F);
+            &.active{
+                color: $mColor;
+            }
+        }
+        .od-check{
+            margin-left: auto;
+            flex-shrink: 0;
+            @include flcw(24upx, 40upx, $mColor);
+        }
+
+        .od-pay-info{
+            margin-top: 20upx;
+            border-top: 1px solid #D8D8D8;
+        }
+        .od-total{
+            padding-top: 10upx;
+            text-align: right;
+            @include flcw(28upx, 50upx, #1A1A1A, 500);
+            @include tHide;
+            .pt-name{
+                color: #9A9A9D;
+                font-weight: 400;
+            }
+        }
+        .od-deposit-explain{
+            margin-left: 12upx;
+            @include flcw(24upx, 40upx, #9C9C9F);
+            @include tHide;
+        }
+    }
+    .od-margin{
+        height: 24upx;
+        background: transparent;
+    }
+</style>

src/subpackage/order/pages/timekeeping/order_list.vue

@@ -5,17 +5,29 @@
             @change:stadium="changeStadium"
             @click:time="showPeriodModal"
             @click:filter="showFilterModal"
+            :start-time="condition.start"
+            :end-time="condition.end"
+            :success-count="countInfo.success_count"
+            :refund-count="countInfo.refund_count"
         ></order-list-header>
         <view class="tol-list">
-            <view class="tl-item">
-                <person-list-item></person-list-item>
-            </view>
-            <view class="tl-item">
-                <site-list-item></site-list-item>
-            </view>
-            <view class="tl-item">
-                <deposit-list-item></deposit-list-item>
-            </view>
+            <block v-if="order_type === '2'">
+                <view 
+                    class="tl-item" 
+                    v-for="(e, i) in orderList" 
+                    :key="i"
+                >
+                    <person-list-item :order="e" ></person-list-item>
+                </view>
+            </block>
+            <block v-else-if="order_type === 1">
+                <view class="tl-item">
+                    <site-list-item></site-list-item>
+                </view>
+                <view class="tl-item">
+                    <deposit-list-item></deposit-list-item>
+                </view>
+            </block>
         </view>
         <!-- 时间段选择 -->
         <period-modal 
@@ -37,7 +49,7 @@ import depositListItem from "./modules/order_list/deposit.vue";
 
 import { ORDER_API } from '../../js/api';
 import server from '../../js/server';
-import { showLoad, hideLoad } from '@/utils/util';
+import { showLoad, hideLoad, formatDate, showNone } from '@/utils/util';
 export default {
     components: {
         'order-list-header': orderListHeader,
@@ -47,40 +59,160 @@ export default {
         'site-list-item': siteListItem,
         'deposit-list-item': depositListItem
     },
+    watch: {
+        condition: {
+            handler(nVal, oVal){
+                this.orderList = [];
+                this.countInfo.refund_count = 0;
+                this.countInfo.success_count = 0;
+                let { brand_id, order_type } = this;
+                this.getOrderList({
+                    brand_id: brand_id || '',
+                    order_type: order_type || '',
+                    ...nVal,
+                })
+            },
+            deep: true
+        }
+    },  
+    data(){
+        return {
+            brand_id: '',
+            order_type: '', // 2: 人时 1: 场时
+            condition: { // 查询条件
+                stadium_id: '', // 场馆id
+                start: '', // 开始时间
+                end: '', // 结束时间
+                status: '', // 订单状态
+            },
+            page: 1,
+            orderList: [],
+            countInfo: {
+                // refund_count: 0, // 退款笔数
+                // success_count: 0, // 成功笔数
+                // total: 0, // 总笔数
+            },
+        }
+    },
     async onLoad(options){
-        let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id)
+        let _bID = options?.brand_id || '';
+        let _order_type = options?.order_type || '';
+        let { start, end } = this.initDefaultDate(_order_type);
+        let { status } = this.initDefaultStatus();
+        this.getOrderList({
+            brand_id: _bID,
+            start: start,
+            end: end,
+            status,
+            order_type: _order_type
+        })
+        this.brand_id = _bID;
+        this.order_type = _order_type;
+        let _list = await this.$refs.orderListHeader.initStadiumSelect(_bID);
+    },
+    onReachBottom(){
+        let { brand_id, order_type, condition, page } = this;
+        this.getOrderList({
+            brand_id: brand_id || '',
+            order_type: order_type || '',
+            page: page + 1,
+            ...condition,
+        })
     },
     methods: {
+        // 打开筛选窗口
         showFilterModal(){
-            this.$refs.filterModal.show();
+            this.$refs.filterModal.init({
+                title: '订单状态',
+                list: this.getFilterList(),
+                curStatus: this.condition.status,
+                success: item =>{
+                    this.condition.status = item.status;
+                }
+            });
         },
+        // 初始化默认状态
+        initDefaultStatus(){
+            let _ls = this.getFilterList();
+            let _defaultItem = _ls?.[0] || {}
+            this.condition.status = _defaultItem?.status;
+            return _defaultItem;
+        },
+        // 获取筛选列表
+        getFilterList(){
+            let _ls = [
+                    { name: '全部', status: '' },
+                    { name: '计费中', status: '0' },
+                    { name: '已完成', status: '1' },
+                    { name: '已退款', status: '4' },
+                ];
+            return _ls;
+        },
+        // 店铺选择
         changeStadium(e){
-            console.log('changeStadium:', e)
+            this.condition.stadium_id = e.id;
         },
+        // 显示时间段选择
         showPeriodModal(){
+            let { start, end } = this.condition;
             this.$refs.periodModal.init({
-                star: '2020-08-01',
-                end: '2020-08-27',
+                start: start,
+                end: end,
                 success: res=>{
-                    console.log('success:', res)
+                    this.condition.start = res.start;
+                    this.condition.end = res.end;
                 }
             });
         },
+        // 初始化默认时间
+        initDefaultDate(){
+            let _date = new Date();
+            let _sevenTimeStemp = 7*24*60*60*1000;
+            let _beforeSeven = _date.getTime() - _sevenTimeStemp;
+            let _obj = {
+                start: formatDate({ date: _beforeSeven }),
+                end: formatDate({})
+            }
+            this.condition.start = _obj.start;
+            this.condition.end = _obj.end;
+            return _obj;
+        },
+
+        /**
+         * @param {String} brand_id 品牌id
+         * @param {String} stadium_id 场馆id
+         * @param {String} status 支付状态:未支付/已支付/已退款/反馈[0/1/2/3]
+         * @param {String} start 开始时间
+         * @param {String} end 结束时间
+         * @param {String} order_type 订单类型:场时/人时[1/2]
+         * */ 
         getOrderList({ 
             brand_id = '', stadium_id = '', 
             status = '', start = '', end = '', 
-            order_type = ''
+            order_type = '', page = 1, page_size = 20
         }){
-            util.showLoad();
+            showLoad();
             server.get({
-                url: ORDER_API.matchOrderSonList,
-                data: { brand_id, stadium_id, status, start, end, order_type },
+                url: ORDER_API.billingOrderList,
+                data: { 
+                    brand_id, stadium_id, status, 
+                    start, end, order_type, page, page_size 
+                },
                 failMsg: '加载失败！'
             })
             .then(res=>{
-                util.hideLoad();
-                let _list = res.list || [];
-                this.sonList = _list;
+                hideLoad();
+                let { list, ...info } = res;
+                let _list = list || [];
+                if(page == 1){
+                    this.countInfo = info;
+                    this.orderList = _list;
+                    return 
+                }
+                if(_list?.length <= 0)return showNone('没有更多数据了！');
+                this.orderList = [...this.orderList, ..._list];
+                this.page = page;
+                
             })
         }
     }