You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
514 lines
17 KiB
514 lines
17 KiB
<template>
|
|
<div class="check-out-cont">
|
|
<div class="header el-flex el-flex-y-center">
|
|
<div class="tit">入住办理</div>
|
|
<div class="back el-ml-4" @click="goBack()">
|
|
<i class="el-icon-back"></i>返回
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<!-- 入住流程 -->
|
|
<div class="single el-flex el-flex-space-around">
|
|
<div class="el-flex el-flex-y-center" v-for="(item, index) in dataList" :key="index">
|
|
<div class="tit el-flex el-flex-y-center model" :style="{ backgroundColor: item.bgColor }">
|
|
<el-image style="height: 28px; margin-right: 13px" :src="item.imageSrc"></el-image><span>{{ item.title
|
|
}}</span>
|
|
<div class="checkout-process-container">
|
|
<el-image class="el-flex el-flex-y-center el-flex-center checkout-process" style="height: 26px"
|
|
:src="susIcon" v-if="stepCompleted[index]"></el-image>
|
|
</div>
|
|
</div>
|
|
<div class="arrow-container">
|
|
<el-image class="el-flex el-flex-y-center el-flex-center" style="height: 28px"
|
|
:src="stepCompleted[index] ? arrowActive : arrow" v-if="index < dataList.length - 1"></el-image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 核验信息 -->
|
|
<div class="cont">
|
|
<el-form ref="checnInForm" :model="checnInForm" :rules="rules" size="small" :inline="true"
|
|
v-if="currentStep === 1">
|
|
<div class="el-my-5">
|
|
<CommonTitle>核验信息</CommonTitle>
|
|
</div>
|
|
<el-row>
|
|
<el-form-item label="身份证" label-width="80px" prop="idCard">
|
|
<el-input v-model.trim="checnInForm.idCard" e placeholder="请输入用户名称" clearable style="width: 240px" maxlength="18"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="手机号" label-width="80px" prop="phone">
|
|
<el-input v-model.trim="checnInForm.phone" placeholder="请输入手机号" clearable style="width: 240px" maxlength="11"/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
|
</el-form-item>
|
|
</el-row>
|
|
|
|
<el-form-item class="el-ml-6">
|
|
<el-row :gutter="50" v-if="Object.keys(userInfo).length > 0">
|
|
<el-col :span="8"> 姓名：{{ userInfo.graduateName }} </el-col>
|
|
<el-col :span="8"> 性别：{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '' }} </el-col>
|
|
<el-col :span="8"> 手机号：{{ userInfo.telephone }} </el-col>
|
|
<el-col :span="8">
|
|
所选房间：{{ userInfo.roomAddressName }}
|
|
</el-col>
|
|
<el-col :span="8"> 剩余可住天数： {{ userInfo.quotaLeft }}</el-col>
|
|
<el-col :span="8"> 本次选房时间：{{ userInfo.createdTime }} </el-col>
|
|
<el-col :spam="24">
|
|
核验结果：<span style="color: #22cb8c">{{ userInfo.xlhStateName }}</span>
|
|
<el-button type="primary" @click="refresh" class="el-mx-2">刷新结果</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label-width="160px" label="毕业生选择入住日期" v-show="Object.keys(userInfo).length > 0">
|
|
<el-date-picker v-model="userInfo.checkInTime" type="date" placeholder="选择日期"
|
|
:picker-options="startPickerOptions" style="width: 240px" value-format="yyyy-MM-dd"
|
|
value="yyyy-MM-dd"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label-width="160px" label="毕业生选择退房日期" v-show="Object.keys(userInfo).length > 0">
|
|
<el-date-picker v-model="userInfo.checkOutTime" type="date" placeholder="选择日期"
|
|
:picker-options="endPickerOptions" style="width: 240px" value-format="yyyy-MM-dd"></el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 物资发放 -->
|
|
<el-form size="small" ref="checnInForm" :model="checnInForm" :rules="rules">
|
|
<div v-if="currentStep === 2 || currentStep === 3 || currentStep === 4">
|
|
<div class="el-my-3">
|
|
|
|
<CommonTitle>核验信息</CommonTitle>
|
|
</div>
|
|
<el-form-item label-width="30px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8"> 入住房间：{{ userInfo.roomAddressName }} </el-col>
|
|
<el-col :span="4"> 姓名：{{ userInfo.graduateName }} </el-col>
|
|
<el-col :span="5"> 性别：{{ userInfo.gender === 1 ? '男' : '女' }} </el-col>
|
|
<el-col :span="6"> 手机号：{{ userInfo.telephone }} </el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</div>
|
|
<div v-if="currentStep === 2">
|
|
<div class="el-my-3">
|
|
<CommonTitle>物资发放</CommonTitle>
|
|
</div>
|
|
<!-- 是否已发放物资 下拉选择器 -->
|
|
<el-form-item label="是否发放物资" prop="supplies">
|
|
<el-select v-model="checnInForm.supplies" placeholder="请选择">
|
|
<el-option label="已发放" :value="0"></el-option>
|
|
<el-option label="未发放" :value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 备注说明 -->
|
|
<el-form-item label="备注说明" prop="remark">
|
|
<el-input v-model="checnInForm.remark" placeholder="请输入备注说明" type="textarea" clearable
|
|
style="width: 240px"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<!-- 合同签订 -->
|
|
<el-form size="small" v-if="currentStep === 3">
|
|
<div>
|
|
<div class="el-my-3">
|
|
<CommonTitle>合同签订</CommonTitle>
|
|
</div>
|
|
<el-form-item label="是否签订合同">
|
|
<span style="color: #f0910e">等待签订</span>
|
|
<!-- 查看合同文本 -->
|
|
<el-button type="text" size="mini" style="margin-left: 10px">
|
|
查看合同
|
|
</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<!-- 履约保证金 -->
|
|
<el-form size="small" v-if="currentStep === 4">
|
|
<div>
|
|
<div class="el-my-3">
|
|
<CommonTitle>缴纳履约保证金</CommonTitle>
|
|
</div>
|
|
<el-row gutter="50">
|
|
<!-- 支付方式 -->
|
|
<el-col :span="8">
|
|
<el-form-item label="支付方式" label-width="100px">
|
|
<el-select v-model="checnInForm.marginType" placeholder="请选择">
|
|
<el-option label="支付宝" value="0"></el-option>
|
|
<el-option label="微信" value="1"></el-option>
|
|
<el-option label="POS机刷卡" value="2"></el-option>
|
|
<el-option label="现金支付" value="3"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- 支付金额 -->
|
|
<el-col :span="8">
|
|
<el-form-item label="支付金额">
|
|
<el-input-number v-model="checnInForm.marginAmount" :min="0"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 备注说明 -->
|
|
|
|
<el-form-item label="备注说明" prop="remark">
|
|
<el-input v-model="checnInForm.remark" placeholder="请输入备注说明" type="textarea" clearable
|
|
style="width: 240px"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<!-- 添加按钮 -->
|
|
<div class="button-group el-flex el-flex-end">
|
|
<el-button @click="currentStep === 1 ? handleCancel() : handlePrevStep()">
|
|
{{ currentStep === 1 ? "取消" : "上一步" }}
|
|
</el-button>
|
|
<el-button type="primary" @click="
|
|
currentStep === dataList.length - 1
|
|
? handleReleaseHouse()
|
|
: handleNextStep()
|
|
">
|
|
{{ currentStep === dataList.length - 1 ? "履约保证金" : "下一步" }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CommonTitle from "../../components/CommonTitle.vue";
|
|
import { getResidentInfo, updateMzGraduateInfo, createMzGraduateInfo, getCheckInRecInfo } from "../../../api/residence/checkin"
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
CommonTitle,
|
|
},
|
|
data() {
|
|
let startDisabledDate = (time) => {
|
|
// 获取当前日期，将时分秒毫秒置为 0，确保只比较日期部分
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
const compareDate = new Date(time);
|
|
compareDate.setHours(0, 0, 0, 0);
|
|
// 禁用非当天的日期
|
|
return compareDate.getTime() !== today.getTime();
|
|
}
|
|
let endDisabledDate = (time) => {
|
|
// 获取当前时间戳
|
|
const now = new Date();
|
|
// 如果存在 checkInTime
|
|
if (this.userInfo.checkInTime) {
|
|
const checkInDate = new Date(this.userInfo.checkInTime);
|
|
// 计算 checkInTime 往后 100 天的日期
|
|
const endDate = new Date(checkInDate);
|
|
endDate.setDate(endDate.getDate() + this.userInfo.quotaLeft);
|
|
// 禁用小于 checkInTime 和大于 checkInTime 往后 100 天的日期
|
|
return time < checkInDate || time > endDate;
|
|
} else {
|
|
// 如果没有 checkInTime，禁用大于当前日期的日期
|
|
return time > now;
|
|
}
|
|
}
|
|
return {
|
|
// 这里可以定义数据
|
|
dataList: [
|
|
{
|
|
title: "核验信息",
|
|
imageSrc: require("@/assets/images/address-card.png"),
|
|
bgColor: "#FBEDC8",
|
|
},
|
|
{
|
|
title: "物资发放",
|
|
imageSrc: require("@/assets/images/antFill-gift.png"),
|
|
bgColor: "#C2E2F9",
|
|
},
|
|
{
|
|
title: "合同签订",
|
|
imageSrc: require("@/assets/images/fa-book.png"),
|
|
bgColor: "#FBD5D5",
|
|
},
|
|
{
|
|
title: "履约保证金",
|
|
imageSrc: require("@/assets/images/pay-circle.png"),
|
|
bgColor: "#8BFDD3",
|
|
},
|
|
{
|
|
title: "办理完成",
|
|
imageSrc: require("@/assets/images/check_circle.png"),
|
|
bgColor: "#CFCDFB",
|
|
},
|
|
],
|
|
arrow: require("@/assets/images/arrow_forward.png"),
|
|
arrowActive: require("@/assets/images/arrow_forward_a.png"),
|
|
//表单参数
|
|
checnInForm: {
|
|
idCard: "", // 身份证
|
|
phone: "", // 手机号
|
|
supplies: "", // 是否发放物资
|
|
remark: "", // 备注说明
|
|
checked: false, // 是否通过线下支付
|
|
marginType: "", // 支付方式
|
|
marginAmount: 0, // 支付金额
|
|
actualPay: 0, // 实际支付
|
|
},
|
|
// 表单验证规则
|
|
rules: {
|
|
supplies: [
|
|
{ required: true, message: "请选择是否发放物资", trigger: "change" },
|
|
]
|
|
},
|
|
|
|
susIcon: require("@/assets/images/check-circle-fas.png"),
|
|
currentStep: 1, // 当前步骤
|
|
stepCompleted: this.dataList
|
|
? Array(this.dataList.length - 1).fill(false)
|
|
: [], // 存储每个步骤的完成状态
|
|
userInfo: {},
|
|
startPickerOptions: {
|
|
disabledDate: startDisabledDate
|
|
},
|
|
endPickerOptions: {
|
|
disabledDate: endDisabledDate
|
|
},
|
|
timer: null, // 定时器
|
|
};
|
|
},
|
|
methods: {
|
|
// 返回首页
|
|
goBack() {
|
|
this.$router.push({ path: "/" });
|
|
},
|
|
async handleQuery(refresh) {
|
|
try {
|
|
if(!this.checnInForm.idCard && !this.checnInForm.phone){
|
|
this.$message.error('请输入身份证或手机号')
|
|
return;
|
|
}
|
|
const res = await getResidentInfo({
|
|
idCard: this.checnInForm.idCard, // 身份证
|
|
phone: this.checnInForm.phone, // 手机号
|
|
})
|
|
if (res.code === 200&&res.data) {
|
|
if (refresh === true) {
|
|
this.userInfo.xlhState = res.data.xlhState;
|
|
return
|
|
}
|
|
this.userInfo = res.data;
|
|
if(this.userInfo.checkInRecId){
|
|
this.getCheckInRecInfo()
|
|
}
|
|
} else if(!res.data){
|
|
this.$message.error("未查询到对应信息~")
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
handleCancel() {
|
|
this.$router.push({ path: "/" });
|
|
console.log("取消操作");
|
|
},
|
|
// 上一步操作
|
|
handlePrevStep() {
|
|
if (this.currentStep > 0) {
|
|
this.currentStep--;
|
|
console.log("上currentStep::", this.currentStep);
|
|
console.log("dataList.::", this.dataList);
|
|
|
|
if (this.currentStep <= this.stepCompleted.length) {
|
|
this.stepCompleted[this.currentStep - 1] = false;
|
|
|
|
console.log("stepCompleted::", this.stepCompleted);
|
|
}
|
|
}
|
|
},
|
|
// 下一步操作
|
|
async handleNextStep() {
|
|
if (this.currentStep < this.dataList.length) {
|
|
if(this.currentStep === 1){
|
|
if(!this.userInfo.checkInTime || !this.userInfo.checkOutTime){
|
|
this.$message.error('请选择入住时间和退房时间')
|
|
return;
|
|
}
|
|
this.updateMzGraduateInfo(); // 更新时间
|
|
this.currentStep++;
|
|
await this.createMzGraduateInfo()
|
|
this.handleQuery()
|
|
this.stepCompleted[0] = true;
|
|
return;
|
|
}
|
|
if (this.currentStep == 2) {
|
|
this.$refs['checnInForm'].validate(async (valid) => {
|
|
if (valid) {
|
|
this.createMzGraduateInfo()//提交更新
|
|
this.currentStep++;
|
|
this.stepCompleted[1] = true;
|
|
if(!this.checnInForm.contract){
|
|
this.timer = setInterval(() => {
|
|
this.getCheckInRecInfo()
|
|
}, 5000)
|
|
}
|
|
return;
|
|
}
|
|
})
|
|
return;
|
|
}
|
|
if (this.currentStep === 3) {
|
|
clearInterval(this.timer)
|
|
this.createMzGraduateInfo()//提交更新
|
|
this.currentStep++;
|
|
this.stepCompleted[2] = true;
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
// 更新入住时间和退房时间
|
|
async updateMzGraduateInfo() {
|
|
try {
|
|
const res = await updateMzGraduateInfo({
|
|
id: this.userInfo.chooseRecId, // 记录Id
|
|
checkInDate: this.userInfo.checkInTime, // 入住时间
|
|
checkOutDate: this.userInfo.checkOutTime, // 退房时间
|
|
houseId: this.userInfo.houseId, // 房屋Id
|
|
graduateId: this.userInfo.graduateId, // 毕业生Id
|
|
})
|
|
if (res.code === 200) {
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
// 毕业生入住记录回显
|
|
async getCheckInRecInfo() {
|
|
try {
|
|
const res = await getCheckInRecInfo({
|
|
id: this.userInfo.checkInRecId, // 记录Id
|
|
})
|
|
if (res.code === 200) {
|
|
this.checnInForm = {...this.checnInForm,...res.data};
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
// 提交更新
|
|
async createMzGraduateInfo() {
|
|
let parm = {
|
|
id: this.userInfo.checkInRecId, // 记录Id
|
|
supplies: this.checnInForm.supplies, // 是否发放物资
|
|
marginType: this.checnInForm.marginType, // 支付方式
|
|
marginAmount: this.checnInForm.marginAmount, // 支付金额
|
|
state: this.currentStep === 4 ? '1' : '0',
|
|
graduateId: this.userInfo.graduateId, // 毕业生Id
|
|
apartmentId: this.userInfo.apartmentId, // 公寓Id
|
|
houseId: this.userInfo.houseId, // 房屋Id
|
|
roomId: this.userInfo.roomId, // 房间Id
|
|
chooseRecId:this.userInfo.chooseRecId, // 选择记录Id
|
|
}
|
|
try {
|
|
const res = await createMzGraduateInfo(parm)
|
|
if (res.code === 200) {
|
|
console.log(res);
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
// 完成办理
|
|
handleReleaseHouse() {
|
|
this.createMzGraduateInfo()//提交更新
|
|
this.$router.back();
|
|
},
|
|
refresh() {
|
|
this.handleQuery(true)
|
|
},
|
|
},
|
|
computed: {
|
|
// 这里可以定义计算属性
|
|
},
|
|
mounted() {
|
|
// 挂载后执行的逻辑
|
|
},
|
|
watch: {
|
|
// 这里可以监听数据变化
|
|
$route:{
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal.query.idCard) {
|
|
this.$nextTick(()=>{
|
|
this.checnInForm.idCard = newVal.query.idCard;
|
|
this.handleQuery()
|
|
})
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
/* 这里可以添加样式 */
|
|
.check-out-cont {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
padding: 20px 20px;
|
|
|
|
.header {
|
|
.tit {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.back {
|
|
color: #3d81cf;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.single {
|
|
margin-top: 20px;
|
|
|
|
.tit {
|
|
padding: 15px 30px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.model {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.cont {
|
|
height: 100%;
|
|
min-height: 546px;
|
|
min-height: 546px;
|
|
}
|
|
|
|
.checkout-process-container {
|
|
// width: 26px;
|
|
height: 26px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.arrow-container {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-left: 13px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.checkout-process {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -3px;
|
|
}
|
|
|
|
.button-group {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|