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