|
|
|
@ -22,25 +22,61 @@ |
|
|
|
<view>时间</view> |
|
|
|
</view> |
|
|
|
<scroll-view scroll-x @scroll="dateScroll" :scroll-left="timeAreaScrollX"> |
|
|
|
<view class="d-item" v-for="i in 7" :key="i"> |
|
|
|
<view class="d-item" v-for="(e, i) in timeList" :key="i"> |
|
|
|
<view>周四</view> |
|
|
|
<view>6月11日</view> |
|
|
|
<view>{{e.day || '-'}}</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
<view class="ta-time"> |
|
|
|
<view> |
|
|
|
<view v-for="j in 20" :key="j">10:00</view> |
|
|
|
<view v-for="(e, i) in timeList[0].items" :key="i">{{ e.duration || '-'}}</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" v-for="j in 20" :key="j"></view> |
|
|
|
<view class="t-list" v-for="(e, i) in timeList" :key="i"> |
|
|
|
<view |
|
|
|
class="l-item" |
|
|
|
v-for="(k, j) in e.items" |
|
|
|
:key="j" |
|
|
|
:class="[ |
|
|
|
k.status == 1 ? 'not' : '', |
|
|
|
k.status == 2 ? 'course-order' : '', |
|
|
|
k._selectStatus? 'selected' : '' |
|
|
|
]" |
|
|
|
@click="timeSelect({i, j, k})" |
|
|
|
> |
|
|
|
{{k.remark || ''}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="s-tip-fixed" v-if="false"> |
|
|
|
<view class="s-select-fixed" v-if="isSelected"> |
|
|
|
<view class="ssf-item"> |
|
|
|
<view>改变状态:</view> |
|
|
|
<view> |
|
|
|
<picker mode="selector" :range="statusList" range-key="name" @change="statusPickerChange"> |
|
|
|
<view> |
|
|
|
<input :value="statusList[changeStatusIDX].name" /> |
|
|
|
<image mode="aspectFit" src="/static/images/triangle_c33.png"></image> |
|
|
|
</view> |
|
|
|
</picker> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="ssf-item"> |
|
|
|
<view>备注:</view> |
|
|
|
<view> |
|
|
|
<input v-model="changeRemark" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="ssf-btns"> |
|
|
|
<view class="b-btn" @click="cancelSelect">取消</view> |
|
|
|
<view class="b-btn" @click="confiemChangeStatus">确定</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="s-tip-fixed" v-else> |
|
|
|
<view class="tf-tip">可直接点击上方白色/灰色区域切换状态。</view> |
|
|
|
<view class="tf-status"> |
|
|
|
<view> |
|
|
|
@ -58,29 +94,7 @@ |
|
|
|
</view> |
|
|
|
<view class="tf-btn" hover-class="hover-active" @click="toConfig">快速预约时间</view> |
|
|
|
</view> |
|
|
|
<view class="s-select-fixed" v-if="false"> |
|
|
|
<view class="ssf-item"> |
|
|
|
<view>课程次数:</view> |
|
|
|
<view> |
|
|
|
<picker> |
|
|
|
<view> |
|
|
|
<input /> |
|
|
|
<image mode="aspectFit" src="/static/images/triangle_c33.png"></image> |
|
|
|
</view> |
|
|
|
</picker> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="ssf-item"> |
|
|
|
<view>课程次数:</view> |
|
|
|
<view> |
|
|
|
<input /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="ssf-btns"> |
|
|
|
<view class="b-btn">取消</view> |
|
|
|
<view class="b-btn">确定</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -88,14 +102,48 @@ |
|
|
|
import { API } from '../../../js/api'; |
|
|
|
import { servers } from '../../../js/server'; |
|
|
|
import util from '../../../utils/util'; |
|
|
|
const statusList = [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: '空闲', |
|
|
|
status: 0 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: '不可选', |
|
|
|
status: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: '课程', |
|
|
|
status: 2 |
|
|
|
}, |
|
|
|
] |
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
timeAreaScrollX: 0, |
|
|
|
timeSlot: { |
|
|
|
timeAreaScrollX: 0, // 日期时间表滚动位置 |
|
|
|
timeSlot: { // 顶部日期 |
|
|
|
start: '', |
|
|
|
end: '', |
|
|
|
}, |
|
|
|
timeList: [], // 时间列表 |
|
|
|
statusList, // 切换状态选择列表 |
|
|
|
changeStatusIDX: 0, // 选中时间需要切换状态下标 |
|
|
|
changeRemark: '', |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// 检索是否有选中 |
|
|
|
isSelected(){ |
|
|
|
let _list = [...this.timeList]; |
|
|
|
if(_list.length<=0)return false; |
|
|
|
for(let i=0;i<_list.length;i++){ |
|
|
|
for(let j=0;j<_list[i].items.length;j++){ |
|
|
|
if(_list[i].items[j]._selectStatus)return true |
|
|
|
} |
|
|
|
} |
|
|
|
return false; |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(){ |
|
|
|
@ -106,7 +154,6 @@ export default { |
|
|
|
this.timeSlot.start = _startDate |
|
|
|
this.timeSlot.end = _endDate |
|
|
|
|
|
|
|
console.warn(_startDate, '-' ,_endDate) |
|
|
|
|
|
|
|
this.getTimeList({ |
|
|
|
start_date: _startDate, |
|
|
|
@ -115,6 +162,59 @@ export default { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
confiemChangeStatus: util.debounce(function(){ |
|
|
|
let { timeList, changeRemark, changeStatusIDX } = this; |
|
|
|
let _selectedArr = []; |
|
|
|
timeList.forEach(ele=>{ |
|
|
|
ele.items.forEach(el=>{ |
|
|
|
if(el._selectStatus){ |
|
|
|
_selectedArr.push({ |
|
|
|
date: ele.day, |
|
|
|
start_duration: el.start_duration, |
|
|
|
end_duration: el.end_duration, |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
servers.post({ |
|
|
|
url: API.saveCoachTimeStatus, |
|
|
|
data: { |
|
|
|
TimeList: _selectedArr, |
|
|
|
remark: changeRemark, |
|
|
|
status: statusList[changeStatusIDX].status |
|
|
|
}, |
|
|
|
isDefaultGet: false |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
if(res.data.code == 0){ |
|
|
|
util.showNone(res.data.message || '操作成功！'); |
|
|
|
setTimeout(util.routeTo, 1200); |
|
|
|
}else{ |
|
|
|
util.showNone(res.data.message || '操作失败！'); |
|
|
|
} |
|
|
|
}) |
|
|
|
console.warn(_selectedArr) |
|
|
|
}, 300, 300), |
|
|
|
cancelSelect(){ |
|
|
|
let _list = [...this.timeList]; |
|
|
|
this.timeList = _list.map(res=>{ |
|
|
|
let _iList = [...res.items]; |
|
|
|
res.items = _iList.map(el=>{ |
|
|
|
el._selectStatus = false |
|
|
|
return el; |
|
|
|
}) |
|
|
|
return res; |
|
|
|
}) |
|
|
|
}, |
|
|
|
statusPickerChange(e){ |
|
|
|
this.changeStatusIDX = e.detail.value; |
|
|
|
}, |
|
|
|
timeSelect({i, j, k}){ |
|
|
|
if(k.status ==1 || k.status ==2)return; |
|
|
|
let _list = [...this.timeList]; |
|
|
|
_list[i].items[j]._selectStatus = !_list[i].items[j]._selectStatus; |
|
|
|
this.timeList = [..._list]; |
|
|
|
}, |
|
|
|
toConfig(){ |
|
|
|
util.routeTo(`/pages/time/_config/_config`, 'nT') |
|
|
|
}, |
|
|
|
@ -231,7 +331,6 @@ export default { |
|
|
|
flex-grow: 1; |
|
|
|
max-width: calc(750upx - 110upx); |
|
|
|
height: 100upx; |
|
|
|
background-color: greenyellow; |
|
|
|
font-size: 0; |
|
|
|
white-space: nowrap; |
|
|
|
.d-item{ |
|
|
|
@ -239,7 +338,6 @@ export default { |
|
|
|
padding-top: 12upx; |
|
|
|
width: 200upx; |
|
|
|
height: 100%; |
|
|
|
background-color: skyblue; |
|
|
|
>view{ |
|
|
|
padding: 0 10upx; |
|
|
|
text-align: center; |
|
|
|
@ -258,7 +356,6 @@ export default { |
|
|
|
>view{ |
|
|
|
flex-grow: 0; |
|
|
|
flex-shrink: 0; |
|
|
|
height: 500upx; |
|
|
|
width: 110upx; |
|
|
|
border-right: 2upx solid #d8d8d8; |
|
|
|
background-color: #fff; |
|
|
|
@ -268,7 +365,6 @@ export default { |
|
|
|
line-height: 84upx; |
|
|
|
font-size: 24upx; |
|
|
|
color: #333; |
|
|
|
background-color: skyblue; |
|
|
|
border: 2upx solid #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -277,14 +373,37 @@ export default { |
|
|
|
max-width: calc(750upx - 110upx); |
|
|
|
font-size: 0; |
|
|
|
white-space: nowrap; |
|
|
|
background-color: #788; |
|
|
|
.t-list{ |
|
|
|
vertical-align: top; |
|
|
|
display: inline-block; |
|
|
|
width: 200upx; |
|
|
|
.l-item{ |
|
|
|
height: 88upx; |
|
|
|
background-color: #F2F2F7; |
|
|
|
background-color: #f4f1f4; |
|
|
|
border: 2upx solid #fff; |
|
|
|
padding: 0 18upx; |
|
|
|
@include centerFlex(center); |
|
|
|
>view{ |
|
|
|
font-size: 24upx; |
|
|
|
line-height: 34upx; |
|
|
|
@include textHide(2); |
|
|
|
} |
|
|
|
&.selected{ |
|
|
|
background-color: #c1dfdc; |
|
|
|
|
|
|
|
} |
|
|
|
&.not{ |
|
|
|
background-color: #d8d8d8; |
|
|
|
>view{ |
|
|
|
color: #9A9A9D; |
|
|
|
} |
|
|
|
} |
|
|
|
&.course-order{ |
|
|
|
background-color: $themeColor; |
|
|
|
>view{ |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
