|
|
|
@ -21,13 +21,14 @@ |
|
|
|
<view>日期</view> |
|
|
|
<view>时间</view> |
|
|
|
</view> |
|
|
|
<scroll-view scroll-x @scroll="dateScroll" :scroll-left="timeAreaScrollX"> |
|
|
|
<scroll-view scroll-x @scroll="dateScroll" :scroll-left="dateAreaScrollX"> |
|
|
|
<view class="d-item" v-for="(e, i) in timeList" :key="i"> |
|
|
|
<view>周四</view> |
|
|
|
<view>{{get_zh_day(e.day) || '-'}}</view> |
|
|
|
<view>{{e.day || '-'}}</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="ta-time"> |
|
|
|
<view> |
|
|
|
<view v-for="(e, i) in timeList[0].items" :key="i">{{ e.duration || '-'}}</view> |
|
|
|
@ -45,7 +46,7 @@ |
|
|
|
]" |
|
|
|
@click="timeSelect({i, j, k})" |
|
|
|
> |
|
|
|
{{k.remark || ''}} |
|
|
|
<view>{{k.remark || ''}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
@ -58,7 +59,7 @@ |
|
|
|
<view> |
|
|
|
<picker mode="selector" :range="statusList" range-key="name" @change="statusPickerChange"> |
|
|
|
<view> |
|
|
|
<input :value="statusList[changeStatusIDX].name" /> |
|
|
|
<input :value="statusList[changeStatusIDX].name" disabled /> |
|
|
|
<image mode="aspectFit" src="/static/images/triangle_c33.png"></image> |
|
|
|
</view> |
|
|
|
</picker> |
|
|
|
@ -102,7 +103,8 @@ |
|
|
|
import { API } from '../../../js/api'; |
|
|
|
import { servers } from '../../../js/server'; |
|
|
|
import util from '../../../utils/util'; |
|
|
|
const statusList = [ |
|
|
|
let scrollTimer = null; |
|
|
|
let statusList = [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: '空闲', |
|
|
|
@ -119,10 +121,13 @@ const statusList = [ |
|
|
|
status: 2 |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
timeAreaScrollX: 0, // 日期时间表滚动位置 |
|
|
|
dateAreaScrollX: 0, // 日期时间表滚动位置 |
|
|
|
scrollStatus: 0, // 滚动区 1-> 日期 , 2-> 时间 |
|
|
|
timeSlot: { // 顶部日期 |
|
|
|
start: '', |
|
|
|
end: '', |
|
|
|
@ -162,6 +167,7 @@ export default { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
get_zh_day: util.get_zh_day, |
|
|
|
confiemChangeStatus: util.debounce(function(){ |
|
|
|
let { timeList, changeRemark, changeStatusIDX } = this; |
|
|
|
let _selectedArr = []; |
|
|
|
@ -210,7 +216,10 @@ export default { |
|
|
|
this.changeStatusIDX = e.detail.value; |
|
|
|
}, |
|
|
|
timeSelect({i, j, k}){ |
|
|
|
if(k.status ==1 || k.status ==2)return; |
|
|
|
if(k.status ==1 || k.status ==2)return util.showModal({ |
|
|
|
title: '备注', |
|
|
|
content: k.remark |
|
|
|
}); |
|
|
|
let _list = [...this.timeList]; |
|
|
|
_list[i].items[j]._selectStatus = !_list[i].items[j]._selectStatus; |
|
|
|
this.timeList = [..._list]; |
|
|
|
@ -222,6 +231,7 @@ export default { |
|
|
|
start_date, |
|
|
|
end_date, |
|
|
|
}){ |
|
|
|
util.showLoad(); |
|
|
|
servers.get({ |
|
|
|
url: API.getCoachTimeList, |
|
|
|
data: { |
|
|
|
@ -231,23 +241,55 @@ export default { |
|
|
|
failMsg: '加载失败！' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
util.hideLoad(); |
|
|
|
this.timeList = res.list || []; |
|
|
|
console.warn(res) |
|
|
|
}) |
|
|
|
}, |
|
|
|
startTimeChange(e){ |
|
|
|
this.timeSlot.start = e.detail.value; |
|
|
|
this.getTimeList({ |
|
|
|
start_date: e.detail.value, |
|
|
|
end_date: this.timeSlot.end, |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
endTimeChange(e){ |
|
|
|
this.timeSlot.end = e.detail.value; |
|
|
|
this.getTimeList({ |
|
|
|
start_date: this.timeSlot.start, |
|
|
|
end_date: e.detail.value, |
|
|
|
}) |
|
|
|
}, |
|
|
|
dateScroll(e){ |
|
|
|
console.warn('dateScroll', e) |
|
|
|
// console.warn('dateScroll', e) |
|
|
|
|
|
|
|
|
|
|
|
if(this.scrollStatus == 2)return; |
|
|
|
this.timeAreaScrollX = e.detail.scrollLeft; |
|
|
|
this.scrollStatus = 1; |
|
|
|
if(scrollTimer){ |
|
|
|
clearTimeout(scrollTimer); |
|
|
|
scrollTimer = null; |
|
|
|
} |
|
|
|
scrollTimer = setTimeout(_=>{ |
|
|
|
this.scrollStatus = 0; |
|
|
|
}, 200) |
|
|
|
|
|
|
|
}, |
|
|
|
timeScroll(e){ |
|
|
|
console.warn('timeScroll', e) |
|
|
|
this.timeAreaScrollX = e.detail.scrollLeft; |
|
|
|
if(this.scrollStatus == 1)return; |
|
|
|
// console.warn('timeScroll', e) |
|
|
|
this.dateAreaScrollX = e.detail.scrollLeft; |
|
|
|
this.scrollStatus = 2; |
|
|
|
if(scrollTimer){ |
|
|
|
clearTimeout(scrollTimer); |
|
|
|
scrollTimer = null; |
|
|
|
} |
|
|
|
scrollTimer = setTimeout(_=>{ |
|
|
|
this.scrollStatus = 0; |
|
|
|
}, 200) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
@ -257,11 +299,17 @@ export default { |
|
|
|
<style lang="scss"> |
|
|
|
@import "~style/public.scss"; |
|
|
|
.time-select{ |
|
|
|
padding-top: 194upx; |
|
|
|
padding-bottom: 394upx; |
|
|
|
padding-bottom: calc( 394upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
padding-bottom: calc( 394upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
} |
|
|
|
.s-time-bar{ |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 0upx; |
|
|
|
z-index: 100; |
|
|
|
width: 100%; |
|
|
|
height: 94upx; |
|
|
|
background-color: #fff; |
|
|
|
border-bottom: 2upx solid #D8D8D8; |
|
|
|
@ -297,7 +345,13 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.s-time-area{ |
|
|
|
|
|
|
|
.ta-date{ |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 94upx; |
|
|
|
width: 100%; |
|
|
|
z-index: 100; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
border-bottom: 2upx solid #D8D8D8; |
|
|
|
@ -384,9 +438,12 @@ export default { |
|
|
|
padding: 0 18upx; |
|
|
|
@include centerFlex(center); |
|
|
|
>view{ |
|
|
|
width: 150upx; |
|
|
|
font-size: 24upx; |
|
|
|
line-height: 34upx; |
|
|
|
@include textHide(2); |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
&.selected{ |
|
|
|
background-color: #c1dfdc; |
|
|
|
|
