|
|
|
@ -16,8 +16,8 @@ |
|
|
|
</picker> |
|
|
|
<view class="st-tip">{{curTypeInfo.rule_text || '-'}}</view> |
|
|
|
</view> |
|
|
|
<picker> |
|
|
|
<view class="sh-time">2020年5月16日—2020年5月22日</view> |
|
|
|
<picker mode="date" @change="timeSlotChange"> |
|
|
|
<view class="sh-time" v-if="dateList.length>1">{{dateList[0].ZhDateStr || '-'}}—{{dateList[dateList.length-1].ZhDateStr || '-'}}</view> |
|
|
|
</picker> |
|
|
|
</view> |
|
|
|
<scroll-view class="sm-times" scroll-x> |
|
|
|
@ -45,16 +45,22 @@ |
|
|
|
<view |
|
|
|
:class="[ |
|
|
|
k._isSelect?'green': |
|
|
|
k.is_valid?'':'grey' |
|
|
|
k.is_take_up?'black': |
|
|
|
!k.is_valid?'grey':'' |
|
|
|
]" |
|
|
|
>{{k.is_valid?`¥${k.price || 0}`:'已售'}}</view> |
|
|
|
> |
|
|
|
{{ |
|
|
|
!k.is_valid?'已售': |
|
|
|
k.is_take_up?'已占用':`¥${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-continuity-tip">9点至10点为连场预订,请谅解</view> --> |
|
|
|
<view class="sfb-selected-section"> |
|
|
|
<view class="sss-bar"> |
|
|
|
<view>已选择场次<text>4</text></view> |
|
|
|
@ -75,8 +81,10 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="sfb-btn-bar"> |
|
|
|
<view class="sbb-price"><text>¥</text>0.00</view> |
|
|
|
<view class="sbb-btn" hover-class="hover-active" @click="toOrderConfirm">请选择场地</view> |
|
|
|
<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> |
|
|
|
@ -89,14 +97,15 @@ import util from '../../../utils/util' |
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
storeList: [], |
|
|
|
curStoreInfo: {}, |
|
|
|
typeList: [], |
|
|
|
curTypeInfo: {}, |
|
|
|
venueList: [], |
|
|
|
dateList: [], |
|
|
|
curDateInfo: {}, |
|
|
|
selectedVenueList: [], |
|
|
|
storeList: [], // 店铺列表 |
|
|
|
curStoreInfo: {}, // 当前店铺 |
|
|
|
typeList: [], // 类型列表 |
|
|
|
curTypeInfo: {}, // 当前类型 |
|
|
|
venueList: [], // 场馆列表 |
|
|
|
dateList: [], // 日期列表 |
|
|
|
curDateInfo: {}, // 当前日期 |
|
|
|
selectedVenueList: [], // 所选场地列表 |
|
|
|
totalPrice: 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -104,6 +113,7 @@ export default { |
|
|
|
}, |
|
|
|
async onLoad(){ |
|
|
|
try { |
|
|
|
util.showLoad(); |
|
|
|
let _storeInfo = await this.getStoreList(); |
|
|
|
let _storeList = _storeInfo.list || []; |
|
|
|
if(!_storeList.length)return util.showNone('没有店铺信息！'); |
|
|
|
@ -126,61 +136,112 @@ export default { |
|
|
|
}) |
|
|
|
if(!_venueList.length)return util.showNone('没有场地信息！') |
|
|
|
this.venueList = _venueList || []; |
|
|
|
console.log(_venueList) |
|
|
|
console.log(this.getDateList({})) |
|
|
|
return |
|
|
|
return util.hideLoad(); |
|
|
|
}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()); |
|
|
|
util.hideLoad(); |
|
|
|
}catch(err){ |
|
|
|
util.hideLoad(); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
// 清空已选 |
|
|
|
clearSelectedList(){ |
|
|
|
let { venueList } = this; |
|
|
|
let _venueList = venueList.slice(); |
|
|
|
_venueList.forEach(e=>{ |
|
|
|
e.items.forEach(el=>{ |
|
|
|
el._isSelect = false |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.venueList = _venueList; |
|
|
|
|
|
|
|
this.$nextTick(_=>{ |
|
|
|
this.$forceUpdate(); |
|
|
|
this.selectedVenueList = this.getSelectedVenues() || []; |
|
|
|
}) |
|
|
|
this.refreshVenues(); |
|
|
|
// this.$nextTick(_=>this.getSelectedVenues()); |
|
|
|
}, |
|
|
|
// 场地选择 |
|
|
|
venueSelect(i,j){ |
|
|
|
let { venueList } = this; |
|
|
|
let _venueList = venueList.slice(); |
|
|
|
let _curTarget = _venueList[i].items[j] |
|
|
|
let _curTarget = { ..._venueList[i].items[j] }; |
|
|
|
if(!_curTarget.is_valid)return; |
|
|
|
_venueList[i].items[j]._isSelect = !_curTarget; |
|
|
|
if(_curTarget.is_take_up){ |
|
|
|
let _str = `操作人:${_curTarget.operator || '-'}，收取金额: ${_curTarget.price || 0}\n原因: ${_curTarget.take_up_reason || '-'}`; |
|
|
|
util.showNone(_str) |
|
|
|
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.selectedVenueList = this.getSelectedVenues() || []; |
|
|
|
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)_arr.push({ parentObj, ...el }); |
|
|
|
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 = 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); |
|
|
|
@ -197,19 +258,28 @@ export default { |
|
|
|
storePickerChange(e){ |
|
|
|
let { storeList } = this; |
|
|
|
this.curStoreInfo = storeList[e.detail.value]; |
|
|
|
console.log(e) |
|
|
|
this.$nextTick(_=>this.refreshVenues()); |
|
|
|
}, |
|
|
|
typePckerChange(e){ |
|
|
|
console.log(e) |
|
|
|
let { typeList } = this; |
|
|
|
this.curTypeInfo = typeList[e.detail.value]; |
|
|
|
this.$nextTick(_=>this.refreshVenues()); |
|
|
|
}, |
|
|
|
toOrderConfirm(){ |
|
|
|
let { selectedVenueList } = this; |
|
|
|
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`, 'nT'); |
|
|
|
}, |
|
|
|
// 球类列表 |
|
|
|
// 场馆列表 |
|
|
|
getVenueList({type_key,stadium_id,date}){ |
|
|
|
return servers.get({ |
|
|
|
url: API.venue.venueList, |
|
|
|
|
