742 lines
20 KiB
Vue
742 lines
20 KiB
Vue
<template>
|
|
<view style="background-color: white; height: 100vh">
|
|
<u-navbar title="返校预约申请" :custom-back="goPageFn"></u-navbar>
|
|
<!-- 内容 -->
|
|
<scroll-view
|
|
scroll-y="true"
|
|
style="
|
|
height: calc(100vh - 240rpx);
|
|
width: 100%;
|
|
border-top: 1px solid #edf2fa;
|
|
background-color: #f1f2f6;
|
|
box-sizing: border-box;
|
|
"
|
|
>
|
|
<!-- 基础信息 -->
|
|
<view class="base-box">
|
|
<view class="item-line">
|
|
<text class="line-label"> 预约人</text>
|
|
<text class="line-value"> {{ formData.userName || "-" }} </text>
|
|
</view>
|
|
<view class="item-line">
|
|
<text class="line-label"> 学院专业</text>
|
|
<text class="line-value"> {{ baseMsg.college + "-" + baseMsg.major }} </text>
|
|
</view>
|
|
<view class="item-line">
|
|
<text class="line-label"> 学历层次</text>
|
|
<text class="line-value"> {{ baseMsg.educationStr || "-" }} </text>
|
|
</view>
|
|
<view class="item-line">
|
|
<text class="line-label"> 毕业年份</text>
|
|
<text class="line-value"> {{ baseMsg.endYear || "-" }} </text>
|
|
</view>
|
|
</view>
|
|
<!-- 表单 -->
|
|
<view class="form-box">
|
|
<!-- 返校日期 -->
|
|
<view class="item-date">
|
|
<text class="line-label"> 返校日期</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
:value="formData.retuenSchoolTime"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 提示 -->
|
|
<view class="item-tip" v-if="weekSet.length">
|
|
<text class="line-label"> 提示：每周{{ dateTip }}暂停开放返校服务</text>
|
|
</view>
|
|
<!-- 车牌号 -->
|
|
<view class="item-line">
|
|
<text class="line-label"> 车牌号</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="10"
|
|
:value="formData.carNumber || '-'"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 联系电话 -->
|
|
<view class="item-line">
|
|
<text class="line-label"> 联系电话</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="20"
|
|
:value="formData.phone"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 随行人信息 -->
|
|
<view class="item-line" v-if="sxList.length">
|
|
<text class="line-label"> 随行人信息</text>
|
|
</view>
|
|
<!-- 动态随行人 -->
|
|
<view class="item-for" v-for="(x, xIndex) in sxList" :key="xIndex">
|
|
<!-- 左侧内容 -->
|
|
<view class="for-left">
|
|
<view class="each">
|
|
<text> 随行人{{ xIndex + 1 }}</text>
|
|
<u-input
|
|
:custom-style="eachStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="20"
|
|
:value="x.name"
|
|
placeholder="-"
|
|
disabled
|
|
/>
|
|
</view>
|
|
<view class="each">
|
|
<text> 手机号</text>
|
|
<u-input
|
|
:custom-style="eachStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="20"
|
|
:value="x.phone"
|
|
placeholder="-"
|
|
disabled
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 返校事由 -->
|
|
<view class="item-line" style="border-bottom: none;">
|
|
<text class="line-label"> 返校事由</text>
|
|
</view>
|
|
<view class="item-text">
|
|
<u-input
|
|
:custom-style="{color:'#969696'}"
|
|
type="textarea"
|
|
height="200"
|
|
:border="false"
|
|
:value="formData.retuenSchoolReason || '-'"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 其余信息 -->
|
|
<view class="other-box">
|
|
<!-- 提交时间 -->
|
|
<view class="item-line">
|
|
<text class="line-label"> 提交时间</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="10"
|
|
:value="formData.createTime"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 核验状态 -->
|
|
<view class="item-line">
|
|
<text class="line-label"> 核验状态</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="10"
|
|
:value="formData.prebookStateZN"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 核验时间 -->
|
|
<view class="item-line" v-if="['已核验'].includes(formData.prebookStateZN)">
|
|
<text class="line-label"> 核验时间</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="10"
|
|
:value="formData.returnSchoolPrebookVerify[0].verifyTime"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 取消时间 --- 待对接 -->
|
|
<view class="item-line" v-if="['已取消'].includes(formData.prebookStateZN)">
|
|
<text class="line-label"> 取消时间</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="10"
|
|
:value="formData.cancelTime"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 审核时间 -->
|
|
<!-- v-if="['已驳回', '已核验', '未返校'].includes(formData.prebookStateZN)" -->
|
|
<view
|
|
class="item-line"
|
|
v-if="formData.auditTime"
|
|
>
|
|
<text class="line-label"> 审核时间</text>
|
|
<u-input
|
|
:custom-style="inputStyle"
|
|
type="text"
|
|
input-align="right"
|
|
:border="false"
|
|
maxlength="10"
|
|
:value="formData.auditTime"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
<!-- 驳回理由 -->
|
|
<template v-if="['已驳回'].includes(formData.prebookStateZN)">
|
|
<view class="item-line">
|
|
<text class="line-label"> 驳回理由</text>
|
|
</view>
|
|
<view class="item-text">
|
|
<u-input
|
|
type="textarea"
|
|
height="200"
|
|
:border="false"
|
|
:value="formData.auditRemark || '-'"
|
|
placeholder=""
|
|
disabled
|
|
/>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view style="height: 50rpx;background: #fff;"></view>
|
|
</scroll-view>
|
|
<!-- 按钮 -->
|
|
<view class="btn-box">
|
|
<u-button
|
|
v-if="['待审核'].includes(queryParams.status)"
|
|
style="width: 80%"
|
|
shape="circle"
|
|
type="primary"
|
|
@click="cancelFn"
|
|
>取消预约</u-button
|
|
>
|
|
<template v-if="['待核验'].includes(queryParams.status)">
|
|
<u-button
|
|
v-if="['管理员未开启核验功能'].includes(formData.prebookStateZN) && this.formData.isFlag === false"
|
|
style="width: 80%"
|
|
shape="circle"
|
|
type="primary"
|
|
@click="cancelFn"
|
|
>
|
|
取消预约
|
|
</u-button>
|
|
<u-button
|
|
v-if="['管理员未开启核验功能'].includes(formData.prebookStateZN) && this.formData.isFlag === true"
|
|
style="width: 80%"
|
|
shape="circle"
|
|
type="primary"
|
|
@click="submitFn"
|
|
>
|
|
确认返校
|
|
</u-button>
|
|
</template>
|
|
<template v-if="['已结束'].includes(queryParams.status)">
|
|
<u-button
|
|
v-if="['已取消'].includes(formData.prebookStateZN)"
|
|
style="width: 80%; background-color: #9ea1b9; color: white"
|
|
disabled
|
|
shape="circle"
|
|
>
|
|
已取消
|
|
</u-button>
|
|
<u-button
|
|
v-if="['已驳回'].includes(formData.prebookStateZN)"
|
|
style="width: 80%; background-color: #9ea1b9; color: white"
|
|
disabled
|
|
shape="circle"
|
|
>
|
|
已驳回
|
|
</u-button>
|
|
<u-button
|
|
v-if="['已核验'].includes(formData.prebookStateZN)"
|
|
style="width: 80%; background-color: #9ea1b9; color: white"
|
|
disabled
|
|
shape="circle"
|
|
>
|
|
已核验
|
|
</u-button>
|
|
<u-button
|
|
v-if="['未返校','管理员未开启核验功能'].includes(formData.prebookStateZN)"
|
|
style="width: 80%; background-color: #9ea1b9; color: white"
|
|
disabled
|
|
shape="circle"
|
|
>
|
|
未返校
|
|
</u-button>
|
|
</template>
|
|
</view>
|
|
<u-top-tips ref="uTips" :navbar-height="50"></u-top-tips>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { AuditStateEnumMap, PrebookStateEnumMap } from "@/enums/index.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 表单
|
|
formData: {
|
|
userName: "李彪",
|
|
college: "计算机信息工程学院",
|
|
major: "计算机科学与技术",
|
|
endYear: "2029",
|
|
carNumber: "", // 车牌号
|
|
phone: "", // 联系电话
|
|
checked: false, //是否同意
|
|
retuenSchoolReason: "-", //返校事由
|
|
retuenSchoolTime: "", //返校日期
|
|
auditTime: "", //审核时间
|
|
createTime: "", //提交时间
|
|
auditRemark: null, //驳回理由
|
|
|
|
id: "",
|
|
retuenSchoolCount: 3,
|
|
prebookState: 0,
|
|
prebookStateZN: "", //状态
|
|
verifyCount: 0,
|
|
auditState: 0,
|
|
auditStateZN: "",
|
|
|
|
isFlag:false,//区分是否在核验时间内
|
|
},
|
|
// 随行人
|
|
sxList: [
|
|
{
|
|
name: "",
|
|
phone: "",
|
|
},
|
|
],
|
|
// 选择日期
|
|
dateShow: false,
|
|
//
|
|
inputStyle: {
|
|
lineHeight: "90rpx",
|
|
height: "90rpx",
|
|
width: "400rpx",
|
|
color:"#969696"
|
|
},
|
|
eachStyle: {
|
|
lineHeight: "80rpx",
|
|
height: "80rpx",
|
|
width: "400rpx",
|
|
color:"#969696"
|
|
},
|
|
queryParams: {
|
|
id: "",
|
|
},
|
|
// 基础信息
|
|
baseMsg: {
|
|
id: "",
|
|
name: "", //姓名
|
|
schoolName: "",
|
|
schoolLogo: "",
|
|
startYear: "", //入学年份
|
|
college: "", //学院
|
|
educationStr: "", //学历层次
|
|
major: "", //专业
|
|
endYear: "", //毕业年份
|
|
},
|
|
// 选择日期提示
|
|
dateTip: "",
|
|
weekSet: [],
|
|
// 是否查看二维码
|
|
isVerify: false,
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
console.log(e, "e--");
|
|
Object.assign(this.queryParams, e);
|
|
},
|
|
async created() {
|
|
await this.getSchoolFn();
|
|
await this.getSetFn();
|
|
this.getDetailFn();
|
|
},
|
|
methods: {
|
|
goPageFn(){
|
|
// 返回上一页
|
|
/* this.$u.route({
|
|
url: "pages/my/BackSchool/BackSchool",
|
|
}); */
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
arrayToString(arr) {
|
|
let result = "";
|
|
const map = new Map([
|
|
[0, "周日"],
|
|
[1, "周一"],
|
|
[2, "周二"],
|
|
[3, "周三"],
|
|
[4, "周四"],
|
|
[5, "周五"],
|
|
[6, "周六"],
|
|
]);
|
|
arr.forEach((x) => {
|
|
if (map.has(x)) {
|
|
result += map.get(x) + "、";
|
|
}
|
|
});
|
|
return arr.length ? result.slice(0, result.length - 1) : result;
|
|
},
|
|
//获取返校设置
|
|
async getSetFn() {
|
|
const req = {
|
|
schoolId: this.baseMsg.schoolId,
|
|
}
|
|
const res = await this.$u.apiList.SelectInfoSetApi(req);
|
|
console.log(res, "res--");
|
|
let AllArr = [0, 1, 2, 3, 4, 5, 6];
|
|
// 星期设置
|
|
if (res.isDayOfWeek) {
|
|
// 星期设置
|
|
let result = res.dayOfWeek.split(",").map((x) => Number(x));
|
|
this.weekSet = AllArr.filter((x) => {
|
|
return !result.includes(x);
|
|
});
|
|
// 处理tip提示
|
|
this.dateTip = this.arrayToString(this.weekSet);
|
|
}
|
|
// 是否查看二维码
|
|
this.isVerify = res.isVerify;
|
|
},
|
|
// 获取教育经历
|
|
async getSchoolFn() {
|
|
const req = {
|
|
userId: this.vuex_user.id,
|
|
};
|
|
const res = await this.$u.apiList.MyEducations(req);
|
|
console.log(res, "res--");
|
|
const findRow = res.find((x) => x.isSelected === true);
|
|
if (!findRow) {
|
|
/* uni.showToast({
|
|
title: "未查询到当前教育经历",
|
|
icon: "none",
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: "未查询到当前教育经历",
|
|
type: "error",
|
|
});
|
|
return;
|
|
}
|
|
Object.assign(this.baseMsg, findRow);
|
|
this.baseMsg.name = this.vuex_user.name;
|
|
},
|
|
// 取消预约
|
|
async cancelFn() {
|
|
uni.showModal({
|
|
// title: "提示",
|
|
content: `确定取消本次预约？`,
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
const req = {
|
|
id: this.queryParams.id,
|
|
// educationId: this.baseMsg.id,
|
|
};
|
|
const res = await this.$u.apiList.DelReturnSchoolInfoApi(req).catch(e=>e);
|
|
console.log(res, "res----");
|
|
if(res?.succeed === false){
|
|
/* uni.showToast({
|
|
icon:'error',
|
|
title: res.error || '取消失败',
|
|
duration: 2000,
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: res.error || "取消失败",
|
|
type: "error",
|
|
});
|
|
return
|
|
}
|
|
/* uni.showToast({
|
|
title: "取消预约成功",
|
|
duration: 2000,
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: "取消预约成功",
|
|
type: "success",
|
|
});
|
|
setTimeout(() => {
|
|
// 返回上一页
|
|
/* this.$u.route({
|
|
url: "pages/my/BackSchool/BackSchool",
|
|
}); */
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}, 1000);
|
|
}
|
|
if (res.cancel) {
|
|
// console.log('用户点击取消');
|
|
}
|
|
},
|
|
});
|
|
},
|
|
// 确认返校
|
|
async submitFn(){
|
|
uni.showModal({
|
|
// title: "提示",
|
|
content: `是否确认返校？确认后您的预约状态将变更为 “已返校”`,
|
|
success: async (res) => {
|
|
let year = new Date().getFullYear();
|
|
let month =
|
|
new Date().getMonth() < 10
|
|
? `0${new Date().getMonth() + 1}`
|
|
: new Date().getMonth() + 1;
|
|
let day =
|
|
new Date().getDate() < 10 ? `0${new Date().getDate()}` : new Date().getDate();
|
|
|
|
let currentDate = year + month + day;
|
|
if (res.confirm) {
|
|
const req = {
|
|
id: this.queryParams.id,
|
|
command: currentDate,
|
|
schoolId: this.baseMsg.schoolId,
|
|
};
|
|
const res = await this.$u.apiList.SaveReturnSchoolInfoApi(req).catch(e=>e);
|
|
console.log(res, "res----");
|
|
if(res?.succeed === false){
|
|
/* uni.showToast({
|
|
icon:'error',
|
|
title: res.error || '确认失败',
|
|
duration: 2000,
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: res.error || "确认失败",
|
|
type: "error",
|
|
});
|
|
return
|
|
}
|
|
/* uni.showToast({
|
|
title: "确认成功",
|
|
duration: 2000,
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: "确认成功",
|
|
type: "success",
|
|
});
|
|
setTimeout(() => {
|
|
// 返回上一页
|
|
/* this.$u.route({
|
|
url: "pages/my/BackSchool/BackSchool",
|
|
}); */
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}, 1000);
|
|
}
|
|
if (res.cancel) {
|
|
// console.log('用户点击取消');
|
|
}
|
|
},
|
|
});
|
|
},
|
|
// 获取详情
|
|
async getDetailFn() {
|
|
const req = {
|
|
id: this.queryParams.id,
|
|
};
|
|
const res = await this.$u.apiList.SelectReturnSchoolInfoApi(req);
|
|
console.log(res, "res-");
|
|
// 回填基础信息
|
|
Object.assign(this.formData, res);
|
|
this.formData.prebookStateZN = PrebookStateEnumMap.get(res.prebookState);
|
|
// 如果未开启二维码,待核验变成 管理员未开启核验功能
|
|
if (this.isVerify === false && ["待核验"].includes(this.formData.prebookStateZN)) {
|
|
this.formData.prebookStateZN = "管理员未开启核验功能";
|
|
}
|
|
this.formData.auditStateZN = AuditStateEnumMap.get(res.auditState);
|
|
this.formData.retuenSchoolTime = res.retuenSchoolTime
|
|
.replaceAll("0:00:00", "")
|
|
.replaceAll("00:00:00", "");
|
|
console.log(JSON.parse(JSON.stringify(this.formData)),'this.formData-');
|
|
// 回填随行人
|
|
this.sxList = res.returnSchoolPrebookTogetherPerson.sort((a, b) => {
|
|
return a.index - b.index;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.body-box {
|
|
max-height: calc(100vh - 250rpx);
|
|
overflow-y: auto;
|
|
border: 1px solid red;
|
|
}
|
|
// 基础信息
|
|
.base-box {
|
|
background-color: white;
|
|
// 单行样式
|
|
.item-line {
|
|
text-align: left;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f1f2f6;
|
|
.line-label {
|
|
// font-size: 30rpx;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
.line-value {
|
|
// font-weight: 700;
|
|
color: #969696;
|
|
}
|
|
// 表单
|
|
.form-box {
|
|
margin-top: 20rpx;
|
|
background-color: white;
|
|
// 返校日期
|
|
.item-date {
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
position: relative;
|
|
.input-mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
// background-color: red;
|
|
}
|
|
.img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50rpx;
|
|
// padding-right: 30rpx;
|
|
}
|
|
}
|
|
// 单行样式
|
|
.item-line {
|
|
text-align: left;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f1f2f6;
|
|
.line-label {
|
|
// font-size: 30rpx;
|
|
color: black;
|
|
}
|
|
}
|
|
// 提示
|
|
.item-tip {
|
|
text-align: left;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
padding-bottom: 10rpx;
|
|
font-size: 22rpx;
|
|
// line-height: 90rpx;
|
|
// height: 90rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f1f2f6;
|
|
.line-label {
|
|
// font-size: 30rpx;
|
|
color: red;
|
|
}
|
|
}
|
|
// 随行人样式
|
|
.item-for {
|
|
background-color: #f7f6f9;
|
|
padding-left: 30rpx;
|
|
display: flex;
|
|
width: 100%;
|
|
border-bottom: 1px solid #7b7c8033;
|
|
.for-left {
|
|
// border: 1px solid blue;
|
|
width: calc(100%);
|
|
.each {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 80rpx;
|
|
height: 80rpx;
|
|
padding-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
// 文本框
|
|
.item-text {
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
}
|
|
}
|
|
// 其余信息
|
|
.other-box {
|
|
margin-top: 20rpx;
|
|
background-color: white;
|
|
// 文本框
|
|
.item-text {
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
}
|
|
// 单行样式
|
|
.item-line {
|
|
text-align: left;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f1f2f6;
|
|
.line-label {
|
|
// font-size: 30rpx;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
// 按钮
|
|
.btn-box {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
height: 150rpx;
|
|
border-top: 1px solid #f1f2f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|