360 lines
9.4 KiB
Vue
360 lines
9.4 KiB
Vue
<template>
|
||
<view style="background-color: white; height: 100vh">
|
||
<u-navbar title="核验二维码"></u-navbar>
|
||
<!-- 基础信息 -->
|
||
<view class="base-box">
|
||
<!-- 左侧 -->
|
||
<view class="img-box">
|
||
<u-avatar
|
||
:src="$u.http.config.imgUrl + vuex_user.head"
|
||
class="avatar-box"
|
||
></u-avatar>
|
||
</view>
|
||
<!-- 右侧 -->
|
||
<view class="msg-box">
|
||
<view>
|
||
<text class="msg-name"> {{ baseMsg.name }} </text>
|
||
<text class="status">{{ baseMsg.startYear }}届</text>
|
||
</view>
|
||
<view class="msg-desc"
|
||
>{{ baseMsg.college }}-{{ baseMsg.major }}-{{
|
||
"(" + baseMsg.educationStr + ")"
|
||
}}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<!-- 阴影行 -->
|
||
<view style="height: 20rpx; background-color: #f7f7f7"></view>
|
||
<!-- 二维码 -->
|
||
<view class="code-box">
|
||
<view class="code-school">
|
||
<u-avatar
|
||
:src="$u.http.config.imgUrl + baseMsg.logo.slice(1)"
|
||
class="avatar"
|
||
size="mini"
|
||
></u-avatar>
|
||
<view class="school-name" @click="testFn"> {{ baseMsg.school }} </view>
|
||
</view>
|
||
<view class="code-time">预约时间：{{ formData.retuenSchoolTime }}</view>
|
||
<view class="uq-code">
|
||
<!-- 二维码组件 -->
|
||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="jumpURL" :options="options">
|
||
<template v-slot:loading>
|
||
<text style="color: #2979ff">loading...</text>
|
||
</template>
|
||
</uqrcode>
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<!-- <view @click="goPageFn">跳转成功页</view> -->
|
||
<u-top-tips ref="uTips" :navbar-height="50"></u-top-tips>
|
||
<u-toast ref="uToast" />
|
||
<!-- 按钮 -->
|
||
<view class="btn-box">
|
||
<u-button style="width: 80%" shape="circle" type="primary" @click="cancelFn"
|
||
>取消预约</u-button
|
||
></view
|
||
>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { Debounce } from "../../../common/utils.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 表单
|
||
formData: {
|
||
// code: "浙A88888", // 车牌号
|
||
// phone: "22", // 联系电话
|
||
// checked: false, //是否同意
|
||
// remark: "上学上学-", //返校事由
|
||
// date: "2025/09/18 12:68:45", //返校日期
|
||
// otherDate: "2025/09/18 12:68:45", //提交时间
|
||
// status: "已核验",
|
||
// hyDate: "2025/09/18 12:68:45", //核验时间
|
||
// desc: "驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由", //驳回理由
|
||
|
||
userName: "李彪",
|
||
college: "计算机信息工程学院",
|
||
major: "计算机科学与技术",
|
||
endYear: "2029",
|
||
carNumber: "", // 车牌号
|
||
phone: "", // 联系电话
|
||
checked: false, //是否同意
|
||
retuenSchoolReason: "-", //返校事由
|
||
retuenSchoolTime: "", //返校日期
|
||
hyDate: "2025/09/18 12:68:45", //核验时间
|
||
createTime: "2025-01-07 11:07:20", //提交时间
|
||
auditRemark: null, //驳回理由
|
||
},
|
||
// 随行人
|
||
sxList: [
|
||
{
|
||
name: "",
|
||
phone: "",
|
||
},
|
||
],
|
||
// 选择日期
|
||
dateShow: false,
|
||
//
|
||
inputStyle: {
|
||
lineHeight: "90rpx",
|
||
height: "90rpx",
|
||
width: "400rpx",
|
||
},
|
||
eachStyle: {
|
||
lineHeight: "80rpx",
|
||
height: "80rpx",
|
||
width: "400rpx",
|
||
},
|
||
options: {
|
||
// margin: 10,
|
||
},
|
||
queryParams: {
|
||
id: "",
|
||
},
|
||
// 扫描网址
|
||
jumpURL: "http://192.168.1.8:8080/pages/my/BackSuccess/BackSuccess?id=",
|
||
// 基础信息
|
||
baseMsg: {
|
||
id: "",
|
||
name: "", //姓名
|
||
schoolName: "",
|
||
logo: "",
|
||
startYear: "", //入学年份
|
||
college: "", //学院
|
||
educationStr: "", //学历层次
|
||
major: "", //专业
|
||
endYear: "", //毕业年份
|
||
},
|
||
// 二维码信息
|
||
codeMsg: {
|
||
id: "",
|
||
returnSchoolPrebookId: "",
|
||
retuenSchoolTime: "",
|
||
isVerified: false,
|
||
verifyQRCode: "", //二维码
|
||
verifyTime: null,
|
||
},
|
||
interval: null, // 保存定时器的引用
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
console.log(e, "e--");
|
||
Object.assign(this.queryParams, e);
|
||
this.jumpURL =
|
||
window.location.origin +
|
||
"/#/pages/my/BackCodeLook/BackCodeLook?id=" +
|
||
this.queryParams.id;
|
||
console.log(this.jumpURL, "this.jumpURL----------");
|
||
},
|
||
onHide() {
|
||
// 在组件销毁前清除定时器以防止内存泄漏
|
||
if (this.interval) {
|
||
clearInterval(this.interval);
|
||
}
|
||
},
|
||
created() {
|
||
this.getCodeFn();
|
||
this.getSchoolFn();
|
||
this.getDetailFn();
|
||
// 然后每隔1秒获取一次数据
|
||
// this.interval = setInterval(this.getCodeFn, 2000);
|
||
},
|
||
beforeDestroy() {
|
||
// 在组件销毁前清除定时器以防止内存泄漏
|
||
if (this.interval) {
|
||
clearInterval(this.interval);
|
||
}
|
||
},
|
||
methods: {
|
||
testFn() {
|
||
console.log(this.$refs.uqrcode, "this.$refs.uqrcode");
|
||
},
|
||
// 取消预约
|
||
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 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 getDetailFn() {
|
||
const req = {
|
||
id: this.queryParams.id,
|
||
};
|
||
const result = await this.$u.apiList.SelectReturnSchoolInfoApi(req);
|
||
console.log(result, "result-");
|
||
//
|
||
if (result.isVerified) {
|
||
// 跳转到返回成功界面
|
||
return;
|
||
}
|
||
Object.assign(this.formData, result);
|
||
this.formData.retuenSchoolTime = this.formData.retuenSchoolTime
|
||
.replaceAll("0:00:00", "")
|
||
.replaceAll("00:00:00", "");
|
||
},
|
||
// 获取二维码
|
||
async getCodeFn() {
|
||
const req = {
|
||
id: this.queryParams.id,
|
||
};
|
||
const res = await this.$u.apiList.SaveReturnSchoolVerifyApi(req);
|
||
console.log(res, "res--二维码结果");
|
||
Object.assign(this.codeMsg, res);
|
||
},
|
||
submitFn() {},
|
||
goPageFn() {
|
||
this.$u.route({
|
||
url: `pages/my/BackSuccess/BackSuccess?id=${6666}&name=${777}`,
|
||
// params: {
|
||
// row: JSON.stringify(data),
|
||
// },
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 基础信息
|
||
.base-box {
|
||
background-color: white;
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
padding-top: 40rpx;
|
||
padding-bottom: 40rpx;
|
||
// 左侧头像
|
||
.img-box {
|
||
// border: 1px solid red;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
}
|
||
// 右侧
|
||
.msg-box {
|
||
// border: 1px solid blue;
|
||
flex: 1;
|
||
.msg-name {
|
||
font-size: 32rpx;
|
||
color: black;
|
||
}
|
||
.status {
|
||
margin-left: 15rpx;
|
||
background-color: #ecf1ff;
|
||
color: #2d7ad6;
|
||
padding-left: 15rpx;
|
||
padding-right: 15rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
.msg-desc {
|
||
color: #909090;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
// 二维码盒子
|
||
.code-box {
|
||
.code-school {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
padding-top: 10rpx;
|
||
.avatar {
|
||
width: 60rpx;
|
||
}
|
||
.school-name {
|
||
margin-left: 10rpx;
|
||
color: black;
|
||
}
|
||
}
|
||
.code-time {
|
||
text-align: center;
|
||
color: black;
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
}
|
||
.uq-code {
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
.btn-box {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
height: 150rpx;
|
||
border-top: 1px solid #f1f2f6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|