8 changed files with 1449 additions and 57 deletions
-
24src/pages.json
-
123src/pages/mine_trainee/mine_trainee.vue
-
261src/pages/site/confirm/confirm.vue
-
706src/pages/site/manage/manage.vue
-
278src/pages/time/select/select.vue
-
22src/store/actions.js
-
74src/store/index.js
-
18src/store/mutations.js
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue