426 lines
13 KiB
HTML
426 lines
13 KiB
HTML
<!--#
|
||
layout("/mobile/platform.html"){
|
||
#-->
|
||
|
||
<style>
|
||
|
||
.van-index-bar__sidebar {
|
||
display: none;
|
||
}
|
||
|
||
.van-doc-card {
|
||
margin: 14px;
|
||
padding: 12px 12px 12px 12px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 8px 12px #ebedf0;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
position: relative;
|
||
}
|
||
|
||
.van-divider {
|
||
margin: 6px 0 6px 0px;
|
||
border-color: lightgray;
|
||
}
|
||
|
||
.van-button--small {
|
||
border-radius: revert;
|
||
width: 40%;
|
||
height: 30px;
|
||
}
|
||
|
||
.van-col {
|
||
line-height: 20px;
|
||
}
|
||
|
||
.title_span {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
left: -1px;
|
||
top: 11px;
|
||
color: #1867b0;
|
||
}
|
||
|
||
.title {
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cus_overflow {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.showMore {
|
||
color: #1867b0;
|
||
}
|
||
|
||
.cus_popup {
|
||
width: 70%;
|
||
height: 50%;
|
||
/*border-radius: 10px;*/
|
||
padding: 10px 14px;
|
||
font-size: 15px;
|
||
/*background-color: #E5E7E9;
|
||
background-image: url("https://www.transparenttextures.com/patterns/green-cup.png");*/
|
||
}
|
||
|
||
.cus_icon {
|
||
z-index: 10000;
|
||
color: white;
|
||
font-size: 35px;
|
||
position: fixed;
|
||
top: 81%;
|
||
left: 44%;
|
||
}
|
||
|
||
.userPopup {
|
||
height: 80%;
|
||
background-color: #f6f7f9;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.van-row div {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.firstName {
|
||
width: 45px;
|
||
background-color: lightgrey;
|
||
border-radius: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: white;
|
||
}
|
||
|
||
.content {
|
||
height: 84%;
|
||
overflow: auto;
|
||
}
|
||
|
||
.van-dialog__header {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.van-dialog__confirm {
|
||
color: #1867b0;
|
||
}
|
||
|
||
.van-field__label {
|
||
width: 5em;
|
||
}
|
||
|
||
.cus_cell {
|
||
padding: 4px 0px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.van-checkbox-group {
|
||
max-height: 260px;
|
||
overflow-y: auto;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.unit {
|
||
display: inline-block;
|
||
max-width: 160px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
position: absolute;
|
||
}
|
||
|
||
.cus_button {
|
||
border-radius: 8px;
|
||
height: 26px;
|
||
}
|
||
.van-dropdown-menu__item {
|
||
flex: auto;
|
||
}
|
||
.audit_icon {
|
||
font-size: 24px;
|
||
position: absolute;
|
||
font-weight: bolder;
|
||
right: 0;
|
||
top: 10px;
|
||
}
|
||
.van-cell__title {
|
||
font-size: 16px;
|
||
}
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
|
||
<m-page-loading v-if="mLoading"></m-page-loading>
|
||
|
||
<!--top栏-->
|
||
<van-nav-bar
|
||
title="我的预约"
|
||
left-arrow
|
||
placeholder
|
||
fixed
|
||
@click-left="history.go(-1)"
|
||
safe-area-inset-top
|
||
></van-nav-bar>
|
||
|
||
<!--筛选框-->
|
||
<div class="search-fixed">
|
||
<van-search
|
||
v-model="pageForm.searchKeyword"
|
||
shape="round"
|
||
maxlength="10"
|
||
@search="doSearch"
|
||
placeholder="请输入场地名称、场地地点进行查询"
|
||
>
|
||
</van-search>
|
||
<van-dropdown-menu>
|
||
<van-dropdown-item :title="pageForm.time" ref="item" @open="">
|
||
<van-cell center title="查询全部">
|
||
<template #right-icon>
|
||
<van-switch v-model="pageForm.timeSwitch" size="24" active-color="#246fb4"></van-switch>
|
||
</template>
|
||
</van-cell>
|
||
<van-datetime-picker v-show="pageForm.timeSwitch === false"
|
||
v-model="time" cancel-button-text=" " confirm-button-text=" "
|
||
type="year-month"
|
||
title="选择年月"
|
||
:formatter="timeFormatter"
|
||
></van-datetime-picker>
|
||
<div style="padding: 5px 16px;margin-top: 6px">
|
||
<van-button type="danger" color="#246fb4" block round @click="onConfirm" style="height: 36px">
|
||
确认
|
||
</van-button>
|
||
</div>
|
||
</van-dropdown-item>
|
||
<van-dropdown-item v-model="pageForm.typeId" :options="typeList"
|
||
@change="doSearch"></van-dropdown-item>
|
||
</van-dropdown-menu>
|
||
</div>
|
||
|
||
<!--列表-->
|
||
<div style="margin-top: 116px">
|
||
<van-list
|
||
v-model="loading"
|
||
:finished="finished" :immediate-check="false"
|
||
:finished-text="tableData.length>0?'没有更多了':''"
|
||
@load="onLoad">
|
||
|
||
<div class="van-doc-card" v-for="o in tableData">
|
||
<div @click="openView(o.id, o.modulename)">
|
||
|
||
<div style="display: flex; justify-content: space-between">
|
||
<div style="width: 74%">
|
||
<div class="van-ellipsis title">
|
||
<span class="title_span">|</span>
|
||
<span>{{o.name}}</span>
|
||
</div>
|
||
<div style="color: grey">{{o.address}}</div>
|
||
</div>
|
||
<div style="color: #1867b0;">
|
||
{{o.meetingtypename}}
|
||
</div>
|
||
</div>
|
||
|
||
<van-divider></van-divider>
|
||
|
||
<div style="margin-top: 10px">
|
||
<van-row>
|
||
<van-col span="24">
|
||
<span style="color: grey">预约天数：</span>
|
||
<span>{{o.days}}</span>
|
||
</van-col>
|
||
</van-row>
|
||
<van-row>
|
||
<van-col span="24">
|
||
<span style="color: grey; float: left">预约时间：</span>
|
||
<span v-for="(item,index) in o.concat_day.split(',')">
|
||
<div :style="index !== 0 ? 'text-indent: 5em' : ''">{{getTime(o, item)}}</div>
|
||
</span>
|
||
</van-col>
|
||
</van-row>
|
||
<van-row>
|
||
<van-col span="24">
|
||
<span style="color: grey">审核状态：</span>
|
||
<span v-if="[0].includes(o.stateaudittype)"
|
||
style="color: #e6a23c">{{o.statename}}</span>
|
||
<span v-if="o.stateaudittype==3" style="color: #67c23a">{{o.statename}}</span>
|
||
<span v-if="o.stateaudittype==1" style="color: #f56c6c">{{o.statename}}</span>
|
||
</van-col>
|
||
</van-row>
|
||
<van-row v-if="o.stateaudittype == '1'">
|
||
<van-col span="24">
|
||
<span style="color: grey">审核意见：</span>
|
||
<span>{{JSON.parse(o.auditlist).find(x => x.auditState === false).auditOption}}</span>
|
||
</van-col>
|
||
</van-row>
|
||
</div>
|
||
|
||
<div style="display: flex; justify-content: flex-end; margin-top: 4px">
|
||
<div>
|
||
<van-button @click.stop="rollback(o)" class="cus_button"
|
||
type="primary" size="small" color="#1867b0"
|
||
style="margin-right: 8px; width: auto;">撤销预约</van-button>
|
||
<van-button @click.stop="backOption(o)" class="cus_button"
|
||
type="primary" size="small" color="#1867b0"
|
||
style="margin-right: 8px; width: auto;">反馈意见</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
<van-empty
|
||
v-if="mLoading==false&&tableData.length==0"
|
||
class="custom-image"
|
||
image="/none.svg"
|
||
description="暂无数据"
|
||
></van-empty>
|
||
</div>
|
||
|
||
|
||
<van-dialog v-model="show" title="反馈意见" show-cancel-button @confirm="backDo">
|
||
<van-field
|
||
v-model="option"
|
||
rows="4"
|
||
label="反馈意见："
|
||
autosize
|
||
type="textarea"
|
||
maxlength="50"
|
||
placeholder="请输入反馈意见"
|
||
show-word-limit
|
||
></van-field>
|
||
</van-dialog>
|
||
</div>
|
||
|
||
<script>
|
||
<!--# include("/platform/activity/includeJs/activityUtil.js"){} #-->
|
||
const siteTypeUtil = new typeUtil()
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
mixins: [mobileMixins],
|
||
data() {
|
||
return {
|
||
time: new Date(),
|
||
option: '',
|
||
show: false,
|
||
list: ['a', 'b'],
|
||
typeList: [],
|
||
timeList: [],
|
||
info: {},
|
||
}
|
||
},
|
||
methods: {
|
||
onConfirm() {
|
||
if(this.pageForm.timeSwitch === true) {
|
||
this.timeList = [{text: '全部', value: '全部'}]
|
||
}else {
|
||
this.timeList = [{text: moment(this.time).format('YYYY-MM'), value: moment(this.time).format('YYYY-MM')}]
|
||
}
|
||
this.$set(this.pageForm, "time", this.timeList[0].value)
|
||
this.$refs.item.toggle()
|
||
this.doSearch()
|
||
},
|
||
timeFormatter(type, val) {
|
||
if (type === 'year') {
|
||
return val + `年`;
|
||
}
|
||
if (type === 'month') {
|
||
return val + `月`;
|
||
}
|
||
return val;
|
||
},
|
||
async rollback(o) {
|
||
const self = this
|
||
const res = await $.post("/platform/activity/site/reserve/isCanRollBack", {id: o.id});
|
||
if(res === true) {
|
||
vant.Toast('此预约状态下不能进行撤回操作！')
|
||
return
|
||
}
|
||
vant.Dialog.confirm({
|
||
title: '温馨提示',
|
||
message: '您是否要撤销此预约？',
|
||
}).then(async () => {
|
||
const resp = await $.post('/mobile/activity/site/info/rollback', {
|
||
id: o.id
|
||
})
|
||
vant.Toast(resp.msg)
|
||
if(resp.code === 0) {
|
||
self.doSearch()
|
||
}
|
||
}).catch(() => {});
|
||
},
|
||
backOption(o) {
|
||
this.info = o
|
||
this.option = ''
|
||
this.show = true
|
||
},
|
||
async backDo() {
|
||
if(this.option === '') {
|
||
vant.Toast('请填写反馈意见')
|
||
return
|
||
}
|
||
const res = await $.post('/mobile/activity/site/info/backOption', {
|
||
id: this.info.id,
|
||
option: this.option
|
||
})
|
||
if (res.code === 0) {
|
||
this.doSearch()
|
||
vant.Toast(res.msg)
|
||
} else {
|
||
vant.Toast('操作失败')
|
||
}
|
||
},
|
||
getTime(o, day) {
|
||
const week = new Date(day).getDay()
|
||
const arr = ['日', '一', '二', '三', '四', '五', '六']
|
||
return moment(day).format('MM月DD日') + ' 周' + arr[week] + ' ' + o.start_time + '-' + o.end_time
|
||
},
|
||
doSearch() {
|
||
this.pageForm.pageNumber = 1
|
||
this.tableData = []
|
||
this.finished = false
|
||
this.onLoad()
|
||
},
|
||
async onLoad() {
|
||
this.loading = true
|
||
$.post('/mobile/activity/site/info/myReserve', this.pageForm).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData = this.tableData.concat(res.data.list)
|
||
if (this.tableData.length === res.data.totalCount) {
|
||
this.finished = true
|
||
} else {
|
||
this.pageForm.pageNumber++
|
||
}
|
||
}
|
||
this.loading = false
|
||
})
|
||
},
|
||
},
|
||
async created() {
|
||
this.typeList = await siteTypeUtil.getAllType()
|
||
this.typeList.unshift({text: '全部场地类型'})
|
||
if (this.typeList && this.typeList.length > 0) {
|
||
this.$set(this.pageForm, "typeId", this.typeList[0].value)
|
||
}
|
||
//this.timeList.unshift({text: moment().format('YYYY-MM'), value: moment().format('YYYY-MM')})
|
||
this.timeList = [{text: '全部', value: '全部'}]
|
||
this.$set(this.pageForm, "time", this.timeList[0].value)
|
||
this.$set(this.pageForm, "timeSwitch", true)
|
||
this.onLoad()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#-->
|