退房提醒接口对接

src/api/residence/checkout.js

@@ -42,3 +42,11 @@ export function releaseRoom(data) {
     data: data,
   });
 }
+// 待退房
+export function listCheckoutAlert(query) {
+  return request({
+    url: "/apartment/manager/listCheckoutAlert",
+    method: "get",
+    params: query,
+  });
+}

src/views/components/CheckOutDialog.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="姓名" prop="graduateName">
+        <el-input
+          v-model="queryParams.graduateName"
+          placeholder="请输入姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="graduateTelphone">
+        <el-input
+          v-model="queryParams.graduateTelphone"
+          placeholder="请输入手机号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="身份证号" prop="graduateIdCard">
+        <el-input
+          v-model="queryParams.graduateIdCard"
+          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="checkOutDate"
+          label="退房时间"
+          :show-overflow-tooltip="true"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="roomNamePath"
+          label="入住房间"
+          :show-overflow-tooltip="true"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="graduateName"
+          label="姓名"
+          :show-overflow-tooltip="true"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="genderName"
+          label="性别"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="telephone"
+          label="手机号码"
+          :show-overflow-tooltip="true"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="idCard"
+          label="身份证号"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop=""
+          label="资格核验"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+
+        <el-table-column prop="status" label="状态" align="center">
+          <template slot-scope="scope">
+            <!-- 办理完成(待释放房源) -->
+            <el-button
+              type="text"
+              v-if="scope.row.status === '办理完成'"
+              style="color: #83d098"
+            >
+              办理完成
+            </el-button>
+            <!-- 办理中(待退还保证金) -->
+            <el-button type="text" v-if="scope.row.status === '办理中'">
+              办理中
+            </el-button>
+            <!-- 待办理(3天) -->
+            <el-button
+              type="text"
+              v-if="scope.row.status === '待办理'"
+              style="color: #ee952f"
+            >
+              待办理
+            </el-button>
+            <!-- 已超期 -->
+            <el-button
+              type="text"
+              v-if="scope.row.status === '已超期'"
+              style="color: #ff2c03"
+            >
+              已超期
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作 " align="center">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              @click="handleAction(action, scope.row)"
+            >
+              退房办理
+            </el-button>
+            <!-- 释放房源 -->
+            <el-button
+              type="primary"
+              size="mini"
+              v-if="scope.row.status === '办理完成'"
+              @click="handleAction(action, scope.row)"
+            >
+              释放房源
+            </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>
+  </div>
+</template>
+
+<script>
+import { listCheckoutAlert } from "@/api/residence/checkout";
+export default {
+  name: "CommonReminder",
+  props: {},
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        graduateName: "",
+        graduateTelphone: "",
+        graduateIdCard: "",
+      },
+      tableData: [],
+      total: 0,
+    };
+  },
+  created() {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      try {
+        const response = await listCheckoutAlert(this.queryParams);
+        if (response.code === 200) {
+          this.tableData = response.rows;
+          this.total = response.total;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    },
+    handleQuery() {
+      this.getList();
+    },
+    // 跳转办理入住
+    handleAction(action, row) {},
+  },
+};
+</script>

src/views/index.vue

@@ -64,8 +64,8 @@
               </div></el-col
             >
           </el-row>
-          <div style="display: none;">
+          <div style="display: none">
-            <el-card  class="el-flex box-card" shadow="always">
+            <el-card class="el-flex box-card" shadow="always">
               <div class="card-cont">
                 <el-row
                   :gutter="10"
@@ -206,7 +206,17 @@
       </el-col>
     </el-row>
     <!-- 退房提醒 -->
-    <CommonReminder
+    <el-dialog
+      :title="'退房提醒'"
+      :visible.sync="visible"
+      v-if="visible"
+      width="1000px"
+      top="5vh"
+      append-to-body
+    >
+      <CheckOutDialog />
+    </el-dialog>
+    <!-- <CommonReminder
       :dialogTitle="'退房提醒'"
       :visible.sync="visible"
       :queryParams="queryParams"
@@ -216,18 +226,18 @@
       @handleQuery="handleQuery"
       @handleAction="handleEdit"
       @getList="getList"
-    />
+    /> -->
     <!-- 入住预约 -->
     <el-dialog
-    :title="'入住预约'"
+      :title="'入住预约'"
-    :visible.sync="reservationVisible"
+      :visible.sync="reservationVisible"
-    v-if="reservationVisible"
+      v-if="reservationVisible"
-    width="1000px"
+      width="1000px"
-    top="5vh"
+      top="5vh"
-    append-to-body
+      append-to-body
-  >
+    >
-    <CommonReminder/>
+      <CommonReminder />
-  </el-dialog>
+    </el-dialog>
   </div>
 </template>
 
@@ -235,11 +245,13 @@
 import * as Echarts from "echarts";
 import CommonTitle from "./components/CommonTitle.vue";
 import CommonReminder from "./components/CommonReminder.vue";
+import CheckOutDialog from "./components/CheckOutDialog.vue";
 export default {
   name: "Index",
   components: {
     CommonTitle,
     CommonReminder,
+    CheckOutDialog
   },
   data() {
     return {
@@ -401,7 +413,6 @@ export default {
       total: 3,
       // 遮罩层
       reservationVisible: false,
-   
 
       // 入住预约数据
       reservationTableData: [
@@ -460,7 +471,6 @@ export default {
             row.status === "待办理" || row.status === "已超期",
         },
       ],
-    
     };
   },
   mounted() {
@@ -472,13 +482,14 @@ export default {
     },
     // 跳转
     handleClick(url, label) {
-      console.log("label", label);
       console.log(url);
 
       if (url) {
         this.$router.push(url);
       }
       if (label === "退房提醒") {
+        console.log("label", label);
+
         this.visible = !this.visible; // 显示遮罩层
       }
       if (label === "入住预约") {
@@ -596,11 +607,15 @@ export default {
       // 处理退房提醒操作逻辑
       console.log(action, row);
       if (action.label === "释放房源") {
-        this.$confirm("请先确认房间已经完成清洁、维修、达到入住标准方可进行释放房源。", "提示", {
+        this.$confirm(
-          confirmButtonText: "确定释放",
+          "请先确认房间已经完成清洁、维修、达到入住标准方可进行释放房源。",
-          cancelButtonText: "暂不释放",
+          "提示",
-          type: "warning",
+          {
-        })
+            confirmButtonText: "确定释放",
+            cancelButtonText: "暂不释放",
+            type: "warning",
+          }
+        )
           .then(() => {
             // 用户点击确定释放按钮后执行的逻辑
             console.log("用户确认释放房源");