APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add site scroll

organize
刘嘉炜 3 years ago
parent
562e247f51
commit
6728510d51
1 changed files with 256 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 385
      src/pages/site/manage/manage.vue

385
src/pages/site/manage/manage.vue
View File

@ -1,81 +1,100 @@
<template> <template>
<view class="site-manage"> <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> <image mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image>
</view> </view>
</picker> </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> </view>
</picker> </picker>
</view> </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> </view>
</picker>
</scroll-view>
</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="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 class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
<view>{{ e || '-' }}</view> <view>{{ e || '-' }}</view>
</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> </view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<view class="sm-fixd-bot"> <view class="sm-fixd-bot">
@ -273,6 +292,7 @@ export default {
this.venueList = []; this.venueList = [];
this.boardInfo = null; this.boardInfo = null;
this.selectedVenueList = []; this.selectedVenueList = [];
this.$nextTick(_ => this.setVenueAreaSize());
let _res = await this.getVenueList({ let _res = await this.getVenueList({
type_key: curTypeInfo.key || '', type_key: curTypeInfo.key || '',
stadium_id: curStoreInfo.id || '', stadium_id: curStoreInfo.id || '',
@ -296,6 +316,7 @@ export default {
// 清空已选 // 清空已选
clearSelectedList(){ clearSelectedList(){
this.refreshVenues(); this.refreshVenues();
// this.$nextTick(_=>this.getSelectedVenues()); // this.$nextTick(_=>this.getSelectedVenues());
}, },
// 占用提示 // 占用提示
@ -379,6 +400,7 @@ export default {
}) })
this.totalPrice = _totalPrice.toFixed(2); this.totalPrice = _totalPrice.toFixed(2);
this.selectedVenueList = _arr || []; this.selectedVenueList = _arr || [];
this.$nextTick(_ => this.setVenueAreaSize());
return _arr; return _arr;
}, },
// 日期tab 切换 // 日期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; background-color: #fff;
} }
.site-manage{ .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{ .sm-header{
padding: 0 24upx; padding: 0 24upx;
.sh-address{ .sh-address{
@ -680,77 +712,170 @@ export default {
} }
} }
.sti-venue-list{ .sti-venue-list{
vertical-align: top;
display: inline-block;
// vertical-align: top;
// display: inline-block;
background-color: #f2f2f7; 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; height: 72upx;
line-height: 70upx; line-height: 70upx;
text-align: center; text-align: center;
font-size: 24upx; font-size: 24upx;
font-weight: 500; font-weight: 500;
border-bottom: 2upx solid #D8D8D8; border-bottom: 2upx solid #D8D8D8;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: #fff; background-color: #fff;
color: #333; 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{ .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 + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
width: 100%; width: 100%;
z-index: 5;
background-color: #fff; background-color: #fff;
.sfb-selected-section{ .sfb-selected-section{
.sss-bar{ .sss-bar{
@ -900,6 +1026,7 @@ export default {
position: fixed; position: fixed;
left: 50%; left: 50%;
top: 50%; top: 50%;
z-index: 10;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
max-width: 600upx; max-width: 600upx;
padding: 20upx 30upx; padding: 20upx 30upx;

Write Preview
Loading…
Cancel
Save