elink-star
/
epmet-apartment-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

入住办理流程页面搭建 

退房提醒 入住预约弹框
wyx
wangyx 4 months ago
parent
35983f465b
commit
b56ec5e460
4 changed files with 644 additions and 137 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 175
      src/views/components/CommonReminder.vue
  2. 211
      src/views/index.vue
  3. 259
      src/views/residence/checkIn/index.vue
  4. 42
      src/views/residence/checkOut/index.vue

175
src/views/components/CommonReminder.vue
View File

@ -0,0 +1,175 @@
<template>
<el-dialog
:title="dialogTitle"
:visible.sync="visible"
width="1000px"
top="5vh"
append-to-body
>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="身份证号" prop="idNumber">
<el-input
v-model="queryParams.idNumber"
placeholder="请输入身份证号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>
搜索
</el-button>
</el-form-item>
</el-form>
<el-row>
<el-table
:data="tableData"
border
style="width: 100%"
:header-cell-style="{ backgroundColor: '#F5F7FA' }"
:cell-style="{ color: '#303133' }"
>
<el-table-column
prop="checkOutTime"
label="退房时间"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
<el-table-column
prop="roomName"
label="入住房间"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
<el-table-column
prop="userName"
label="姓名"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
<el-table-column
prop="sex"
label="性别"
align="center"
></el-table-column>
<el-table-column
prop="phonenumber"
label="手机号码"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
<el-table-column
prop="idNumber"
label="身份证号"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<!-- 办理完成(待释放房源) -->
<el-tag v-if="scope.row.status === '办理完成'" type="warning">
办理完成
</el-tag>
<!-- 办理中(待退还保证金) -->
<el-tag v-if="scope.row.status === '办理中'" type="info">
办理中
</el-tag>
<!-- 待办理(3天) -->
<el-tag v-if="scope.row.status === '待办理'" type="primary">
待办理
</el-tag>
<!-- 已超期 -->
<el-tag v-if="scope.row.status === '已超期'" type="danger">
已超期
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作 " align="center">
<template slot-scope="scope">
<el-button
v-for="(action, index) in actions"
:key="index"
:type="action.type"
size="mini"
@click="handleAction(action, scope.row)"
v-if="action.condition(scope.row)"
>
{{ action.label }}
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
</el-dialog>
</template>
<script>
export default {
name: 'CommonReminder',
props: {
dialogTitle: {
type: String,
required: true
},
visible: {
type: Boolean,
required: true
},
queryParams: {
type: Object,
required: true
},
tableData: {
type: Array,
required: true
},
total: {
type: Number,
required: true
},
actions: {
type: Array,
required: true
}
},
methods: {
handleQuery() {
this.$emit('handleQuery');
},
handleAction(action, row) {
this.$emit('handleAction', action, row);
},
getList() {
this.$emit('getList');
}
}
};
</script>

211
src/views/index.vue
View File

