Browse Source

Merge branch 'sitemanage' into all

organize
刘嘉炜 3 years ago
parent
commit
063ab7feed
  1. 444
      src/pages/site/manage/manage.vue

444
src/pages/site/manage/manage.vue

@ -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">
@ -209,6 +228,8 @@ export default {
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', }
@ -273,12 +294,13 @@ 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 || '',
date: curDateInfo.dateStr || '',
})
let _list = _res.dashboard || [];
let _list = _res || [];
if(!_list.length)return util.showNone('没有场地信息!');
this.venueList = _list || [];
@ -296,6 +318,7 @@ export default {
//
clearSelectedList(){
this.refreshVenues();
// this.$nextTick(_=>this.getSelectedVenues());
},
//
@ -329,7 +352,9 @@ export default {
venueInfo: {...this.getVenueStatusnInfo(_curTarget)},
}
}
if(_curTarget.type !== 'empty_venue')return;
if(_curTarget.isLinkage == true)return;
_venueList[i].items[j]._isSelect = !_curTarget._isSelect;
@ -352,7 +377,15 @@ export default {
// }) || [];
// ----->
//
_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){
@ -363,6 +396,40 @@ export default {
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 || [];
},
//
getSelectedVenues(){
let { venueList } = this;
@ -379,6 +446,7 @@ export default {
})
this.totalPrice = _totalPrice.toFixed(2);
this.selectedVenueList = _arr || [];
this.$nextTick(_ => this.setVenueAreaSize());
return _arr;
},
// tab
@ -449,7 +517,15 @@ export default {
return servers.get({
url: API.venue.venueList,
data: { stadium_id, type_key, date },
failMsg: '加载分类失败!'
failMsg: '加载场地列表失败!'
})
.then(res=>{
let _ls = res.dashboard || [];
_ls.map(ele => ele.items.map((item, index) =>{
item._defineIndex = index;
return item;
}))
return _ls;
})
},
//
@ -469,12 +545,21 @@ 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);
}
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 +571,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 +765,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 +939,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 +1079,7 @@ export default {
position: fixed;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-50%, -50%);
max-width: 600upx;
padding: 20upx 30upx;

Loading…
Cancel
Save