修改了一些细节

src/App.vue

@@ -7,6 +7,7 @@
 </template>
 <style lang="scss">
 #app {
+  font-weight: 400;
   font-family: PingFangSC-Regular, PingFang SC;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/main.js

@@ -6,6 +6,7 @@ import VConsole from 'vconsole';
 import { vant } from './utils/vant.config';
 import 'vant/es/toast/style';//无法自动按需引入这两个的样式，需要手动引入
 import 'vant/es/notify/style';
+import 'vant/es/dialog/style';
 
 if (process.env.NODE_ENV !== "production") {
     new VConsole({ theme: 'dark' });

src/router/index.js

@@ -118,6 +118,15 @@ const routes = [
       title: '账单明细',
     },
   }
+  ,
+  {
+    name: 'checkClock',
+    path: '/checkClock',
+    component: () => import('../views/checkClock'),
+    meta: {
+      title: '巡检打卡',
+    },
+  }
   // {
   //   path: '/alllist',
   //   name: '全部人员列表',

src/utils/index.js

@@ -19,4 +19,5 @@ export function isEmpty(v) {
             return true;
     }
     return false;
-}
+}
+

src/views/checkClock.vue

@@ -0,0 +1,240 @@
+<template>
+  <van-nav-bar
+    title="巡检打卡"
+    left-arrow
+    @click-left="onClickLeft"
+    safe-area-inset-top
+  />
+  <div class="page_info">
+    <div class="info_pannel">
+      <van-image
+        width="48"
+        height="48"
+        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+      />
+      <div class="pannel_info">
+        <van-row align="center" style="margin-bottom: 10px">
+          <van-col class="info_name">{{ dataForm.name }}</van-col>
+          <van-image
+            width="14"
+            height="14"
+            :src="require('@/assets/tel.svg')"
+            style="margin: 0 6px 0 16px"
+          />
+          <van-col class="info_tel">{{ dataForm.tel }}</van-col>
+        </van-row>
+        <van-row>
+          <van-col class="info_type">{{
+            `${checkType_filter(dataForm.checkType)}`
+          }}</van-col>
+        </van-row>
+      </div>
+    </div>
+    <div class="info_clock">
+      <van-row align="center" class="clock_title">
+        <van-col>
+          <van-icon name="location" color="#6DD400"></van-icon>
+          当前打卡位置：{{ dataForm.position }}
+        </van-col>
+      </van-row>
+      <div class="circle_btn">
+        <van-row class="btn_title">
+          <van-col>完成打卡</van-col>
+        </van-row>
+        <van-row class="btn_time">
+          <van-col>{{ timeStr && timeStr.substr(11) }}</van-col>
+        </van-row>
+      </div>
+    </div>
+    <div class="info_list">
+      <van-row class="sub_title">
+        <van-col>今日打卡记录</van-col>
+      </van-row>
+      <div class="list_item" v-for="item in list" :key="item.id">
+        <van-row class="row_title">
+          <van-col>{{ item.position }}</van-col>
+        </van-row>
+        <van-row class="row_info">
+          <van-col>巡检时间：{{ item.checkTime }}</van-col>
+        </van-row>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { isEmpty } from "@/utils/index.js";
+export default {
+  data() {
+    return {
+      IntervalTime: null,
+      timeStr: "",
+      dataForm: {
+        name: "李明",
+        tel: 15839376490,
+        checkType: 1,
+        position: "B座13楼",
+      },
+      list: [
+        { id: 1, position: "B座13楼", checkTime: "2022-09-20 10:34:22" },
+        { id: 2, position: "B座14楼", checkTime: "2022-09-20 10:44:22" },
+      ],
+    };
+  },
+  mounted() {
+    this.IntervalTime = setInterval(this.time, 1000);
+  },
+  methods: {
+    checkType_filter(val) {
+      if (isEmpty(val)) {
+        return "";
+      }
+      if (val == 1) {
+        return "安保组";
+      }
+      if (val == 2) {
+        return "电";
+      }
+      if (val == 3) {
+        return "其他";
+      }
+    },
+
+    time() {
+      console.log("time:" + this.timeStr);
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var seconds = date.getSeconds();
+      this.timeStr =
+        year +
+        "-" +
+        month +
+        "-" +
+        day +
+        "-" +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds;
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.IntervalTime);
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_info {
+  padding: 16px;
+  max-height: calc(
+    100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 46px - 32px
+  );
+  overflow-y: auto;
+  .info_pannel {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
+    border-radius: 4px;
+    .pannel_info {
+      margin-left: 12px;
+      .info_name {
+        font-size: 16px;
+        font-weight: 600;
+      }
+      .info_tel {
+        font-size: 14px;
+        color: #666666;
+      }
+      .info_type {
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+  }
+  .info_clock {
+    height: 380px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
+    border-radius: 4px;
+    .clock_title {
+      .van-col {
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+
+    .circle_btn {
+      width: 120px;
+      height: 120px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 40px;
+      border-radius: 50%;
+      background: #5c8fff;
+      color: #ffffff;
+      .btn_title {
+        .van-col {
+          height: 24px;
+          font-size: 18px;
+          font-weight: 600;
+          line-height: 24px;
+          margin-bottom: 4px;
+        }
+      }
+      .btn_time {
+        .van-col {
+          height: 22px;
+          font-size: 16px;
+          line-height: 22px;
+        }
+      }
+    }
+  }
+  .info_list {
+    .sub_title {
+      margin: 20px 0 12px 0;
+      height: 20px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #666666;
+      line-height: 20px;
+    }
+    .list_item {
+      padding: 12px 16px;
+      background: #ffffff;
+      box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
+      border-radius: 4px;
+      margin-bottom: 12px;
+      &:nth-last-child(1) {
+        margin-bottom: 0;
+      }
+      .row_title {
+        height: 22px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #313836;
+        line-height: 22px;
+        margin-bottom: 4px;
+      }
+      .row_info {
+        height: 18px;
+        font-size: 14px;
+        color: #999999;
+        line-height: 18px;
+      }
+    }
+  }
+}
+</style>

src/views/home.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="page_home">
-    <div class="home_bg">
-      <div class="bg_title">
-        <div class="title_info">
+  <div class="page_info">
+    <div class="info_bg">
+      <van-row align="center" class="bg_title">
+        <van-col>
           <van-image
             :src="require('@/assets/position.svg')"
             width="16"
@@ -16,145 +16,210 @@
             height="24"
             fit="contain"
           />
-        </div>
-        <div class="user_info" @click="toPath">
+        </van-col>
+        <van-col @click="toPath">
           <van-image
             :src="require('@/assets/user.svg')"
             width="16"
             height="16"
             fit="contain"
           />
-        </div>
-      </div>
+        </van-col>
+      </van-row>
     </div>
-    <div class="home_info">
-      <div class="info_content">
+    <!-- 维修工没有此块功能 -->
+    <template v-if="role != 3">
+      <div class="info_function">
         <div
-          class="content_item"
+          class="function_item"
           v-for="(item, index) in functionList"
           :key="index"
+          :style="{ display: !item.role.includes(role) ? 'none' : '' }"
         >
-          <van-image :src="item.src" width="36" height="36" fit="contain" />
-          <span>{{ item.label }}</span>
+          <template v-if="item.role.includes(role)">
+            <van-image :src="item.src" width="36" height="36" fit="contain" />
+            <span>{{ item.label }}</span>
+          </template>
         </div>
       </div>
-    </div>
-    <div class="card_list">
-      <div class="sub_title">
-        <span>工单待办</span>
-        <div class="function_btn">
-          <span>立即处理</span>
+    </template>
+    <div class="info_list">
+      <!-- 实时巡检begin -->
+      <van-row align="center" justify="space-between" class="sub_title">
+        <van-col class="title">实时巡检</van-col>
+        <van-col class="function_btn">
+          <van-col>立即巡检</van-col>
           <van-image
             :src="require('@/assets/btn-arrow-right.svg')"
             width="24"
             height="24"
             fit="contain"
           />
-        </div>
-      </div>
-      <div class="list_item">
-        <div
-          class="item_info"
+        </van-col>
+      </van-row>
+      <van-row align="center" justify="space-between" class="list_item">
+        <van-row
+          align="center"
+          justify="space-between"
+          style="flex-direction: column"
+          v-for="(item, index) in checkList"
+          :key="item + '_' + index"
+        >
+          <van-col>{{ item.label }}</van-col>
+          <v-count-up
+            :end-val="Number(item['count'])"
+            class="count_up"
+            :options="item['options']"
+          />
+        </van-row>
+      </van-row>
+      <!-- 实时巡检end -->
+
+      <!-- 工单待办begin -->
+      <van-row align="center" justify="space-between" class="sub_title">
+        <van-col class="title">工单待办</van-col>
+        <van-col class="function_btn">
+          <van-col>立即处理</van-col>
+          <van-image
+            :src="require('@/assets/btn-arrow-right.svg')"
+            width="24"
+            height="24"
+            fit="contain"
+          />
+        </van-col>
+      </van-row>
+      <van-row align="center" justify="space-between" class="list_item">
+        <van-row
+          align="center"
+          justify="space-between"
+          style="flex-direction: column"
           v-for="(item, index) in workList"
           :key="item + '_' + index"
         >
-          <span class="label">{{ item.label }}</span>
+          <van-col>{{ item.label }}</van-col>
           <v-count-up
             :end-val="Number(item['count'])"
             class="count_up"
             :options="item['options']"
           />
-        </div>
-      </div>
-      <div class="sub_title">
-        <span>设备异常</span>
-        <div class="function_btn">
-          <span>立即处理</span>
+        </van-row>
+      </van-row>
+      <!-- 工单待办end -->
+
+      <!-- 设备异常begin -->
+      <van-row align="center" justify="space-between" class="sub_title">
+        <van-col class="title">设备异常</van-col>
+        <van-col class="function_btn">
+          <van-col>立即处理</van-col>
           <van-image
             :src="require('@/assets/btn-arrow-right.svg')"
             width="24"
             height="24"
             fit="contain"
           />
-        </div>
-      </div>
-      <div class="list_item">
-        <div
-          class="item_info"
+        </van-col>
+      </van-row>
+      <van-row align="center" justify="space-between" class="list_item">
+        <van-row
+          align="center"
+          justify="space-between"
+          style="flex-direction: column"
           v-for="(item, index) in deviceErrorList"
           :key="item + '-' + index"
         >
-          <span class="label">{{ item.label }}</span>
+          <van-col>{{ item.label }}</van-col>
           <v-count-up
             :end-val="Number(item['count'])"
             class="count_up"
             :options="item['options']"
             style="color: #fa5555"
           />
-        </div>
-      </div>
-      <div class="sub_title">
-        <span>欠费待收</span>
-        <div class="function_btn">
-          <span>立即处理</span>
+        </van-row>
+      </van-row>
+      <!-- 设备异常end -->
+
+      <!-- 欠费待收begin -->
+      <van-row align="center" justify="space-between" class="sub_title">
+        <van-col class="title">欠费待收</van-col>
+        <van-col class="function_btn">
+          <van-col>立即处理</van-col>
           <van-image
             :src="require('@/assets/btn-arrow-right.svg')"
             width="24"
             height="24"
             fit="contain"
           />
-        </div>
-      </div>
+        </van-col>
+      </van-row>
       <div class="list_item list_table">
-        <div class="table_info">
-          <div class="table_header">
-            <span>欠费类型</span>
-            <span>欠费租户数</span>
-            <span>累计欠费</span>
-          </div>
-          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-            <van-list
-              v-model:loading="loading"
-              :finished="finished"
-              :error="error"
-              error-text="请求失败，点击重新加载"
-              finished-text="没有更多了"
-              @load="onLoad"
-            >
-              <van-row v-for="item in list" :key="item.id">
-                <van-cell :value="item.type" />
-                <van-cell :value="item.fee" />
-                <van-cell :value="item.totalFee" />
-              </van-row>
-            </van-list>
-          </van-pull-refresh>
-        </div>
+        <van-row align="center" justify="space-between" class="table_header">
+          <van-col span="8">欠费类型</van-col>
+          <van-col span="8">欠费租户数</van-col>
+          <van-col span="8">累计欠费</van-col>
+        </van-row>
+        <van-row
+          align="center"
+          justify="space-between"
+          v-for="item in list"
+          :key="item.id"
+          class="table_body"
+        >
+          <van-col span="8" style="color: #999999; font-size: 12px">
+            {{ `${feeType_filter(item && item.feeType)}` }}
+          </van-col>
+          <van-col span="8" style="color: #0c1935; font-size: 16px">
+            {{ item.rentNum }}
+          </van-col>
+          <van-col span="8" style="color: #0c1935; font-size: 16px">
+            {{ item.totalFee }}
+          </van-col>
+        </van-row>
       </div>
+      <!-- 欠费待收end -->
     </div>
-    <van-tabbar
-      v-model="activeTab"
-      active-color="#5776E6"
-      inactive-color="#333333"
-    >
-      <van-tabbar-item name="home" :icon="require('@/assets/home.svg')" to=""
-        >首页</van-tabbar-item
-      >
-      <van-tabbar-item
-        name="rentBill"
-        :icon="require('@/assets/rent-bill.svg')"
-        to=""
-        >租户账单</van-tabbar-item
-      >
-      <van-tabbar-item
-        name="remoteControl"
-        :icon="require('@/assets/remote-control.svg')"
-        to=""
-        >远程管控</van-tabbar-item
-      >
-    </van-tabbar>
   </div>
+
+  <!-- 底部tabbar -->
+  <van-tabbar
+    v-model="activeTabBar"
+    active-color="#2E69EB"
+    inactive-color="#333333"
+    safe-area-inset-bottom
+  >
+    <van-tabbar-item
+      name="home"
+      :icon="
+        activeTabBar == 'home'
+          ? require('@/assets/home-active.svg')
+          : require('@/assets/home.svg')
+      "
+      to="/home"
+      >首页</van-tabbar-item
+    >
+    <van-tabbar-item
+      name="rentBill"
+      :icon="
+        activeTabBar == 'rentBill'
+          ? require('@/assets/rent-bill-active.svg')
+          : require('@/assets/rent-bill.svg')
+      "
+      to="/rentBill"
+      >租户账单</van-tabbar-item
+    >
+    <van-tabbar-item
+      name="remoteControl"
+      :icon="
+        activeTabBar == 'remoteControl'
+          ? require('@/assets/remote-control-active.svg')
+          : require('@/assets/remote-control.svg')
+      "
+      to="/remoteControl"
+      >远程管控</van-tabbar-item
+    >
+  </van-tabbar>
 </template>
 <script>
+import { isEmpty } from "@/utils/index.js";
 import VCountUp from "./CountUp";
 export default {
   components: {
@@ -162,12 +227,41 @@ export default {
   },
   data() {
     return {
+      role: 1, //1:admin、2:巡检人员、3:维修工、4:租户
       name: "电商园四期-B座",
-      activeTab: "rentBill",
+      activeTabBar: "home",
       functionList: [
-        { src: require("@/assets/repair-online.svg"), label: "线上报修" },
-        { src: require("@/assets/check-review.svg"), label: "巡检记录" },
-        { src: require("@/assets/reduce-record.svg"), label: "扣缴记录" },
+        {
+          src: require("@/assets/repair-online.svg"),
+          label: "线上报修",
+          role: [1, 2, 4],
+        },
+        {
+          src: require("@/assets/check-review.svg"),
+          label: "巡检记录",
+          role: [1, 2],
+        },
+        {
+          src: require("@/assets/reduce-record.svg"),
+          label: "扣缴记录",
+          role: [1, 4],
+        },
+      ],
+      checkList: [
+        {
+          label: "今日待巡检",
+          count: 88,
+          options: {
+            separator: ",",
+          },
+        },
+        {
+          label: "今日已巡检",
+          count: 2,
+          options: {
+            separator: ",",
+          },
+        },
       ],
       workList: [
         {
@@ -215,39 +309,30 @@ export default {
           },
         },
       ],
-      list: [],
-      loading: false,
-      refreshing: false,
-      finished: false,
+      list: [
+        { feeType: 1, rentNum: 23, totalFee: 12636 },
+        { feeType: 2, rentNum: 7, totalFee: 462 },
+        { feeType: 3, rentNum: 132, totalFee: 24634 },
+        { feeType: 1, rentNum: 23, totalFee: 12636 },
+        { feeType: 2, rentNum: 7, totalFee: 462 },
+        { feeType: 3, rentNum: 132, totalFee: 24634 },
+      ],
     };
   },
   methods: {
-    onLoad() {
-      setTimeout(() => {
-        if (this.refreshing.value) {
-          this.list.value = [];
-          this.refreshing.value = false;
-        }
-
-        for (let i = 0; i < 10; i++) {
-          this.list.value.push(this.list.value.length + 1);
-        }
-        this.loading.value = false;
-
-        if (this.list.value.length >= 40) {
-          this.finished.value = true;
-        }
-      }, 1000);
-    },
-
-    onRefresh() {
-      // 清空列表数据
-      this.finished.value = false;
-
-      // 重新加载数据
-      // 将 loading 设置为 true，表示处于加载状态
-      this.loading.value = true;
-      this.onLoad();
+    feeType_filter(val) {
+      if (isEmpty(val)) {
+        return "";
+      }
+      if (val == 1) {
+        return "电费";
+      }
+      if (val == 2) {
+        return "水费";
+      }
+      if (val == 3) {
+        return "物业相关";
+      }
     },
     toPath() {
       this.$router.push("/userInfo");
@@ -256,9 +341,12 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.page_home {
+.page_info {
   position: relative;
-  .home_bg {
+  height: calc(
+    100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 50px
+  );
+  .info_bg {
     width: 100%;
     height: 102px;
     background: #5c8fff;
@@ -270,72 +358,62 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding: 0 16px;
-      .title_info {
+      .van-col {
+        height: 24px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 24px;
+        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
         display: flex;
         align-items: center;
-        span {
-          height: 24px;
-          font-size: 16px;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 24px;
-          text-align: center;
-          text-indent: 4px;
-          text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
-        }
-      }
-
-      .user-info {
       }
     }
   }
-  .home_info {
+  .info_function {
     position: absolute;
     top: 52px;
     width: calc(100% - 32px);
-    padding: 0 16px;
-    .info_content {
-      background: #ffffff;
-      box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
-      border-radius: 4px;
+    margin: 0 16px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 16px 0;
+    .function_item {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      justify-content: space-between;
-      padding: 16px 30px;
-      .content_item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        span {
-          height: 20px;
-          font-size: 14px;
-          font-weight: 400;
-          color: #697081;
-          line-height: 20px;
-          margin-top: 4px;
-        }
+      justify-content: center;
+      span {
+        height: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #697081;
+        line-height: 20px;
+        margin-top: 4px;
       }
     }
   }
-  .card_list {
+  .info_list {
+    max-height: calc(100% - 114px - 42px - 20px);
     padding: 0 16px;
+    overflow-y: auto;
     .sub_title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
       margin: 12px 0 6px 0;
-      span {
+      .title {
         height: 20px;
         font-size: 14px;
-        font-weight: 600;
+        font-weight: 500;
         color: #0c1935;
         line-height: 20px;
       }
       .function_btn {
         display: flex;
         align-items: center;
-        span {
+        .van-col {
           height: 16px;
           font-size: 12px;
           font-weight: 400;
@@ -349,48 +427,38 @@ export default {
       box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.08);
       border-radius: 4px;
       padding: 16px 30px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .item_info {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .label {
+      .van-col {
+        height: 16px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #666666;
+        line-height: 16px;
+      }
+      .count_up {
+        margin-top: 4px;
+        height: 22px;
+        font-size: 20px;
+        font-weight: 500;
+        color: #0c1935;
+        line-height: 22px;
+      }
+    }
+    .list_table {
+      padding: 8px 16px;
+      .table_header {
+        padding: 8px 0;
+        border-bottom: 1px solid #eeeeee;
+        .van-col {
           height: 16px;
           font-size: 12px;
-          font-weight: 400;
-          color: #697081;
+          font-weight: 600;
+          color: #999999;
           line-height: 16px;
         }
-        .count_up {
-          margin-top: 4px;
-          height: 22px;
-          font-size: 20px;
-          font-weight: 500;
-          color: #0c1935;
-          line-height: 22px;
-        }
       }
-    }
-    .list_table {
-      padding: 16px 20px;
-      .table_info {
-        .table_header {
-          display: flex;
-          justify-content: space-between;
-          padding-bottom: 8px;
-          border-bottom: 1px solid #eeeeee;
-
-          span {
-            height: 16px;
-            font-size: 12px;
-            font-weight: 600;
-            color: #9da0ac;
-            line-height: 16px;
-          }
-        }
+      .table_body {
+        padding: 12px 0;
+        border-bottom: 1px solid #eeeeee;
       }
     }
   }

src/views/repairDetail.vue

@@ -66,14 +66,28 @@
     </div>
   </div>
   <div class="save_btn">
-    <van-button
-      block
-      type="primary"
-      loading-type="spinner"
-      @click="handleClick"
-    >
-      指派维修人员
-    </van-button>
+    <template v-if="role == 3">
+      <van-button
+        block
+        type="primary"
+        loading-type="spinner"
+        :loading="loading"
+        loading-text="维修完成"
+        @click="handleClick('finish')"
+      >
+        维修完成
+      </van-button>
+    </template>
+    <template v-if="role == 1">
+      <van-button
+        block
+        type="primary"
+        loading-type="spinner"
+        @click="handleClick('dispatch')"
+      >
+        指派维修人员
+      </van-button>
+    </template>
   </div>
   <van-popup
     v-model:show="showPopup"
@@ -167,6 +181,7 @@ export default {
   },
   data() {
     return {
+      role: 3,
       loading: false,
       title: "",
       showImgPreview: false,
@@ -250,11 +265,29 @@ export default {
         return "普通";
       }
     },
-    handleClick() {
-      this.showPopup = !this.showPopup;
-      this.$nextTick(() => {
-        this.$refs.dataForm.resetValidation();
-      });
+    handleClick(type) {
+      if (type == "finish") {
+        this.$dialog
+          .confirm({
+            message: "请确认是否维修完成",
+          })
+          .then(() => {
+            this.loading = true;
+            setTimeout(() => {
+              this.loading = false;
+            }, 2000);
+            // on confirm
+          })
+          .catch(() => {
+            // on cancel
+          });
+      }
+      if (type == "dispatch") {
+        this.showPopup = !this.showPopup;
+        this.$nextTick(() => {
+          this.$refs.dataForm.resetValidation();
+        });
+      }
     },
     onSubmit() {
       this.loading = true;

src/views/userInfo/index.vue

@@ -8,13 +8,11 @@
         <van-cell title="账号密码" :value="password" />
       </van-cell-group>
     </div>
-
     <van-button
       style="margin-top: 40px"
       block
       color="#2E69EB"
       plain
-      :loading="loading"
       @click="loginOut"
     >
       注销登录
@@ -25,7 +23,6 @@
 export default {
   data() {
     return {
-      loading: false,
       username: "张浩",
       tel: 158304802928,
       password: "123456",
@@ -52,13 +49,7 @@ export default {
       );
     },
     onClickLeft() {},
-    loginOut() {
-      this.loading = true;
-      setTimeout(() => {
-        this.loading = falsed;
-        this.$router.push("/");
-      }, 2000);
-    },
+    loginOut() {},
   },
 };
 </script>