You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1128 lines
46 KiB
1128 lines
46 KiB
<template>
|
|
<view class="site-manage">
|
|
<view class="sm-sticky-box">
|
|
<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>
|
|
<view class="sh-date" v-if="dateList.length">
|
|
<picker
|
|
mode="date"
|
|
:value="dateList[0].dateStr"
|
|
data-type='start'
|
|
@change="datePickerChange">
|
|
<view class="sd-box">
|
|
<text>{{ dateList[0].ZhDateStr || '-' }}</text>
|
|
<view></view>
|
|
</view>
|
|
</picker>
|
|
<text>至</text>
|
|
<picker
|
|
mode="date"
|
|
:value="dateList[dateList.length - 1].dateStr"
|
|
data-type="end"
|
|
@change="datePickerChange">
|
|
<view class="sd-box">
|
|
<text>{{ dateList[dateList.length - 1].ZhDateStr || '-' }}</text>
|
|
<view></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<picker mode="date" @change="timeSlotChange" v-if="false">
|
|
<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>
|
|
|
|
<view class="sm-venue">
|
|
<!-- <view class="sv-time-interval">
|
|
<view class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
|
|
<view>{{ e || '-' }}</view>
|
|
</view>
|
|
</view> -->
|
|
<scroll-view class="sti-venue-list" enable-flex scroll-x scroll-y enhanced :bounces="false" :style="venueAreaSize">
|
|
<view class="svl-box">
|
|
<view class="sticky-cover"></view>
|
|
<view class="sl-time-ls">
|
|
<view class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
|
|
<view>{{ e || '-' }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="sl-name-ls">
|
|
<view class="snl-item" v-for="(e, i) in venueList" :key="i">{{e.venue_name || '-'}}</view>
|
|
</view>
|
|
|
|
<view class="sl-vanue-ls">
|
|
<view class="svl-list" v-for="(e, i) in venueList" :key="i">
|
|
<!-- <view class="sl-item">{{e.venue_name || '-'}}</view> -->
|
|
<view class="sl-item" v-for="(k,j) in e.items" :key="j" @click="venueSelect(i,j)">
|
|
<view
|
|
:class="[ k._isSelect? 'cyan' : '', getVenueStatusnInfo(k).className ]"
|
|
>
|
|
{{ getVenueStatusnInfo(k).zh_text || '-' }}
|
|
</view>
|
|
</view>
|
|
</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>{{ selectedVenueList.length || 0 }}</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.durations || '-'}}</view>
|
|
<view class="si-name">{{e.parentObj.venue_name || '-'}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</block>
|
|
<view class="sfb-tip-list" v-else>
|
|
<view
|
|
class="stl-item"
|
|
v-for="(e,i) in tipArray"
|
|
:key="i"
|
|
>
|
|
<view :class="[ e.c ]"></view>
|
|
<view>{{ e.n || '-'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="sfb-btn-bar" v-if="selectedVenueList.length">
|
|
<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>
|
|
<order-modal @close="boardInfo=null" @refresh='refreshVenues' v-if="boardInfo!=null" :query-info="boardInfo"></order-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { API } from '../../../js/api';
|
|
import { servers } from '../../../js/server';
|
|
import util from '../../../utils/util';
|
|
import order_modal from '../../../components/site/order_modal/order_modal.vue';
|
|
let tipTimer = null;
|
|
export default {
|
|
components: {
|
|
'order-modal': order_modal
|
|
},
|
|
data(){
|
|
return {
|
|
storeList: [], // 店铺列表
|
|
curStoreInfo: {}, // 当前店铺
|
|
typeList: [], // 类型列表
|
|
curTypeInfo: {}, // 当前类型
|
|
venueList: [], // 场馆列表
|
|
dateList: [], // 日期列表
|
|
curDateInfo: {}, // 当前日期
|
|
selectedVenueList: [], // 所选场地列表
|
|
totalPrice: 0,
|
|
occupyTip: '', // 占用提示
|
|
venueAreaSize: '', // 场地滚动区域大小
|
|
tipArray: [
|
|
{ n: '空场', c: '' },
|
|
{ n: '小程序预定', c: 'green' },
|
|
{ n: '课程预定', c: 'pistac' },
|
|
{ n: '固定场锁定', c: 'blue' },
|
|
{ n: '已占用', c: 'black' },
|
|
],
|
|
// 订场看板信息
|
|
boardInfo: null, // { brand_id，stadium_id, venue_id, date, duration }
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
// 场地时间间隔列表
|
|
venueTimeList(){
|
|
// return [];
|
|
let _venueList = this.venueList || []
|
|
if(!_venueList.length || !_venueList[0] || !_venueList[0].items || !_venueList[0].items.length)return [];
|
|
let _obj = {};
|
|
let _items = _venueList[0].items, _tempArr;
|
|
_tempArr = _items.reduce((_arr, val)=>_arr.concat(val.durations.split('-')), []);
|
|
// 对除去最后一个进行去重， 然后尾部拼接最后一个
|
|
return [...new Set(_tempArr.splice(0, _tempArr.length-2)), _tempArr[_tempArr.length-1]];
|
|
|
|
return ([].concat(...venueList[0].items.map(e=>e.durations&&e.durations.split('-')))).filter(e=>{
|
|
let _bol = !!_obj[e];
|
|
!_bol?_obj[e] = true:'';
|
|
return !_bol;
|
|
})
|
|
}
|
|
},
|
|
onUnload(){
|
|
this.occupyTip = '';
|
|
clearTimeout(tipTimer);
|
|
tipTimer = null;
|
|
},
|
|
async onLoad(){
|
|
try {
|
|
util.showLoad();
|
|
let _dateArr = this.getDateList({}) || [];
|
|
this.dateList = _dateArr;
|
|
this.curDateInfo = _dateArr[0] || {};
|
|
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;
|
|
util.hideLoad();
|
|
return this.$nextTick(_=>this.refreshVenues());
|
|
|
|
}catch(err){
|
|
util.hideLoad();
|
|
console.warn('加载失败----->', err)
|
|
}
|
|
},
|
|
methods: {
|
|
getVenueStatusnInfo(info){
|
|
// 超时未订
|
|
if(info.overdue&&info.type == 'empty_venue')return { zh_text: info.message || info.price, type: 'overdue', className: 'gray', }
|
|
// isLinkage
|
|
if(info.isLinkage&&info.isLinkage == true)return { zh_text: info.message || info.price || 0, type: 'linkage', className: 'gray', }
|
|
switch(info.type){
|
|
case 'no_price_venue':
|
|
return { zh_text: info.message || '无法订场', type: info.type, className: 'grey', }
|
|
case 'empty_venue':
|
|
return { zh_text: info.message, type: info.type, className: '', }
|
|
case 'mini_program':
|
|
return { zh_text: info.message || '小程序订场', type: info.type, className: 'green', }
|
|
case 'take_up_venue':
|
|
return { zh_text: info.message || '管理员占用', type: info.type, className: 'black', }
|
|
case 'course_venue':
|
|
return { zh_text: info.message || '课程预定', type: info.type, className: 'pistac', }
|
|
case 'play_venue':
|
|
return { zh_text: info.message || '约玩占用', type: info.type, className: 'black', }
|
|
case 'fixed_venue':
|
|
return { zh_text: info.message || '固定场锁定', type: info.type, className: 'blue', }
|
|
default: return {}
|
|
|
|
|
|
}
|
|
},
|
|
// 20210726 时间范围选择，兼容旧逻辑
|
|
datePickerChange(e){
|
|
let { dateList } = this;
|
|
let _type = e.currentTarget.dataset.type;
|
|
let _value = e.detail.value;
|
|
let _selectedDateTimestamp = new Date(_value.replace(/\-/g, '/')).getTime(); // 选择当天0点时间戳
|
|
let _todayTimestamp = new Date(new Date().toLocaleDateString().replace(/\-/g, '/')).getTime(); // 当天0点
|
|
let _oneDateTimestamp = 24*60*60*1000;
|
|
// if(_selectedDateTimestamp<_todayTimestamp)return util.showNone(`请选择${new Date().toLocaleDateString().replace(/\-/g, '/')}之后日期`);
|
|
let _startTimestamp = _type == 'start' ? _selectedDateTimestamp :_type == 'end' ? _selectedDateTimestamp - (7*_oneDateTimestamp) : _todayTimestamp;
|
|
// let _endTimestamp = _type == 'end' ? _selectedDateTimestamp : new Date(dateList[dateList.length-1].dateStr.replace(/\-/g, '/')).getTime();
|
|
// if(_endTimestamp<_startTimestamp)return util.showNone('请选择正常范围！');
|
|
// let _dateLength = +(((_endTimestamp - _startTimestamp) /_oneDateTimestamp + 1).toFixed());
|
|
let _dateLength = 8;
|
|
// if(_dateLength>7)return util.showNone('不能超过7天范围！');
|
|
let _dateArr = this.getDateList({
|
|
startTimestamp: _startTimestamp,
|
|
length: _dateLength
|
|
}) || [];
|
|
this.dateList = _dateArr;
|
|
this.curDateInfo = _dateArr[0] || {};
|
|
this.$nextTick(_=>this.refreshVenues());
|
|
// if(_type=='end'&&_selectedDateTimestamp-_todayTimestamp<_oneDateTimestamp)return util.showNone('时间段最小一天！');
|
|
|
|
},
|
|
timeSlotChange(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({
|
|
startTimestamp: _timestamp,
|
|
}) || [];
|
|
this.dateList = _dateArr;
|
|
this.curDateInfo = _dateArr[0] || {};
|
|
|
|
this.$nextTick(_=>this.refreshVenues());
|
|
},
|
|
// 刷新场地信息
|
|
async refreshVenues(){
|
|
let { curStoreInfo, curTypeInfo, curDateInfo } = this;
|
|
try{
|
|
util.showLoad();
|
|
this.venueList = [];
|
|
this.boardInfo = null;
|
|
this.selectedVenueList = [];
|
|
this.$nextTick(_ => this.setVenueAreaSize());
|
|
let _res = await this.getVenueList({
|
|
type_key: curTypeInfo.key || '',
|
|
stadium_id: curStoreInfo.id || '',
|
|
date: curDateInfo.dateStr || '',
|
|
})
|
|
let _list = _res || [];
|
|
if(!_list.length)return util.showNone('没有场地信息！');
|
|
|
|
this.venueList = _list || [];
|
|
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.overdue&&_curTarget.type == 'empty_venue')return // 超时未定
|
|
// 设置看板信息
|
|
if(_curTarget.type !== 'empty_venue'&& _curTarget.type !== 'no_price_venue'){
|
|
let { curStoreInfo } = this;
|
|
let _venueInfo = { ..._venueList[i] };
|
|
return this.boardInfo = {
|
|
brand_id: curStoreInfo.brand_id,
|
|
stadium_id: curStoreInfo.id,
|
|
venue_id: _venueInfo.venue_id,
|
|
date: _venueInfo.date,
|
|
duration: _curTarget.duration,
|
|
venueInfo: {...this.getVenueStatusnInfo(_curTarget)},
|
|
}
|
|
}
|
|
|
|
if(_curTarget.type !== 'empty_venue')return;
|
|
if(_curTarget.isLinkage == true)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;
|
|
// }) || [];
|
|
|
|
// ----->
|
|
// 联动赋值禁选
|
|
_venueList = this.checkLinkageVenue({
|
|
group: i,
|
|
venueList: _venueList,
|
|
selectedKey: '_isSelect',
|
|
linkageKey: 'isLinkage',
|
|
linkageIDArrKey: 'link_venue_ids',
|
|
linkageIDKey: 'venue_id',
|
|
})
|
|
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();
|
|
})
|
|
},
|
|
|
|
// 检查&设置联动禁选场地
|
|
// checkLinkageVenue({
|
|
// group = 0, // 所点击场地列表
|
|
// venueList = [], // 所有场地
|
|
// selectedKey = 'selectedKey', // 选中key
|
|
// linkageKey = 'linkageKey', // 联动禁用key
|
|
// linkageIDArrKey = 'link_venue_ids',
|
|
// linkageIDKey = 'venue_id',
|
|
// curTag
|
|
// }){
|
|
// let _curGroupInfo = {...venueList[group]};
|
|
// for(let i=0; i<venueList.length; i++){
|
|
// let _link_venue_ids = _curGroupInfo[linkageIDArrKey] || [];
|
|
|
|
// if(_link_venue_ids.includes(venueList[i][linkageIDKey])){
|
|
// _curGroupInfo.items.forEach(ele=>{
|
|
// // 单列联动
|
|
// if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length == 1){
|
|
// venueList[i].items[ele._defineIndex][linkageKey] = !!_curGroupInfo.items[ele._defineIndex][selectedKey];
|
|
// }
|
|
// // 多列联动
|
|
// if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length > 1){
|
|
// let _link_venueLs = venueList.filter(item=> venueList[i].link_venue_ids.includes(item[linkageIDKey]));
|
|
// // 已联动列表选中情况 ex: [ true, false ];
|
|
// let _link_venueLs_selectedLs = _link_venueLs.map(el=> el['items'][ele._defineIndex] && el['items'][ele._defineIndex][selectedKey]);
|
|
// venueList[i].items[ele._defineIndex][linkageKey] = _link_venueLs_selectedLs.includes(true); // 多场联动，只要有一个被选中就禁止
|
|
// }
|
|
// });
|
|
// }
|
|
// }
|
|
// return venueList || [];
|
|
// },
|
|
// 场地》》》检查&设置联动禁选场地
|
|
checkLinkageVenue({
|
|
group = 0, // 所点击场地列表
|
|
venueList = [], // 所有场地
|
|
selectedKey = 'selectedKey', // 选中key
|
|
linkageKey = 'linkageKey', // 联动禁用key
|
|
linkageIDArrKey = 'link_venue_ids', // 后台提供联动列表
|
|
linkageIDKey = 'venue_id', // 对应列表 id
|
|
curTag
|
|
}){
|
|
let _curGroupInfo = {...venueList[group]};
|
|
for(let i=0; i<venueList.length; i++){
|
|
let _link_venue_ids = _curGroupInfo[linkageIDArrKey] || [];
|
|
// 筛选存在自身关联id，对比非当前所选组
|
|
_link_venue_ids = _link_venue_ids.filter(ele=>_curGroupInfo[linkageIDKey] !=ele);
|
|
if(_link_venue_ids.includes(venueList[i][linkageIDKey])){
|
|
_curGroupInfo.items.forEach(ele=>{
|
|
// 单列联动
|
|
if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length == 1){
|
|
venueList[i].items[ele._defineIndex][linkageKey] = !!_curGroupInfo.items[ele._defineIndex][selectedKey];
|
|
}
|
|
// 多列联动
|
|
if(venueList[i].link_venue_ids && venueList[i].link_venue_ids.length > 1){
|
|
// 过滤自身联动id （后端bug）
|
|
let _linkVenueIds = venueList[i].link_venue_ids.filter(e=>e !=venueList[i][linkageIDKey]);
|
|
// 查找所有联动场地列表
|
|
let _link_venueLs = venueList.filter(item=> _linkVenueIds.includes(item[linkageIDKey]));
|
|
// 已联动列表选中情况 ex: [ true, false ];
|
|
let _link_venueLs_selectedLs = _link_venueLs.map(el=> el['items'][ele._defineIndex] && el['items'][ele._defineIndex][selectedKey]);
|
|
venueList[i].items[ele._defineIndex][linkageKey] = _link_venueLs_selectedLs.includes(true); // 多场联动，只要有一个被选中就禁止
|
|
}
|
|
});
|
|
}
|
|
}
|
|
return venueList || [];
|
|
},
|
|
|
|
// 获取已选列表
|
|
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 || [];
|
|
this.$nextTick(_ => this.setVenueAreaSize());
|
|
return _arr;
|
|
},
|
|
// 日期tab 切换
|
|
dateChange(e){
|
|
this.curDateInfo = e;
|
|
this.$nextTick(_=>this.refreshVenues());
|
|
},
|
|
// 获取近7天列表
|
|
getDateList({ startTimestamp = new Date().getTime(), length = 8 }){
|
|
let _dayTimeStamp = 24*60*60*1000;
|
|
return new Array(length).fill(1).map((e,i)=>{
|
|
let _curStamp = startTimestamp + (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),
|
|
}
|
|
})
|
|
|
|
},
|
|
//
|
|
async storePickerChange(e){
|
|
let { storeList } = this;
|
|
let _curStore = storeList[e.detail.value] || {};
|
|
this.curStoreInfo = _curStore;
|
|
this.venueList = [];
|
|
this.boardInfo = null;
|
|
this.typeList = []; // 类型列表
|
|
this.curTypeInfo = {}; // 当前类型
|
|
this.selectedVenueList = [];
|
|
try{
|
|
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;
|
|
this.$nextTick(_=>this.refreshVenues());
|
|
}catch(err){
|
|
util.showNone('切换门店失败！稍后重试！');
|
|
}
|
|
|
|
|
|
|
|
},
|
|
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: '加载场地列表失败！'
|
|
})
|
|
.then(res=>{
|
|
let _ls = res.dashboard || [];
|
|
_ls.map(ele => ele.items.map((item, index) =>{
|
|
item._defineIndex = index;
|
|
return item;
|
|
}))
|
|
return _ls;
|
|
})
|
|
},
|
|
// 球类列表
|
|
getClassify({ stadium_id }){
|
|
return servers.get({
|
|
url: API.venue.venueTypes,
|
|
data: { stadium_id },
|
|
failMsg: '加载分类失败！'
|
|
})
|
|
},
|
|
// 店铺列表
|
|
getStoreList(){
|
|
return servers.get({
|
|
url: API.stadiumList,
|
|
data: {},
|
|
failMsg: '加载店铺失败！'
|
|
})
|
|
},
|
|
// 设置滚动区域大小
|
|
async setVenueAreaSize(){
|
|
let _fixedBotInfo = {}, _fixedTopInfo = {};
|
|
const _sysInfo = uni.getSystemInfoSync() || {};
|
|
try{
|
|
_fixedTopInfo = await util.getNodeMes('.sm-sticky-box');
|
|
_fixedBotInfo = await util.getNodeMes('.sm-fixd-bot');
|
|
}catch(err){
|
|
console.warn('get fixed nodes info err', err);
|
|
}
|
|
let _totalHeight = ( _fixedBotInfo.height || 0 ) + ( _fixedTopInfo.height || 0 );
|
|
this.venueAreaSize = `width:${ _sysInfo.screenWidth || 0 }px;height:${ ( _sysInfo.windowHeight || 0 ) - _totalHeight }px;`
|
|
// util.getNodeMes('.sv-time-interval')
|
|
// .then(res=>{
|
|
// this.venueAreaSize = `width:${sysInfo.screenWidth - (res.width || 0)}px;height:${res.height || 0}px;`
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~style/public.scss";
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.site-manage{
|
|
|
|
.sm-sticky-box{
|
|
background-color: #fff;
|
|
}
|
|
.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;
|
|
transform: rotateZ(-90deg);
|
|
}
|
|
}
|
|
.sh-type{
|
|
padding: 20upx 0;
|
|
@include centerFlex(space-between);
|
|
picker{
|
|
flex-shrink: 0;
|
|
}
|
|
.st-type{
|
|
|
|
margin-right: 20upx;
|
|
line-height: 50upx;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
>image{
|
|
margin-left: 18upx;
|
|
width: 24upx;
|
|
height: 24upx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.st-tip{
|
|
font-size: 24upx;
|
|
line-height: 34upx;
|
|
color: #9b9b9b;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
>picker{
|
|
width: 100%;
|
|
}
|
|
.sh-date{
|
|
padding: 16upx 0;
|
|
border-top: 1px solid #D8D8D8;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
@include centerFlex(center);
|
|
>text{
|
|
margin: 0 30upx;
|
|
font-size: 28upx;
|
|
color: #9A9A9D;
|
|
}
|
|
.sd-box{
|
|
height: 44upx;
|
|
width: 260upx;
|
|
border-radius: 6upx;
|
|
background-color: #F2F2F7;
|
|
@include centerFlex(center);
|
|
>text{
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
>view{
|
|
flex-shrink: 0;
|
|
margin-left: 6upx;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 8upx solid #333;
|
|
border-left: 8upx solid transparent;
|
|
border-right: 8upx solid transparent;
|
|
}
|
|
}
|
|
}
|
|
.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: 90upx;
|
|
border-right: 2upx solid #d8d8d8;
|
|
>view{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
padding: 0 10upx;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 84upx;
|
|
font-size: 24upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
&::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;
|
|
>view{
|
|
line-height: 72upx;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.sti-venue-list{
|
|
// vertical-align: top;
|
|
// display: inline-block;
|
|
background-color: #f2f2f7;
|
|
// text-align: left;
|
|
// white-space: nowrap;
|
|
.svl-box{
|
|
width: fit-content;
|
|
height: fit-content;
|
|
.sticky-cover{
|
|
position: sticky;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0upx;
|
|
height: 0upx;
|
|
z-index: 5;
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 110upx;
|
|
height: 60upx;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
.sl-name-ls{
|
|
position: sticky;
|
|
padding-left: 112upx;
|
|
top: 0;
|
|
width: fit-content;
|
|
white-space: nowrap;
|
|
font-size: 0;
|
|
.snl-item{
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 196upx;
|
|
height: 72upx;
|
|
line-height: 70upx;
|
|
text-align: center;
|
|
font-size: 24upx;
|
|
font-weight: 500;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
color: #333;
|
|
}
|
|
}
|
|
.sl-time-ls{
|
|
position: sticky;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
float: left;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background-color: #fff;
|
|
.sti-item{
|
|
position: relative;
|
|
width: 112upx;
|
|
height: 90upx;
|
|
border-right: 2upx solid #d8d8d8;
|
|
>view{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
padding: 0 10upx;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 84upx;
|
|
font-size: 24upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 14upx;
|
|
height: 2upx;
|
|
background-color: #d8d8d8;
|
|
}
|
|
&:first-child,&:last-child{
|
|
&::after{
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
&:first-child{
|
|
height: 72upx;
|
|
>view{
|
|
line-height: 72upx;
|
|
}
|
|
|
|
}
|
|
&:last-child>view{
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.sl-vanue-ls{
|
|
font-size: 0;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
.svl-list{
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 196upx;
|
|
.sl-item{
|
|
height: 90upx;
|
|
@include centerFlex(center);
|
|
>view{
|
|
padding: 0 10upx;
|
|
width: 176upx;
|
|
height: 72upx;
|
|
line-height: 68upx;
|
|
text-align: center;
|
|
border: 2upx solid $themeColor;
|
|
border-radius: 10upx;
|
|
font-size: 28upx;
|
|
color: $themeColor;
|
|
background-color: #fff;
|
|
@include textHide(1);
|
|
&.grey{
|
|
color: #9A9A9D;
|
|
border-color: #D7D7DD;
|
|
background-color: #D7D7DD;
|
|
}
|
|
&.green{
|
|
color: #FFF;
|
|
border-color: $themeColor;
|
|
background-color: $themeColor;
|
|
}
|
|
&.cyan{
|
|
background-color: rgba($color: #33CCA9, $alpha: .18);
|
|
}
|
|
&.black{
|
|
color: #FFF;
|
|
border-color: #333333;
|
|
background-color: #333333;
|
|
}
|
|
&.blue{
|
|
color: #fff;
|
|
border-color: #4F7CC7;
|
|
background-color: #4F7CC7;
|
|
}
|
|
&.pistac{
|
|
color: #fff;
|
|
background-color: #68C43B;
|
|
border-color: #68C43B;
|
|
}
|
|
&.gray{
|
|
border-color: #9A9A9D;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.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%;
|
|
z-index: 5;
|
|
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{
|
|
>view{
|
|
margin: 0 14upx;
|
|
&:first-child{
|
|
margin: 0 auto;
|
|
width: 40upx;
|
|
height: 22upx;
|
|
border-radius: 6upx;
|
|
border: 1px solid $themeColor;
|
|
margin-bottom: 8upx;
|
|
|
|
}
|
|
&:nth-child(2){
|
|
line-height: 34upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: #9a9a9d;
|
|
}
|
|
&.green{
|
|
background-color: $themeColor;
|
|
}
|
|
&.pistac{
|
|
background-color: #68C43B;
|
|
border-color: #68C43B;
|
|
}
|
|
&.blue{
|
|
background-color: #4F7CC7;
|
|
border-color: #4F7CC7;
|
|
}
|
|
&.black{
|
|
background-color: #333333;
|
|
border-color: #333333;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.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%;
|
|
z-index: 10;
|
|
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>
|