扫码

package.json

@@ -8,10 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@zxing/library": "^0.19.1",
     "axios": "^1.2.1",
     "axios-retry": "^3.3.1",
     "core-js": "^3.6.5",
     "countup.js": "^2.3.2",
+    "lossless-json": "^2.0.4",
     "node-sass": "^6.0.1",
     "sass-loader": "^10.0.1",
     "vant": "^3.6.0",

src/App.vue

@@ -49,34 +49,34 @@ export default {
         if (res.code == 0) {
           this.$toast.clear();
           window.localStorage.setItem("token", res.data.token);
-          this.$store.state.password = password;
-          this.getUserInfo();
+          this.getUserInfo(password);
         } else {
           this.$notify({ type: "danger", message: res.msg });
         }
       });
     },
-    getUserInfo() {
+    getUserInfo(password) {
       Api.getUserInfo().then((res) => {
         if (res.code == 0) {
           this.loading = true;
-          this.$store.state.username = res.data.username;
-          this.$store.state.userMobile = res.data.mobile;
           if (res.data.roleCodes.length == 0) {
             // 1:admin、check:巡检人员、repair:维修工、rent:租户
             localStorage.setItem("role", "admin");
           } else {
             localStorage.setItem("role", res.data.roleCodes[0]);
-            if (res.data.roleCodes[0] == "Tenant") {
-              localStorage.setItem(
-                "tenantInfo",
-                JSON.stringify({
-                  tenantId: res.data.tenantId,
-                  tenantName: res.data.tenantName,
-                })
-              );
-            }
           }
+          this.$store.commit("setUserInfo", {
+            id: res.data.id,
+            userName: res.data.username,
+            passWord: password,
+            mobile: res.data.mobile,
+            circuitType:
+              res.data.roleCodes[0] == "Inspection" ? res.data.circuitType : "",
+            tenantId:
+              res.data.roleCodes[0] == "Tenant" ? res.data.tenantId : "",
+            tenantName:
+              res.data.roleCodes[0] == "Tenant" ? res.data.tenantName : "",
+          });
         } else {
           this.$notify({ type: "danger", message: res.msg });
         }

src/router/index.js

@@ -72,9 +72,9 @@ const routes = [
         },
       },
       {
-        name: 'repairClock',
-        path: 'create',
-        component: () => import('../views/review/create.vue'),
+        name: 'reviewClock',
+        path: 'clock',
+        component: () => import('../views/review/clock.vue'),
         meta: {
           title: '巡检打卡',
         },
@@ -147,6 +147,12 @@ const routes = [
       title: '远程管控',
     },
   },
+  {
+    title: '扫码页面',
+    name: 'scanCode',
+    path: '/scanCode',
+    component: () => import('../views/scanCode.vue')
+  }
 ]
 
 const router = createRouter({

src/store/index.js

@@ -1,13 +1,21 @@
-
 import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    username:'',
-    userMobile:'',
-    password:''
+    userInfo:{},
+    scanInfo: {}
+  },
+  getters: {
+    getUserInfo: (state) => { return state.userInfo },
+    getScanInfo: (state) => { return state.scanInfo }
   },
   mutations: {
+    setUserInfo(state, data) {
+      state.userInfo = data
+    },
+    setScanInfo(state, data) {
+      state.scanInfo = data
+    }
   },
   actions: {
   },

src/utils/api.js

@@ -1,4 +1,3 @@
-
 import { service } from './request'
 export default {
 
@@ -84,5 +83,8 @@ export default {
     billPay: (params) => service.post('/app/billinfo/billPay', params),
 
     //巡检记录
-    reviewCheckList: (params) => service.post("/app/circuitrecord", params),
+    reviewList: (params) => service.get("/app/circuitrecord/page", { params: params }),
+
+    //巡检记录--打卡
+    reviewClock: (params) => service.post("/app/circuitrecord", params),
 }

src/utils/index.js

@@ -41,3 +41,25 @@ export function getDictDataList(dictType, subtype) {
         return []
     }
 }
+
+export function getCurrentTime() {
+    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() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+    return (year +
+        "-" +
+        month +
+        "-" +
+        day +
+        " " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds);
+}

src/views/home.vue

@@ -255,6 +255,8 @@
                 $router.push({
                   path: '/bill/detail',
                   query: {
+                    tenantId: userInfo.tenantId,
+                    tenantName: userInfo.tenantName,
                     activeTab: 'bill',
                   },
                 });
@@ -345,6 +347,7 @@
   </template>
 </template>
 <script>
+import { mapGetters } from "vuex";
 import { isEmpty, getDictDataList } from "@/utils/index.js";
 import api from "../utils/api";
 import VCountUp from "./CountUp";
@@ -355,7 +358,6 @@ export default {
   data() {
     return {
       role: "",
-      tenantInfo: {}, //角色为Tenant时有值
       name: "电商园四期-B座",
       activeTabBar: "home",
       functionList: [
@@ -402,6 +404,9 @@ export default {
       billPaymentList: [],
       loading: true,
     };
+  },
+   computed: {
+    ...mapGetters({ userInfo: "getUserInfo" }),
   },
   async mounted() {
     this.role = localStorage.getItem("role");
@@ -409,11 +414,6 @@ export default {
     await this.getDeviceAlarmList();
     await this.getReviewList();
     this.getHomeData();
-    if (this.role == "Tenant") {
-      this.tenantInfo = JSON.parse(localStorage.getItem("tenantInfo"));
-    } else {
-      this.tenantInfo = {};
-    }
   },
   methods: {
     getPayTypeList() {
@@ -483,8 +483,8 @@ export default {
       let params = {};
       if (this.role == "Tenant" && val) {
         params = {
-          tenantId: this.tenantInfo.tenantId,
-          tenantName: this.tenantInfo.tenantName,
+          tenantId: this.userInfo.tenantId,
+          tenantName: this.userInfo.tenantName,
           activeTab: val,
         };
         path = "/bill/detail";

src/views/repair/list.vue

@@ -100,6 +100,7 @@ export default {
   },
   data() {
     return {
+      time: null,
       role: "",
       title: "",
       repairStatusList: [],
@@ -125,6 +126,9 @@ export default {
     },
   },
   created() {
+    this.time = setInterval(() => {
+      console.log(1);
+    }, 1000);
     this.role = localStorage.getItem("role");
     if (this.role == "admin") {
       this.title = "工单待办";
@@ -224,6 +228,7 @@ export default {
       });
     },
     backPath() {
+      clearInterval(this.time);
       this.$router.back();
     },
   },

src/views/review/clock.vue

@@ -0,0 +1,288 @@
+<template>
+  <van-nav-bar title="巡检打卡" safe-area-inset-top>
+    <template #left>
+      <van-icon
+        :name="require('@/assets/arrow-left.svg')"
+        size="24"
+        @click="backPath"
+      />
+    </template>
+  </van-nav-bar>
+  <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">{{ userInfo.userName }}</van-col>
+          <van-image
+            width="14"
+            height="14"
+            :src="require('@/assets/tel.svg')"
+            style="margin: 0 6px 0 16px"
+          />
+          <van-col class="info_tel">{{ userInfo.mobile }}</van-col>
+        </van-row>
+        <van-row>
+          <van-col class="info_type">{{
+            `${
+              dict_filter(userInfo.circuitType, "reviewTypeList")["dictLabel"]
+            }`
+          }}</van-col>
+        </van-row>
+      </div>
+    </div>
+    <div class="info_clock">
+      <van-row justify="center" class="time">
+        <van-col style="margin-left: 12px">当前时间：{{ timeStr }}</van-col>
+        <van-col
+          ><van-icon name="location" color="#6DD400"></van-icon>当前打卡位置：{{
+            circuitPosition || "--"
+          }}</van-col
+        >
+      </van-row>
+      <van-row class="circle" @click="scanCode">
+        <van-col>扫码打卡</van-col>
+        <van-icon name="enlarge"></van-icon>
+      </van-row>
+    </div>
+    <van-row class="sub_title">
+      <van-col>今日打卡记录</van-col>
+    </van-row>
+    <div class="info_list">
+      <template v-if="!loading">
+        <template v-if="dataList.length > 0">
+          <div class="list_item" v-for="item in dataList" :key="item.id">
+            <van-row class="row_title">
+              <van-col>{{ item.circuitPosition }}</van-col>
+            </van-row>
+            <van-row class="row_info">
+              <van-col>巡检时间：{{ item.circuitTime }}</van-col>
+            </van-row>
+          </div>
+        </template>
+        <template v-else>
+          <van-empty image-size="60" description="暂无数据" />
+        </template>
+      </template>
+      <template v-if="loading">
+        <van-loading size="24px">加载中...</van-loading>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import Api from "@/utils/api";
+import { isEmpty, getDictDataList } from "@/utils/index";
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {
+      IntervalTime: null,
+      timeStr: "",
+      circuitPosition: "",
+      dataForm: {
+        page: 1,
+        limit: 99999,
+        circuitType: "",
+        startDate: "",
+        endDate: "",
+        buildingId: "",
+        storeyId: "",
+        circuitPersonId: "",
+      },
+      reviewTypeList: [],
+      dataList: [],
+      loading: true,
+    };
+  },
+  computed: {
+    ...mapGetters({ userInfo: "getUserInfo" }),
+  },
+  created() {
+    var date = new Date();
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    this.circuitPosition = this.$route.query.circuitPosition;
+    this.dataForm.startDate = `${year}-${month}-${day}` + " 00:00:00";
+    this.dataForm.endDate = `${year}-${month}-${day}` + " 23:59:59";
+    this.dataForm.circuitPersonId = this.userInfo.id;
+    this.dataForm.circuitType = this.userInfo.circuitType;
+    this.getReviewTypeList();
+    this.getDataList();
+    this.cutDown();
+    this.IntervalTime = setInterval(this.cutDown, 1000);
+  },
+  methods: {
+    getReviewTypeList() {
+      this.reviewTypeList = getDictDataList("ReviewType");
+    },
+    dict_filter(val, list) {
+      if (isEmpty(val)) {
+        return {};
+      }
+      return this[list].find((item) => item.dictValue == val);
+    },
+    // 获取列表数据方法
+    getDataList() {
+      Api.reviewList(this.dataForm).then((res) => {
+        if (res.code == 0) {
+          if (res.data) {
+            this.dataList = res.data.list;
+          } else {
+            // 判断获取数据条数若等于0
+            this.dataList = []; // 清空数组
+          }
+        }
+      });
+      this.loading = false;
+    },
+    scanCode() {
+      this.$router.push({
+        path: "/scanCode",
+      });
+    },
+    backPath() {
+      clearInterval(this.IntervalTime);
+      this.$router.push({ path: "/review/list" });
+    },
+    cutDown() {
+      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() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      this.timeStr =
+        year +
+        "-" +
+        month +
+        "-" +
+        day +
+        " " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_info {
+  padding: 16px;
+  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;
+    margin-top: 16px;
+    .time {
+      flex-direction: column;
+      align-items: baseline;
+      .van-col {
+        font-size: 12px;
+        color: #999999;
+        line-height: 20px;
+      }
+      .van-icon {
+        font-size: 12px;
+      }
+    }
+
+    .circle {
+      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;
+      .van-col {
+        height: 24px;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 24px;
+        margin-bottom: 4px;
+      }
+      .van-icon {
+        font-size: 24px;
+      }
+    }
+  }
+  .sub_title {
+    margin: 16px 0;
+    height: 20px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #666666;
+    line-height: 20px;
+  }
+  .info_list {
+    max-height: 200px;
+    overflow-y: auto;
+    .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/review/create.vue

@@ -1,237 +0,0 @@
-<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";
-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;
-  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/review/list.vue

@@ -38,10 +38,10 @@
       <div class="drop_down">
         <van-dropdown-menu active-color="#1989fa">
           <van-dropdown-item
-            v-model="checkType"
-            @change="handelChange('checkType', checkType)"
-            :title="checkTypeTitle"
-            :options="checkTypeList"
+            v-model="dataForm.circuitType"
+            @change="handelChange('circuitType', circuitType)"
+            :title="reviewTypeTitle"
+            :options="reviewTypeList"
           />
           <van-dropdown-item
             v-model="checkPerson"
@@ -69,25 +69,27 @@
           finished-text="没有更多了"
           @load="onLoad"
         >
-          <div v-for="item in list" :key="item.id" class="list_item">
+          <div v-for="item in dataList" :key="item.id" class="list_item">
             <van-row class="header">
-              <van-col>{{ item.tenantInfo.name }}</van-col>
+              <van-col>{{ item.circuitPosition }}</van-col>
             </van-row>
             <van-row>
               <van-col>巡检类型：</van-col>
-              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
+              <van-col>{{
+                dict_filter(item.circuitType, "reviewTypeList")["text"]
+              }}</van-col>
             </van-row>
             <van-row>
               <van-col>巡检人员：</van-col>
-              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
+              <van-col>{{ item.circuitPerson.realName }}</van-col>
             </van-row>
             <van-row>
               <van-col>联系电话：</van-col>
-              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
+              <van-col>{{ item.circuitPerson.mobile }}</van-col>
             </van-row>
             <van-row>
               <van-col>巡检时间：</van-col>
-              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
+              <van-col>{{ item.circuitTime }}</van-col>
             </van-row>
           </div>
         </van-list>
@@ -97,6 +99,7 @@
 </template>
 <script>
 import Api from "@/utils/api";
+import { isEmpty, getDictDataList } from "@/utils/index";
 import VCountUp from "../CountUp";
 export default {
   components: {
@@ -105,26 +108,42 @@ export default {
   data() {
     return {
       name: "电商园四期-B座",
-      checkType: "",
       checkPerson: "",
-      checkTypeTitle: "巡检类型",
+      reviewTypeTitle: "巡检类型",
       checkPersonTitle: "巡检人员",
-      checkTypeList: [
-        { text: "安保", value: 1 },
-        { text: "保洁", value: 2 },
-      ],
+      reviewTypeList: [],
       checkPersonList: [
         { text: "张三", value: 1 },
         { text: "李四", value: 2 },
       ],
-      dataForm: {},
+      dataForm: {
+        circuitType: "",
+        page: 1,
+        limit: 10,
+      },
       dataList: [],
       loading: false,
       refreshing: false,
       finished: false,
     };
   },
+  created() {
+    this.getReviewTypeList();
+  },
   methods: {
+    getReviewTypeList() {
+      this.reviewTypeList = getDictDataList("ReviewType");
+      this.reviewTypeList.forEach((item) => {
+        item.text = item.dictLabel;
+        item.value = item.dictValue;
+      });
+    },
+    dict_filter(val, list) {
+      if (isEmpty(val)) {
+        return {};
+      }
+      return this[list].find((item) => item.dictValue == val);
+    },
     onLoad() {
       setTimeout(async () => {
         if (this.refreshing) {
@@ -132,33 +151,35 @@ export default {
           this.refreshing = false;
         }
         await this.getDataList();
+        this.dataForm.page++; // 分页数加一
       }, 100);
     },
     onRefresh() {
       // 清空列表数据
       this.finished = false;
       // 重新加载数据
+      this.dataList = [];
       // 将 loading 设置为 true，表示处于加载状态
       this.loading = true;
-      this.dataList = [];
+      this.dataForm.page = 1; // 分页数赋值为1
       this.onLoad();
     },
     // 获取列表数据方法
     getDataList() {
-      Api.reviewCheckList(this.dataForm).then((res) => {
+      Api.reviewList(this.dataForm).then((res) => {
         if (res.code == 0) {
           if (res.data) {
-            if (res.data.length == 0) {
+            if (res.data.list.length == 0) {
               // 判断获取数据条数若等于0
               this.dataList = []; // 清空数组
               this.finished = true; // 停止加载
             }
             // 若数据条数不等于0
-            this.dataList.push(...res.data); // 将数据放入list中
+            this.dataList.push(...res.data.list); // 将数据放入list中
             this.loading = false; // 加载状态结束
 
             // 如果list长度大于等于总数据条数,数据全部加载完成
-            if (this.dataList.length >= res.data.length) {
+            if (this.dataList.length >= res.data.total) {
               this.finished = true; // 结束加载状态
             }
           } else {
@@ -174,10 +195,9 @@ export default {
     },
     // change事件可以拿到的是value
     handelChange(type, val) {
-      console.log(type, val);
-      if (type == "checkType") {
+      if (type == "reviewType") {
         // 这里打印出来的值就是我们想要的text
-        this.checkTypeTitle = this.checkTypeList.filter(
+        this.reviewTypeTitle = this.reviewTypeList.filter(
           (item) => item.value === val
         )[0].text;
       }
@@ -187,6 +207,7 @@ export default {
           (item) => item.value === val
         )[0].text;
       }
+      this.onRefresh();
     },
     backPath() {
       this.$router.back();

src/views/scanCode.vue

@@ -0,0 +1,152 @@
+<template>
+  <van-nav-bar title="扫描二维码" safe-area-inset-top>
+    <template #left>
+      <van-icon
+        :name="require('@/assets/arrow-left.svg')"
+        size="24"
+        @click="backPath"
+      />
+    </template>
+  </van-nav-bar>
+  <div class="page_scan">
+    <!-- 扫码区域 -->
+    <video ref="video" id="video" class="scan_video" autoplay></video>
+    <!-- 提示语 -->
+    <div v-show="tipShow" class="scan_tip">{{ tipMsg }}</div>
+  </div>
+</template>
+  
+<script>
+import { BrowserMultiFormatReader } from "@zxing/library";
+import Api from "@/utils/api";
+import { mapGetters } from "vuex";
+import { getCurrentTime } from "@/utils/index";
+const LosslessJSON = require('lossless-json')
+export default {
+  data() {
+    return {
+      loadingShow: false,
+      codeReader: null,
+      scanText: "",
+      vin: null,
+      tipMsg: "正在尝试识别....",
+      tipShow: false,
+      dataForm: {
+        circuitType: "",
+        buildingId: "",
+        storeyId: "",
+        circuitPersonId: "",
+        circuitPosition: "",
+        circuitTime: "",
+        position: "",
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({ userInfo: "getUserInfo" }),
+  },
+  created() {
+    this.codeReader = new BrowserMultiFormatReader();
+    this.openScan();
+  },
+  methods: {
+    async openScan() {
+      this.codeReader
+        .getVideoInputDevices()
+        .then((videoInputDevices) => {
+          this.tipShow = true;
+          this.tipMsg = "正在调用摄像头...";
+          // 默认获取第一个摄像头设备id
+          let firstDeviceId = videoInputDevices[0].deviceId;
+          // 获取第一个摄像头设备的名称
+          const videoInputDeviceslablestr = JSON.stringify(
+            videoInputDevices[0].label
+          );
+          if (videoInputDevices.length > 1) {
+            // 判断是否后置摄像头
+            if (videoInputDeviceslablestr.indexOf("back") > -1) {
+              firstDeviceId = videoInputDevices[0].deviceId;
+            } else {
+              firstDeviceId = videoInputDevices[1].deviceId;
+            }
+          }
+          this.decodeFromInputVideoFunc(firstDeviceId);
+        })
+        .catch((err) => {
+          this.tipShow = false;
+          console.error(err);
+        });
+    },
+    decodeFromInputVideoFunc(firstDeviceId) {
+      this.codeReader.reset(); // 重置
+      this.scanText = "";
+      this.codeReader.decodeFromInputVideoDeviceContinuously(
+        firstDeviceId,
+        "video",
+        (result, err) => {
+          this.tipMsg = "正在尝试识别...";
+          this.scanText = "";
+          if (result) {
+            this.scanText = LosslessJSON.parse(result.text);
+            console.log(this.scanText);
+            if (this.scanText) {
+              this.tipShow = false;
+              this.onSubmit();
+            }
+          }
+          if (err && !err) {
+            this.tipMsg = "识别失败";
+            setTimeout(() => {
+              this.tipShow = false;
+            }, 2000);
+            console.error(err);
+          }
+        }
+      );
+    },
+    onSubmit() {
+      this.dataForm.buildingId = this.scanText.buildingId;
+      this.dataForm.storeyId = this.scanText.storeyId;
+      this.dataForm.position = this.dataForm.circuitPosition =
+        this.scanText.position;
+      this.dataForm.circuitTime = getCurrentTime();
+      this.dataForm.circuitPersonId = this.userInfo.id;
+      this.dataForm.circuitType = this.userInfo.circuitType;
+      Api.reviewClock(this.dataForm).then((res) => {
+        if (res.code == 0) {
+          this.$toast.success("打卡成功");
+          this.backPath();
+        }
+      });
+    },
+    backPath() {
+      this.codeReader.reset();
+      // 返回上一页
+      this.codeReader = null;
+      this.$router.push({
+        path: "/review/clock",
+        query: {
+          circuitPosition: this.scanText.position,
+        },
+      });
+    },
+  },
+};
+</script>
+  
+<style lang="scss" scoped>
+.page_scan {
+  overflow-y: hidden;
+  background-color: #363636;
+  .scan_video {
+    height: 80vh;
+  }
+  .scan_tip {
+    width: 100vw;
+    text-align: center;
+    margin-bottom: 10vh;
+    color: white;
+    font-size: 5vw;
+  }
+}
+</style>