From 0a449dd4691c8d04406a6b16803d8c202a7f241c Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Thu, 28 Jan 2021 18:06:04 +0800
Subject: [PATCH] =?UTF-8?q?=E2=80=98add=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                          |  24 ++
 src/pages/mine_trainee/mine_trainee.vue | 123 ++++++
 src/pages/site/confirm/confirm.vue      | 261 ++++++++++++
 src/pages/site/manage/manage.vue        | 706 ++++++++++++++++++++++++++++++++
 src/pages/time/select/select.vue        | 278 +++++++++++++
 src/store/actions.js                    |  22 +-
 src/store/index.js                      |  74 ++--
 src/store/mutations.js                  |  18 +-
 8 files changed, 1449 insertions(+), 57 deletions(-)
 create mode 100644 src/pages/mine_trainee/mine_trainee.vue
 create mode 100644 src/pages/site/confirm/confirm.vue
 create mode 100644 src/pages/site/manage/manage.vue
 create mode 100644 src/pages/time/select/select.vue

diff --git a/src/pages.json b/src/pages.json
index 10ba51b..35b09b5 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -132,6 +132,30 @@
 			}
 		},
 		{
+			"path": "pages/mine_trainee/mine_trainee",
+			"style": {
+				"navigationBarTitleText": "我的学员"
+			}
+		},
+		{
+			"path": "pages/site/manage/manage",
+			"style": {
+				"navigationBarTitleText": "选择场次"
+			}
+		},
+		{
+			"path": "pages/site/confirm/confirm",
+			"style": {
+				"navigationBarTitleText": "确认订单"
+			}
+		},
+		{
+			"path": "pages/time/select/select",
+			"style": {
+				"navigationBarTitleText": "确认订单"
+			}
+		},
+		{
 			"path": "pages/login/login",
 			"style": {
 			}
diff --git a/src/pages/mine_trainee/mine_trainee.vue b/src/pages/mine_trainee/mine_trainee.vue
new file mode 100644
index 0000000..abdbf58
--- /dev/null
+++ b/src/pages/mine_trainee/mine_trainee.vue
@@ -0,0 +1,123 @@
+<template>
+    <view class="mine-trainee">
+        <view class="t-header">
+            <view class="h-frame">
+                <image></image>
+                <input placeholder="请输入姓名/手机号" />
+                <image></image>
+            </view>
+            <view class="h-txt">搜索</view>
+        </view>
+        <view class="t-list">
+            <view class="l-item" v-for="i in 10" :key="i">
+                <view class="i-user">
+                    <image class="u-avatar"></image>
+                    <view>#Adjoin</view>
+                    <image class="u-icon"></image>
+                </view>
+                <view class="i-phone">
+                    <view>00000000000</view>
+                    <image></image>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    .mine-trainee{
+
+    }
+    .t-header{
+        padding: 0 30upx;
+        height: 136upx;
+        background-color: #fff;
+        @include centerFlex(space-between);
+        .h-frame{
+            flex-grow: 1;
+            height: 72upx;
+            border-radius: 36upx;
+            background-color: #EDEDF5;
+            @include centerFlex(space-between);
+            >image{
+                flex-shrink: 0;
+                margin: 0 20upx;
+                width: 36upx;
+                height: 36upx;
+                background-color: skyblue;
+            }
+            >input{
+                flex-grow: 1;
+                height: 100%;
+                font-size: 28upx;
+                color: #333;
+            }
+        }
+        >view+view{
+            flex-shrink: 0;
+            margin-left: 34upx;
+            font-size: 32upx;
+            line-height: 44upx;
+            color: $themeColor;
+        }
+    }
+    .t-list{
+        padding: 24upx;
+        .l-item{
+            margin-bottom: 24upx;
+            padding: 26upx 30upx;
+            border-radius: 10upx;
+            background-color: #fff;
+            @include centerFlex(space-between);
+            .i-user{
+                @include centerFlex(flex-start);
+                >image{
+                    flex-shrink: 0;
+                    background-color: skyblue;
+                }
+                .u-avatar{
+                    width: 116upx;
+                    height: 116upx;
+                }
+                >view{
+                    margin-left: 10upx;
+                    margin-right: 10upx;
+                    line-height: 44upx;
+                    font-size: 32upx;
+                    color: #333;
+                    @include textHide(1);
+                }
+                .u-icon{
+                    width: 36upx;
+                    height: 36upx;
+                }
+            }
+            .i-phone{
+                flex-shrink: 0;
+                margin-left: 10upx;
+                max-width: 42%;
+                @include centerFlex(flex-end);
+                >view{
+                    line-height: 44upx;
+                    font-size: 32upx;
+                    color: #333;
+                    @include textHide(1);
+                }
+                >image{
+                    flex-shrink: 0;
+                    margin-left: 16upx;
+                    width: 36upx;
+                    height: 36upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/site/confirm/confirm.vue b/src/pages/site/confirm/confirm.vue
new file mode 100644
index 0000000..deccc8f
--- /dev/null
+++ b/src/pages/site/confirm/confirm.vue
@@ -0,0 +1,261 @@
+<template>
+    <view class="site-confirm">
+        <view class="sc-section">
+            <view class="sc-address">
+                <view class="sa-name">
+                    <image mode="aspectFit" :src="occupyInfo.storeInfo.logo || ''"></image>
+                    <text>{{occupyInfo.storeInfo.name || '-'}}</text>
+                </view>
+                <view class="sa-detail">
+                    <view>地址：</view>
+                    <view>{{occupyInfo.storeInfo.venue_addr || '-'}}</view>
+                </view>
+            </view>
+            <view class="sc-order-info">
+                <view class="soi-line">
+                    <view>预定项目：</view>
+                    <view><view>{{occupyInfo.typeInfo.name || '-'}}</view></view>
+                </view>
+                <view class="soi-line">
+                    <view>预定日期：</view>
+                    <view><view>{{occupyInfo.dateInfo.dayStr || '-'}}({{occupyInfo.dateInfo.showDateStr || '-'}})</view></view>
+                </view>
+                <view class="soi-line">
+                    <view>预定场次：</view>
+                    <view>
+                        <block v-for="(e, i) in occupyInfo.venueList" :key="i">
+                            <view>{{e.parentObj.name || '-'}} {{e.time || '-'}} (¥{{e.price || '-'}})</view>
+                        </block>
+                    </view>
+                </view>
+            </view>
+            <view class="sc-ipt">
+                <view class="si-price">
+                    <view class="sp-tit">收取金额</view>
+                    <view class="sp-frame"><input v-model="ocPrice" type="number" /></view>
+                </view>
+                <view class="si-reason">
+                    <view class="sr-tit">占用原因</view>
+                    <view class="sr-frame">
+                        <textarea placeholder="多行输入…"  v-model="ocReaon"></textarea>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="sc-fixed-bot">
+            <view hover-class="hover-active" @click="confirmOccupy">确定</view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { API } from '../../../js/api';
+import { servers } from '../../../js/server';
+import util from '../../../utils/util';
+export default {
+    data(){
+        return {
+            ocPrice: '',
+            ocReaon: '',
+            occupyInfo: {
+                storeInfo: {},
+                typeInfo:{},
+                dateInfo:{}
+            }
+        }
+    },
+    computed: {
+        // ...mapState([ 'occupyInfo' ]),
+    },
+    onLoad(){
+        console.log(this.occupyInfo)
+    },
+    methods: {
+        confirmOccupy: util.debounce(function(){
+            let { storeInfo, dateInfo, venueList, typeInfo } = this.occupyInfo;
+            let { ocPrice, ocReaon } = this;
+            console.log(ocPrice, ocReaon);
+            
+            servers.post({
+                url: API.venue.venueTakeUp,
+                data: {
+                    reason: ocReaon,
+                    amount: +ocPrice,
+                    group: storeInfo.id,
+                    date: dateInfo.dateStr,
+                    items: venueList.map(el=>{
+                        return {
+                            venue_id: el.parentObj.id,
+                            venue_name: el.parentObj.name,
+                            duration: el.time,
+                            price: el.price
+                        }
+                    })
+                },
+                isDefaultGet: false
+            })
+            .then(res=>{
+                if(res.data.code == 0){
+                    
+                    util.showNone(res.data.message || '操作成功！');
+                    setTimeout(_=>{
+                        util.routeTo();
+                        util.previousPageFunction({ // 刷新占用列表
+                            fnName: 'refreshList',
+                            query: null
+                        })
+                    }, 1200)
+                }else{
+                    util.showNone(res.data.message || '操作失败！');
+                }
+            })
+
+        }),
+    },
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    .site-confirm{
+        padding-bottom: 138upx;
+        padding-bottom: calc( 138upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 138upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        .sc-section{
+            background-color: #fff;
+        }
+        .sc-address{
+            padding: 24upx 24upx 20upx;
+            border-bottom: 2upx solid #D8D8D8;
+            .sa-name{
+                margin-bottom: 24upx;
+                line-height: 44upx;
+                font-size: 32upx;
+                font-weight: 500;
+                color: #333;
+                @include textHide(1);
+                >image{
+                    margin-right: 2upx;
+                    vertical-align: middle;
+                    width: 34upx;
+                    height: 34upx;
+                    background-color: skyblue;
+                }
+            }
+            .sa-detail{
+                display: flex;
+                >view{
+                    line-height: 40upx;
+                    color: #9a9a9d;
+                    font-size: 28upx;
+                    &:first-child{
+                        flex-shrink: 0;
+                    }
+                    &:nth-child(2){
+                        flex-grow: 1;
+                        word-break: break-all;
+                        @include textHide(2);
+                    }
+                }
+            }
+        }
+        .sc-order-info{
+            padding: 22upx 0;
+            margin: 0 auto;
+            width: 702upx;
+            border-bottom: 2upx solid #D8D8D8;
+            .soi-line{
+                display: flex;
+                margin-bottom: 8upx;
+                >view{
+                    &:first-child{
+                        flex-shrink: 0;
+                        margin-right: 8upx;
+                        line-height: 52upx;
+                        font-size: 28upx;
+                        color: #9a9a9d;
+                    }
+                    &:nth-child(2){
+                        flex-grow: 1;
+                        >view{
+                            font-size: 28upx;
+                            line-height: 52upx;
+                            color: #333;
+                            @include textHide(1);
+                        }
+                    }
+                }
+            }
+        }
+        .sc-ipt{
+            margin: 0 auto;
+            padding-top: 54upx;
+            padding-bottom: 62upx;
+            width: 682upx;
+            .si-price{
+                margin-bottom: 12upx;
+                @include centerFlex(flex-start);
+                .sp-tit{
+                    flex-shrink: 0;
+                    margin-right: 28upx;
+                    line-height: 40upx;
+                    font-size: 28upx;
+                    color: #333;
+                }
+                .sp-frame{
+                    padding: 0 20upx;
+                    width: 262upx;
+                    height: 56upx;
+                    border: 2upx solid #D8D8D8;
+                    border-radius: 10upx;
+                    >input{
+                        width: 100%;
+                        height: 100%;
+                        font-size: 28upx;
+                        color: #333;
+                    }
+                }
+            }
+            .si-reason{
+              .sr-tit{
+                margin-bottom: 18upx;
+                font-size: 28upx;
+                color: #333;
+              }  
+              .sr-frame{
+                  padding: 20upx 10upx;
+                  width: 682upx;
+                  height: 260upx;
+                  border: 2upx solid #D8D8D8;
+                  border-radius: 10upx;
+                  font-size: 28upx;
+                  line-height: 40upx;
+                  color: #333;
+              }
+            }
+        }
+        .sc-fixed-bot{
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            padding-top: 10upx;
+            padding-bottom: 10upx;
+            padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+            padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+            background-color: #fff;
+            >view{
+                margin: 0 auto;
+                width: 702upx;
+                height: 88upx;
+                line-height: 88upx;
+                text-align: center;
+                font-size: 32upx;
+                background-color: #FF873D;
+                color: #fff;
+                border-radius: 44upx;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/site/manage/manage.vue b/src/pages/site/manage/manage.vue
new file mode 100644
index 0000000..c973341
--- /dev/null
+++ b/src/pages/site/manage/manage.vue
@@ -0,0 +1,706 @@
+<template>
+    <view class="site-manage">
+        <view class="sm-header">
+            <picker mode="selector" :range="storeList" range-key="name" @change="storePickerChange">
+                <view class="sh-address">
+                    <text>{{curStoreInfo.name || '-'}}</text>
+                    <image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image>
+                </view>
+            </picker>
+            <view class="sh-type">
+                <picker mode="selector" :range="typeList" range-key="name" @change="typePckerChange">
+                    <view class="st-type">
+                        <text>{{curTypeInfo.name || '-'}}</text>
+                        <image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image>
+                    </view>
+                </picker>
+                <view class="st-tip">{{curTypeInfo.rule_text || '-'}}</view>
+            </view>
+            <picker mode="date" @change="timeSlotChange">
+                <view class="sh-time" v-if="dateList.length>1">
+                    <text>{{dateList[0].ZhDateStr || '-'}} — {{dateList[dateList.length-1].ZhDateStr || '-'}}</text>
+                    <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
+                </view>
+            </picker>
+        </view>
+        <scroll-view class="sm-times" scroll-x>
+            <view 
+                v-for="(e,i) in dateList" 
+                :key="i"
+                :class="['st-item', curDateInfo.dateStr===e.dateStr?'active':'']" 
+                @click="dateChange(e)"
+            >
+                <view class="si-txt">
+                    <view>{{e.dayStr || '-'}}</view>
+                    <view>{{e.showDateStr || '-'}}</view>
+                </view>
+            </view>
+        </scroll-view>
+        <view class="sm-venue">
+            <view class="sv-time-interval">
+                <view class="sti-item"></view>
+                <view class="sti-item" v-for="(e,i) in venueList[0].items" :key="i">{{e.duration || '-'}}</view>
+            </view>
+            <scroll-view class="sti-venue-list" enable-flex scroll-x :style="venueAreaSize">
+                <view class="svl-list" v-for="(e, i) in venueList" :key="i">
+                    <view class="sl-item">{{e.name || '-'}}</view>
+                    <view class="sl-item" v-for="(k,j) in e.items" :key="j" @click="venueSelect(i,j)">
+                        <view
+                            :class="[
+                                k._isSelect?'green':
+                                k.is_take_up?'black':
+                                !k.is_valid?'grey':''
+                            ]"
+                        >
+                            {{
+                                k.is_take_up?'已占用':
+                                !k.is_valid?'已售':`¥${k.price || 0}`
+                            }}
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+        <view class="sm-fixd-bot">
+            <block v-if="selectedVenueList.length">
+                <!-- <view class="sfb-continuity-tip">9点至10点为连场预订,请谅解</view> -->
+                <view class="sfb-selected-section">
+                    <view class="sss-bar">
+                        <view>已选择场次<text>4</text></view>
+                        <view @click="clearSelectedList">清空</view>
+                    </view>
+                    <scroll-view class="sss-list" scroll-y>
+                        <view class="sl-item" v-for="(e,i) in selectedVenueList" :key="i">
+                            <view class="si-time">{{e.time || '-'}}</view>
+                            <view class="si-name">{{e.parentObj.name || '-'}}</view>
+                        </view>
+                    </scroll-view>
+                </view>
+            </block>
+            <view class="sfb-tip-list" v-else>
+                <view class="stl-item" v-for="(e,i) in ['可预订','已售完','已占用','已选择']" :key="i">
+                    <view></view>
+                    <view>{{e}}</view>
+                </view>
+            </view>
+            <view class="sfb-btn-bar">
+                <view class="sbb-price"><text>¥</text>{{totalPrice || '0.00'}}</view>
+                <view class="sbb-btn" hover-class="hover-active" @click="toOrderConfirm">
+                    {{selectedVenueList.length?'提交订单':'请选择场地'}}
+                </view>
+            </view>
+        </view>
+        <view class="sm-fixed-tip" v-if="occupyTip!==''">
+            <text>{{occupyTip || '-'}}</text>
+        </view>
+    </view>
+</template>
+
+<script>
+import { API } from '../../../js/api';
+import { servers } from '../../../js/server';
+import util from '../../../utils/util'
+let tipTimer = null;
+export default {
+    data(){
+        return {
+            storeList: [],          // 店铺列表
+            curStoreInfo: {},       // 当前店铺
+            typeList: [],           // 类型列表
+            curTypeInfo: {},        // 当前类型
+            venueList: [],          // 场馆列表
+            dateList: [],           // 日期列表
+            curDateInfo: {},        // 当前日期
+            selectedVenueList: [],  // 所选场地列表
+            totalPrice: 0,
+            occupyTip: '', // 占用提示
+            venueAreaSize: '', // 场地滚动区域大小
+        }
+    },
+    computed: {
+        
+    },
+    onUnload(){
+        this.occupyTip = '';
+        clearTimeout(tipTimer);
+        tipTimer = null;
+    },
+    async onLoad(){
+        try {
+            util.showLoad();
+            let _storeInfo = await this.getStoreList();
+            let _storeList = _storeInfo.list || [];
+            if(!_storeList.length)return util.showNone('没有店铺信息！');
+            this.storeList = _storeList ;
+            let _curStore =  _storeList[0] || {};
+            this.curStoreInfo = _curStore;
+            let _typeInfo = await this.getClassify({ stadium_id: _curStore.id });
+            let _typeList = _typeInfo || [];
+            this.typeList = _typeList;
+            if(!_typeList.length)return util.showNone('没有球类信息！');
+            let _curType = _typeList[0];
+            this.curTypeInfo = _curType;
+            let _dateArr = this.getDateList({}) || [];
+            this.dateList = _dateArr;
+            this.curDateInfo = _dateArr[0] || {};
+            util.hideLoad();
+            return  this.$nextTick(_=>this.refreshVenues());
+            // let _venueList = await this.getVenueList({
+            //     type_key: _curType.key,
+            //     stadium_id: _curStore.id,
+            //     date: _dateArr[0].dateStr,
+            // })
+            // if(!_venueList.length)return util.showNone('没有场地信息！')
+            // this.venueList = _venueList || [];
+            
+        }catch(err){
+            util.hideLoad();
+            console.warn('加载失败----->', err)
+        }
+    },
+    methods: {
+        timeSlotChange(e){
+            console.log(e);
+            let _timestamp = new Date(e.detail.value.replace(/\-/g, '/')).getTime(); // 当天0点时间
+            if(new Date().getTime() - _timestamp > 24*60*60*1000)return util.showNone('请选择正确时间！'); // 一天前
+            let _dateArr = this.getDateList({
+                dateTimeStamp: _timestamp,
+            }) || [];
+            this.dateList = _dateArr;
+            this.curDateInfo = _dateArr[0] || {};
+            console.log(_dateArr)
+            this.$nextTick(_=>this.refreshVenues());
+        },
+        // 刷新场地信息
+        async refreshVenues(){
+            let { curStoreInfo, curTypeInfo, curDateInfo } = this;
+            try{
+                util.showLoad();
+                this.venueList = [];
+                let _venueList = await this.getVenueList({
+                    type_key: curTypeInfo.key || '',
+                    stadium_id: curStoreInfo.id || '',
+                    date: curDateInfo.dateStr || '',
+                })
+                if(!_venueList.length)return util.showNone('没有场地信息！');
+                this.venueList = _venueList || [];
+                this.$nextTick(_=>{
+                    this.getSelectedVenues();
+                    this.setVenueAreaSize();
+                });
+                
+                util.hideLoad();
+            }catch(err){
+                util.hideLoad();    
+            }
+            
+        },
+        // 清空已选
+        clearSelectedList(){
+            this.refreshVenues();
+            // this.$nextTick(_=>this.getSelectedVenues());
+        },
+        // 占用提示
+        showOccupyTip(str, duration = 1200){
+            this.occupyTip = str;
+            clearTimeout(tipTimer);
+            tipTimer = null;
+            tipTimer = setTimeout(_=>this.occupyTip = '', duration);
+        },
+        // 场地选择
+        venueSelect(i,j){
+            let { venueList } = this;
+            let _venueList = venueList.slice();
+            let _curTarget = { ..._venueList[i].items[j] };
+            if(_curTarget.is_take_up){
+                let _str = `操作人:${_curTarget.operator || '-'}\n收取金额: ${_curTarget.price || 0}\n原因: ${_curTarget.take_up_reason || '-'}`;
+                this.showOccupyTip(_str)
+                return
+            }
+            if(!_curTarget.is_valid)return;
+            _venueList[i].items[j]._isSelect = !_curTarget._isSelect;
+            let _ctnList = []; // 提示用, 连场列表
+            // 连场判断, 需要循环当前列表
+            _venueList[i].items = _venueList[i].items.map(e=>{
+
+                let _flag = e.time_arrow_id&&   // 不连场为空
+                            e.is_valid&&        // 已售为false
+                            e.time_arrow_id == _curTarget.time_arrow_id;
+
+                if(_flag)e._isSelect = !_curTarget._isSelect;
+
+                if(_flag&&!_curTarget._isSelect)_ctnList.push(e);
+
+                return e;
+            }) || [];
+
+            this.venueList = _venueList;
+            this.$nextTick(_=>{
+                if(_ctnList.length>1){
+                    let _tipStr = `${_ctnList[0].duration}-${_ctnList[_ctnList.length-1].duration}为连场预订`
+                    util.showModal({ title: '连场提示！', content: _tipStr });
+                }
+                this.$forceUpdate();
+                this.getSelectedVenues();
+            })
+        },
+        // 获取已选列表
+        getSelectedVenues(){
+            let { venueList } = this;
+            let _arr = [];
+            let _totalPrice = 0;
+            venueList.forEach((e,i)=>{
+                e.items.forEach((el,idx)=>{
+                    let { items, ...parentObj } = e;
+                    if(el._isSelect){
+                        _totalPrice += +el.price;
+                        _arr.push({ parentObj, ...el });
+                    }
+                })
+            })
+            this.totalPrice = _totalPrice.toFixed(2);
+            this.selectedVenueList = _arr || [];
+            return _arr;
+        },
+        // 日期tab 切换
+        dateChange(e){
+            this.curDateInfo = e;
+            this.$nextTick(_=>this.refreshVenues());
+        },
+        //  获取近7天列表
+        getDateList({ dateTimeStamp = new Date().getTime(), length = 8 }){
+            let _dayTimeStamp = 24*60*60*1000;
+            return new Array(length).fill(1).map((e,i)=>{
+                let _curStamp = dateTimeStamp + (i*_dayTimeStamp);
+                return {
+                    showDateStr: util.formatDate({date: _curStamp, partition: 'zh'}).substr(5),
+                    dateStr: util.formatDate({date: _curStamp}),
+                    ZhDateStr: util.formatDate({date: _curStamp, partition: 'zh'}),
+                    dayStr: util.get_zh_day(_curStamp),
+                }
+            })
+            
+        },
+        // 
+        storePickerChange(e){
+            let { storeList } = this;
+            this.curStoreInfo = storeList[e.detail.value];
+            this.$nextTick(_=>this.refreshVenues());
+        },
+        typePckerChange(e){
+            console.log(e)
+            let { typeList } = this;
+            this.curTypeInfo = typeList[e.detail.value];
+            this.$nextTick(_=>this.refreshVenues());
+        },
+        toOrderConfirm(){
+            let { curStoreInfo, curTypeInfo, curDateInfo, selectedVenueList } = this;
+            if(!selectedVenueList.length)return;
+
+            this.$store.commit('setOccupyInfo', {
+                storeInfo: curStoreInfo,
+                dateInfo: curDateInfo,
+                typeInfo: curTypeInfo,
+                venueList: selectedVenueList,
+            })
+
+            util.routeTo(`/pages/site/confirm/confirm`, 'rT');
+        },
+        // 场馆列表
+        getVenueList({type_key,stadium_id,date}){
+            return servers.get({
+                url: API.venue.venueList,
+                data: {stadium_id,type_key,date},
+                failMsg: '加载分类失败！'
+            })
+        },
+        // 球类列表
+        getClassify({stadium_id}){
+            return servers.get({
+                url: API.venue.venueTypes,
+                data: {stadium_id},
+                failMsg: '加载分类失败！'
+            })
+        },
+        // 店铺列表
+        getStoreList(){
+            return servers.get({
+                url: API.stadiumList,
+                data: {},
+                failMsg: '加载店铺失败！'
+            })
+        },
+        // 设置滚动区域大小
+        setVenueAreaSize(){
+            const sysInfo = uni.getSystemInfoSync();
+            util.getNodeMes('.sv-time-interval')
+            .then(res=>{
+                this.venueAreaSize = `width:${sysInfo.screenWidth - res.width}px;height:${res.height}px;`
+            })
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    page{
+        background-color: #fff;
+    }
+    .site-manage{
+        /* 动态设置页面高度出现页面跳点，直接设置底部最大高度 ，按钮价格 +　已选滚动区域　＋　连场提示*/
+        padding-bottom: calc( 108upx + 370upx + 60upx); 
+        padding-bottom: calc( 108upx + 370upx + 60upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 108upx + 370upx + 60upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        .sm-header{
+            padding: 0 24upx;
+            .sh-address{
+                padding: 24upx 0;
+                line-height: 44upx;
+                font-weight: 500;
+                font-size: 32upx;
+                color: #333;
+                >image{
+                    margin-left: 12upx;
+                    vertical-align: middle;
+                    width: 24upx;
+                    height: 24upx;
+                }
+            }
+            .sh-type{
+                padding: 20upx 0;
+                @include centerFlex(space-between);                
+                .st-type{
+                    line-height: 50upx;
+                    font-size: 36upx;
+                    font-weight: 500;
+                    color: #333;
+                    >image{
+                        margin-left: 18upx;
+                        width: 24upx;
+                        height: 24upx;
+                        vertical-align: middle;
+                    }
+                }
+                .st-tip{
+                    flex-shrink: 0;
+                    max-width: 50%;
+                    font-size: 24upx;
+                    line-height: 34upx;
+                    color: #9b9b9b;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+            }
+            >picker{
+                width: 100%;
+            }
+            .sh-time{
+                height: 86upx;
+                line-height: 82upx;
+                text-align: center;
+                font-size: 28upx;
+                color: #9A9A9D;
+                border-top: 2upx solid #D8D8D8;
+                border-bottom: 2upx solid #D8D8D8;
+                >image{
+                    margin-left: 20upx;
+                    width: 24upx;
+                    height: 24upx;
+                    vertical-align: middle;
+                    transform: rotateZ(90deg);
+                }
+            }
+        }
+        .sm-times{
+            height: 120upx;
+            border-bottom: 2upx solid #D8D8D8;
+            white-space: nowrap;
+            .st-item{
+                display: inline-block;
+                padding: 0 20upx;
+                &.active{
+                    .si-txt{
+                        >view{
+                            color: $themeColor;
+                        }
+                        &::after{
+                            content: '';
+                            position: absolute;
+                            left: 50%;
+                            bottom: 0;
+                            transform: translateX(-50%);
+                            height: 10upx;
+                            width: 100%;
+                            border-radius: 10upx;
+                            background-color: $themeColor;
+                        }
+                    }
+                }
+                .si-txt{
+                    height: 118upx;
+                    padding-top: 14upx;
+                    position: relative;
+                    >view{
+                        text-align: center;
+                        color: #9A9A9D;
+                        white-space: nowrap;
+                        &:first-child{
+                            line-height: 44upx;
+                            font-size: 32upx;
+                            font-weight: 500;
+                        }
+                        &+view{
+                            line-height: 28upx;
+                            font-size: 24upx;
+                        }
+                    }
+                }
+            }
+        }
+        .sm-venue{
+            .sv-time-interval{
+                vertical-align: top;
+                display: inline-block;
+                .sti-item{
+                    position: relative;
+                    width: 112upx;
+                    height: 84upx;
+                    text-align: center;
+                    line-height: 84upx;
+                    font-size: 24upx;
+                    color: #333;
+                    border-right: 2upx solid #d8d8d8;
+                    &::after{
+                        content: '';
+                        position: absolute;
+                        bottom: 0;
+                        right: -14upx;
+                        width: 26upx;
+                        height: 2upx;
+                        background-color: #d8d8d8;
+                    }
+                    &:first-child,&:last-child{
+                        &::after{
+                            display: none;
+                        }
+                        
+                    }
+                    &:first-child{
+                        height: 72upx;
+                        border-right-color: transparent;
+                        
+                    }
+                }
+            }
+            .sti-venue-list{
+                vertical-align: top;
+                display: inline-block;
+                background-color: #f2f2f7;
+                text-align: left;
+                white-space: nowrap;
+                .svl-list{
+                    display: inline-block;
+                    width: 136upx;
+                    .sl-item{
+                        height: 84upx;
+                        &:not(:first-child){
+                            @include centerFlex(center);
+                            >view{
+                                padding: 0 10upx;
+                                width: 116upx;
+                                height: 44upx;
+                                line-height: 40upx;
+                                text-align: center;
+                                border: 2upx solid $themeColor;
+                                border-radius: 22upx;
+                                font-size: 28upx;
+                                color: $themeColor;
+                                @include textHide(1);
+                                &.grey{
+                                    color: #9A9A9D;
+                                    border-color: #D7D7DD;
+                                    background-color: #D7D7DD;
+                                }
+                                &.green{
+                                    color: #FFF;
+                                    border-color: $themeColor;
+                                    background-color: $themeColor;
+                                }
+                                &.black{
+                                    color: #FFF;
+                                    border-color: #333333;
+                                    background-color: #333333;
+                                }
+                            }
+                        }
+                        &:first-child{
+                            height: 72upx;
+                            
+                            line-height: 70upx;
+                            text-align: center;
+                            font-size: 24upx;
+                            font-weight: 500;
+                            border-bottom: 2upx solid #F2F2F7;
+                            background-color: #fff;
+                            color: #333;
+                            @include textHide(1);
+                        }
+                    }
+                }
+            }
+        }
+        .sm-fixd-bot{
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            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 */
+            width: 100%;
+            background-color: #fff;
+            .sfb-selected-section{
+                .sss-bar{
+                    padding: 0 30upx;
+                    height: 74upx;
+                    @include centerFlex(space-between);
+                    >view{
+                        font-size: 24upx;
+                        line-height: 34upx;
+                        color: #9a9a9d;
+                        >text{
+                            color: #333;
+                        }
+                        &+view{
+                            flex-shrink: 0;
+                        }
+                    }
+                }
+                .sss-list{
+                    padding: 0 20upx;
+                    width: 100%;
+                    height: 300upx;
+                    .sl-item{
+                        display: inline-block;
+                        margin: 0 10upx 20upx;
+                        width: 216upx;
+                        height: 128upx;
+                        border: 2upx solid $themeColor;
+                        border-radius: 6upx;
+                        background-color: rgba($color: $themeColor, $alpha: .1);
+                        overflow: hidden;
+                        .si-time{
+                            padding: 0 10upx;
+                            margin-bottom: 12upx;
+                            height: 56upx;
+                            line-height: 56upx;
+                            text-align: center;
+                            font-size: 28upx;
+                            background-color: $themeColor;
+                            color: #fff;
+                            @include textHide(1);
+                        }
+                        .si-name{
+                            padding: 0 10upx;
+                            line-height: 38upx;
+                            text-align: center;
+                            font-size: 32upx;
+                            color: #333;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+                    }
+                }
+            }
+            .sfb-continuity-tip{
+                height: 60upx;
+                line-height: 60upx;
+                padding: 0 30upx;
+                font-size: 24upx;
+                color: #FF873D;
+                background-color: rgba($color: #FF873D, $alpha: .1);
+            }
+            .sfb-tip-list{
+                height: 182upx;
+                @include centerFlex(center);
+                .stl-item{
+                    &:nth-child(2)>view:first-child{
+                        border-color: #D7D7DD;
+                        background-color: #D7D7DD;
+                    }
+                    &:nth-child(3)>view:first-child{
+                        border-color: #333333;
+                        background-color: #333333;
+                    }
+                    &:nth-child(4)>view:first-child{
+                        background-color: $themeColor;
+                    }
+                    >view{
+                        margin: 0 14upx;
+                        &:first-child{
+                            width: 116upx;
+                            height: 44upx;
+                            border-radius: 22upx;
+                            border: 2upx solid $themeColor;
+                            margin-bottom: 14upx;
+
+                        }
+                        &:nth-child(2){
+                            line-height: 40upx;
+                            text-align: center;
+                            font-size: 28upx;
+                            color: #9a9a9d;
+                        }
+                    }
+                }
+            }
+            .sfb-btn-bar{
+                height: 108upx;
+                padding: 10upx 30upx;
+                @include centerFlex(space-between);
+                .sbb-price{
+                    flex-grow: 1;
+                    font-size: 48upx;
+                    line-height: 52upx;
+                    font-weight: 500;
+                    color: #FF873D;
+                    @include textHide(1);
+                    >text{
+                        font-size: 38upx;
+                        font-weight: 400;
+                    }
+                }
+                .sbb-btn{
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    margin-left: 20upx;
+                    width: 290upx;
+                    height: 88upx;
+                    line-height: 88upx;
+                    text-align: center;
+                    border-radius: 44upx;
+                    background-color: #FF873D;
+                    color: #fff;
+                }
+
+            }
+            
+        }
+        .sm-fixed-tip{
+            position: fixed;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            max-width: 600upx;
+            padding: 20upx 30upx;
+            border-radius: 10upx;
+            background-color: rgba($color: #000000, $alpha: .5);
+            word-break: break-all;
+            font-size: 28upx;
+            line-height: 44upx;
+            color: #fff;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/time/select/select.vue b/src/pages/time/select/select.vue
new file mode 100644
index 0000000..e768a80
--- /dev/null
+++ b/src/pages/time/select/select.vue
@@ -0,0 +1,278 @@
+<template>
+    <view class="time-select">
+        <view class="s-time-bar">
+            <picker>
+                <view>
+                    <input value="2020年5月16日" />
+                    <image></image>
+                </view>
+            </picker>
+            <text>至</text>
+            <picker>
+                <view>
+                    <input value="2020年5月16日" />
+                    <image></image>
+                </view>
+            </picker>
+        </view>
+        <view class="s-time-area">
+            <view class="ta-date">
+                <view>
+                    <view>日期</view>
+                    <view>时间</view>
+                </view>
+                <scroll-view scroll-x @scroll="dateScroll" :scroll-left="timeAreaScrollX">
+                    <view class="d-item" v-for="i in 7" :key="i">
+                        <view>周四</view>
+                        <view>6月11日</view>
+                    </view>
+                </scroll-view>
+            </view>
+            <view class="ta-time">
+                <view>
+                    <view>10:00</view>
+                </view>
+                <scroll-view scroll-x @scroll="timeScroll" :scroll-left="timeAreaScrollX">
+                    <view class="t-list" v-for="i in 7" :key="i">
+                        <view class="l-item"></view>
+                    </view>
+                </scroll-view>
+            </view>
+        </view>
+        
+        <view class="s-tip-fixed" v-if="true">
+            <view class="tf-tip">可直接点击上方白色/灰色区域切换状态。</view>
+            <view class="tf-status">
+                <view>
+                    <view></view>
+                    <view>空闲</view>
+                </view>
+                <view>
+                    <view></view>
+                    <view>不可选</view>
+                </view>
+                <view>
+                    <view></view>
+                    <view>课程/预约</view>
+                </view>
+            </view>
+            <view class="tf-btn" hover-class="hover-active">快速预约时间</view>
+        </view>
+        <view class="s-select-fixed">
+
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            timeAreaScrollX: 0,
+        }
+    },
+    methods: {
+        dateScroll(e){
+            console.warn('dateScroll', e)
+            this.timeAreaScrollX = e.detail.scrollLeft;
+        },
+        timeScroll(e){
+            console.warn('timeScroll', e)
+            this.timeAreaScrollX = e.detail.scrollLeft;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    .s-time-bar{
+        height: 94upx;
+        background-color: #fff;
+        border-bottom: 2upx solid #D8D8D8;
+        @include centerFlex(center);
+        >text{
+            margin: 0 30upx;
+            font-size: 28upx;
+            line-height: 40upx;
+            color: #9a9a9d;
+        }
+        >picker{
+            view{
+                width: 250upx;
+                padding: 0 14upx;
+                height: 44upx;
+                border-radius: 6upx;
+                background-color: #f2f2f7;
+                @include centerFlex(space-between);
+                >input{
+                    flex-grow: 1;
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #333;
+                }
+                >image{
+                    margin-left: 6upx;
+                    flex-shrink: 0;
+                    width: 16upx;
+                    height: 16upx;
+                    background-color: skyblue;
+                }
+            }
+        }
+    }
+
+    .s-time-area{
+        .ta-date{
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 2upx solid #D8D8D8;
+            background-color: #fff;
+            >view{
+                flex-grow: 0;
+                flex-shrink: 0;
+                width: 110upx;
+                height: 100upx;
+                border-right: 2upx solid #d8d8d8;
+                background: linear-gradient(to top right,
+                    transparent 0%,
+                    transparent calc(50% - 2upx),
+                    #D8D8D8 50%,
+                    transparent calc(50% + 2upx),
+                    transparent 100%
+                );
+                >view{
+                    padding: 0 12upx;
+                    height: 50upx;
+                    line-height: 50upx;
+                    font-size: 24upx;
+                    color: #9A9A9D;
+                    &:first-child{
+                        text-align: right;
+                    }
+                }
+
+            }
+            >scroll-view{
+                flex-grow: 1;
+                max-width: calc(750upx - 110upx);
+                height: 100upx;
+                background-color: greenyellow;
+                font-size: 0;
+                white-space: nowrap;
+                .d-item{
+                    display: inline-block;
+                    padding-top: 12upx;
+                    width: 200upx;
+                    height: 100%;
+                    background-color: skyblue;
+                    >view{
+                        padding: 0 10upx;
+                        text-align: center;
+                        font-size: 32upx;
+                        color: #333;
+                        &+view{
+                            font-size: 24upx;
+                        }
+                    }
+                }
+            }
+        }
+        .ta-time{
+            display: flex;
+            justify-content: space-between;
+            >view{
+                flex-grow: 0;
+                flex-shrink: 0;
+                height: 500upx;
+                width: 110upx;
+                border-right: 2upx solid #d8d8d8;
+                background-color: #fff;
+                >view{
+                    height: 88upx;
+                    text-align: center;
+                    line-height: 84upx;
+                    font-size: 24upx;
+                    color: #333;
+                    background-color: skyblue;
+                    border: 2upx solid #fff;
+                }
+            }
+            scroll-view{
+                flex-grow: 1;
+                max-width: calc(750upx - 110upx);
+                font-size: 0;
+                white-space: nowrap;
+                background-color: #788;
+                .t-list{
+                    display: inline-block;
+                    width: 200upx;
+                    .l-item{
+                        height: 88upx;
+                        background-color: #F2F2F7;
+                        border: 2upx solid #fff;
+                    }
+                }
+            }
+        }
+    }
+
+    .s-tip-fixed{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        padding: 20upx 24upx 10upx;
+        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        width: 100%;
+        background-color: #fff;
+        .tf-tip{
+            height: 40upx;
+            text-align: center;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #9a9a9d;
+        }
+        .tf-status{ 
+            height: 156upx;
+            @include centerFlex(center);
+            >view{
+                flex-shrink: 0;
+                flex-grow: 0;
+                margin: 0 40upx;
+                &:first-child>view:first-child{
+                    background-color: #f2f2f7;
+                }
+
+                &:last-child>view:first-child{
+                    background-color: $themeColor;
+                }
+                >view{
+                    &:first-child{
+                        margin-bottom: 12upx;
+                        width: 126upx;
+                        height: 60upx;
+                        border-radius: 10upx;
+                        background-color: #D8D8D8;
+                    }
+                    &+view{
+                        text-align: center;
+                        font-size: 28upx;
+                        line-height: 40upx;
+                        color: #9a9a9d;
+                    }
+                }
+            }
+        }   
+        .tf-btn{
+            height: 88upx;
+            line-height: 88upx;
+            text-align: center;
+            font-size: 32upx;
+            border-radius: 44upx;
+            color: #fff;
+            background-color: $themeColor;
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/store/actions.js b/src/store/actions.js
index 73e1a6d..8ce589f 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -2,15 +2,15 @@
 import { servers } from '../js/server';
 import { API } from '../js/api';
 export default {
-    getBrandInfo({commit, state}){
-        return servers.get({
-            url: API.calc,
-            data: {},
-            failMsg: '加载数据失败！'
-        })
-        .then(res=>{
-            commit('setBrandInfo',res);
-            return res;
-        })
-    }
+    // getBrandInfo({commit, state}){
+    //     return servers.get({
+    //         url: API.calc,
+    //         data: {},
+    //         failMsg: '加载数据失败！'
+    //     })
+    //     .then(res=>{
+    //         commit('setBrandInfo',res);
+    //         return res;
+    //     })
+    // }
 }
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index a776071..cb15e5f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,53 +2,53 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import mutations from './mutations';
 import actions from './actions';
-import device from './device';
+// import device from './device';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
     modules: {
-        device
+        // device
     },
     state: {
-        // #ifdef H5
-        APPID: uni.getAccountInfoSync().miniProgram.appId,
-        // #endif
-        brandInfo: {
-            brand: {} 
-        },
-        permissionObj: { // 权限代号对应
-            '1001': '营业额',
-            '1002': '收款记录',
-            '1003': '经营分析',
-            '1004': '预约订单',
-            '1005': '会员卡订单',
-            '1006': '积分订单',
-            '1007': '员工管理',
-            '1008': '查询核销',
-            '1009': '场地管理',
-            '1010': '设备管理',
-        },
+        // // #ifdef H5
+        // APPID: uni.getAccountInfoSync().miniProgram.appId,
+        // // #endif
+        // brandInfo: {
+        //     brand: {} 
+        // },
+        // permissionObj: { // 权限代号对应
+        //     '1001': '营业额',
+        //     '1002': '收款记录',
+        //     '1003': '经营分析',
+        //     '1004': '预约订单',
+        //     '1005': '会员卡订单',
+        //     '1006': '积分订单',
+        //     '1007': '员工管理',
+        //     '1008': '查询核销',
+        //     '1009': '场地管理',
+        //     '1010': '设备管理',
+        // },
 
-        // 场地占用提交页面信息
-        occupyInfo: {
-            storeInfo: {},  // 店铺信息
-            dateInfo: {},   // 时间信息 
-            typeInfo: {},   // 球场类型
-            venueList: [],  // 选择场地列表
-        }
+        // // 场地占用提交页面信息
+        // occupyInfo: {
+        //     storeInfo: {},  // 店铺信息
+        //     dateInfo: {},   // 时间信息 
+        //     typeInfo: {},   // 球场类型
+        //     venueList: [],  // 选择场地列表
+        // }
     },
     mutations,
     actions,
     getters: {
-        permissionArr: state=>{
-            let _arr = [], _obj = state.permissionObj;
-            for(let key in _obj){
-                _arr.push({
-                    key,
-                    name: _obj[key],
-                })
-            }
-            return _arr;
-        }
+        // permissionArr: state=>{
+        //     let _arr = [], _obj = state.permissionObj;
+        //     for(let key in _obj){
+        //         _arr.push({
+        //             key,
+        //             name: _obj[key],
+        //         })
+        //     }
+        //     return _arr;
+        // }
     }
 });
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 99d4083..8c34132 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -2,14 +2,14 @@
 
 
 export default {
-    // 设置品牌信息
-    setBrandInfo(state, brandInfo){
-        // console.log(storeInfo,'-----')
-        state.brandInfo = brandInfo
-    },
+    // // 设置品牌信息
+    // setBrandInfo(state, brandInfo){
+    //     // console.log(storeInfo,'-----')
+    //     state.brandInfo = brandInfo
+    // },
 
-    // 场地占用信息
-    setOccupyInfo(state, _occupyInfo){
-        state.occupyInfo = _occupyInfo;
-    }
+    // // 场地占用信息
+    // setOccupyInfo(state, _occupyInfo){
+    //     state.occupyInfo = _occupyInfo;
+    // }
 }
\ No newline at end of file