|
|
|
@ -1,81 +1,100 @@ |
|
|
|
<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> |
|
|
|
<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="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 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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
</picker> |
|
|
|
</scroll-view> |
|
|
|
</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="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 :style="venueAreaSize"> |
|
|
|
<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> --> |
|
|
|
<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"> |
|
|
|
@ -273,6 +292,7 @@ export default { |
|
|
|
this.venueList = []; |
|
|
|
this.boardInfo = null; |
|
|
|
this.selectedVenueList = []; |
|
|
|
this.$nextTick(_ => this.setVenueAreaSize()); |
|
|
|
let _res = await this.getVenueList({ |
|
|
|
type_key: curTypeInfo.key || '', |
|
|
|
stadium_id: curStoreInfo.id || '', |
|
|
|
@ -296,6 +316,7 @@ export default { |
|
|
|
// 清空已选 |
|
|
|
clearSelectedList(){ |
|
|
|
this.refreshVenues(); |
|
|
|
|
|
|
|
// this.$nextTick(_=>this.getSelectedVenues()); |
|
|
|
}, |
|
|
|
// 占用提示 |
|
|
|
@ -379,6 +400,7 @@ export default { |
|
|
|
}) |
|
|
|
this.totalPrice = _totalPrice.toFixed(2); |
|
|
|
this.selectedVenueList = _arr || []; |
|
|
|
this.$nextTick(_ => this.setVenueAreaSize()); |
|
|
|
return _arr; |
|
|
|
}, |
|
|
|
// 日期tab 切换 |
|
|
|
@ -469,12 +491,22 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 设置滚动区域大小 |
|
|
|
setVenueAreaSize(){ |
|
|
|
const sysInfo = uni.getSystemInfoSync(); |
|
|
|
util.getNodeMes('.sv-time-interval') |
|
|
|
.then(res=>{ |
|
|
|
this.venueAreaSize = `width:${sysInfo.screenWidth - res.width}px;height:${res.height}px;` |
|
|
|
}) |
|
|
|
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); |
|
|
|
} |
|
|
|
console.warn(_fixedTopInfo, _fixedBotInfo) |
|
|
|
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;` |
|
|
|
// }) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
@ -486,10 +518,10 @@ export default { |
|
|
|
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-sticky-box{ |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
.sm-header{ |
|
|
|
padding: 0 24upx; |
|
|
|
.sh-address{ |
|
|
|
@ -680,77 +712,170 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.sti-venue-list{ |
|
|
|
vertical-align: top; |
|
|
|
display: inline-block; |
|
|
|
// vertical-align: top; |
|
|
|
// display: inline-block; |
|
|
|
background-color: #f2f2f7; |
|
|
|
text-align: left; |
|
|
|
white-space: nowrap; |
|
|
|
.svl-list{ |
|
|
|
display: inline-block; |
|
|
|
width: 196upx; |
|
|
|
.sl-item{ |
|
|
|
height: 90upx; |
|
|
|
&:not(:first-child){ |
|
|
|
@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; |
|
|
|
} |
|
|
|
} |
|
|
|
// 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; |
|
|
|
} |
|
|
|
&:first-child{ |
|
|
|
} |
|
|
|
.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; |
|
|
|
@include textHide(1); |
|
|
|
} |
|
|
|
} |
|
|
|
.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{ |
|
|
|
@ -761,6 +886,7 @@ export default { |
|
|
|
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{ |
|
|
|
@ -900,6 +1026,7 @@ export default { |
|
|
|
position: fixed; |
|
|
|
left: 50%; |
|
|
|
top: 50%; |
|
|
|
z-index: 10; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
max-width: 600upx; |
|
|
|
padding: 20upx 30upx; |
|
|
|
|
