463 lines
17 KiB
HTML
463 lines
17 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.my_calendar {
|
|
width: 100%;
|
|
height: 100px;
|
|
background-color: #0e78c5;
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
}
|
|
.day {
|
|
background-color: #14497e;
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 5px 6px;
|
|
line-height: 22px;
|
|
border-radius: 4px;
|
|
margin-right: 6px;
|
|
font-size: 14px;
|
|
}
|
|
.time {
|
|
width: 72%;
|
|
text-align: center;
|
|
}
|
|
.state {
|
|
width: 80px;
|
|
height: 36px;
|
|
text-align: center;
|
|
background-color: #f2f2f2;
|
|
border-radius: 2px;
|
|
color: #929292;
|
|
}
|
|
.container {
|
|
padding: 10px 0;
|
|
background-color: white;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
border-radius: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
tr {
|
|
line-height: 36px;
|
|
}
|
|
.van-action-sheet__content {
|
|
padding: 10px;
|
|
font-size: 15px;
|
|
}
|
|
.title {
|
|
margin: 10px 0;
|
|
color: grey;
|
|
}
|
|
.top-calendar {
|
|
height: 70px;
|
|
max-height: 70px;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #0e78c5;
|
|
}
|
|
.calendar-left {
|
|
/*width: calc(100% - 20px);*/
|
|
overflow-x: auto;
|
|
display: flex;
|
|
height: 90%;
|
|
}
|
|
.calendar-left-day {
|
|
min-width: 65px;
|
|
height: 100%;
|
|
margin: 0 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFF;
|
|
border-radius: 10px;
|
|
}
|
|
.left-day-active {
|
|
background-color: #0000cc;
|
|
}
|
|
.left-day-disabled {
|
|
background-color: lightgrey;
|
|
}
|
|
.day-info-week {
|
|
margin-bottom: 5px;
|
|
}
|
|
.calendar-right {
|
|
width: 30px;
|
|
max-width: 30px;
|
|
text-align: center;
|
|
height: 60%;
|
|
border-left: 1px solid #fff3f3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 5px;
|
|
}
|
|
.top_pop .van-popup {
|
|
top: 46px;
|
|
}
|
|
.van-action-sheet {
|
|
max-height: 90%;
|
|
}
|
|
.van-empty {
|
|
position: revert;
|
|
transform: none;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak v-if="isLoad">
|
|
<van-nav-bar
|
|
:title="site.name"
|
|
left-arrow
|
|
placeholder
|
|
fixed
|
|
@click-left="history.go(-1)"
|
|
safe-area-inset-top
|
|
></van-nav-bar>
|
|
|
|
<div class="top-calendar">
|
|
<div class="calendar-left">
|
|
<div
|
|
:class="getDayClass(item)"
|
|
@click="dayClick(item)"
|
|
v-for="item in weekList">
|
|
<div class="day-info-week">
|
|
{{getWeekTextByDate(item.day)}}
|
|
</div>
|
|
<div class="day-info-month">
|
|
{{moment(item.day).format('MM-DD')}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<div class="calendar-right">
|
|
<van-icon size="16" color="white" name="arrow-down" @click="calendarVisible=true"></van-icon>
|
|
<van-calendar class="top_pop" v-model="calendarVisible" color="#246fb4" position="top" @confirm="onConfirm"
|
|
:default-date="selectDate?.toDate()"
|
|
:formatter="calendarFormatter"
|
|
title="选择开始日期"></van-calendar>
|
|
</div>-->
|
|
</div>
|
|
|
|
<div class="container">
|
|
<table v-if="weekList.find(o => moment(o.day).unix() === moment(selectDate).unix())?.disabled === false">
|
|
<tr v-for="item in timeData">
|
|
<td class="time">{{item.start_time + '-' + item.end_time}}</td>
|
|
<td>
|
|
<div v-if="item.disabled === true" class="state">{{ item.tooltip }}</div>
|
|
<div @click="chooseTime(item)" v-else class="state" style="background-color: #e8ffef; color: #52986a">
|
|
<span v-if="!times.map(o => o.fullDay).includes(selectDate.format('YYYY-MM-DD') + ' ' + item.start_time + '-' + item.end_time)">可预约</span>
|
|
<span v-else>
|
|
<van-icon name="passed" size="26" style="line-height: 36px;position: unset"></van-icon>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<!--<td>
|
|
<div v-if="isCanRe(item)===3" class="state" style="background-color: #0e78c5;color: #fff3f3">
|
|
已预约
|
|
</div>
|
|
<div v-if="isCanRe(item) === 2" class="state" style="background-color: #fff4f2; color: #cc5a45">
|
|
约满
|
|
</div>
|
|
<div @click="chooseTime(item)" v-if="isCanRe(item) === 1" class="state" style="background-color: #e8ffef; color: #52986a">
|
|
<span v-if="!times.map(o => o.fullDay).includes(selectDate.format('YYYY-MM-DD') + ' ' + item.start_time + '-' + item.end_time)">可预约</span>
|
|
<span v-else>
|
|
<van-icon name="passed" size="26" style="line-height: 36px;position: unset"></van-icon>
|
|
</span>
|
|
</div>
|
|
<div v-if="isCanRe(item) === 0" class="state">已过期</div>
|
|
<div v-if="isCanRe(item) === 4" class="state">不可预约</div>
|
|
</td>-->
|
|
</tr>
|
|
</table>
|
|
<van-empty v-else image="error" :description="moment(selectDate).format('YYYY-MM-DD') + '不能预约'"></van-empty>
|
|
</div>
|
|
|
|
<div style="position: fixed; bottom: 0; width: 100%">
|
|
<van-button @click="reserve" type="primary" color="#246fb4" style="width: 100%">确定预约</van-button>
|
|
</div>
|
|
|
|
<van-action-sheet v-model="show" title="确认预约信息">
|
|
|
|
<van-cell title="预约人">{{formData.reserve_person}}</van-cell>
|
|
<van-cell title="性别">{{formData.sex}}</van-cell>
|
|
<van-cell title="工号">{{formData.loginname}}</van-cell>
|
|
<van-cell title="所属单位">{{formData.reserve_person_unit}}</van-cell>
|
|
<van-cell title="联系电话">{{formData.reserve_person_phone}}</van-cell>
|
|
<van-cell title="预约时间">
|
|
<div v-for="time in times">
|
|
<van-tag closeable size="medium" type="primary" @close="close(time.fullDay)">
|
|
{{time.fullDay}}
|
|
</van-tag>
|
|
</div>
|
|
</van-cell>
|
|
<van-cell title="预约地点">{{site.name}}</van-cell>
|
|
<van-field name="stepper" label="预约人数">
|
|
<template #input>
|
|
<van-stepper v-model="formData.joinCount"></van-stepper>
|
|
</template>
|
|
</van-field>
|
|
<van-field
|
|
v-model="formData.message"
|
|
rows="4"
|
|
autosize
|
|
label="预约事由"
|
|
type="textarea"
|
|
maxlength="50"
|
|
placeholder="请输入预约事由"
|
|
show-word-limit
|
|
></van-field>
|
|
|
|
<div style="margin: 20px 0px; display: flex; justify-content: space-between;padding: 0px 22px;">
|
|
<van-button @click="formData.message = '';show = false" color="#246fb4" style="width: 47%" size="small" plain
|
|
type="info">关闭
|
|
</van-button>
|
|
<van-button @click="reserveDo" color="#246fb4" style="width: 47%" size="small" type="info">确认</van-button>
|
|
</div>
|
|
</van-action-sheet>
|
|
</div>
|
|
|
|
<script>
|
|
moment.locale('zh_cn');
|
|
function getQueryString(name) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
var r = window.location.search.substr(1).match(reg);
|
|
if (r != null) return decodeURI(r[2]);
|
|
return null;
|
|
}
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
isLoad: false,
|
|
formData: {},
|
|
show: false,
|
|
site_id: '',
|
|
site: {},
|
|
timeData: [],
|
|
times: [],
|
|
weekList: [],
|
|
joinUser: '',
|
|
calendarVisible: false,
|
|
selectDate: null,
|
|
//已经预约的记录
|
|
alreadyReserveRecord: [],
|
|
allowDayList: [],
|
|
}
|
|
},
|
|
computed: {
|
|
getWeekTextByDate() {
|
|
return (date) => {
|
|
const weekNum = moment(date).day()
|
|
switch (weekNum) {
|
|
case 0:
|
|
return '周日'
|
|
case 1:
|
|
return '周一'
|
|
case 2:
|
|
return '周二'
|
|
case 3:
|
|
return '周三'
|
|
case 4:
|
|
return '周四'
|
|
case 5:
|
|
return '周五'
|
|
case 6:
|
|
return '周六'
|
|
}
|
|
}
|
|
},
|
|
calendarFormatter() {
|
|
return (day) => {
|
|
return day
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getDayClass(row) {
|
|
let classStr = 'calendar-left-day'
|
|
if(row.disabled) {
|
|
classStr += ' left-day-disabled'
|
|
} else {
|
|
classStr += moment(row.day).unix() === this.selectDate.unix() ? ' left-day-active' : ''
|
|
}
|
|
return classStr
|
|
},
|
|
close(f) {
|
|
if (this.times.length === 1) {
|
|
vant.Toast('必须保留一个时间段')
|
|
return
|
|
}
|
|
const index = this.times.findIndex(v => v.fullDay === f)
|
|
this.times.splice(index, 1)
|
|
},
|
|
onConfirm(date) {
|
|
this.selectDate = moment(date)
|
|
this.setWeekList(this.selectDate)
|
|
this.calendarVisible = false
|
|
},
|
|
setWeekList(startDate) {
|
|
const wk = []
|
|
let count = 0
|
|
while (wk.length < 8) {
|
|
const addDate = moment(startDate).add(count, 'd')
|
|
let dis = false
|
|
if(this.allowDayList.length > 0 && !this.allowDayList.includes(moment(addDate).format('YYYY-MM-DD'))) {
|
|
dis = true
|
|
}
|
|
wk.push({
|
|
day: addDate,
|
|
disabled: dis
|
|
})
|
|
count++
|
|
}
|
|
this.weekList = wk
|
|
},
|
|
dayClick(item) {
|
|
this.selectDate = item.day
|
|
if(item.disabled) {
|
|
this.$toast(moment(item.day).format('YYYY-MM-DD') + '不可预约')
|
|
} else {
|
|
this.getReserve()
|
|
}
|
|
},
|
|
reserve() {
|
|
if (this.times.length === 0) {
|
|
vant.Toast('请选择要预约的时段')
|
|
return
|
|
}
|
|
this.$set(this.formData, "reserve_person", '${@shiro.getPrincipalProperty("username")}')
|
|
this.$set(this.formData, "sex", "${@shiro.getPrincipalProperty('sex')}")
|
|
this.$set(this.formData, "loginname", "${@shiro.getPrincipalProperty('loginname')}")
|
|
this.$set(this.formData, "reserve_person_unit", '${@shiro.getPrincipalProperty("unit").getName()}')
|
|
this.$set(this.formData, "reserve_person_phone", '${@shiro.getPrincipalProperty("mobile")}')
|
|
|
|
if(this.site.reserveTarget === 1 || this.site.reserveTarget === 3) {
|
|
this.$set(this.formData, "joinCount", this.site.maxNum)
|
|
} else {
|
|
this.$set(this.formData, "joinCount", 1)
|
|
}
|
|
|
|
this.show = true
|
|
},
|
|
async reserveDo() {
|
|
this.$set(this.formData, 'start_time', this.times[0].start_time)
|
|
this.$set(this.formData, 'end_time', this.times[0].end_time)
|
|
this.$set(this.formData, 'site_id', this.site_id)
|
|
const resp = await $.post('/platform/activity/site/reserve/doAdd', {
|
|
data: JSON.stringify(this.formData),
|
|
days: JSON.stringify(this.times.map(o => o.day))
|
|
})
|
|
if (resp.code === 0) {
|
|
vant.Toast('预约成功')
|
|
if (resp.code === 0) {
|
|
this.show = false
|
|
this.times = []
|
|
this.message = null
|
|
await this.getMyReservation()
|
|
await this.getReserve()
|
|
await this.onLoad()
|
|
}
|
|
} else {
|
|
vant.Toast(resp.msg)
|
|
}
|
|
},
|
|
chooseTime(item) {
|
|
const cloneItem = clone(item)
|
|
const map = this.times.map(o => o.fullDay)
|
|
const index = map.indexOf(this.selectDate.format('YYYY-MM-DD') + ' ' + cloneItem.start_time + '-' + cloneItem.end_time)
|
|
if (index > -1) {
|
|
this.times.splice(index, 1)
|
|
} else {
|
|
this.times = []
|
|
cloneItem.day = this.selectDate.format('YYYY-MM-DD')
|
|
cloneItem.fullDay = cloneItem.day + ' ' + cloneItem.start_time + '-' + cloneItem.end_time
|
|
this.times.push(cloneItem)
|
|
}
|
|
},
|
|
isCanRe(item) {
|
|
const itemFullTime = this.selectDate.format('YYYY-MM-DD') + " " + item.start_time + "-" + item.end_time
|
|
|
|
if(this.site.notApplyTimeList && this.site.notApplyTimeList.length > 0) {
|
|
const sTime = this.selectDate.format('YYYY-MM-DD') + " " + item.start_time
|
|
const eTime = this.selectDate.format('YYYY-MM-DD') + " " + item.end_time
|
|
|
|
for (let i = 0; i < this.site.notApplyTimeList.length; i++) {
|
|
const notApplyStartTime = this.site.notApplyTimeList[i].date + " " + this.site.notApplyTimeList[i].startTime
|
|
const notApplyEndTime = this.site.notApplyTimeList[i].date + " " + this.site.notApplyTimeList[i].endTime
|
|
|
|
const a = moment(sTime).isAfter(moment(notApplyStartTime)) && moment(sTime).isBefore(moment(notApplyEndTime))
|
|
const b = moment(eTime).isAfter(moment(notApplyStartTime)) && moment(eTime).isBefore(moment(notApplyEndTime))
|
|
const c = moment(sTime).isBefore(moment(notApplyStartTime)) && moment(eTime).isAfter(moment(notApplyEndTime))
|
|
|
|
if(a || b || c) {
|
|
this.$set(item, 'disabled', true)
|
|
this.$set(item, 'tooltip', '不可预约')
|
|
}
|
|
}
|
|
}
|
|
if (this.alreadyReserveRecord.includes(itemFullTime)) {
|
|
this.$set(item, 'disabled', true)
|
|
this.$set(item, 'tooltip', '已预约')
|
|
}
|
|
},
|
|
async onLoad() {
|
|
this.loading = true
|
|
const resp = await $.post('/mobile/activity/site/info/getDetail', {id: this.site_id})
|
|
if (resp.code === 0) {
|
|
this.site = resp.data
|
|
}
|
|
this.loading = false
|
|
},
|
|
async getReserve() {
|
|
const { data } = await $.get("/platform/activity/site/reserve/getTimesByDay", {
|
|
siteId: this.site_id,
|
|
day: moment(this.selectDate).format('YYYY-MM-DD'),
|
|
})
|
|
this.timeData = data
|
|
},
|
|
async getMyReservation() {
|
|
const resp = await $.post('/mobile/activity/site/info/getMyReservation', {
|
|
site_id: this.site_id
|
|
})
|
|
if (resp.code === 0) {
|
|
this.alreadyReserveRecord = resp.data.map(v => v.reserve_day + " " + v.start_time + "-" + v.end_time)
|
|
}
|
|
},
|
|
async getAllowTime(year = null, month = null) {
|
|
const m = moment(this.selectDate, "YYYY年M月")
|
|
const { data } = await $.get("/platform/activity/site/reserve/getAllowTime", {
|
|
siteId: this.site_id,
|
|
year: year != null ? year : m.year(),
|
|
month: month != null ? month : m.month() + 1,
|
|
})
|
|
this.allowDayList = data
|
|
},
|
|
},
|
|
async created() {
|
|
this.site_id = getQueryString('id')
|
|
this.selectDate = moment()
|
|
await this.getReserve()
|
|
await this.onLoad()
|
|
await this.getAllowTime()
|
|
await this.setWeekList(this.selectDate)
|
|
await this.getMyReservation()
|
|
this.isLoad = true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|