From b56ec5e46056f55bded133085a6fc4090fb87b01 Mon Sep 17 00:00:00 2001
From: wangyx <2838268875@qq.com>
Date: Fri, 9 May 2025 18:01:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A5=E4=BD=8F=E5=8A=9E=E7=90=86=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E9=A1=B5=E9=9D=A2=E6=90=AD=E5=BB=BA=20=E9=80=80?=
 =?UTF-8?q?=E6=88=BF=E6=8F=90=E9=86=92=20=E5=85=A5=E4=BD=8F=E9=A2=84?=
 =?UTF-8?q?=E7=BA=A6=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/CommonReminder.vue | 175 ++++++++++++++
 src/views/index.vue                     | 231 ++++++++++++++++---
 src/views/residence/checkIn/index.vue   | 291 ++++++++++++++++++------
 src/views/residence/checkOut/index.vue  |  84 ++++---
 4 files changed, 644 insertions(+), 137 deletions(-)
 create mode 100644 src/views/components/CommonReminder.vue

diff --git a/src/views/components/CommonReminder.vue b/src/views/components/CommonReminder.vue
new file mode 100644
index 0000000..2929912
--- /dev/null
+++ b/src/views/components/CommonReminder.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 256bbb8..9201a34 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -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-image
-                      style="width: 20px; height: 20px; margin-left: 8px"
-                      :src="rightIcon"
-                    ></el-image>
-                  </div>
-                </div>
+                <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>
+                  </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,8 +486,8 @@ export default {
           text: "",
         },
         tooltip: {
-    trigger: 'axis'
-  },
+          trigger: "axis",
+        },
         legend: {
           data: ["选房", "看房", "入住", "退住"],
         },
@@ -350,15 +499,15 @@ export default {
         },
         toolbox: {
           feature: {
-             saveAsImage: {
-                show: false
-            }
+            saveAsImage: {
+              show: false,
+            },
           },
         },
         xAxis: {
-          type: "category", 
+          type: "category",
           boundaryGap: false,
-         data: xAxisData,
+          data: xAxisData,
         },
         yAxis: {
           type: "value",
@@ -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;
@@ -564,7 +729,7 @@ export default {
       margin-top: 20px;
     }
     .eva-info {
-      div{
+      div {
         font-size: 14px;
       }
       span {
diff --git a/src/views/residence/checkIn/index.vue b/src/views/residence/checkIn/index.vue
index 131e6f6..00e8f2c 100644
--- a/src/views/residence/checkIn/index.vue
+++ b/src/views/residence/checkIn/index.vue
@@ -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"
+              :src="stepCompleted[index] ? arrowActive : arrow"
+              v-if="index < dataList.length - 1"
+            ></el-image>
           </div>
-          <el-image
-            class="el-flex el-flex-y-center el-flex-center"
-            style="height: 28px; margin-left: 13px"
-            :src="arrow"
-            v-if="index < dataList.length - 1"
-          ></el-image>
         </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-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-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="6">
+                <el-form-item label="履约保证金">
+                  <!-- 文本按钮 等待支付 -->
+                  <el-button
+                    type="text"
+                    size="mini"
+                    style="margin-left: 10px; color: #f06b6b"
                   >
-                </el-radio-group>
-              </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-option
-                    v-for="item in forceClearReason"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24" v-if="checnInForm.status === '2'">
-              <el-form-item label="备注">
-                <el-input
-                  type="textarea"
-                  v-model="checnInForm.remark"
-                  placeholder="请输入备注"
-                  clearable
-                  style="width: 240px"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
+                    等待支付
+                  </el-button>
+                </el-form-item>
+              </el-col>
+              <!-- 已通过线下支付 -->
+              <el-col :span="6">
+                <el-form-item>
+                  <el-checkbox v-model="checnInForm.checked"
+                    >已通过线下支付</el-checkbox
+                  >
+                </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="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
+                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-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;
diff --git a/src/views/residence/checkOut/index.vue b/src/views/residence/checkOut/index.vue
index c2a1de3..0a033dd 100644
--- a/src/views/residence/checkOut/index.vue
+++ b/src/views/residence/checkOut/index.vue
@@ -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,20 +21,23 @@
               :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 checkout-process"
-              style="height: 26px"
-              :src="susIcon"
-              v-if="stepCompleted[index]"
+              class="el-flex el-flex-y-center el-flex-center"
+              style="height: 28px; margin-left: 13px"
+              :src="stepCompleted[index] ? arrowActive : arrow"
+              v-if="index < dataList.length - 1"
             ></el-image>
           </div>
-
-          <el-image
-            class="el-flex el-flex-y-center el-flex-center"
-            style="height: 28px; margin-left: 13px"
-            :src="stepCompleted[index] ? arrowActive : arrow"
-            v-if="index < dataList.length - 1"
-          ></el-image>
         </div>
       </div>
       <!-- 信息确认 -->
@@ -138,8 +141,8 @@
       </div>
 
       <!-- 房间检查 -->
-      <el-form size="small" label-width="80px" >
-        <div v-if="currentStep === 2||currentStep === 3||currentStep === 4">
+      <el-form size="small" label-width="80px">
+        <div v-if="currentStep === 2 || currentStep === 3 || currentStep === 4">
           <div class="el-my-3">
             <CommonTitle>退房信息</CommonTitle>
           </div>
@@ -149,13 +152,12 @@
               <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>
         </div>
         <div v-if="currentStep === 2">
-          <div class="el-my-3" >
+          <div class="el-my-3">
             <CommonTitle>退房检查</CommonTitle>
           </div>
           <el-row>
@@ -405,12 +407,12 @@
       <el-button
         type="primary"
         @click="
-          currentStep === dataList.length-1
+          currentStep === dataList.length - 1
             ? handleReleaseHouse()
             : handleNextStep()
         "
       >
-        {{ currentStep === dataList.length-1 ? "释放房源" : "下一步" }}
+        {{ currentStep === dataList.length - 1 ? "释放房源" : "下一步" }}
       </el-button>
     </div>
   </div>
@@ -503,48 +505,50 @@ 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);
-        
-        if (this.currentStep <=this.stepCompleted.length) {
+        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;
+            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);
+        this.currentStep++;
+        console.log("下一步操作", this.currentStep);
 
         if (this.currentStep > 1) {
           this.stepCompleted[this.currentStep - 2] = true;
-          if(this.currentStep === 4){
+          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;