tid1553 add style

src/pages.json

@@ -486,6 +486,12 @@
 			"root": "subpackage/order",
 			"pages": [
 				{
+					"path": "pages/order_list/order_list",
+					"style" : {
+						"navigationBarTitleText": "订单" 
+					}
+				},
+				{
 					"path": "pages/stored_value_card/detail/detail",
 					"style" : {
 						"navigationBarTitleText": "储值卡订单详情" 

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

@@ -0,0 +1,55 @@
+<template>
+    <view class="filter-modal">
+        <view class="fm-container">
+            <view class="fc-title">标题</view>
+            <view class="fc-list">
+                <view class="fl-item" v-for="i in 5" :key="i">8848</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.filter-modal{
+    position: fixed;
+    left: 0;
+    top: var(--window-top);
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .5);
+    z-index: 10;
+    .fm-container{
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 500upx;
+        padding-left: 42upx;
+        background-color: #fff;
+        padding-top: 26upx;
+        padding-left: 42upx;
+        .fc-title{
+            margin-bottom: 58upx;
+            padding: 50upx 0;
+            border-bottom: 2upx solid #D8D8D8;
+            @include flcw(24upx, 34upx, #9c9c9f);
+        }
+        .fc-list{
+            .fl-item{
+                margin-bottom: 50upx;
+                @include tHide;
+                @include flcw(32upx, 44upx, #1a1a1a);
+                &.active{
+                    color: $mColor;
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,83 @@
+<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>
+            </view>
+            <view class="ob-btns">
+                <image class="ob-icon" src="../../static/images/search.png"></image>
+                <image @click="$emit('click:filter')" class="ob-icon" src="../../static/images/filter.png"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import stadiumSelect from './stadium_select.vue';
+export default {
+    components: {
+        'stadium-select': stadiumSelect
+    },
+    data(){
+        return {
+            isStadium: false
+        }
+    },
+    methods: {
+        initStadiumSelect(brand_id){
+            this.isStadium = !!brand_id;
+            return this.$refs.stadiumSelect.getStadiumList(brand_id);
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.order-list-header{
+    .olh-period{
+        padding: 24upx 24upx 0upx;
+        @include ctf(flex-start);
+        .op-txt{
+            @include flcw(32upx, 44upx, #1a1a1a, 500);
+            @include tHide(1);
+        }
+        .op-icon{
+            flex-shrink: 0;
+            margin-left: 14upx;
+            width: 0;
+            height: 0;
+            border-left: 10upx solid transparent;
+            border-right: 10upx solid transparent;
+            border-top: 10upx solid #1a1a1a;
+        }
+    }
+    .olh-bot{
+        padding: 16upx 24upx;
+        @include ctf(space-between);
+        .ob-desc{
+            flex-grow: 1;
+            @include flcw(24upx, 34upx, #9c9c9f);
+            @include tHide(1);
+        }
+        .ob-btns{
+            flex-shrink: 0;
+            @include ctf(flex-end);
+            .ob-icon{
+                flex-shrink: 0;
+                margin-left: 40upx;
+                width: 40upx;
+                height: 40upx;
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+    <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">
+                  <view class="pp-time">
+                      <text class="pt-txt">开始时间</text>
+                      <view class="pt-right">
+                          <input class="pr-ipt" placeholder="选择时间" disabled :value="star" />
+                          <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">
+                  <view class="pp-time">
+                      <text class="pt-txt">截止时间</text>
+                      <view class="pt-right">
+                          <input class="pr-ipt" placeholder="选择时间" disabled :value="end" />
+                          <image class="pr-img" mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
+                      </view>
+                  </view>
+              </picker>
+              <view class="pl-btn active" @click="confirmPeriod">确定</view>
+          </view>
+    </view>
+</template>
+
+<script>
+import { showNone } from '@/utils/util';
+export default {
+    
+    data(){
+        return {
+            star: '',
+            end: '',
+            visibled: false
+        }
+    },
+    methods: {
+        show(){
+            this.visibled = true;
+        },
+        hide(){
+            this.visibled = false;
+        },
+        startTimeChange(e){
+            this.star = e.detail.value;
+        },
+        endTimeChange(e){
+            this.end = e.detail.value;
+        },
+        confirmPeriod(){
+            let { star, end } = this;
+            if(!star || !end)return showNone('请选择日期范围！');
+            this.hide();
+            this.$emit('click:cofirm', { star, end });
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.period-modal{
+    position: fixed;
+    left: 0;
+    top: var(--window-top);
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .5);
+    z-index: 10;
+    .pm-period{
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding-left: 38upx;
+        padding-top: 66upx;
+        height: 472upx;
+        width: 100%;
+        background-color: #fff;
+        .pp-tit{
+            @include flcw(24upx, 34upx, #9c9c9f);
+        }
+        .pp-picker{
+            width: 100%;
+
+        }
+        .pp-time{
+            padding-right: 40upx;
+            height: 124upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include ctf(space-between);
+            .pt-txt{
+                flex-shrink: 0;
+                @include flcw(32upx, 44upx, #1a1a1a);
+            }
+            .pt-right{
+                flex-grow: 1;
+                @include ctf(flex-end);
+                .pr-ipt{
+                    flex-grow: 1;
+                    height: 100%;
+                    text-align: right;
+                    @include flcw(32upx, 44upx, #1a1a1a);
+                }
+                .pr-img{
+                    flex-shrink: 0;
+                    margin-left: 36upx;
+                    width: 28upx;
+                    height: 28upx;
+                }
+            }
+        }
+        .pl-btn{
+            text-align: center;
+            @include flcw(32upx, 124upx, rgba(0, 152, 116, .2), 500);
+            color: rgba(0, 152, 116, .2);
+            &.active{
+                color: $mColor;
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+    <view class="stadium-select" v-show="visibled">
+        <text class="ss-txt">当前门店</text>
+        <picker mode="selector" class="ss-picker" :range="stadiumList" range-key="name" @change="pickerChange"> 
+            <view class="ss-frame">
+                <input type="text" disabled class="sf-ipt" :value="curStadium.name || ''"  placeholder="全部"/>
+                <image class="sf-img" mode="aspectFit" src="../../static/images/arrow.png"></image>
+            </view> 
+        </picker>
+    </view>
+</template>
+
+<script>
+import { ORDER_API } from '../../js/api';
+import server from '../../js/server';
+export default {
+    props: {
+        visibled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data(){
+        return {
+            stadiumList: [
+                { id: '', name: '全部' }
+            ],
+            curStadium: {}
+        }
+    },
+    methods: {
+        pickerChange(e){
+            let { value } = e.detail; 
+            let { stadiumList } = this;
+            this.curStadium = stadiumList[value];
+            this.$emit('change:stadium', this.curStadium);
+        },
+        // 获取品牌店铺列表
+        getStadiumList(brand_id){
+            return server.get({
+                url: ORDER_API.stadiumList,
+                data: { brand_id },
+                isDefaultGet: false
+            })
+            .then(res=>{
+                let _data = res?.data || {};
+                if(_data.code === 0){
+                    let _list = _data?.data?.list || [];
+                    return this.stadiumList = [ ...this.stadiumList, ..._list ];
+                }else{
+                    console.warn('getStoreList err:', err);
+                    return this.stadiumList;
+                }
+            })
+            .catch(err=>{
+                console.warn('getStoreList err:', err);
+                return this.stadiumList;
+            })
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+    .stadium-select{
+        padding: 0 24upx;
+        height: 144upx;
+        background-color: #fff;
+        @include ctf(space-between);
+        .ss-txt{
+            margin-right: 20upx;
+            flex-shrink: 0;
+            @include flcw(28upx, 40upx, #9c9c9f);
+        }
+        .ss-picker{
+            flex-grow: 1;
+            .ss-frame{
+                padding: 0 20upx;
+                height: 92upx;
+                border-radius: 10upx;
+                background-color: #F2F2F7;
+                 @include ctf(space-between);
+                .sf-ipt{
+                    flex-grow: 1;
+                    @include flcw(28upx, 40upx, #1a1a1a);
+                    @include tHide(1);
+                }
+                .sf-img{
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    width: 28upx;
+                    height: 28upx;
+                }
+            }
+        }
+        .ocs-store{
+
+        }
+    }
+</style>

src/subpackage/order/js/api.js

@@ -35,6 +35,9 @@ export const ORDER_API = {
 	rentballEndBilling:`${ORIGIN}/admin/stadium/rentball/order/end`,  // 结束订单-后台
 	// 20220727
 	rentBallOrderDetails:`${ORIGIN}/admin/stadium/hardware/order/rentBallOrderDetails`,  // 硬件管理-订单详情_copy
+
+	// 20240624 tid1553 计时订单拆分
+	stadiumList: `${ORIGIN}/admin/stadium/list`,  //  店铺列表
 }
 
 export default ORDER_API;

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

@@ -0,0 +1,47 @@
+<template>
+    <view class="order-list">
+        <order-list-header 
+            ref="orderListHeader"
+            @change:stadium="changeStadium"
+            @click:time="showPeriodModal"
+        ></order-list-header>
+        <period-modal 
+            ref="periodModal"
+            @click:cofirm="periodConfirm"
+        ></period-modal>
+        <filter-modal></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";
+export default {
+    components: {
+        'order-list-header': orderListHeader,
+        'period-modal': periodModal,
+        'filter-modal': filterModal
+    },
+    async onLoad(options){
+        let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id)
+    },
+    methods: {
+        changeStadium(e){
+            console.log('changeStadium:', e)
+        },
+        showPeriodModal(){
+            this.$refs.periodModal.show();
+        },
+        periodConfirm(e){
+            console.log('periodConfirm:', e)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .order-list{
+
+    }
+</style>

src/subpackage/order/pages/order_manage/order_manage.vue

@@ -38,7 +38,7 @@ export default {
             util.routeTo(getTabRoutePath() + `?order_type=${ele.orderType}`,'nT');
         },
         isFinish(key){
-            let _endKeyArr = [ 1, 2, 3, 4, 5, 7, 9, 10, 14, 16, 15, 13, 6, 8, 11, 12, 18, 19];
+            let _endKeyArr = [ 1, 2, 3, 4, 5, 7, 9, 10, 14, 16, 15, 13, 6, 8, 11, 12, 18, 19, 22];
             return _endKeyArr.includes(key);
         }
     }
@@ -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 },
@@ -66,6 +66,8 @@ function getTabList(){
             { id: 8, name: '商城订单', key: 8, iconName: 'order_4', orderType: 2 },
             { id: 9, name: '积分兑换订单', key: 9, iconName: 'order_5', orderType: 5 },
             { id: 9, name: '零售订单', key: 18, iconName: 'order_18', orderType: 19 },
+            { id: 11, name: '散客计时订单', key: 22, iconName: 'order_22', orderType: 22 },
+            { id: 12, name: '场地计时订单', key: 23, iconName: 'order_23', orderType: 23 },
         ]
     }