@ -50,6 +50,7 @@
><div
class="el-flex el-flex-center el-flex-y-center single"
:style="{ backgroundColor: item.color }"
@click="handleClick(item.url, item.label)"
>
<el-image
style="width: 21px; height: 28px; margin-right: 8px"
@ -66,24 +67,45 @@
<div>
<el-card class="el-flex box-card" shadow="always">
<div class="card-cont">
<div
class="el-flex el-flex-space-around text item"
v-for="item in 2"
>
<div class="clearfix el-mr-6">入住办理:</div>
<div class="el-mr-9 el-mb-3 label">5号楼-1单元-805-南卧1</div>
<div class="el-mr-9 el-mb-3 info">张三 男 187*****8989</div>
<div class="el-mr-9 el-mb-3 id">37*************12</div>
<div class="el-mr-8 el-mb-3 status">等待签订电子合同</div>
<div
class="el-mr-9 el-mb-3 el-flex el-flex-center el-flex-y-center menu"
>
<el-row :gutter="10" wrap="no-wrap" v-for="item in 2" :key="item" class="el-mt-3">
<!-- 入住办理 -->
<el-col :span="2.5">
<div class="clearfix">入住办理:</div>
</el-col>
<!-- 房间信息 -->
<el-col :span="5.5">
<div class="label">5号楼-1单元-805-南卧1</div>
</el-col>
<!-- 姓名信息 -->
<el-col :span="2">
<div class="info">张三四</div>
</el-col>
<!-- 性别信息 -->
<el-col :span="1">
<div class="sex">男</div>
</el-col>
<!-- 电话信息 -->
<el-col :span="2.5">
<div class="phone">187*****8989</div>
</el-col>
<!-- 身份证信息 -->
<el-col :span="3.5">
<div class="id">37*************12</div>
</el-col>
<!-- 状态信息 -->
<el-col :span="3">
<div class="status">等待签订电子合同</div>
</el-col>
<!-- 继续办理操作 -->
<el-col :span="4">
<div class="el-flex el-flex-center el-flex-y-center menu">
继续办理<el-image
style="width: 20px; height: 20px; margin-left: 8px"
:src="rightIcon"
></el-image>
</div>
</div>
</el-col>
</el-row>
</div>
</el-card>
</div>
@ -103,7 +125,7 @@
:style="{ backgroundColor: item.color }"
>
<el-image
style="width: 28px; margin-right: 8px"
style="width: 23px; margin-right: 8px"
:src="item.icon"
></el-image>
<div
@ -119,7 +141,7 @@
<div
id="mycharts"
ref="chart"
style="width: 100%; height: 37vh;margin-top: 20px"
style="height: 320px; margin-top: 20px"
></div>
</div>
</el-col>
@ -177,20 +199,46 @@
</div>
</el-col>
</el-row>
<!-- 退房提醒 -->
<CommonReminder
:dialogTitle="'退房提醒'"
:visible.sync="visible"
:queryParams="queryParams"
:tableData="tableData"
:total="total"
:actions="checkOutActions"
@handleQuery="handleQuery"
@handleAction="handleEdit"
@getList="getList"
/>
<!-- 入住预约 -->
<CommonReminder
:dialogTitle="'入住预约'"
:visible.sync="reservationVisible"
:queryParams="reservationQueryParams"
:tableData="reservationTableData"
:total="reservationTotal"
:actions="reservationActions"
@handleQuery="handleReservationQuery"
@handleAction="handleReservationAction"
@getList="getReservationList"
/>
</div>
</template>
<script>
import * as Echarts from "echarts";
import CommonTitle from "./components/CommonTitle.vue";
import CommonReminder from "./components/CommonReminder.vue";
export default {
name: "Index",
components: {
CommonTitle,
CommonReminder,
},
data() {
return {
input2:'',
input2: "",
// 记录当前激活的标签
activeTab: "talent",
// 工作台数据
@ -199,11 +247,13 @@ export default {
label: "入住办理",
icon: require("../assets/images/antFill-phone.png"),
color: "#fbd5d5",
url: "/residence/check_in",
},
{
label: "退房办理",
icon: require("../assets/images/antFill-phone.png"),
color: "#c2e2f9",
url: "/residence/check_out",
},
{
label: "入住预约",
@ -300,6 +350,90 @@ export default {
unsatisfied: 16,
},
],
visible: false,
queryParams: {
pageNum: 1,
pageSize: 10,
},
tableData:[],
total: 0,
// 遮罩层
reservationVisible: false,
reservationQueryParams: {
pageNum: 1,
pageSize: 10,
},
reservationTotal: 4,
// 入住预约数据
reservationTableData: [
{
checkOutTime: "2025-06-01",
roomName: "8号楼-4单元-1108-东卧1",
userName: "赵六",
sex: "女",
phonenumber: "138****1234",
idNumber: "42*************45",
status: "待办理",
},
{
checkOutTime: "2025-06-05",
roomName: "9号楼-5单元-1209-西卧2",
userName: "孙七",
sex: "男",
phonenumber: "139****5678",
idNumber: "43*************56",
status: "办理中",
},
{
checkOutTime: "2025-06-10",
roomName: "10号楼-6单元-1310-中卧3",
userName: "周八",
sex: "女",
phonenumber: "150****9012",
idNumber: "44*************67",
status: "办理完成",
},
{
checkOutTime: "2025-05-20",
roomName: "7号楼-3单元-1007-南卧4",
userName: "吴九",
sex: "男",
phonenumber: "151****3456",
idNumber: "45*************78",
status: "已超期",
},
],
checkOutActions: [
{
label: "释放房源",
type: "primary",
condition: (row) => row.status === "办理完成",
},
{
label: "继续办理",
type: "primary",
condition: (row) => row.status === "办理中",
},
{
label: "退房办理",
type: "primary",
condition: (row) =>
row.status === "待办理" || row.status === "已超期",
},
],
reservationActions: [
{
label: "继续办理",
type: "primary",
condition: (row) => true, // 根据实际情况修改条件
},
{
label: "入住办理",
type: "primary",
condition: (row) => true, // 根据实际情况修改条件
},
],
};
},
mounted() {
@ -309,6 +443,21 @@ export default {
goTarget(href) {
window.open(href, "_blank");
},
// 跳转
handleClick(url, label) {
console.log("label", label);
console.log(url);
if (url) {
this.$router.push(url);
}
if (label === "退房提醒") {
this.visible = true; // 显示遮罩层
}
if (label === "入住预约") {
this.reservationVisible = true; // 显示遮罩层
}
},
// 设置当前激活的标签
setActive(tab) {
console.log(tab);
@ -328,7 +477,7 @@ export default {
let monthStart = year === startYear ? startMonth : 1;
let monthEnd = year === currentYear ? currentMonth : 12;
for (let month = monthStart; month <= monthEnd; month++) {
xAxisData.push(`${year}-${month.toString().padStart(2, '0')}`);
xAxisData.push(`${year}-${month.toString().padStart(2, "0")}`);
}
}
let myChart = Echarts.init(document.getElementById("mycharts"));
@ -337,7 +486,7 @@ export default {
text: "",
},
tooltip: {
trigger: 'axis'
trigger: "axis",
},
legend: {
data: ["选房", "看房", "入住", "退住"],
@ -351,8 +500,8 @@ export default {
toolbox: {
feature: {
saveAsImage: {
show: false
}
show: false,
},
},
},
xAxis: {
@ -392,7 +541,10 @@ export default {
name: "退住",
type: "line",
stack: "Total",
data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320],
data: [
320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330,
320,
],
// symbol: "roundRect",
// symbolSize: 10,
},
@ -401,6 +553,15 @@ export default {
myChart.setOption(option);
myChart.resize();
},
handleReservationQuery() {
// 处理入住预约搜索逻辑
},
handleReservationAction(action, row) {
// 处理入住预约操作逻辑
},
getReservationList() {
// 获取入住预约列表逻辑
},
},
};
</script>
@ -464,11 +625,11 @@ export default {
align-items: center;
}
::v-deep .el-card__body {
padding: 15px 20px 0px 20px;
padding:14px 20px;
width: 100%;
}
.box-card {
margin-top: 1%;
margin: 2% 0;
border: 1px solid #e0e0e0;
border-radius: 4px;
-radius: 4px;
@ -509,6 +670,10 @@ export default {
}
.status {
color: #ff2e2e;
font-size: 14px;
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
}
.menu {
color: #2f50ff;

259
src/views/residence/checkIn/index.vue
View File

@ -1,11 +1,13 @@
<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"><i class="el-icon-back"></i>返回</div>
<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"
@ -13,7 +15,7 @@
:key="index"
>
<div
class="tit el-flex el-flex-y-center"
class="tit el-flex el-flex-y-center model"
:style="{ backgroundColor: item.bgColor }"
>
<el-image
@ -21,27 +23,37 @@
: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; margin-left: 13px"
:src="arrow"
style="height: 28px"
:src="stepCompleted[index] ? arrowActive : arrow"
v-if="index < dataList.length - 1"
></el-image>
</div>
</div>
<!-- 信息确认 -->
</div>
<!-- 核验信息 -->
<div>
<el-form
ref="checnInForm"
:model="checnInForm"
:rules="rules"
size="small"
:inline="true"
v-if="currentStep === 1"
>
<div class="el-my-5">
<CommonTitle>入住信息</CommonTitle>
<CommonTitle>核验信息</CommonTitle>
</div>
<el-row>
<el-form-item label="身份证" prop="id">
@ -76,71 +88,155 @@
<el-row :gutter="30">
<el-col :span="6"> 姓名：张三 </el-col>
<el-col :span="6"> 性别：女 </el-col>
<el-col :span="6"> 身份证：420102199001010000 </el-col>
<el-col :span="6"> 手机号：-01-01 </el-col>
<el-col :span="6"> 入住房间-01-01 </el-col>
<el-col :span="6"> 办理入住日期 </el-col>
<el-col :span="6"> 预订入住天数 </el-col>
<el-col :span="6"> 实际居住天数-01-01 </el-col>
<el-col :span="6">
资格核验：<span style="color: #22cb8c">已通过</span>
</el-col>
<el-col :span="6">
所选房间：国信棠樾云邸5号楼1单元805北卧
</el-col>
<el-col :span="6"> 本次入住天数： </el-col>
<el-col :span="6"> 剩余可住天数： </el-col>
<el-col :span="6"> 本次选房时间：-01-01 </el-col>
</el-row>
</el-form-item>
</el-form>
<!-- 物资发放 -->
<el-form size="small">
<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"> 入住房间：420102199001010000 </el-col>
<el-col :span="4"> 姓名：张三 </el-col>
<el-col :span="5"> 性别：女 </el-col>
<el-col :span="6"> 手机号：-01-01 </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="isGrant">
<el-select v-model="checnInForm.isGrant" placeholder="请选择">
<el-option label="已发放" value="1"></el-option>
<el-option label="未发放" value="2"></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>
<el-col :span="24">
<el-form-item class="el-ml-3" label="退房类型">
<el-radio-group v-model="checnInForm.status">
<el-radio
v-for="dict in checkOutType"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
<!-- 等待支付按钮 -->
<el-col :span="6">
<el-form-item label="履约保证金">
<!-- 文本按钮 等待支付 -->
<el-button
type="text"
size="mini"
style="margin-left: 10px; color: #f06b6b"
>
</el-radio-group>
等待支付
</el-button>
</el-form-item>
</el-col>
<el-col :span="24" v-if="checnInForm.status === '2'">
<el-form-item label="选择强制清退原因" prop="forceClearReason">
<el-select
v-model="checnInForm.forceClearReason"
placeholder="请选择"
<!-- 已通过线下支付 -->
<el-col :span="6">
<el-form-item>
<el-checkbox v-model="checnInForm.checked"
>已通过线下支付</el-checkbox
>
<el-option
v-for="item in forceClearReason"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-form-item>
</el-col>
<!-- 支付方式 -->
<el-col :span="6">
<el-form-item label="支付方式">
<el-select v-model="checnInForm.isGrant" placeholder="请选择">
<el-option label="支付宝" value="1"></el-option>
<el-option label="微信" value="2"></el-option>
<el-option label="POS机刷卡" value="3"></el-option>
<el-option label="现金支付" value="4"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" v-if="checnInForm.status === '2'">
<el-form-item label="备注">
<!-- 支付金额 -->
<el-col :span="6">
<el-form-item label="支付金额">
<el-input-number
v-model="checnInForm.actualPay"
@change="handleActualPayChange"
:min="0"
:max="checnInForm.shouldPay"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<!-- 备注说明 -->
<el-form-item label="备注说明" prop="remark">
<el-input
type="textarea"
v-model="checnInForm.remark"
placeholder="请输入备注"
placeholder="请输入备注说明"
type="textarea"
clearable
style="width: 240px"
/>
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<!-- 物资领取 -->
</div>
<!-- 添加按钮 -->
<div class="button-group el-flex el-flex-end el-mt-4">
<el-button @click="currentStep === 1 ? handleCancel : handlePrevStep">
<el-button @click="currentStep === 1 ? handleCancel() : handlePrevStep()">
{{ currentStep === 1 ? "取消" : "上一步" }}
</el-button>
<el-button
type="primary"
@click="
currentStep === dataList.length ? handleReleaseHouse : handleNextStep
currentStep === dataList.length - 1
? handleReleaseHouse()
: handleNextStep()
"
>
{{ currentStep === dataList.length ? "释放房源" : "下一步" }}
{{ currentStep === dataList.length - 1 ? "履约保证金" : "下一步" }}
</el-button>
</div>
</div>
@ -159,29 +255,29 @@ export default {
// 这里可以定义数据
dataList: [
{
title: "信息确认",
title: "核验信息",
imageSrc: require("@/assets/images/address-card.png"),
bgColor: "#FFE4E1",
bgColor: "#FBEDC8",
},
{
title: "物资领取",
title: "物资发放",
imageSrc: require("@/assets/images/antFill-gift.png"),
bgColor: "#E0FFFF",
bgColor: "#C2E2F9",
},
{
title: "合同签订",
imageSrc: require("@/assets/images/fa-book.png"),
bgColor: "#F0FFF0",
bgColor: "#FBD5D5",
},
{
title: "履约保证金",
imageSrc: require("@/assets/images/pay-circle.png"),
bgColor: "#FFF0F5",
bgColor: "#8BFDD3",
},
{
title: "办理完成",
imageSrc: require("@/assets/images/check_circle.png"),
bgColor: "#FFF0F5",
bgColor: "#CFCDFB",
},
],
arrow: require("@/assets/images/arrow_forward.png"),
@ -207,28 +303,55 @@ export default {
{ label: "入住期间有异常", value: "3" },
{ label: "入住期间有异常", value: "4" },
],
susIcon: require("@/assets/images/check-circle-fas.png"),
currentStep: 1, // 当前步骤
stepCompleted: this.dataList
? Array(this.dataList.length - 1).fill(false)
: [], // 存储每个步骤的完成状态
};
},
methods: {
// 返回首页
goBack() {
this.$router.push({ path: "/" });
},
handleQuery() {
console.log("查询操作");
},
handleCancel() {
this.$router.push({ path: "/" });
console.log("取消操作");
},
// 上一步操作
handlePrevStep() {
if (this.currentStep > 1) {
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);
}
}
},
// 下一步操作
handleNextStep() {
if (this.currentStep < this.dataList.length) {
this.currentStep++;
console.log("下一步操作", this.currentStep);
if (this.currentStep > 1) {
this.stepCompleted[this.currentStep - 2] = true;
console.log("stepCompleted下::", this.stepCompleted);
}
}
},
// 释放房源操作，可根据实际需求实现逻辑
// 完成办理
handleReleaseHouse() {
console.log("释放房源操作");
console.log("完成办理");
},
},
computed: {
@ -264,6 +387,30 @@ export default {
padding: 15px 33px;
border-radius: 4px;
}
.model {
position: relative;
}
}
.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;

42
src/views/residence/checkOut/index.vue
View File

@ -2,7 +2,7 @@
<div class="check-out-cont">
<div class="header el-flex el-flex-y-center">
<div class="tit">退房办理</div>
<div class="back el-ml-4"><i class="el-icon-back"></i>返回</div>
<div class="back el-ml-4" @click="goBack()"><i class="el-icon-back"></i>返回</div>
</div>
<div>
<!-- 退房流程 -->
@ -21,6 +21,7 @@
: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"
@ -28,7 +29,8 @@
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; margin-left: 13px"
@ -37,6 +39,7 @@
></el-image>
</div>
</div>
</div>
<!-- 信息确认 -->
<div v-if="currentStep === 1">
<el-form
@ -149,7 +152,6 @@
<el-col :span="3"> 姓名：张三 </el-col>
<el-col :span="3"> 性别：女 </el-col>
<el-col :span="6"> 手机号：-01-01 </el-col>
<el-col :span="6"> 退房类型-01-01 </el-col>
</el-row>
</el-form-item>
@ -503,33 +505,36 @@ export default {
};
},
methods: {
goBack() {
this.$router.push({ path: "/" });
},
// 查询
handleQuery() {
console.log("查询操作");
},
handleCancel() {
this.$router.push({ path: "/" });
console.log("取消操作");
},
// 上一步操作
handlePrevStep() {
if (this.currentStep > 0) {
this.currentStep--;
console.log('上currentStep::',this.currentStep);
console.log('dataList.::',this.dataList);
console.log("上currentStep::", this.currentStep);
console.log("dataList.::", this.dataList);
if (this.currentStep <= this.stepCompleted.length) {
this.stepCompleted[this.currentStep - 1] = false;
if (this.currentStep == 3) {
this.stepCompleted[this.currentStep] = false;
}
console.log('stepCompleted::',this.stepCompleted);
console.log("stepCompleted::", this.stepCompleted);
}
}
},
// 下一步操作
handleNextStep() {
if (this.currentStep < this.dataList.length) {
this.currentStep++;
console.log("下一步操作", this.currentStep);
@ -539,12 +544,11 @@ export default {
if (this.currentStep === 4) {
this.stepCompleted[this.currentStep - 1] = true;
}
console.log('stepCompleted下::',this.stepCompleted);
console.log("stepCompleted下::", this.stepCompleted);
}
}
},
// 释放房源操作，可根据实际需求实现逻辑
// 释放房源操作
handleReleaseHouse() {
console.log("释放房源操作");
},
@ -613,6 +617,22 @@ export default {
position: relative;
}
}
.checkout-process-container {
width: 26px;
height: 26px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.arrow-container {
width: 42px;
height: 28px;
margin-left: 13px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.checkout-process {
position: absolute;
top: -5px;

Write Preview
Loading…
Cancel
Save