468 lines
15 KiB
HTML
468 lines
15 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 0px;
|
|
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 0px;
|
|
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;
|
|
}
|
|
|
|
.left-day-active {
|
|
background-color: #0000cc;
|
|
}
|
|
|
|
.day-info-month {
|
|
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
<!--top栏-->
|
|
<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="calendar-left-day" :class="moment(item).unix() == selectDate.unix() ? 'left-day-active':''"
|
|
@click="dayClick(item)"
|
|
v-for="item in weekList">
|
|
<div class="day-info-week">
|
|
{{getWeekTextByDate(item)}}
|
|
</div>
|
|
<div class="day-info-month">
|
|
{{moment(item).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>
|
|
<tr v-for="item in timeData">
|
|
<td class="time">{{item.start_time + '-' + item.end_time}}</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>
|
|
</td>
|
|
|
|
</tr>
|
|
</table>
|
|
</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-form @submit="reserveDo">
|
|
<van-cell title="预约人">{{person}}</van-cell>
|
|
<van-cell title="性别">${@shiro.getPrincipalProperty('sex')}</van-cell>
|
|
<van-cell title="工号">${@shiro.getPrincipalProperty('loginname')}</van-cell>
|
|
<van-cell title="所属单位">{{unit}}</van-cell>
|
|
<van-cell title="联系电话">{{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
|
|
v-model="message"
|
|
rows="1"
|
|
autosize
|
|
label="预约事由"
|
|
type="textarea"
|
|
maxlength="50"
|
|
required
|
|
placeholder="请输入预约事由"
|
|
show-word-limit
|
|
:rules="[{required:true,message:'请填写预约事由'}]"
|
|
></van-field>
|
|
|
|
<van-field
|
|
v-model="joinUser"
|
|
rows="2"
|
|
autosize
|
|
label="参加人员"
|
|
type="textarea"
|
|
maxlength="50"
|
|
placeholder="请输入参加人员"
|
|
show-word-limit
|
|
></van-field>
|
|
</van-form>
|
|
|
|
|
|
<div style="margin: 20px 0px; display: flex; justify-content: space-between;padding: 0px 22px;">
|
|
<van-button @click="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;
|
|
}
|
|
|
|
<!--# include("/platform/activity/includeJs/activityUtil.js"){} #-->
|
|
const siteTypeUtil = new typeUtil()
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
person: "${@shiro.getPrincipalProperty('username')}",
|
|
unit: "${@shiro.getPrincipalProperty('unit').getName()}",
|
|
phone: "${@shiro.getPrincipalProperty('mobile')}",
|
|
message: '',
|
|
show: false,
|
|
site_id: '',
|
|
site: {},
|
|
timeData: [],
|
|
times: [],
|
|
weekList: [],
|
|
joinUser: '',
|
|
calendarVisible: false,
|
|
selectDate: null,
|
|
//已经预约的记录
|
|
alreadyReserveRecord: [],
|
|
holidays: ['2022-06-03', '2022-06-04', '2022-06-05', '2022-09-10', '2022-09-11', '2022-09-12',
|
|
'2022-10-01', '2022-10-02', '2022-10-03', '2022-10-04', '2022-10-05', '2022-10-06', '2022-10-07',],
|
|
}
|
|
},
|
|
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) => {
|
|
// 休息日不能选择
|
|
if (this.site.workday === true) {
|
|
let week = day.date.getDay()
|
|
if (week === 0 || week === 6) {
|
|
day.type = 'disabled'
|
|
}
|
|
}
|
|
return day
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
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 = []
|
|
wk.push(moment(startDate))
|
|
let count = 1
|
|
while (wk.length < 7) {
|
|
const addDate = moment(startDate).add(count, 'd')
|
|
//这里不是休息日才能加到数组里
|
|
if (addDate.day() !== 0 && addDate.day() !== 6 && !this.holidays.includes(moment(addDate).format('YYYY-MM-DD'))) {
|
|
wk.push(addDate)
|
|
}
|
|
count++
|
|
}
|
|
this.weekList = wk
|
|
},
|
|
dayClick(date) {
|
|
this.selectDate = date
|
|
this.getReserve()
|
|
},
|
|
reserve() {
|
|
if (this.times.length === 0) {
|
|
vant.Toast('请选择要预约的时段')
|
|
return
|
|
}
|
|
this.show = true
|
|
},
|
|
async reserveDo() {
|
|
// const resp = await $.post('/mobile/activity/site/info/reserveDo', {
|
|
// siteId: this.site_id,
|
|
// times: JSON.stringify(this.times),
|
|
// message: this.message,
|
|
// joinUser: this.joinUser,
|
|
// })
|
|
// 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('预约失败')
|
|
// }
|
|
},
|
|
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 {
|
|
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 now = new Date()
|
|
const end = moment().format('YYYY-MM-DD') + ' ' + item.end_time + ':00'
|
|
|
|
const itemFullTime = this.selectDate.format('YYYY-MM-DD') + " " + item.start_time + "-" + item.end_time
|
|
|
|
if (this.alreadyReserveRecord.includes(itemFullTime)) {
|
|
return 3
|
|
}
|
|
|
|
if (now.getTime() >= new Date(end).getTime() && this.selectDate.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')) {
|
|
return 0
|
|
} else {
|
|
if (this.site.multiple) {
|
|
return 1
|
|
} else {
|
|
return item.hasReserve === true ? 2 : 1
|
|
}
|
|
}
|
|
},
|
|
|
|
async onLoad() {
|
|
this.loading = true
|
|
$.post('/mobile/activity/site/info/getDetail', {id: this.site_id}).then(res => {
|
|
if (res.code === 0) {
|
|
this.site = res.data
|
|
}
|
|
this.loading = false
|
|
})
|
|
},
|
|
async getReserve() {
|
|
const resp = await $.post('/mobile/activity/site/info/getReserve', {
|
|
siteId: this.site_id,
|
|
day: moment(this.selectDate).format('YYYY-MM-DD'),
|
|
})
|
|
if (resp.code === 0) {
|
|
resp.data.forEach(item => {
|
|
item.isClick = true
|
|
})
|
|
this.timeData = resp.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)
|
|
}
|
|
},
|
|
//获取最新的一个工作日设为当前时间
|
|
getLatestWorkDay() {
|
|
//1.首先判断今天是不是工作日
|
|
const weekNum = moment().day()
|
|
let selectDate = null
|
|
if (weekNum === 0) {
|
|
//周日
|
|
selectDate = moment().add(1, 'd')
|
|
} else if (weekNum === 6) {
|
|
//周六
|
|
selectDate = moment().add(2, 'd')
|
|
} else {
|
|
selectDate = moment()
|
|
}
|
|
return selectDate
|
|
}
|
|
},
|
|
async created() {
|
|
this.site_id = getQueryString('id')
|
|
this.selectDate = this.getLatestWorkDay()
|
|
this.setWeekList(this.selectDate)
|
|
await this.getReserve()
|
|
await this.onLoad()
|
|
await this.getMyReservation()
|
|
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|