Home Esplora Aiuto
Registrati Accedi
lmc
/
witcarbon-app
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

维修工、巡检、请求tokan失效的优化

lmc 2 anni fa
parent
9559c8e7ad
commit
6109614b74
20 ha cambiato i file con 2061 aggiunte e 1599 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 5 0
      public/index.html
  2. 36 9
      src/App.vue
  3. 3 3
      src/router/index.js
  4. 34 9
      src/utils/api.js
  5. 20 0
      src/utils/index.js
  6. 5 5
      src/utils/request.js
  7. 52 32
      src/views/deviceAlarm.vue
  8. 137 84
      src/views/home.vue
  9. 301 240
      src/views/lackFee.vue
  10. 1 1
      src/views/login.vue
  11. 231 192
      src/views/reduceRecord.vue
  12. 0 1
      src/views/remoteControl.vue
  13. 260 205
      src/views/rentBill.vue
  14. 476 344
      src/views/rentBillDetail.vue
  15. 20 15
      src/views/repairDetail.vue
  16. 52 37
      src/views/repairList.vue
  17. 137 150
      src/views/repairOnline.vue
  18. 0 266
      src/views/reviewCheck.vue
  19. 285 0
      src/views/reviewRecord.vue
  20. 6 6
      src/views/userInfo.vue

+ 5 - 0
public/index.html
Vedi File 

@@ -8,7 +8,12 @@
 
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
 
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
   <title>双碳感知资产运营管理平台</title>
 
+
 
 </head>
 
+<script>
 
+  window.SITE_CONFIG = {};
 
+  window.SITE_CONFIG["dictList"] = [];
 
+</script>
 
 
 <body style="overflow-x: hidden;">
 
   <noscript>

+ 36 - 9
src/App.vue
Vedi File 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <router-view> </router-view>
 
+  <router-view v-if="loading"> </router-view>
 
   <!-- 开启底部安全区适配 -->
 
   <van-number-keyboard safe-area-inset-bottom />
 
 </template>
 
@@ -7,15 +7,22 @@
 
 import Api from "./utils/api";
 
 export default {
 
   data() {
 
-    return {};
 
+    return {
 
+      loading: false,
 
+    };
 
   },
 
   created() {
 
+    this.getDictAll();
 
     if (localStorage.getItem("token")) {
 
       this.getUserInfo();
 
     } else {
 
       let username = this.getUrlKey("username");
 
-      let pwd = this.getUrlKey("pwd");
 
-      this.login(username, pwd);
 
+      let password = this.getUrlKey("password");
 
+      if (username && password) {
 
+        this.login(username, password);
 
+      } else {
 
+        this.loading = true;
 
+      }
 
     }
 
   },
 
   methods: {
 
@@ -28,17 +35,21 @@ export default {
 
         ) || null
 
       );
 
     },
 
-    login(username, pwd) {
 
-      this.loading = true;
 
+    // 获取字典列表, 添加并全局变量保存
 
+    getDictAll() {
 
+      Api.getDictList().then((res) => {
 
+        window.SITE_CONFIG["dictList"] = res.data;
 
+      });
 
+    },
 
+    login(username, password) {
 
       Api.loginByPwd({
 
         username: username,
 
-        password: pwd,
 
+        password: password,
 
       }).then((res) => {
 
-        this.loading = false;
 
         if (res.code == 0) {
 
           this.$toast.clear();
 
           window.localStorage.setItem("token", res.data.token);
 
-          this.$store.state.password = this.pwd;
 
+          this.$store.state.password = password;
 
           this.getUserInfo();
 
         } else {
 
           this.$notify({ type: "danger", message: res.msg });
 
@@ -48,6 +59,7 @@ export default {
 
     getUserInfo() {
 
       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) {
 
@@ -55,6 +67,15 @@ export default {
 
             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,
 
+                })
 
+              );
 
+            }
 
           }
 
         } else {
 
           this.$notify({ type: "danger", message: res.msg });
 
@@ -106,6 +127,12 @@ body {
 
 .van-cascader {
 
   --van-font-weight-bold: 500;
 
 }
 
+.van-empty {
 
+  padding: 16px 0!important;
 
+  .van-empty__description {
 
+    margin-top: 10px!important;
 
+  }
 
+}
 
 :root {
 
   --van-gray-3: unset;
 
   --van-gray-5: #999999;

+ 3 - 3
src/router/index.js
Vedi File 

@@ -38,9 +38,9 @@ const routes = [
 
     },
 
   },
 
   {
 
-    name: 'reviewCheck',
 
-    path: '/reviewCheck',
 
-    component: () => import('../views/reviewCheck'),
 
+    name: 'reviewRecord',
 
+    path: '/reviewRecord',
 
+    component: () => import('../views/reviewRecord'),
 
     meta: {
 
       title: '巡检记录',
 
     },

+ 34 - 9
src/utils/api.js
Vedi File 

@@ -4,15 +4,25 @@ export default {
 
 
     //账号密码登录
 
     loginByPwd: (params) => service.post("/app/login", params),
 
-    getUserInfo: (params) => service.get("/app/user/userInfo",{ params: params }),
 
+
 
+    //用户信息
 
+    getUserInfo: (params) => service.get("/app/user/userInfo", { params: params }),
 
+
 
+    //数据字典
 
+    getDictList: (params) => service.get("/app/all", { params: params }),
 
+
 
     //首页信息
 
-    homedata:(params) => service.get("/app/home/homedata", params),
 
+    homedata: (params) => service.get("/app/home/homedata", params),
 
+
 
     //空调设备控制分页
 
-    airconditioner: (params) => service.get("/app/airconditioner/page",{ params: params }),
 
+    airconditioner: (params) => service.get("/app/airconditioner/page", { params: params }),
 
+
 
     //电表控制分页
 
-    getElec: (params) => service.get("/app/relay/control/page",{ params: params }),
 
+    getElec: (params) => service.get("/app/relay/control/page", { params: params }),
 
+
 
     //一键开闸关闸
 
-    elecControl: (params) => service.post("/app/relay/control/command",params),
 
+    elecControl: (params) => service.post("/app/relay/control/command", params),
 
+
 
     //获取用户信息
 
     getUserInfo: (params) => service.get("/app/user/userInfo", { params: params }),
 
 
@@ -22,7 +32,6 @@ export default {
 
     // 首页信息
 
     homedata: (params) => service.get("/app/home/homedata", params),
 
 
-
 
     //上传图片
 
     uploadFile: (params) => service.post("/app/uploadFile", params, { header: { "Content-Type": "multipart/form-data" } }),
 
 
@@ -36,13 +45,29 @@ export default {
 
     repairInfoDetail: (id) => service.get(`/app/repairorder/${id}`),
 
 
     //工单维修--联系人列表
 
-    repairInfoUser: (params) => service.get('/app/user/list', { params: params }),
 
+    repairInfoUser: (params) => service.get('/app/page', { params: params }),
 
 
     //工单维修--指派
 
-    repairInfoDispatch: (params) => service.put('/app/repairorder', { params: params }),
 
+    repairInfoDispatch: (params) => service.put('/app/repairorder', params),
 
 
     // 设备异常列表
 
-    deviceAlarmInfoQuery: (params) => service.get("/app/home/actualAlertList", params),
 
+    deviceAlarmInfoQuery: (params) => service.get("/app/home/actualAlertList", { params: params }),
 
+
 
+    // 欠费待收--列表
 
+    lackFeeInfoQuery: (params) => service.get("/app/expeditrecord/apppage", { params: params }),
 
+
 
+    // 欠费待收--催费
 
+    lackFeeInfoPay: (params) => service.post("/app/expeditrecord/charge", params),
 
+
 
+    //扣缴记录
 
+    reduceRecordList: (params) => service.get("/app/payrecord/page", { params: params }),
 
+
 
+    //租户账单
 
+    rentBillList: (params) => service.get("/app/billinfo/paypage", { params: params }),
 
 
+    //租户账单明细--列表
 
+    rentBillDetail: (params) => service.post("/app/billinfo/billDetail", params),
 
 
+    //巡检记录
 
+    reviewCheckList: (params) => service.post("/app/circuitrecord", params),
 
 }

+ 20 - 0
src/utils/index.js
Vedi File 

@@ -21,3 +21,23 @@ export function isEmpty(v) {
 
     return false;
 
 }
 
 
+/**
 
+ * 获取字典数据列表
 
+ * @param dictType  字典类型
 
+ */
 
+export function getDictDataList(dictType, subtype) {
 
+    const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
 
+    if (type) {
 
+        if (dictType == 'PeopleType') {
 
+            if (subtype == "touch") {
 
+                return type.dataList.slice(0, 2)
 
+            } else {
 
+                return type.dataList
 
+            }
 
+        } else {
 
+            return type.dataList
 
+        }
 
+    } else {
 
+        return []
 
+    }
 
+}

+ 5 - 5
src/utils/request.js
Vedi File 

@@ -1,3 +1,4 @@
 
+import router from '@/router'
 
 import axios from "axios";
 
 import { Notify } from "vant";
 
 import axiosRetry from "axios-retry";
 
@@ -8,7 +9,7 @@ export const getBaseURI = () => {
 
 
   //    开发环境
 
   if (env === "dev" || env == "development") {
 
-    // return 'http://192.168.1.51:9013/witcarbon-app';
 
+    // return 'http://192.168.1.10:9013/witcarbon-app';
 
     return "http://gpu.ringzle.com:8082/witcarbon-app";
 
   }
 
 
@@ -58,16 +59,15 @@ service.interceptors.request.use(
 
 service.interceptors.response.use((response) => {
 
   const res = response.data;
 
   // 判断token 失效
 
-  if (res.code == 10021) {
 
+  if (res.code == 10021 || res.code == 10004) {
 
+    localStorage.clear()
 
+    window.location.href = "/#/login"
 
     Notify({ type: "danger", message: res.msg });
 
   }
 
   if (res.code == 500) {
 
     Notify({ type: "danger", message: res.msg });
 
   }
 
   if (res.error) {
 
-    if (process.env.NODE_ENV !== "production") {
 
-      console.error(res);
 
-    }
 
     Notify({ type: "danger", message: JSON.stringify(res) });
 
     return Promise.resolve(res);
 
   }

+ 52 - 32
src/views/deviceAlarm.vue
Vedi File 

@@ -26,7 +26,11 @@
 
             fit="contain"
 
           />
 
         </van-col>
 
-        <van-col @click="toPath('/userInfo', 'account')">
 
+        <van-col
 
+          @click="
 
+            $route.push({ path: '/userInfo', query: { type: 'account' } })
 
+          "
 
+        >
 
           <van-image
 
             :src="require('@/assets/user.svg')"
 
             width="16"
 
@@ -70,11 +74,27 @@
 
           @load="onLoad"
 
         >
 
           <div v-for="item in dataList" :key="item.id" class="list_item">
 
-            <span class="header">{{ item.name }}</span>
 
-            <span>空间信息：{{ item.position }}</span>
 
-            <span>设备编号：{{ item.deviceNo }}</span>
 
-            <span style="color: #fa5555">告警原因：{{ item.reason }}</span>
 
-            <span>告警内容：{{ item.content }}</span>
 
+            <van-row class="header">
 
+              <van-col>{{ item.deviceName }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>空间信息：</van-col>
 
+              <van-col>跨境电商大厦-{{ item.positionInfo }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>设备编号：</van-col>
 
+              <van-col>{{ item.deviceNo }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>告警原因：</van-col>
 
+              <van-col style="color: #fa5555">{{
 
+                item.alertConfigName
 
+              }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>告警内容：</van-col>
 
+              <van-col>{{ item.content }}</van-col>
 
+            </van-row>
 
           </div>
 
         </van-list>
 
       </div>
 
@@ -91,6 +111,8 @@ export default {
 
   data() {
 
     return {
 
       name: "电商园四期-B座",
 
+      page: 1,
 
+      limit: 10,
 
       dataList: [],
 
       loading: false,
 
       refreshing: false,
 
@@ -106,6 +128,7 @@ export default {
 
           this.refreshing = false;
 
         }
 
         await this.getDataList();
 
+        this.page++; // 分页数加一
 
       }, 100);
 
     },
 
     onRefresh() {
 
@@ -114,6 +137,7 @@ export default {
 
       // 重新加载数据
 
       // 将 loading 设置为 true，表示处于加载状态
 
       this.loading = true;
 
+      this.page = 1; // 分页数赋值为1
 
       this.onLoad();
 
     },
 
     // 获取列表数据方法
 
@@ -121,20 +145,31 @@ export default {
 
       Api.deviceAlarmInfoQuery({
 
         buildingId: "",
 
         storeyId: "",
 
+        page: this.page,
 
+        limit: this.limit,
 
       }).then((res) => {
 
         if (res.code == 0) {
 
           if (res.data) {
 
-            if (res.data.list.length == 0) {
 
+            if (res.data.length == 0) {
 
               // 判断获取数据条数若等于0
 
               this.dataList = []; // 清空数组
 
               this.finished = true; // 停止加载
 
             }
 
+            res.data.forEach((item) => {
 
+              if (item.visualData) {
 
+                let temp = JSON.parse(item.visualData).pname.toString();
 
+                item.positionInfo = temp
 
+                  .replace("#", "座-")
 
+                  .replace("F", "层-")
 
+                  .replace("_", "");
 
+              }
 
+            });
 
             // 若数据条数不等于0
 
-            this.dataList.push(...res.data.list); // 将数据放入list中
 
+            this.dataList.push(...res.data); // 将数据放入list中
 
             this.loading = false; // 加载状态结束
 
 
             // 如果list长度大于等于总数据条数,数据全部加载完成
 
-            if (this.dataList.length >= res.data.total) {
 
+            if (this.dataList.length >= res.data.length) {
 
               this.finished = true; // 结束加载状态
 
             }
 
           } else {
 
@@ -211,18 +246,9 @@ export default {
 
       &:nth-last-child(1) {
 
         margin-bottom: 0;
 
       }
 
-      .header {
 
-        height: 22px;
 
-        font-size: 16px;
 
-        font-weight: 600;
 
-        color: #313836;
 
-        line-height: 22px;
 
-        margin-bottom: 8px;
 
-      }
 
-      span {
 
+      .van-col {
 
         height: 18px;
 
         font-size: 14px;
 
-        font-weight: 400;
 
         color: #999999;
 
         line-height: 18px;
 
         margin-bottom: 4px;
 
@@ -230,19 +256,13 @@ export default {
 
           margin-bottom: 0;
 
         }
 
       }
 
-      .reduce_type {
 
-        position: absolute;
 
-        top: 0;
 
-        right: 0;
 
-        width: 48px;
 
-        height: 24px;
 
-        border-radius: 0px 4px 0px 10px;
 
-        span {
 
-          height: 16px;
 
-          font-size: 12px;
 
-          font-weight: 400;
 
-          color: #ffffff;
 
-          line-height: 16px;
 
+      .header {
 
+        .van-col {
 
+          height: 22px;
 
+          font-size: 16px;
 
+          color: #0c1935;
 
+          line-height: 22px;
 
+          margin-bottom: 8px;
 
         }
 
       }
 
     }

+ 137 - 84
src/views/home.vue
Vedi File 

@@ -6,10 +6,7 @@
 
     style="background-color: #5c8fff"
 
   />
 
   <div class="page_info">
 
-    <div
 
-      class="info_bg"
 
-      :style="{ 'margin-bottom': role == 'repair' ? 0 : '42px' }"
 
-    >
 
+    <div class="info_bg">
 
       <van-row align="center" class="position_pannel">
 
         <van-col>
 
           <van-image
 
@@ -26,7 +23,11 @@
 
             fit="contain"
 
           />
 
         </van-col>
 
-        <van-col @click="toPath('/userInfo', 'account')">
 
+        <van-col
 
+          @click="
 
+            $route.push({ path: '/userInfo', query: { type: 'account' } })
 
+          "
 
+        >
 
           <van-image
 
             :src="require('@/assets/user.svg')"
 
             width="16"
 
@@ -37,14 +38,14 @@
 
       </van-row>
 
     </div>
 
     <!-- 维修工没有此块功能 -->
 
-    <template v-if="role && role != 'repair'">
 
+    <template v-if="role && role != 'Maintenance'">
 
       <div class="info_function">
 
         <div
 
           class="function_item"
 
           v-for="(item, index) in functionList"
 
           :key="index"
 
           :style="{ display: !item.role.includes(role) ? 'none' : '' }"
 
-          @click="toPath(item.path)"
 
+          @click="toPath(item.path, item.activeTab)"
 
         >
 
           <template v-if="item.role.includes(role)">
 
             <van-image :src="item.src" width="36" height="36" fit="contain" />
 
@@ -53,20 +54,12 @@
 
         </div>
 
       </div>
 
     </template>
 
-    <div
 
-      class="info_list"
 
-      :style="{
 
-        'max-height':
 
-          role == 'repair'
 
-            ? 'calc(100% - 102px - 20px)'
 
-            : 'calc(100% - 102px - 42px - 20px);',
 
-      }"
 
-    >
 
+    <div class="info_list">
 
       <!-- 实时巡检begin -->
 
-      <template v-if="role == 'check'">
 
+      <template v-if="role == 'Inspection'">
 
         <van-row align="center" justify="space-between" class="sub_title">
 
           <van-col class="title">实时巡检</van-col>
 
-          <van-col class="function_btn" @click="toPath('/')">
 
+          <van-col class="function_btn" @click="toPath('/reviewCheck')">
 
             <van-col>立即巡检</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -96,7 +89,7 @@
 
       <!-- 实时巡检end -->
 
 
       <!-- 工单待办begin -->
 
-      <template v-if="role && role != 'check'">
 
+      <template v-if="role && role != 'Inspection'">
 
         <van-row align="center" justify="space-between" class="sub_title">
 
           <van-col class="title">{{
 
             role == "admin" ? "工单待办" : "实时报修"
 
@@ -132,7 +125,7 @@
 
       <!-- 工单待办end -->
 
 
       <!-- 设备异常begin -->
 
-      <template v-if="role && role != 'rent'">
 
+      <template v-if="role && role != 'Tenant'">
 
         <van-row align="center" justify="space-between" class="sub_title">
 
           <van-col class="title">设备异常</van-col>
 
           <van-col class="function_btn" @click="toPath('/deviceAlarm')">
 
@@ -146,26 +139,14 @@
 
           </van-col>
 
         </van-row>
 
         <van-row align="center" justify="space-around" class="list_item">
 
-          <van-row
 
-            align="center"
 
-            justify="center"
 
-            style="flex-direction: column"
 
-          >
 
-            <van-col>{{ abnormalNum.label }}</van-col>
 
-            <v-count-up
 
-              :end-val="Number(abnormalNum['count'])"
 
-              class="count_up"
 
-              style="color: #fa5555"
 
-            />
 
-          </van-row>
 
           <van-row
 
             align="center"
 
             justify="space-between"
 
             style="flex-direction: column"
 
-            v-for="(item, index) in deviceErrorList"
 
+            v-for="(item, index) in deviceAlarmList"
 
             :key="item + '_' + index"
 
           >
 
-            <van-col>{{ item.label }}</van-col>
 
+            <van-col>{{ `${deviceAlarm_filter(item.label)}` }}</van-col>
 
             <v-count-up :end-val="Number(item['count'])" class="count_up" />
 
           </van-row>
 
         </van-row>
 
@@ -176,7 +157,7 @@
 
       <template v-if="role == 'admin'">
 
         <van-row align="center" justify="space-between" class="sub_title">
 
           <van-col class="title">欠费待收</van-col>
 
-          <van-col class="function_btn">
 
+          <van-col class="function_btn" @click="toPath('/lackFee')">
 
             <van-col>立即催收</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -192,26 +173,41 @@
 
             <van-col span="8">欠费租户数</van-col>
 
             <van-col span="8">累计欠费(元)</van-col>
 
           </van-row>
 
-          <van-row
 
-            v-for="(item, index) in billPaymentList"
 
-            :key="index"
 
-            class="table_body"
 
-          >
 
-            <van-col span="8" style="color: #999999; font-size: 12px">{{
 
-             `${payType_filter(item.payType)}` 
-            }}</van-col>
 
-            <van-col span="8">{{ item.arrearageNum }}</van-col>
 
-            <van-col span="8">{{ item.arrearageAmount }}</van-col>
 
-          </van-row>
 
+          <div class="table_body" :class="{ loading_info: loading }">
 
+            <template v-if="!loading">
 
+              <template v-if="billPaymentList.length > 0">
 
+                <van-row v-for="(item, index) in billPaymentList" :key="index">
 
+                  <van-col span="8" style="color: #999999; font-size: 12px">{{
 
+                    `${payType_filter(item.payType)}`
 
+                  }}</van-col>
 
+                  <van-col span="8">{{
 
+                    (parseInt(item.arrearageNum * 100) / 100).toFixed(2)
 
+                  }}</van-col>
 
+                  <van-col span="8">{{
 
+                    (parseInt(item.arrearageAmount * 100) / 100).toFixed(2)
 
+                  }}</van-col>
 
+                </van-row>
 
+              </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>
 
       <!-- 欠费待收end -->
 
 
       <!-- 账单待缴begin -->
 
-      <template v-if="role == 'rent'">
 
+      <template v-if="role == 'Tenant'">
 
         <van-row align="center" justify="space-between" class="sub_title">
 
           <van-col class="title">账单待缴</van-col>
 
-          <van-col class="function_btn">
 
+          <van-col
 
+            class="function_btn"
 
+            @click="toPath('/rentBillDetail', 'rentBill')"
 
+          >
 
             <van-col>立即缴费</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -227,17 +223,29 @@
 
             <van-col span="8">本期待缴金额(元)</van-col>
 
             <van-col span="8">累计待缴金额(元)</van-col>
 
           </van-row>
 
-          <van-row
 
-            v-for="(item, index) in billPaymentList"
 
-            :key="index"
 
-            class="table_body"
 
-          >
 
-            <van-col span="8" style="color: #999999; font-size: 12px">{{
 
-              item.payType
 
-            }}</van-col>
 
-            <van-col span="8">{{ item.arrearageNum }}</van-col>
 
-            <van-col span="8">{{ item.arrearageAmount }}</van-col>
 
-          </van-row>
 
+          <div class="table_body" :class="{ loading_info: loading }">
 
+            <template v-if="!loading">
 
+              <template v-if="billPaymentList.length > 0">
 
+                <van-row v-for="(item, index) in billPaymentList" :key="index">
 
+                  <van-col span="8" style="color: #999999; font-size: 12px">{{
 
+                    `${payType_filter(item.payType)}`
 
+                  }}</van-col>
 
+                  <van-col span="8">{{
 
+                    (parseInt(item.currentAmount * 100) / 100).toFixed(2)
 
+                  }}</van-col>
 
+                  <van-col span="8">{{
 
+                    (parseInt(item.cumulativeAmount * 100) / 100).toFixed(2)
 
+                  }}</van-col>
 
+                </van-row>
 
+              </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>
 
       <!-- 账单待缴end -->
 
@@ -293,6 +301,7 @@ export default {
 
   data() {
 
     return {
 
       role: "",
 
+      tenantInfo: {}, //角色为Tenant时有值
 
       name: "电商园四期-B座",
 
       activeTabBar: "home",
 
       functionList: [
 
@@ -300,19 +309,20 @@ export default {
 
           path: "/repairOnline",
 
           src: require("@/assets/repair-online.svg"),
 
           label: "线上报修",
 
-          role: ["admin", "check", "rent"],
 
+          role: ["admin", "Inspection", "Tenant"],
 
         },
 
         {
 
-          path: "/checkRecord",
 
+          path: "/reviewCheck",
 
           src: require("@/assets/check-review.svg"),
 
           label: "巡检记录",
 
-          role: ["admin", "check"],
 
+          role: ["admin", "Inspection"],
 
         },
 
         {
 
-          path: "/reduceRecord",
 
+          path: "/rentBillDetail",
 
           src: require("@/assets/reduce-record.svg"),
 
           label: "扣缴记录",
 
-          role: ["admin", "rent"],
 
+          role: ["admin", "Tenant"],
 
+          activeTab: "reduceRecord",
 
         },
 
       ],
 
       checkList: [
 
@@ -331,8 +341,6 @@ export default {
 
           },
 
         },
 
       ],
 
-      billPaymentList: [],
 
-      abnormalNum: { label: "异常总数", count: "" },
 
       workList: [
 
         {
 
           label: "待指派",
 
@@ -342,21 +350,32 @@ export default {
 
         {
 
           label: "待维修",
 
           count: 2,
 
-          role: ["admin", "repair", "rent"],
 
+          role: ["admin", "Maintenance", "Tenant"],
 
         },
 
         {
 
           label: "已维修",
 
           count: 0,
 
-          role: ["admin", "repair", "rent"],
 
+          role: ["admin", "Maintenance", "Tenant"],
 
         },
 
       ],
 
-      deviceErrorList: [],
 
-      loading: false,
 
+      deviceAlarmList: [
 
+        { label: "abnormalNum", count: 0 },
 
+        { label: "AirConditioner", count: 0 },
 
+        { label: "Ammeter", count: 0 },
 
+        { label: "WaterMeter", count: 0 },
 
+      ],
 
+      billPaymentList: [],
 
+      loading: true,
 
     };
 
   },
 
   created() {
 
     this.getHomeData();
 
     this.role = localStorage.getItem("role");
 
+    if (this.role == "Tenant") {
 
+      this.tenantInfo = JSON.parse(localStorage.getItem("tenantInfo"));
 
+    } else {
 
+      this.tenantInfo = {};
 
+    }
 
   },
 
   methods: {
 
     payType_filter(val) {
 
@@ -369,10 +388,29 @@ export default {
 
       if (val == "Elec") {
 
         return "电费";
 
       }
 
-      if (val == 3) {
 
+      if (val == "PropertyFee") {
 
         return "物业相关";
 
       }
 
     },
 
+
 
+    deviceAlarm_filter(val) {
 
+      if (isEmpty(val)) {
 
+        return "";
 
+      }
 
+      if (val == "abnormalNum") {
 
+        return "异常总数";
 
+      }
 
+      if (val == "AirConditioner") {
 
+        return "空调异常";
 
+      }
 
+      if (val == "WaterMeter") {
 
+        return "水表异常";
 
+      }
 
+      if (val == "Ammeter") {
 
+        return "电表异常";
 
+      }
 
+    },
 
+
 
     getHomeData() {
 
       api.homedata().then((res) => {
 
         if (res.code == 0) {
 
@@ -384,23 +422,33 @@ export default {
 
           let mapsArr = [];
 
           for (let k in res.data.equip.maps) {
 
             let json = {};
 
-            json.label = k;
 
-            json.count = res.data.equip.maps[k];
 
-            mapsArr.push(json);
 
+            if (k != "Relay") {
 
+              json.label = k;
 
+              json.count = res.data.equip.maps[k];
 
+              mapsArr.push(json);
 
+            }
 
           }
 
-          this.deviceErrorList = mapsArr;
 
           //赋值异常总数
 
-          this.abnormalNum.count = res.data.equip.abnormalNum;
 
+          mapsArr.unshift({
 
+            label: "abnormalNum",
 
+            count: res.data.equip.abnormalNum,
 
+          });
 
+          this.deviceAlarmList.forEach((item) => {
 
+            item.count = mapsArr.find((ele) => ele.label == item.label).count;
 
+          });
 
           //欠费待收数据
 
           this.billPaymentList = res.data.billPaymentList;
 
         }
 
+        this.loading = false;
 
       });
 
     },
 
     toPath(path, val) {
 
       this.$router.push({
 
         path: path,
 
         query: {
 
-          source: val,
 
+          tenantId: this.tenantInfo.tenantId,
 
+          tenantName: this.tenantInfo.tenantName,
 
+          activeTab: val,
 
         },
 
       });
 
     },
 
@@ -410,9 +458,6 @@ export default {
 
 <style lang="scss" scoped>
 
 .page_info {
 
   position: relative;
 
-  height: calc( 100vh - 40px);
 
-     overflow: auto;
 
-    // height:100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 50px -46px
 
   .info_bg {
 
     width: 100%;
 
     height: 102px;
 
@@ -468,9 +513,7 @@ export default {
 
     }
 
   }
 
   .info_list {
 
-    max-height: calc(100% - 102px - 42px - 20px);
 
     padding: 0 16px;
 
-    overflow-y: auto;
 
     .sub_title {
 
       margin: 16px 0 6px 0;
 
       .title {
 
@@ -497,6 +540,7 @@ export default {
 
       box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.08);
 
       border-radius: 4px;
 
       padding: 16px 0;
 
+      height: 32px;
 
       .van-col {
 
         height: 16px;
 
         font-size: 12px;
 
@@ -514,6 +558,7 @@ export default {
 
     }
 
     .list_table {
 
       padding: 8px 16px 4px 16px;
 
+      min-height: 156px;
 
       .table_header {
 
         padding: 8px 0;
 
         border-bottom: 1px solid #eeeeee;
 
@@ -526,8 +571,11 @@ export default {
 
         }
 
       }
 
       .table_body {
 
-        padding: 12px 0;
 
-        border-bottom: 1px solid #eeeeee;
 
+        height: calc(100% - 33px);
 
+        .van-row {
 
+          padding: 12px 0;
 
+          border-bottom: 1px solid #eeeeee;
 
+        }
 
         .van-col {
 
           height: 16px;
 
           font-size: 16px;
 
@@ -535,6 +583,11 @@ export default {
 
           line-height: 16px;
 
         }
 
       }
 
+      .loading_info {
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+      }
 
     }
 
   }
 
 }

+ 301 - 240
src/views/lackFee.vue
Vedi File 

@@ -1,112 +1,136 @@
 
 <template>
 
-  <van-nav-bar
 
-    title="欠费待收"
 
-    left-arrow
 
-    @click-left="onClickLeft"
 
-    safe-area-inset-top
 
-  />
 
-  <div class="page_check">
 
-    <div class="search_pannel">
 
-      <div class="pannel_left">
 
-        <van-image
 
-          :src="require('@/assets/position.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
-        />
 
-        <span>{{ name }}</span>
 
-        <van-image
 
-          :src="require('@/assets/arrow-right.svg')"
 
-          width="24"
 
-          height="24"
 
-          fit="contain"
 
-        />
 
+  <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>
 
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
+    <div class="page_info">
 
+      <van-row align="center" class="position_pannel">
 
+        <van-col>
 
+          <van-image
 
+            :src="require('@/assets/position.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+          <van-col>{{ name }}</van-col>
 
+          <van-image
 
+            :src="require('@/assets/arrow-right.svg')"
 
+            width="24"
 
+            height="24"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+        <van-col
 
+          @click="
 
+            $route.push({ path: '/userInfo', query: { type: 'account' } })
 
+          "
 
+        >
 
+          <van-image
 
+            :src="require('@/assets/user.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+      </van-row>
 
+      <div class="drop_down">
 
+        <van-dropdown-menu active-color="#1989fa">
 
+          <van-dropdown-item
 
+            v-model="cycle"
 
+            @change="handelChange('lackRange', lackRange)"
 
+            :title="cycleTitle"
 
+            :options="cycleList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="billType"
 
+            @change="handelChange('billType', billType)"
 
+            :title="billTypeTitle"
 
+            :options="billTypeList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="arrearDay"
 
+            @change="handelChange('arrearDay', arrearDay)"
 
+            :title="arrearDayTitle"
 
+            :options="arrearDayList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="isExpedit"
 
+            @change="handelChange('isExpedit', isExpedit)"
 
+            :title="isExpeditTitle"
 
+            :options="isExpeditList"
 
+          />
 
+        </van-dropdown-menu>
 
       </div>
 
-      <div class="pannel_right" @click="toPath">
 
-        <van-image
 
-          :src="require('@/assets/search.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
+      <van-row align="center" class="list_total">
 
+        <van-col>共有</van-col>
 
+        <v-count-up
 
+          :end-val="dataList.length"
 
+          class="count_up"
 
+          options="{ separator: ',' }"
 
         />
 
-      </div>
 
-    </div>
 
-    <div class="drop_down">
 
-      <van-dropdown-menu active-color="#1989fa">
 
-        <van-dropdown-item
 
-          v-model="lackType"
 
-          @change="handelChange('lackType', lackType)"
 
-          :title="lackTypeTitle"
 
-          :options="lackTypeList"
 
-        />
 
-        <van-dropdown-item
 
-          v-model="lackStatus"
 
-          @change="handelChange('lackStatus', lackStatus)"
 
-          :title="lackStatusTitle"
 
-          :options="lackStatusList"
 
-        />
 
-      </van-dropdown-menu>
 
-    </div>
 
-    <div class="list_total">
 
-      <span>共有</span>
 
-      <v-count-up
 
-        :end-val="total"
 
-        class="count_up"
 
-        options="{ separator: ',' }"
 
-      />
 
-      <span>条记录</span>
 
-    </div>
 
-    <div class="check_info">
 
+        <van-col>条记录</van-col>
 
+      </van-row>
 
       <div class="info_list">
 
-        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
-          <van-list
 
-            v-model:loading="loading"
 
-            :finished="finished"
 
-            :error="error"
 
-            error-text="请求失败，点击重新加载"
 
-            finished-text="没有更多了"
 
-            @load="onLoad"
 
-          >
 
-            <div v-for="item in list" :key="item.id" class="list_item">
 
-              <div
 
-                class="reduce_type"
 
-                :style="{
 
-                  'background-color': `${
 
-                    lackStatus_filter(item.lackStatus)['color']
 
-                  }`,
 
-                }"
 
-              >
 
-                <span>{{
 
-                  `${lackStatus_filter(item.lackStatus)["label"]}`
 
-                }}</span>
 
-              </div>
 
-              <span class="header">{{ item.name }}</span>
 
-              <span style="color: #fa5555"
 
-                >欠费金额：￥{{ item.lackMoney }}</span
 
+        <van-list
 
+          v-model:loading="loading"
 
+          :finished="finished"
 
+          :error="error"
 
+          error-text="请求失败，点击重新加载"
 
+          finished-text="没有更多了"
 
+          @load="onLoad"
 
+        >
 
+          <div v-for="item in dataList" :key="item.id" class="list_item">
 
+            <div
 
+              class="reduce_type"
 
+              :style="{
 
+                'background-color': `${
 
+                  isExpedit_filter(item.isExpedit)['color']
 
+                }`,
 
+              }"
 
+            >
 
+              <span>{{ `${isExpedit_filter(item.isExpedit)["label"]}` }}</span>
 
+            </div>
 
+            <van-row class="header">
 
+              <van-col>{{ item.tenantName }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>欠费金额：</van-col>
 
+              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
 
+            </van-row>
 
+            <van-col>计费周期：{{ item.costCycle }}</van-col>
 
+            <van-row>
 
+              <van-col>欠费天数：</van-col>
 
+              <van-col style="color: #fa5555">{{ item.arrearDay }}</van-col>
 
+            </van-row>
 
+            <van-col
 
+              >欠费类型：{{ `${billType_filter(item.billType)}` }}</van-col
 
+            >
 
+            <van-col>联系电话：{{ item.phone }}</van-col>
 
+            <van-col>最近一次催费时间：{{ item.updateDate }}</van-col>
 
+            <div class="list_btn">
 
+              <van-button
 
+                plain
 
+                type="primary"
 
+                size="small"
 
+                @click="handleClick([parseInt(item.id)])"
 
+                >催费</van-button
 
               >
 
-              <span>计费周期：{{ item.feeRange }}</span>
 
-              <span style="color: #fa5555">欠费天数：{{ item.lackDays }}</span>
 
-              <span>欠费类型：{{ `${lackType_filter(item.lackType)}` }}</span>
 
-              <span>联系电话：{{ item.tel }}</span>
 
-              <span>最近一次催费时间：{{ item.lastHastenTime }}</span>
 
-              <div class="list_btn">
 
-                <van-button plain type="primary" size="small">{{
 
-                  `${lackStatus_filter(item.lackStatus)["btn_1"]}`
 
-                }}</van-button>
 
-                <van-button plain type="primary" size="small">{{
 
-                  `${lackStatus_filter(item.lackStatus)["btn_2"]}`
 
-                }}</van-button>
 
-                <van-button plain type="primary" size="small">催费</van-button>
 
-              </div>
 
             </div>
 
-          </van-list>
 
-        </van-pull-refresh>
 
+          </div>
 
+        </van-list>
 
       </div>
 
     </div>
 
-  </div>
 
+  </van-pull-refresh>
 
 </template>
 
 <script>
 
-import { isEmpty } from "@/utils/index.js";
 
+import Api from "../utils/api";
 
+import { isEmpty, getDictDataList } from "@/utils/index.js";
 
 import VCountUp from "./CountUp";
 
 export default {
 
   components: {
 
@@ -114,147 +138,191 @@ export default {
 
   },
 
   data() {
 
     return {
 
-      loading: false,
 
       name: "电商园四期-B座",
 
-      lackType: "",
 
-      lackStatus: "",
 
-      lackTypeTitle: "欠费类型",
 
-      lackStatusTitle: "保水保电",
 
-      lackTypeList: [
 
-        { text: "电费", value: 1 },
 
-        { text: "水费", value: 2 },
 
-      ],
 
-      lackStatusList: [
 
+      isExpedit: "",
 
+      billType: "",
 
+      arrearDay: "",
 
+      isExpeditTitle: "是否催费",
 
+      cycleTitle: "计费周期",
 
+      billTypeTitle: "欠费类型",
 
+      arrearDayTitle: "欠费天数",
 
+      billTypeList: [],
 
+      arrearDayList: [],
 
+      cycleList: [
 
         { text: "保水", value: 1 },
 
         { text: "保电", value: 2 },
 
       ],
 
-      total: 3,
 
-      list: [
 
-        {
 
-          name: "合肥市传秀科技有限公司",
 
-          lackStatus: 1,
 
-          lackMoney: 3454,
 
-          feeRange: "2022-09",
 
-          lackDays: 42,
 
-          lackType: 1,
 
-          tel: 15829347573,
 
-          lastHastenTime: "2022-11-16 10:23:45",
 
-        },
 
+      isExpeditList: [
 
+        { text: "未催费", value: 0 },
 
+        { text: "已催费", value: 1 },
 
       ],
 
+      dataList: [],
 
       loading: false,
 
       refreshing: false,
 
       finished: false,
 
     };
 
   },
 
-
 
+  mounted() {
 
+    this.getArrearDayList();
 
+    this.getBillTypeList();
 
+  },
 
   methods: {
 
-    lackStatus_filter(val) {
 
+    isExpedit_filter(val) {
 
       if (isEmpty(val)) {
 
         return {};
 
       }
 
-      if (val == 1) {
 
-        return {
 
-          label: "未保电",
 
-          color: "#FF9C27",
 
-          btn_1: "保电",
 
-          btn_2: "断闸",
 
-        };
 
+      if (val == 0) {
 
+        return { label: "未催费", color: "#FF9C27" };
 
       }
 
-      if (val == 2) {
 
-        return {
 
-          label: "已保电",
 
-          color: "#30D3A2",
 
-          btn_1: "取消保电",
 
-          btn_2: "开闸",
 
-        };
 
+      if (val == 1) {
 
+        return { label: "已催费", color: "#30D3A2" };
 
       }
 
     },
 
-    lackType_filter(val) {
 
+    billType_filter(val) {
 
       if (isEmpty(val)) {
 
         return "";
 
       }
 
-      if (val == 1) {
 
+      if (val == "Water") {
 
+        return "水费";
 
+      }
 
+      if (val == "Elec") {
 
         return "电费";
 
       }
 
-      if (val == 2) {
 
-        return "水费";
 
+      if (val == "PropertyFee") {
 
+        return "物业相关";
 
       }
 
     },
 
+    getArrearDayList() {
 
+      this.arrearDayList = [];
 
+      let tempArr = [];
 
+      tempArr = getDictDataList("ArrearageDay");
 
+      tempArr.forEach((item) => {
 
+        this.arrearDayList.push({
 
+          text: item.dictLabel,
 
+          value: item.dictValue,
 
+        });
 
+      });
 
+    },
 
+    getBillTypeList() {
 
+      this.billTypeList = [];
 
+      let tempArr = [];
 
+      tempArr = getDictDataList("PayType");
 
+      tempArr.forEach((item) => {
 
+        this.billTypeList.push({
 
+          text: item.dictLabel,
 
+          value: item.dictValue,
 
+        });
 
+      });
 
+    },
 
     onLoad() {
 
-      setTimeout(() => {
 
+      setTimeout(async () => {
 
         if (this.refreshing) {
 
-          this.list = [];
 
+          this.dataList = [];
 
           this.refreshing = false;
 
         }
 
-
 
-        for (let i = 0; i < 10; i++) {
 
-          this.list.push(this.list.length + 1);
 
-        }
 
-        this.loading = false;
 
-
 
-        if (this.list.length >= 40) {
 
-          this.finished = true;
 
-        }
 
-      }, 1000);
 
+        await this.getDataList();
 
+      }, 100);
 
     },
 
-
 
     onRefresh() {
 
       // 清空列表数据
 
       this.finished = false;
 
-
 
       // 重新加载数据
 
       // 将 loading 设置为 true，表示处于加载状态
 
       this.loading = true;
 
       this.onLoad();
 
     },
 
+    // 获取列表数据方法
 
+    getDataList() {
 
+      Api.lackFeeInfoQuery({
 
+        arrearDay: "",
 
+        billType: "",
 
+        cycle: "",
 
+        isExpedit: "",
 
+      }).then((res) => {
 
+        if (res.code == 0) {
 
+          if (res.data) {
 
+            if (res.data.list.length == 0) {
 
+              // 判断获取数据条数若等于0
 
+              this.dataList = []; // 清空数组
 
+              this.finished = true; // 停止加载
 
+            }
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data.list); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+
 
+            // 如果list长度大于等于总数据条数,数据全部加载完成
 
+            if (this.dataList.length >= res.data.total) {
 
+              this.finished = true; // 结束加载状态
 
+            }
 
+          } else {
 
+            // 判断获取数据条数若等于0
 
+            this.dataList = []; // 清空数组
 
+            this.finished = true; // 停止加载
 
+          }
 
+        } else {
 
+          this.loading = false; // 加载状态结束
 
+          this.finished = true; // 停止加载
 
+        }
 
+      });
 
+    },
 
+    handleClick(ids) {
 
+      Api.lackFeeInfoPay(ids).then((res) => {
 
+        if (res.code == 0) {
 
+          this.$toast.success("催费成功");
 
+          this.onRefresh();
 
+        } else {
 
+          this.$toast.fail("催费失败");
 
+        }
 
+      });
 
+    },
 
     // change事件可以拿到的是value
 
     handelChange(type, val) {
 
-      console.log(type, val);
 
-      if (type == "lackType") {
 
+      if (type == "cycle") {
 
         // 这里打印出来的值就是我们想要的text
 
-        this.lackTypeTitle = this.lackTypeList.filter(
 
+        this.cycleTitle = this.cycleList.filter(
 
           (item) => item.value === val
 
         )[0].text;
 
       }
 
-      if (type == "lackStatus") {
 
+      if (type == "billType") {
 
         // 这里打印出来的值就是我们想要的text
 
-        this.lackStatusTitle = this.lackStatusList.filter(
 
+        this.billTypeTitle = this.billTypeList.filter(
 
           (item) => item.value === val
 
         )[0].text;
 
       }
 
+      if (type == "arrearDay") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.arrearDayTitle = this.arrearDayList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      this.onRefresh();
 
+    },
 
+    backPath() {
 
+      this.$router.back();
 
     },
 
-    onClickLeft() {},
 
   },
 
 };
 
 </script>
 
 <style lang="scss" scoped>
 
-.page_check {
 
+.page_info {
 
   height: 100%;
 
-  .search_pannel {
 
+  .position_pannel {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
     padding: 10px 16px;
 
     background: #5c8fff;
 
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
 
-    display: flex;
 
-    align-items: center;
 
-    .pannel_left {
 
+    .van-col {
 
+      height: 24px;
 
+      font-size: 16px;
 
+      color: #ffffff;
 
+      line-height: 24px;
 
+      text-indent: 4px;
 
+      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
       display: flex;
 
       align-items: center;
 
-      span {
 
-        height: 24px;
 
-        font-size: 16px;
 
-        font-weight: 400;
 
-        color: #ffffff;
 
-        line-height: 24px;
 
-        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
-        text-indent: 4px;
 
-      }
 
-    }
 
-    .pannel_left,
 
-    .pannel_right {
 
-      flex: 1;
 
-    }
 
-    .pannel_right {
 
-      text-align: right;
 
+      letter-spacing: 2px;
 
     }
 
   }
 
   .drop_down {
 
@@ -268,7 +336,7 @@ export default {
 
     margin: 8px 0;
 
     display: flex;
 
     text-align: left;
 
-    span {
 
+    .van-col {
 
       height: 16px;
 
       font-size: 12px;
 
       font-weight: 400;
 
@@ -282,72 +350,65 @@ export default {
 
       margin: 0 2px;
 
     }
 
   }
 
-  .check_info {
 
+
 
+  .info_list {
 
     padding: 0 16px;
 
-    height: calc(
 
-      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
 
-    );
 
-    .info_list {
 
-      height: 100%;
 
-      overflow-y: auto;
 
-      .list_item {
 
-        background: #ffffff;
 
-        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
-        border-radius: 4px;
 
-        margin-bottom: 12px;
 
-        padding: 12px 16px;
 
-        display: flex;
 
-        flex-direction: column;
 
-        align-items: flex-start;
 
-        position: relative;
 
+    .list_item {
 
+      background: #ffffff;
 
+      box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
+      border-radius: 4px;
 
+      margin-bottom: 12px;
 
+      padding: 12px 16px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: flex-start;
 
+      position: relative;
 
+      &:nth-last-child(1) {
 
+        margin-bottom: 0;
 
+      }
 
+      .reduce_type {
 
+        position: absolute;
 
+        top: 0;
 
+        right: 0;
 
+        height: 24px;
 
+        padding: 0 12px;
 
+        border-radius: 0px 4px 0px 10px;
 
+        span {
 
+          height: 16px;
 
+          font-size: 12px;
 
+          font-weight: 400;
 
+          color: #ffffff;
 
+          line-height: 16px;
 
+        }
 
+      }
 
+
 
+      .van-col {
 
+        height: 18px;
 
+        font-size: 14px;
 
+        color: #999999;
 
+        line-height: 18px;
 
+        margin-bottom: 4px;
 
         &:nth-last-child(1) {
 
           margin-bottom: 0;
 
         }
 
-        .header {
 
+      }
 
+      .header {
 
+        .van-col {
 
           height: 22px;
 
           font-size: 16px;
 
-          font-weight: 600;
 
-          color: #313836;
 
+          color: #0c1935;
 
           line-height: 22px;
 
           margin-bottom: 8px;
 
         }
 
-        span {
 
-          height: 18px;
 
-          font-size: 14px;
 
-          font-weight: 400;
 
-          color: #999999;
 
-          line-height: 18px;
 
-          margin-bottom: 4px;
 
-          &:nth-last-child(1) {
 
-            margin-bottom: 0;
 
-          }
 
-        }
 
-        .reduce_type {
 
-          position: absolute;
 
-          top: 0;
 
-          right: 0;
 
-          width: 48px;
 
-          height: 24px;
 
-          border-radius: 0px 4px 0px 10px;
 
-          span {
 
-            height: 16px;
 
-            font-size: 12px;
 
-            font-weight: 400;
 
-            color: #ffffff;
 
-            line-height: 16px;
 
-          }
 
-        }
 
-        .list_btn {
 
-          width: 100%;
 
-          text-align: right;
 
-          margin-top: 8px;
 
-          padding-top: 10px;
 
-          border-top: 1px solid #d8d8d8;
 
-          .van-button {
 
-            &:nth-child(2) {
 
-              margin: 0 12px;
 
-            }
 
-          }
 
+      }
 
+      .list_btn {
 
+        width: 100%;
 
+        text-align: right;
 
+        margin-top: 8px;
 
+        padding-top: 10px;
 
+        border-top: 1px solid #d8d8d8;
 
+        .van-button {
 
+          border-width: 1px;
 
         }
 
       }
 
     }

+ 1 - 1
src/views/login.vue
Vedi File 

@@ -86,7 +86,7 @@ export default {
 
   },
 
   methods: {
 
     onSubmit() {
 
-       window.location.href = "/?username=" + this.tel + "&&pwd=" + this.password;
 
+       window.location.href = "/?username=" + this.tel + "&&password=" + this.password;
 
     },
 
   },
 
 };

+ 231 - 192
src/views/reduceRecord.vue
Vedi File 

@@ -1,99 +1,122 @@
 
 <template>
 
-  <van-nav-bar
 
-    title="扣缴记录"
 
-    left-arrow
 
-    @click-left="onClickLeft"
 
-    safe-area-inset-top
 
-  />
 
-  <div class="page_check">
 
-    <div class="search_pannel">
 
-      <div class="pannel_left">
 
-        <van-image
 
-          :src="require('@/assets/position.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
-        />
 
-        <span>{{ name }}</span>
 
-        <van-image
 
-          :src="require('@/assets/arrow-right.svg')"
 
-          width="24"
 
-          height="24"
 
-          fit="contain"
 
-        />
 
-      </div>
 
-      <div class="pannel_right" @click="toPath">
 
-        <van-image
 
-          :src="require('@/assets/search.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
-        />
 
+  <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>
 
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
+    <div class="page_info">
 
+      <van-row align="center" class="position_pannel">
 
+        <van-col>
 
+          <van-image
 
+            :src="require('@/assets/position.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+          <van-col>{{ name }}</van-col>
 
+          <van-image
 
+            :src="require('@/assets/arrow-right.svg')"
 
+            width="24"
 
+            height="24"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+        <van-col
 
+          @click="
 
+            $route.push({ path: '/userInfo', query: { type: 'account' } })
 
+          "
 
+        >
 
+          <van-image
 
+            :src="require('@/assets/user.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+      </van-row>
 
+      <div class="drop_down">
 
+        <van-dropdown-menu active-color="#1989fa">
 
+          <van-dropdown-item
 
+            v-model="feeDate"
 
+            @change="handelChange('feeDate', feeDate)"
 
+            :title="feeDateTitle"
 
+            :options="feeDateList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="dataForm.type"
 
+            @change="handelChange('type', type)"
 
+            :title="typeTitle"
 
+            :options="typeList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="operator"
 
+            @change="handelChange('operator', operator)"
 
+            :title="operatorTitle"
 
+            :options="operatorList"
 
+          />
 
+        </van-dropdown-menu>
 
       </div>
 
-    </div>
 
-    <div class="drop_down">
 
-      <van-dropdown-menu active-color="#1989fa">
 
-        <van-dropdown-item
 
-          v-model="checkType"
 
-          @change="handelChange('checkType', checkType)"
 
-          :title="checkTypeTitle"
 
-          :options="checkTypeList"
 
+      <van-row align="center" class="list_total">
 
+        <van-col>共有</van-col>
 
+        <v-count-up
 
+          :end-val="dataList.length"
 
+          class="count_up"
 
+          options="{ separator: ',' }"
 
         />
 
-        <van-dropdown-item
 
-          v-model="checkPerson"
 
-          @change="handelChange('checkPerson', checkPerson)"
 
-          :title="checkPersonTitle"
 
-          :options="checkPersonList"
 
-        />
 
-      </van-dropdown-menu>
 
-    </div>
 
-    <div class="list_total">
 
-      <span>共有</span>
 
-      <v-count-up
 
-        :end-val="total"
 
-        class="count_up"
 
-        options="{ separator: ',' }"
 
-      />
 
-      <span>条记录</span>
 
-    </div>
 
-    <div class="check_info">
 
+        <van-col>条记录</van-col>
 
+      </van-row>
 
       <div class="info_list">
 
-        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
-          <van-list
 
-            v-model:loading="loading"
 
-            :finished="finished"
 
-            :error="error"
 
-            error-text="请求失败，点击重新加载"
 
-            finished-text="没有更多了"
 
-            @load="onLoad"
 
-          >
 
-            <div v-for="item in list" :key="item.id" class="list_item">
 
-              <div
 
-                class="reduce_type"
 
-                :style="{
 
-                  'background-color': `${
 
-                    reduceType_filter(item.reduceType)['color']
 
-                  }`,
 
-                }"
 
-              >
 
-                <span>{{
 
-                  `${reduceType_filter(item.reduceType)["label"]}`
 
-                }}</span>
 
-              </div>
 
-              <span class="header">{{ item.name }}</span>
 
-              <span>扣缴金额：￥{{ item.reduceMoney }}</span>
 
-              <span>账户余额：{{ item.accountMoney }}</span>
 
-              <span>租户电话：{{ item.tel }}</span>
 
-              <span>操作人：{{ item.operator }}</span>
 
-              <span>扣缴时间：{{ item.reduceTime }}</span>
 
-            </div>
 
-          </van-list>
 
-        </van-pull-refresh>
 
+        <van-list
 
+          v-model:loading="loading"
 
+          :finished="finished"
 
+          :error="error"
 
+          error-text="请求失败，点击重新加载"
 
+          finished-text="没有更多了"
 
+          @load="onLoad"
 
+        >
 
+          <div v-for="item in dataList" :key="item.id" class="list_item">
 
+            <div
 
+              class="reduce_type"
 
+              :style="{
 
+                'background-color': `${reduceType_filter(item.type)['color']}`,
 
+              }"
 
+            ></div>
 
+            <van-row class="header">
 
+              <van-col>{{ item.tenantInfo.name }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>扣缴金额：</van-col>
 
+              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>账户余额：￥</van-col>
 
+              <van-col>{{ item.surplus }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>租户电话：</van-col>
 
+              <van-col>{{ item.tenantInfo.tel }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>操作人：</van-col>
 
+              <van-col>{{ item.createName }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>扣缴时间：</van-col>
 
+              <van-col>{{ item.updateDate }}</van-col>
 
+            </van-row>
 
+          </div>
 
+        </van-list>
 
       </div>
 
     </div>
 
-  </div>
 
+  </van-pull-refresh>
 
 </template>
 
 <script>
 
+import Api from "../utils/api";
 
 import { isEmpty } from "@/utils/index.js";
 
 import VCountUp from "./CountUp";
 
 export default {
 
@@ -104,87 +127,114 @@ export default {
 
     return {
 
       loading: false,
 
       name: "电商园四期-B座",
 
-      checkType: "",
 
-      checkPerson: "",
 
-      checkTypeTitle: "巡检类型",
 
-      checkPersonTitle: "巡检人员",
 
-      checkTypeList: [
 
-        { text: "安保", value: 1 },
 
-        { text: "保洁", value: 2 },
 
+      feeDate: "",
 
+      operator: "",
 
+      feeDateTitle: "扣缴时间",
 
+      typeTitle: "扣缴类型",
 
+      operatorTitle: "操作人",
 
+      typeList: [
 
+        { text: "预存", value: "PreStorage" },
 
+        { text: "补助", value: "Subsidy" },
 
+        { text: "退费", value: "Refund" },
 
+        { text: "核缴（水）", value: 4 },
 
+        { text: "核缴（电）", value: 5 },
 
+        { text: "核缴（物业）", value: 6 },
 
       ],
 
-      checkPersonList: [
 
+      operatorList: [
 
         { text: "张三", value: 1 },
 
         { text: "李四", value: 2 },
 
       ],
 
-      total: 3,
 
-      list: [
 
-        {
 
-          name: "合肥市传秀科技有限公司",
 
-          reduceType: 2,
 
-          reduceMoney: 100,
 
-          accountMoney: 100,
 
-          tel: 13212341111,
 
-          operator: "张浩",
 
-          reduceTime: "2022-09-20 10:34:22",
 
-        },
 
+      feeDateList: [
 
+        { text: "张三", value: 1 },
 
+        { text: "李四", value: 2 },
 
       ],
 
+      dataForm: {
 
+        type: "",
 
+        tenantId: "",
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
+      dataList: [],
 
       loading: false,
 
       refreshing: false,
 
       finished: false,
 
     };
 
   },
 
-
 
+  created() {
 
+    this.dataForm.tenantId = localStorage.getItem("tenantId");
 
+  },
 
   methods: {
 
     reduceType_filter(val) {
 
       if (isEmpty(val)) {
 
         return {};
 
       }
 
-      if (val == 1) {
 
+      if (val == "PreStorage") {
 
         return { label: "预存", color: "#30D3A2" };
 
       }
 
-      if (val == 2) {
 
+      if (val == "Subsidy") {
 
         return { label: "补助", color: "#09C700" };
 
       }
 
-      if (val == 3) {
 
+      if (val == "Refund") {
 
         return { label: "退费", color: "#FA5555" };
 
       }
 
       if (val == 4) {
 
         return { label: "核缴（水）", color: "#FF9C27" };
 
       }
 
-      if (val == 4) {
 
+      if (val == 5) {
 
         return { label: "核缴（电）", color: "#FF9C27" };
 
       }
 
-      if (val == 4) {
 
+      if (val == 6) {
 
         return { label: "核缴（物业）", color: "#FF9C27" };
 
       }
 
     },
 
     onLoad() {
 
-      setTimeout(() => {
 
+      setTimeout(async () => {
 
         if (this.refreshing) {
 
-          this.list = [];
 
+          this.dataList = [];
 
           this.refreshing = false;
 
         }
 
-
 
-        for (let i = 0; i < 10; i++) {
 
-          this.list.push(this.list.length + 1);
 
-        }
 
-        this.loading = false;
 
-
 
-        if (this.list.length >= 40) {
 
-          this.finished = true;
 
-        }
 
-      }, 1000);
 
+        await this.getDataList();
 
+        this.page++; // 分页数加一
 
+      }, 100);
 
     },
 
-
 
     onRefresh() {
 
       // 清空列表数据
 
       this.finished = false;
 
-
 
       // 重新加载数据
 
       // 将 loading 设置为 true，表示处于加载状态
 
       this.loading = true;
 
+      this.page = 1; // 分页数赋值为1
 
       this.onLoad();
 
     },
 
+    // 获取列表数据方法
 
+    getDataList() {
 
+      Api.reduceRecordList(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          if (res.data) {
 
+            if (res.data.list.length == 0) {
 
+              // 判断获取数据条数若等于0
 
+              this.dataList = []; // 清空数组
 
+              this.finished = true; // 停止加载
 
+            }
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data.list); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+
 
+            // 如果list长度大于等于总数据条数,数据全部加载完成
 
+            if (this.dataList.length >= res.data.total) {
 
+              this.finished = true; // 结束加载状态
 
+            }
 
+          } else {
 
+            // 判断获取数据条数若等于0
 
+            this.dataList = []; // 清空数组
 
+            this.finished = true; // 停止加载
 
+          }
 
+        } else {
 
+          this.loading = false; // 加载状态结束
 
+          this.finished = true; // 停止加载
 
+        }
 
+      });
 
+    },
 
     // change事件可以拿到的是value
 
     handelChange(type, val) {
 
       console.log(type, val);
 
@@ -201,38 +251,32 @@ export default {
 
         )[0].text;
 
       }
 
     },
 
-    onClickLeft() {},
 
+    backPath() {
 
+      this.$router.back();
 
+    },
 
   },
 
 };
 
 </script>
 
 <style lang="scss" scoped>
 
-.page_check {
 
+.page_info {
 
   height: 100%;
 
-  .search_pannel {
 
+  .position_pannel {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
     padding: 10px 16px;
 
     background: #5c8fff;
 
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
 
-    display: flex;
 
-    align-items: center;
 
-    .pannel_left {
 
+    .van-col {
 
+      height: 24px;
 
+      font-size: 16px;
 
+      color: #ffffff;
 
+      line-height: 24px;
 
+      text-indent: 4px;
 
+      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
       display: flex;
 
       align-items: center;
 
-      span {
 
-        height: 24px;
 
-        font-size: 16px;
 
-        font-weight: 400;
 
-        color: #ffffff;
 
-        line-height: 24px;
 
-        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
-        text-indent: 4px;
 
-      }
 
-    }
 
-    .pannel_left,
 
-    .pannel_right {
 
-      flex: 1;
 
-    }
 
-    .pannel_right {
 
-      text-align: right;
 
+      letter-spacing: 2px;
 
     }
 
   }
 
   .drop_down {
 
@@ -246,7 +290,7 @@ export default {
 
     margin: 8px 0;
 
     display: flex;
 
     text-align: left;
 
-    span {
 
+    .van-col {
 
       height: 16px;
 
       font-size: 12px;
 
       font-weight: 400;
 
@@ -260,59 +304,54 @@ export default {
 
       margin: 0 2px;
 
     }
 
   }
 
-  .check_info {
 
+
 
+  .info_list {
 
     padding: 0 16px;
 
-    height: calc(
 
-      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
 
-    );
 
-    .info_list {
 
-      height: 100%;
 
-      overflow-y: auto;
 
-      .list_item {
 
-        background: #ffffff;
 
-        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
-        border-radius: 4px;
 
-        margin-bottom: 12px;
 
-        padding: 12px 16px;
 
-        display: flex;
 
-        flex-direction: column;
 
-        align-items: flex-start;
 
-        position: relative;
 
+    .list_item {
 
+      background: #ffffff;
 
+      box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
+      border-radius: 4px;
 
+      margin-bottom: 12px;
 
+      padding: 12px 16px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: flex-start;
 
+      position: relative;
 
+      &:nth-last-child(1) {
 
+        margin-bottom: 0;
 
+      }
 
+      .van-col {
 
+        height: 18px;
 
+        font-size: 14px;
 
+        color: #999999;
 
+        line-height: 18px;
 
+        margin-bottom: 4px;
 
         &:nth-last-child(1) {
 
           margin-bottom: 0;
 
         }
 
-        .header {
 
+      }
 
+      .header {
 
+        .van-col {
 
           height: 22px;
 
           font-size: 16px;
 
-          font-weight: 500;
 
           color: #0c1935;
 
           line-height: 22px;
 
           margin-bottom: 8px;
 
         }
 
+      }
 
+      .reduce_type {
 
+        position: absolute;
 
+        top: 0;
 
+        right: 0;
 
+        width: 48px;
 
+        height: 24px;
 
+        border-radius: 0px 4px 0px 10px;
 
         span {
 
-          height: 20px;
 
-          font-size: 14px;
 
-          color: #999999;
 
-          line-height: 20px;
 
-          margin-bottom: 2px;
 
-          &:nth-last-child(1) {
 
-            margin-bottom: 0;
 
-          }
 
-        }
 
-        .reduce_type {
 
-          position: absolute;
 
-          top: 0;
 
-          right: 0;
 
-          width: 48px;
 
-          height: 24px;
 
-          border-radius: 0px 4px 0px 10px;
 
-          span {
 
-            height: 16px;
 
-            font-size: 12px;
 
-            font-weight: 400;
 
-            color: #ffffff;
 
-            line-height: 16px;
 
-          }
 
+          height: 16px;
 
+          font-size: 12px;
 
+          font-weight: 400;
 
+          color: #ffffff;
 
+          line-height: 16px;
 
         }
 
       }
 
     }

+ 0 - 1
src/views/remoteControl.vue
Vedi File 

@@ -384,7 +384,6 @@ export default {
 
         .header {
 
           height: 22px;
 
           font-size: 16px;
 
-          font-weight: 600;
 
           color: #313836;
 
           line-height: 22px;
 
           margin-bottom: 8px;

+ 260 - 205
src/views/rentBill.vue
Vedi File 

@@ -1,105 +1,139 @@
 
 <template>
 
-  <van-nav-bar
 
-    title="租户账单"
 
-    left-arrow
 
-    @click-left="onClickLeft"
 
-    safe-area-inset-top
 
-  />
 
-  <div class="page_check">
 
-    <div class="search_pannel">
 
-      <div class="pannel_left">
 
-        <van-image
 
-          :src="require('@/assets/position.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
-        />
 
-        <span>{{ name }}</span>
 
-        <van-image
 
-          :src="require('@/assets/arrow-right.svg')"
 
-          width="24"
 
-          height="24"
 
-          fit="contain"
 
-        />
 
-      </div>
 
-      <div class="pannel_right" @click="toPath">
 
-        <van-image
 
-          :src="require('@/assets/search.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
-        />
 
+  <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>
 
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
+    <div class="page_info">
 
+      <van-row align="center" class="position_pannel">
 
+        <van-col>
 
+          <van-image
 
+            :src="require('@/assets/position.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+          <van-col>{{ name }}</van-col>
 
+          <van-image
 
+            :src="require('@/assets/arrow-right.svg')"
 
+            width="24"
 
+            height="24"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+        <van-col
 
+          @click="
 
+            $route.push({ path: '/userInfo', query: { type: 'account' } })
 
+          "
 
+        >
 
+          <van-image
 
+            :src="require('@/assets/user.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+      </van-row>
 
+      <div class="drop_down">
 
+        <van-dropdown-menu active-color="#1989fa">
 
+          <van-dropdown-item
 
+            v-model="dataForm.cycle"
 
+            @change="handelChange('cycle', cycle)"
 
+            :title="cycleTitle"
 
+            :options="cycleList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="dataForm.status"
 
+            @change="handelChange('status', dataForm.status)"
 
+            :title="statusTitle"
 
+            :options="statusList"
 
+          />
 
+        </van-dropdown-menu>
 
       </div>
 
-    </div>
 
-    <div class="drop_down" style="display: flex">
 
-      <van-dropdown-menu active-color="#1989fa">
 
-        <van-dropdown-item
 
-          v-model="rentStatus"
 
-          @change="handelChange('rentStatus', rentStatus)"
 
-          :title="rentStatusTitle"
 
-          :options="rentStatusList"
 
+      <van-row align="center" class="list_total">
 
+        <van-col>共有</van-col>
 
+        <v-count-up
 
+          :end-val="dataList.length"
 
+          class="count_up"
 
+          options="{ separator: ',' }"
 
         />
 
-      </van-dropdown-menu>
 
-    </div>
 
-    <div class="list_total">
 
-      <span>共有</span>
 
-      <v-count-up
 
-        :end-val="total"
 
-        class="count_up"
 
-        options="{ separator: ',' }"
 
-      />
 
-      <span>条记录</span>
 
-    </div>
 
-    <div class="check_info">
 
+        <van-col>条记录</van-col>
 
+      </van-row>
 
       <div class="info_list">
 
-        <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-list
 
+          v-model:loading="loading"
 
+          :finished="finished"
 
+          :error="error"
 
+          error-text="请求失败，点击重新加载"
 
+          finished-text="没有更多了"
 
+          @load="onLoad"
 
+        >
 
+          <div
 
+            v-for="item in dataList"
 
+            :key="item.id"
 
+            class="list_item"
 
+            @click="toPath('/rentBillDetail', item)"
 
           >
 
-            <div v-for="item in list" :key="item.id" class="list_item">
 
-              <div
 
-                class="reduce_type"
 
-                :style="{
 
-                  'background-color': `${
 
-                    rentStatus_filter(item.rentStatus)['color']
 
-                  }`,
 
-                }"
 
-              >
 
-                <span>{{
 
-                  `${rentStatus_filter(item.rentStatus)["label"]}`
 
-                }}</span>
 
-              </div>
 
-              <span class="header">{{ item.name }}</span>
 
-              <span style="color: #fa5555"
 
-                >本期金额：￥{{ item.rentMoney }}</span
 
+            <van-row
 
+              align="center"
 
+              class="reduce_type"
 
+              :style="{
 
+                'background-color': `${
 
+                  rentStatus_filter(item.status)['color']
 
+                }`,
 
+              }"
 
+            >
 
+              <van-col>{{
 
+                `${rentStatus_filter(item.status)["label"]}`
 
+              }}</van-col>
 
+            </van-row>
 
+            <van-row class="header">
 
+              <van-col>{{ item.name }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>本期金额：</van-col>
 
+              <van-col style="color: #fa5555"
 
+                >￥{{
 
+                  (parseInt(item.feeTotal * 100) / 100).toFixed(2)
 
+                }}</van-col
 
               >
 
-              <span
 
-                >欠费天数：<span style="color: #0c1935; font-weight: 600">{{
 
-                  item.rentDays
 
-                }}</span>
 
-              </span>
 
-              <span
 
-                >账户余额：<span style="color: #0c1935; font-weight: 600"
 
-                  >￥{{ item.accountMoney }}
 
-                </span></span
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>欠费天数：</van-col>
 
+              <van-col>{{}}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>账户余额：￥</van-col>
 
+              <van-col>{{
 
+                (parseInt(item.balance * 100) / 100).toFixed(2)
 
+              }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>联系电话：</van-col>
 
+              <van-col>{{ item.tel }}</van-col>
 
+            </van-row>
 
+            <div class="list_btn" v-if="item.status == 0">
 
+              <van-button
 
+                plain
 
+                type="primary"
 
+                size="small"
 
+                @click="handleClick([parseInt(item.id)])"
 
+                >催费</van-button
 
               >
 
-              <span>联系电话：{{ item.tel }}</span>
 
-              <div class="list_btn" v-if="item.status == 2">
 
-                <van-button plain type="primary" size="small">催费</van-button>
 
-              </div>
 
             </div>
 
-          </van-list>
 
-        </van-pull-refresh>
 
+          </div>
 
+        </van-list>
 
       </div>
 
     </div>
 
-  </div>
 
+  </van-pull-refresh>
 
 </template>
 
 <script>
 
+import Api from "../utils/api";
 
 import { isEmpty } from "@/utils/index.js";
 
 import VCountUp from "./CountUp";
 
 export default {
 
@@ -108,28 +142,21 @@ export default {
 
   },
 
   data() {
 
     return {
 
-      minDate: new Date(2020, 0, 1),
 
-      maxDate: new Date(2025, 5, 1),
 
-      currentDate: "",
 
-      loading: false,
 
       name: "电商园四期-B座",
 
-      rentStatus: "",
 
-      rentStatusTitle: "是否结清",
 
-      rentStatusList: [
 
+      cycleTitle: "计费周期",
 
+      statusTitle: "是否结清",
 
+      statusList: [
 
+        { text: "未结清", value: 0 },
 
         { text: "已结清", value: 1 },
 
-        { text: "未结清", value: 2 },
 
-      ],
 
-      total: 3,
 
-      list: [
 
-        {
 
-          name: "合肥市传秀科技有限公司",
 
-          rentStatus: 1,
 
-          rentMoney: 3454,
 
-          rentDays: 0,
 
-          accountMoney: 100,
 
-          tel: 13212341111,
 
-        },
 
       ],
 
+      cycleList: [],
 
+      dataForm: {
 
+        cycle: "2022-08",
 
+        status: "",
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
+      dataList: [],
 
       loading: false,
 
       refreshing: false,
 
       finished: false,
 
@@ -141,87 +168,123 @@ export default {
 
       if (isEmpty(val)) {
 
         return {};
 
       }
 
+      if (val == 0) {
 
+        return { label: "未结清", color: "#FA5555" };
 
+      }
 
       if (val == 1) {
 
         return { label: "已结清", color: "#09C700" };
 
       }
 
-      if (val == 2) {
 
-        return { label: "未结清", color: "#FA5555" };
 
-      }
 
     },
 
     onLoad() {
 
-      setTimeout(() => {
 
+      setTimeout(async () => {
 
         if (this.refreshing) {
 
-          this.list = [];
 
+          this.dataList = [];
 
           this.refreshing = false;
 
         }
 
-
 
-        for (let i = 0; i < 10; i++) {
 
-          this.list.push(this.list.length + 1);
 
-        }
 
-        this.loading = false;
 
-
 
-        if (this.list.length >= 40) {
 
-          this.finished = true;
 
-        }
 
-      }, 1000);
 
+        await this.getDataList();
 
+        this.dataForm.page++; // 分页数加一
 
+      }, 100);
 
     },
 
     onRefresh() {
 
       // 清空列表数据
 
       this.finished = false;
 
-
 
       // 重新加载数据
 
       // 将 loading 设置为 true，表示处于加载状态
 
       this.loading = true;
 
+      this.dataForm.page = 1; // 分页数赋值为1
 
       this.onLoad();
 
     },
 
+    // 获取列表数据方法
 
+    getDataList() {
 
+      Api.rentBillList(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          if (res.data) {
 
+            if (res.data.list.length == 0) {
 
+              // 判断获取数据条数若等于0
 
+              this.dataList = []; // 清空数组
 
+              this.finished = true; // 停止加载
 
+            }
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data.list); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+
 
+            // 如果list长度大于等于总数据条数,数据全部加载完成
 
+            if (this.dataList.length >= res.data.total) {
 
+              this.finished = true; // 结束加载状态
 
+            }
 
+          } else {
 
+            // 判断获取数据条数若等于0
 
+            this.dataList = []; // 清空数组
 
+            this.finished = true; // 停止加载
 
+          }
 
+        } else {
 
+          this.loading = false; // 加载状态结束
 
+          this.finished = true; // 停止加载
 
+        }
 
+      });
 
+    },
 
+    handleClick(ids) {
 
+      Api.lackFeeInfoPay(ids).then((res) => {
 
+        if (res.code == 0) {
 
+          this.$toast.success("催费成功");
 
+          this.onRefresh();
 
+        } else {
 
+          this.$toast.fail("催费失败");
 
+        }
 
+      });
 
+    },
 
     // change事件可以拿到的是value
 
     handelChange(type, val) {
 
-      console.log(type, val);
 
-      if (type == "checkType") {
 
+      if (type == "cycle") {
 
         // 这里打印出来的值就是我们想要的text
 
-        this.checkTypeTitle = this.checkTypeList.filter(
 
+        this.cycleTitle = this.cycleList.filter(
 
           (item) => item.value === val
 
         )[0].text;
 
       }
 
-      if (type == "checkPerson") {
 
+      if (type == "status") {
 
         // 这里打印出来的值就是我们想要的text
 
-        this.checkPersonTitle = this.checkPersonList.filter(
 
+        this.statusTitle = this.statusList.filter(
 
           (item) => item.value === val
 
         )[0].text;
 
       }
 
+      this.getDataList();
 
+    },
 
+    toPath(path, val) {
 
+      this.$router.push({
 
+        path: path,
 
+        query: {
 
+          tenantId: val.id,
 
+          tenantName: val.name,
 
+          costCycle: this.dataForm.cycle,
 
+        },
 
+      });
 
+    },
 
+    backPath() {
 
+      this.$router.back();
 
     },
 
-    onClickLeft() {},
 
   },
 
 };
 
 </script>
 
 <style lang="scss" scoped>
 
-.page_check {
 
+.page_info {
 
   height: 100%;
 
-  .search_pannel {
 
+  .position_pannel {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
     padding: 10px 16px;
 
     background: #5c8fff;
 
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
 
-    display: flex;
 
-    align-items: center;
 
-    .pannel_left {
 
+    .van-col {
 
+      height: 24px;
 
+      font-size: 16px;
 
+      color: #ffffff;
 
+      line-height: 24px;
 
+      text-indent: 4px;
 
+      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
       display: flex;
 
       align-items: center;
 
-      span {
 
-        height: 24px;
 
-        font-size: 16px;
 
-        font-weight: 400;
 
-        color: #ffffff;
 
-        line-height: 24px;
 
-        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
-        text-indent: 4px;
 
-      }
 
-    }
 
-    .pannel_left,
 
-    .pannel_right {
 
-      flex: 1;
 
-    }
 
-    .pannel_right {
 
-      text-align: right;
 
+      letter-spacing: 2px;
 
     }
 
   }
 
   .drop_down {
 
@@ -235,7 +298,7 @@ export default {
 
     margin: 8px 0;
 
     display: flex;
 
     text-align: left;
 
-    span {
 
+    .van-col {
 
       height: 16px;
 
       font-size: 12px;
 
       font-weight: 400;
 
@@ -249,69 +312,61 @@ export default {
 
       margin: 0 2px;
 
     }
 
   }
 
-  .check_info {
 
+  .info_list {
 
     padding: 0 16px;
 
-    height: calc(
 
-      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
 
-    );
 
-    .info_list {
 
-      height: 100%;
 
-      overflow-y: auto;
 
-      .list_item {
 
-        background: #ffffff;
 
-        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
-        border-radius: 4px;
 
-        margin-bottom: 12px;
 
-        padding: 12px 16px;
 
-        display: flex;
 
-        flex-direction: column;
 
-        align-items: flex-start;
 
-        position: relative;
 
+    .list_item {
 
+      background: #ffffff;
 
+      box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
+      border-radius: 4px;
 
+      margin-bottom: 12px;
 
+      padding: 12px 16px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: flex-start;
 
+      position: relative;
 
+      &:nth-last-child(1) {
 
+        margin-bottom: 0;
 
+      }
 
+      .van-col {
 
+        height: 18px;
 
+        font-size: 14px;
 
+        color: #999999;
 
+        line-height: 18px;
 
+        margin-bottom: 4px;
 
         &:nth-last-child(1) {
 
           margin-bottom: 0;
 
         }
 
-        .header {
 
+      }
 
+      .header {
 
+        .van-col {
 
           height: 22px;
 
           font-size: 16px;
 
-          font-weight: 600;
 
-          color: #313836;
 
+          color: #0c1935;
 
           line-height: 22px;
 
           margin-bottom: 8px;
 
         }
 
-        span {
 
-          height: 18px;
 
-          font-size: 14px;
 
+      }
 
+      .reduce_type {
 
+        position: absolute;
 
+        top: 0;
 
+        right: 0;
 
+        height: 24px;
 
+        padding: 0 12px;
 
+        border-radius: 0px 4px 0px 10px;
 
+        .van-col {
 
+          font-size: 12px;
 
           font-weight: 400;
 
-          color: #999999;
 
-          line-height: 18px;
 
-          margin-bottom: 4px;
 
-          &:nth-last-child(1) {
 
-            margin-bottom: 0;
 
-          }
 
-        }
 
-        .reduce_type {
 
-          position: absolute;
 
-          top: 0;
 
-          right: 0;
 
-          height: 24px;
 
-          padding: 0 12px;
 
-          border-radius: 0px 4px 0px 10px;
 
-          span {
 
-            height: 16px;
 
-            font-size: 12px;
 
-            font-weight: 400;
 
-            color: #ffffff;
 
-            line-height: 16px;
 
-          }
 
+          color: #ffffff;
 
+          line-height: 16px;
 
         }
 
-        .list_btn {
 
-          position: absolute;
 
-          bottom: 15px;
 
-          right: 12px;
 
-          .van-button {
 
-            &:nth-child(2) {
 
-              margin: 0 12px;
 
-            }
 
+      }
 
+      .list_btn {
 
+        position: absolute;
 
+        bottom: 15px;
 
+        right: 12px;
 
+        .van-button {
 
+          &:nth-child(2) {
 
+            margin: 0 12px;
 
           }
 
         }
 
       }

+ 476 - 344
src/views/rentBillDetail.vue
Vedi File 

@@ -1,173 +1,224 @@
 
 <template>
 
-  <van-nav-bar
 
-    :title="name"
 
-    left-arrow
 
-    @click-left="onClickLeft"
 
-    safe-area-inset-top
 
-  />
 
-  <div class="page_check">
 
-    <div class="search_pannel">
 
-      <van-tabs
 
-        v-model:active="activeTab"
 
-        title-active-color="#2E69EB"
 
-        title-inactive-color="#0C1935"
 
-      >
 
-        <van-tab title="账单明细">
 
-          <van-dropdown-menu active-color="#2E69EB">
 
-            <van-dropdown-item
 
-              v-model="feeType"
 
-              @change="handelChange('feeType', feeType)"
 
-              :title="feeTypeTitle"
 
-              :options="feeTypeList"
 
-            />
 
-            <van-dropdown-item
 
-              v-model="feeStatus"
 
-              @change="handelChange('feeStatus', feeStatus)"
 
-              :title="feeStatusTitle"
 
-              :options="feeStatusList"
 
-            />
 
-          </van-dropdown-menu>
 
-        </van-tab>
 
-        <van-tab title="扣缴记录">
 
-          <van-dropdown-menu active-color="#2E69EB">
 
-            <van-dropdown-item
 
-              v-model="reduceType"
 
-              @change="handelChange('reduceType', reduceType)"
 
-              :title="reduceTypeTitle"
 
-              :options="reduceTypeList"
 
-            />
 
-            <van-dropdown-item
 
-              v-model="operator"
 
-              @change="handelChange('operator', operator)"
 
-              :title="operatorTitle"
 
-              :options="operatorList"
 
-            />
 
-          </van-dropdown-menu>
 
-        </van-tab>
 
-      </van-tabs>
 
-    </div>
 
-    <div class="list_total">
 
-      <span>共有</span>
 
-      <v-count-up
 
-        :end-val="total"
 
-        class="count_up"
 
-        options="{ separator: ',' }"
 
+  <van-nav-bar :title="title" safe-area-inset-top>
 
+    <template #left>
 
+      <van-icon
 
+        :name="require('@/assets/arrow-left.svg')"
 
+        size="24"
 
+        @click="backPath"
 
       />
 
-      <span>条记录</span>
 
-    </div>
 
-    <div class="check_info">
 
-      <template v-if="activeTab == 0">
 
-        <div class="info_list" key="billDetail">
 
-          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
-            <van-list
 
-              v-model:loading="loading"
 
-              :finished="finished"
 
-              :error="error"
 
-              error-text="请求失败，点击重新加载"
 
-              finished-text="没有更多了"
 
-              @load="onLoad"
 
+    </template>
 
+  </van-nav-bar>
 
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
+    <div class="page_info">
 
+      <div class="search_pannel">
 
+        <van-tabs
 
+          v-model:active="activeTab"
 
+          title-active-color="#2E69EB"
 
+          title-inactive-color="#0C1935"
 
+        >
 
+          <van-tab name="rentBill" title="账单明细">
 
+            <van-dropdown-menu active-color="#2E69EB">
 
+              <van-dropdown-item
 
+                v-model="dataForm.costCycle"
 
+                @change="handelChange('costCycle', costCycle)"
 
+                :title="costCycleTitle"
 
+                :options="costCycleList"
 
+              />
 
+              <van-dropdown-item
 
+                v-model="dataForm.costType"
 
+                @change="handelChange('costType', costType)"
 
+                :title="costTypeTitle"
 
+                :options="costTypeList"
 
+              />
 
+              <van-dropdown-item
 
+                v-model="dataForm.status"
 
+                @change="handelChange('status', status)"
 
+                :title="statusTitle"
 
+                :options="statusList"
 
+              />
 
+            </van-dropdown-menu>
 
+          </van-tab>
 
+          <van-tab name="reduceRecord" title="扣缴记录">
 
+            <van-dropdown-menu active-color="#2E69EB">
 
+              <van-dropdown-item
 
+                v-model="dataForm.reduceDate"
 
+                @change="handelChange('reduceDate', reduceDate)"
 
+                :title="reduceDateTitle"
 
+                :options="reduceDateList"
 
+              />
 
+              <van-dropdown-item
 
+                v-model="dataForm.type"
 
+                @change="handelChange('type', type)"
 
+                :title="typeTitle"
 
+                :options="typeList"
 
+              />
 
+              <van-dropdown-item
 
+                v-model="dataForm.operator"
 
+                @change="handelChange('operator', operator)"
 
+                :title="operatorTitle"
 
+                :options="operatorList"
 
+              />
 
+            </van-dropdown-menu>
 
+          </van-tab>
 
+        </van-tabs>
 
+      </div>
 
+      <van-row align="center" class="list_total">
 
+        <van-col>共有</van-col>
 
+        <v-count-up
 
+          :end-val="dataList.length"
 
+          class="count_up"
 
+          options="{ separator: ',' }"
 
+        />
 
+        <van-col>条记录</van-col>
 
+      </van-row>
 
+      <template v-if="activeTab == 'rentBill'">
 
+        <div class="info_list" key="rentBill">
 
+          <van-list
 
+            v-model:loading="loading"
 
+            :finished="finished"
 
+            :error="error"
 
+            error-text="请求失败，点击重新加载"
 
+            finished-text="没有更多了"
 
+            @load="onLoad"
 
+          >
 
+            <div
 
+              v-for="(item, index) in dataList"
 
+              :key="item.id"
 
+              class="list_item"
 
             >
 
-              <div v-for="item in list" :key="item.id" class="list_item">
 
-                <van-collapse
 
-                  v-model="activeCollapse"
 
-                  :border="false"
 
-                  style="width: 100%"
 
-                >
 
-                  <van-collapse-item :name="item.id">
 
-                    <template #title>
 
-                      <div class="collapse_title">
 
-                        <template v-if="item.feeType == 1">
 
-                          <span class="label">电费：</span>
 
-                        </template>
 
-                        <template v-if="item.feeType == 2">
 
-                          <span class="label">水费：</span>
 
-                        </template>
 
-                        <template v-if="item.feeType == 3">
 
-                          <span class="label">物业相关费用费：</span>
 
-                        </template>
 
-                        <span style="font-weight: 600; color: #fa5555"
 
-                          >￥{{ item.totalMoney }}</span
 
+              <van-collapse
 
+                v-model="activeCollapse"
 
+                :border="false"
 
+                style="width: 100%"
 
+                accordion
 
+              >
 
+                <van-collapse-item :name="index">
 
+                  <template #title>
 
+                    <van-row class="collapse_title">
 
+                      <van-checkbox-group v-model="checked">
 
+                        <van-checkbox :name="a"></van-checkbox>
 
+                        <van-checkbox :name="b"></van-checkbox>
 
+                      </van-checkbox-group>
 
+                      <van-col class="label"
 
+                        >{{ `${costType_filter(item.costType)}` }}：</van-col
 
+                      >
 
+                      <van-col style="font-weight: 600; color: #fa5555"
 
+                        >￥{{
 
+                          (parseInt(item.amount * 100) / 100).toFixed(2)
 
+                        }}</van-col
 
+                      >
 
+                    </van-row>
 
+                  </template>
 
+                  <div class="collapse_info">
 
+                    <template
 
+                      v-if="item.costType == 'Water' || item.costType == 'Elec'"
 
+                    >
 
+                      <van-row
 
+                        class="info_item"
 
+                        v-for="ele in billLists"
 
+                        :key="ele.id"
 
+                      >
 
+                        <van-col
 
+                          >{{ ele.deviceName }}费用：￥{{ ele.amount }}</van-col
 
                         >
 
-                      </div>
 
+                      </van-row>
 
                     </template>
 
-                    <div class="collapse_info">
 
-                      <template v-if="item.feeType == 1 || item.feeType == 2">
 
-                        <div
 
-                          class="info_item"
 
-                          v-for="ele in item.list"
 
-                          :key="ele.id"
 
-                        >
 
-                          <span
 
-                            >{{ ele.deviceName }}费用：￥{{ ele.money }}</span
 
+                    <template v-if="item.costType == 'PropertyFee'">
 
+                      <div class="info_item">
 
+                        <van-row>
 
+                          <van-col>管理费：￥{{ item.manageMoney }}</van-col>
 
+                        </van-row>
 
+                        <van-row>
 
+                          <van-col>电梯费：￥{{ item.elevatorMoney }}</van-col>
 
+                        </van-row>
 
+                        <van-row>
 
+                          <van-col
 
+                            >中央空调使用费：￥{{ item.AirMoney }}</van-col
 
                           >
 
-                        </div>
 
-                      </template>
 
-                      <template v-if="item.feeType == 3">
 
-                        <div class="info_item">
 
-                          <span>管理费：￥{{ item.manageMoney }}</span>
 
-                          <span>电梯费：￥{{ item.elevatorMoney }}</span>
 
-                          <span>中央空调使用费：￥{{ item.AirMoney }}</span>
 
-                        </div>
 
-                      </template>
 
-                    </div>
 
-                  </van-collapse-item>
 
-                </van-collapse>
 
-              </div>
 
-            </van-list>
 
-          </van-pull-refresh>
 
+                        </van-row>
 
+                      </div>
 
+                    </template>
 
+                  </div>
 
+                </van-collapse-item>
 
+              </van-collapse>
 
+            </div>
 
+          </van-list>
 
         </div>
 
       </template>
 
-      <template v-if="activeTab == 1">
 
+      <template v-if="activeTab == 'reduceRecord'">
 
         <div class="info_list" key="reduceRecord">
 
-          <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-list
 
+            v-model:loading="loading"
 
+            :finished="finished"
 
+            :error="error"
 
+            error-text="请求失败，点击重新加载"
 
+            finished-text="没有更多了"
 
+            @load="onLoad"
 
+          >
 
+            <div
 
+              v-for="item in dataList"
 
+              :key="item.id"
 
+              class="list_item reduce_record"
 
+              style="padding: 12px 16px"
 
             >
 
-              <div
 
-                v-for="item in list"
 
-                :key="item.id"
 
-                class="list_item"
 
-                style="padding: 12px 16px"
 
+              <van-row
 
+                align="center"
 
+                class="reduce_type"
 
+                :style="{
 
+                  'background-color': `${
 
+                    reduceType_filter(item.type)['color']
 
+                  }`,
 
+                }"
 
               >
 
-                <div
 
-                  class="reduce_type"
 
-                  :style="{
 
-                    'background-color': `${
 
-                      reduceType_filter(item.reduceType)['color']
 
-                    }`,
 
-                  }"
 
-                >
 
-                  <span>{{
 
-                    `${reduceType_filter(item.reduceType)["label"]}`
 
-                  }}</span>
 
-                </div>
 
-                <span class="header">{{ item.name }}</span>
 
-                <span>扣缴金额：￥{{ item.reduceMoney }}</span>
 
-                <span>账户余额：{{ item.accountMoney }}</span>
 
-                <span>租户电话：{{ item.tel }}</span>
 
-                <span>操作人：{{ item.operator }}</span>
 
-                <span>扣缴时间：{{ item.reduceTime }}</span>
 
-              </div>
 
-            </van-list>
 
-          </van-pull-refresh>
 
+                <van-col>{{
 
+                  `${reduceType_filter(item.type)["label"]}`
 
+                }}</van-col>
 
+              </van-row>
 
+              <van-row class="header">
 
+                <van-col>{{ item.tenantInfo && item.tenantInfo.name }}</van-col>
 
+              </van-row>
 
+              <van-row>
 
+                <van-col>扣缴金额：￥</van-col>
 
+                <van-col style="color: #fa5555">{{
 
+                  (parseInt(item.amount * 100) / 100).toFixed(2)
 
+                }}</van-col>
 
+              </van-row>
 
+              <van-row>
 
+                <van-col>账户余额：￥</van-col>
 
+                <van-col>{{
 
+                  (parseInt(item.surplus * 100) / 100).toFixed(2)
 
+                }}</van-col>
 
+              </van-row>
 
+              <van-row>
 
+                <van-col>租户电话：</van-col>
 
+                <van-col>{{ item.tenantInfo && item.tenantInfo.tel }}</van-col>
 
+              </van-row>
 
+              <van-row>
 
+                <van-col>操作人：</van-col>
 
+                <van-col>{{ item.createName }}</van-col>
 
+              </van-row>
 
+              <van-row>
 
+                <van-col>扣缴时间：</van-col>
 
+                <van-col>{{ item.createDate }}</van-col>
 
+              </van-row>
 
+            </div>
 
+          </van-list>
 
         </div>
 
       </template>
 
     </div>
 
-  </div>
 
-  <van-tabbar
 
-    v-model="activeTabBar"
 
-    :safe-area-inset-bottom="true"
 
-    class="tab_bar"
 
-  >
 
-    <van-tabbar-item @click="handleChangeTabBar(1)">预存</van-tabbar-item>
 
-    <van-tabbar-item @click="handleChangeTabBar(2)">补助</van-tabbar-item>
 
-    <van-tabbar-item @click="handleChangeTabBar(3)">退费</van-tabbar-item>
 
-  </van-tabbar>
 
+  </van-pull-refresh>
 
+  <template v-if="role == 'admin'">
 
+    <van-tabbar
 
+      v-model="activeTabBar"
 
+      :safe-area-inset-bottom="true"
 
+      class="tab_bar"
 
+    >
 
+      <van-tabbar-item @click="handleChangeTabBar(1)">预存</van-tabbar-item>
 
+      <van-tabbar-item @click="handleChangeTabBar(2)">补助</van-tabbar-item>
 
+      <van-tabbar-item @click="handleChangeTabBar(3)">退费</van-tabbar-item>
 
+    </van-tabbar>
 
+  </template>
 
+
 
   <van-popup
 
     v-model:show="showPopup"
 
     position="bottom"
 
@@ -177,30 +228,31 @@
 
     <van-row class="popup_title">
 
       <van-col :span="24">{{ popupTitle }}</van-col>
 
     </van-row>
 
-    <van-divider style="margin: 0" />
 
-    <van-cell-group :border="false">
 
-      <van-field
 
-        v-model="money"
 
-        type="number"
 
-        label="￥"
 
-        placeholder="请输入金额"
 
-      />
 
-    </van-cell-group>
 
-    <div class="save_btn">
 
-      <van-button
 
-        block
 
-        type="primary"
 
-        :loading="loading"
 
-        loading-type="spinner"
 
-        loading-text="立即缴费"
 
-        @click="onSubmit"
 
-      >
 
-        立即缴费
 
-      </van-button>
 
-    </div>
 
+    <van-divider
 
+      style="border-color: #d8d8d8; border-bottom-width: 1px; margin: 0"
 
+    />
 
+    <van-form input-align="left" error-message-align="left" @submit="onSubmit">
 
+      <van-cell-group :border="false">
 
+        <van-field
 
+          v-model="money"
 
+          type="number"
 
+          label="￥"
 
+          required
 
+          clearable
 
+          :rules="[{ required: true, message: '请输入金额' }]"
 
+          placeholder="请输入金额"
 
+        />
 
+      </van-cell-group>
 
+      <div class="save_btn">
 
+        <van-button block type="primary" native-type="submit">
 
+          立即缴费
 
+        </van-button>
 
+      </div>
 
+    </van-form>
 
   </van-popup>
 
 </template>
 
 <script>
 
+import Api from "../utils/api";
 
 import { isEmpty } from "@/utils/index.js";
 
 import VCountUp from "./CountUp";
 
 export default {
 
@@ -209,156 +261,236 @@ export default {
 
   },
 
   data() {
 
     return {
 
-      name: "合肥市传秀科技有限公司",
 
-      loading: false,
 
+      role: "",
 
+      title: "",
 
       showPopup: false,
 
       popupTitle: "",
 
       money: "",
 
-      activeTab: 0,
 
+      activeTab: "rentBill",
 
       activeTabBar: 0,
 
-      activeCollapse: [],
 
-      feeType: "",
 
-      feeStatus: "",
 
-      reduceType: "",
 
-      operator: "",
 
-      feeTypeTitle: "缴费类型",
 
-      feeStatusTitle: "支付状态",
 
-      reduceTypeTitle: "扣缴类型",
 
+      activeCollapse: "",
 
+      costCycleTitle: "计费周期",
 
+      costTypeTitle: "缴费类型",
 
+      statusTitle: "支付状态",
 
+      reduceDateTitle: "扣缴时间",
 
+      typeTitle: "扣缴类型",
 
       operatorTitle: "操作人",
 
-      feeTypeList: [
 
-        { text: "电费", value: 1 },
 
-        { text: "水费", value: 2 },
 
-        { text: "物业相关费用", value: 3 },
 
+      costCycleList: [],
 
+      costTypeList: [
 
+        { text: "电费", value: "Elec" },
 
+        { text: "水费", value: "Water" },
 
+        { text: "物业费", value: "PropertyFee" },
 
       ],
 
-      rentStatusList: [
 
+      statusList: [
 
         { text: "已支付", value: 1 },
 
         { text: "待支付", value: 2 },
 
+        { text: "支付失败", value: 3 },
 
       ],
 
-      reduceTypeList: [
 
-        { text: "预存", value: 1 },
 
-        { text: "补助", value: 2 },
 
-        { text: "退费", value: 3 },
 
+      reduceDateList: [],
 
+      typeList: [
 
+        { text: "预存", value: "PreStorage" },
 
+        { text: "补助", value: "Subsidy" },
 
+        { text: "退费", value: "Refund" },
 
         { text: "核缴（水）", value: 4 },
 
         { text: "核缴（电）", value: 5 },
 
         { text: "核缴（物业）", value: 6 },
 
       ],
 
-      total: 3,
 
-      list: [
 
-        {
 
-          id: 1,
 
-          name: "合肥市传秀科技有限公司",
 
-          reduceType: 2,
 
-          reduceMoney: 100,
 
-          accountMoney: 100,
 
-          tel: 13212341111,
 
-          operator: "张浩",
 
-          reduceTime: "2022-09-20 10:34:22",
 
-          feeType: 1,
 
-          totalMoney: 2932,
 
-          manageMoney: 15080,
 
-          elevatorMoney: 180,
 
-          AirMoney: 3000,
 
-          list: [
 
-            { deviceName: "B13传秀电表1", money: 436 },
 
-            { deviceName: "B13传秀电表2", money: 674 },
 
-            { deviceName: "B13传秀电表3", money: 1822 },
 
-          ],
 
-        },
 
-      ],
 
+      operatorList: [],
 
+      dataForm: {
 
+        tenantId: "",
 
+        costCycle: "2022-08",
 
+        costType: "",
 
+        status: "",
 
+        type: "",
 
+        reduceDate: "",
 
+        operator: "",
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
+      dataList: [],
 
+      billDetailList: [],
 
       loading: false,
 
       refreshing: false,
 
       finished: false,
 
     };
 
   },
 
-
 
+  watch: {
 
+    activeTab: {
 
+      handler(newval, oldval) {
 
+        this.onRefresh();
 
+      },
 
+      deep: true,
 
+    },
 
+  },
 
+  created() {
 
+    this.role = localStorage.getItem("role");
 
+    this.title = this.$route.query.tenantName;
 
+    this.dataForm.tenantId = this.$route.query.tenantId;
 
+    this.dataForm.costCycle = this.$route.query.costCycle;
 
+    this.activeTab = this.$route.query.activeTab;
 
+  },
 
   methods: {
 
     reduceType_filter(val) {
 
       if (isEmpty(val)) {
 
         return {};
 
       }
 
-      if (val == 1) {
 
+      if (val == "PreStorage") {
 
         return { label: "预存", color: "#30D3A2" };
 
       }
 
-      if (val == 2) {
 
+      if (val == "Subsidy") {
 
         return { label: "补助", color: "#09C700" };
 
       }
 
-      if (val == 3) {
 
+      if (val == "Refund") {
 
         return { label: "退费", color: "#FA5555" };
 
       }
 
       if (val == 4) {
 
         return { label: "核缴（水）", color: "#FF9C27" };
 
       }
 
-      if (val == 4) {
 
+      if (val == 5) {
 
         return { label: "核缴（电）", color: "#FF9C27" };
 
       }
 
-      if (val == 4) {
 
+      if (val == 6) {
 
         return { label: "核缴（物业）", color: "#FF9C27" };
 
       }
 
+      if (val == "CancelSubsidy") {
 
+        return { label: "撤销补助", color: "#FF9C27" };
 
+      }
 
+      CancelSubsidy;
 
     },
 
-    rentStatus_filter(val) {
 
+    costType_filter(val) {
 
       if (isEmpty(val)) {
 
-        return {};
 
-      }
 
-      if (val == 1) {
 
-        return { label: "已支付", color: "#09C700" };
 
-      }
 
-      if (val == 2) {
 
-        return { label: "未支付", color: "#FA5555" };
 
+        return "";
 
       }
 
-    },
 
-    handleChangeTabBar(val) {
 
-      this.money = "";
 
-      if (val == 1) {
 
-        this.popupTitle = "预存";
 
+      if (val == "Elec") {
 
+        return "电费";
 
       }
 
-      if (val == 2) {
 
-        this.popupTitle = "补助";
 
+      if (val == "Water") {
 
+        return "水费";
 
       }
 
-      if (val == 3) {
 
-        this.popupTitle = "退费";
 
+      if (val == "PropertyFee") {
 
+        return "物业费";
 
       }
 
-      this.showPopup = !this.showPopup;
 
     },
 
     onLoad() {
 
-      setTimeout(() => {
 
+      setTimeout(async () => {
 
         if (this.refreshing) {
 
-          this.list = [];
 
+          this.dataList = [];
 
           this.refreshing = false;
 
         }
 
-
 
-        for (let i = 0; i < 10; i++) {
 
-          this.list.push(this.list.length + 1);
 
-        }
 
-        this.loading = false;
 
-
 
-        if (this.list.length >= 40) {
 
-          this.finished = true;
 
-        }
 
-      }, 1000);
 
+        await this.getDataList();
 
+        this.dataForm.page++; // 分页数加一
 
+      }, 100);
 
     },
 
-
 
     onRefresh() {
 
       // 清空列表数据
 
       this.finished = false;
 
-
 
       // 重新加载数据
 
       // 将 loading 设置为 true，表示处于加载状态
 
       this.loading = true;
 
+      this.dataForm.page = 1; // 分页数赋值为1
 
+      this.dataList = [];
 
       this.onLoad();
 
     },
 
+    // 获取列表数据方法
 
+    getDataList() {
 
+      if (this.activeTab == "rentBill") {
 
+        this.getRentBillList();
 
+      }
 
+      if (this.activeTab == "reduceRecord") {
 
+        this.getReduceRecordList();
 
+      }
 
+    },
 
+    getRentBillList() {
 
+      Api.rentBillDetail(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          if (res.data) {
 
+            if (res.data.length == 0) {
 
+              // 判断获取数据条数若等于0
 
+              this.dataList = []; // 清空数组
 
+              this.finished = true; // 停止加载
 
+            }
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+
 
+            // 如果list长度大于等于总数据条数,数据全部加载完成
 
+            if (this.dataList.length >= res.data.length) {
 
+              this.finished = true; // 结束加载状态
 
+            }
 
+          } else {
 
+            // 判断获取数据条数若等于0
 
+            this.dataList = []; // 清空数组
 
+            this.finished = true; // 停止加载
 
+          }
 
+        } else {
 
+          this.loading = false; // 加载状态结束
 
+          this.finished = true; // 停止加载
 
+        }
 
+      });
 
+    },
 
+    getReduceRecordList() {
 
+      Api.reduceRecordList(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          if (res.data) {
 
+            if (res.data.list.length == 0) {
 
+              // 判断获取数据条数若等于0
 
+              this.dataList = []; // 清空数组
 
+              this.finished = true; // 停止加载
 
+            }
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data.list); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+
 
+            // 如果list长度大于等于总数据条数,数据全部加载完成
 
+            if (this.dataList.length >= res.data.total) {
 
+              this.finished = true; // 结束加载状态
 
+            }
 
+          } else {
 
+            // 判断获取数据条数若等于0
 
+            this.dataList = []; // 清空数组
 
+            this.finished = true; // 停止加载
 
+          }
 
+        } else {
 
+          this.loading = false; // 加载状态结束
 
+          this.finished = true; // 停止加载
 
+        }
 
+      });
 
+    },
 
+    handelChange() {},
 
+    handleChangeTabBar(val) {
 
+      this.money = "";
 
+      if (val == 1) {
 
+        this.popupTitle = "预存";
 
+      }
 
+      if (val == 2) {
 
+        this.popupTitle = "补助";
 
+      }
 
+      if (val == 3) {
 
+        this.popupTitle = "退费";
 
+      }
 
+      this.showPopup = !this.showPopup;
 
+    },
 
     onSubmit() {
 
-      this.loading = true;
 
-      setTimeout(() => {
 
-        this.loading = false;
 
-        this.showPopup = false;
 
-      }, 2000);
 
+      this.$toast.loading({
 
+        message: "正在缴费...",
 
+        forbidClick: true,
 
+      });
 
+      Api.repairInfoSave(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          this.$toast.success("缴费成功");
 
+        } else {
 
+          this.$toast.fail("缴费失败");
 
+        }
 
+      });
 
+    },
 
+    backPath() {
 
+      this.$router.back();
 
     },
 
-    onClickLeft() {},
 
   },
 
 };
 
 </script>
 
 <style lang="scss" scoped>
 
-.page_check {
 
+.page_info {
 
   height: 100%;
 
   .search_pannel {
 
     background: #ffffff;
 
@@ -368,10 +500,16 @@ export default {
 
       }
 
       .van-dropdown-menu__bar {
 
         --van-gray-4: #999999;
 
-        --van-dropdown-menu-title-font-size: 14px;
 
+        --van-dropdown-menu-title-font-size: 15px;
 
         --van-dropdown-menu-title-text-color: #0c1935;
 
         --van-dropdown-menu-box-shadow: 0;
 
       }
 
+      .van-dropdown-item__option {
 
+        .van-cell__title,
 
+        .van-cell__value {
 
+          font-size: 14px;
 
+        }
 
+      }
 
     }
 
   }
 
   .list_total {
 
@@ -379,7 +517,7 @@ export default {
 
     margin: 8px 0;
 
     display: flex;
 
     text-align: left;
 
-    span {
 
+    .van-col {
 
       height: 16px;
 
       font-size: 12px;
 
       font-weight: 400;
 
@@ -393,96 +531,90 @@ export default {
 
       margin: 0 2px;
 
     }
 
   }
 
-  .check_info {
 
+
 
+  .info_list {
 
     padding: 0 16px;
 
-    height: calc(
 
-      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
 
-    );
 
-    .info_list {
 
-      height: 100%;
 
-      overflow-y: auto;
 
-      .list_item {
 
-        background: #ffffff;
 
-        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
-        border-radius: 4px;
 
-        margin-bottom: 12px;
 
-        padding: 6px 0;
 
-        display: flex;
 
-        flex-direction: column;
 
-        align-items: flex-start;
 
-        position: relative;
 
-        &:nth-last-child(1) {
 
-          margin-bottom: 0;
 
+    .list_item {
 
+      background: #ffffff;
 
+      box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
+      border-radius: 4px;
 
+      margin-bottom: 12px;
 
+      padding: 6px 0;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: flex-start;
 
+      position: relative;
 
+      &:nth-last-child(1) {
 
+        margin-bottom: 0;
 
+      }
 
+
 
+      .list_btn {
 
+        position: absolute;
 
+        bottom: 15px;
 
+        right: 12px;
 
+        .van-button {
 
+          &:nth-child(2) {
 
+            margin: 0 12px;
 
+          }
 
         }
 
-        .header {
 
-          height: 22px;
 
+      }
 
+      .collapse_title {
 
+        .label {
 
           font-size: 16px;
 
           font-weight: 500;
 
-          color: #0c1935;
 
-          line-height: 22px;
 
-          margin-bottom: 8px;
 
+          color: #666666;
 
         }
 
-        span {
 
-          height: 20px;
 
-          font-size: 14px;
 
-          color: #999999;
 
-          line-height: 20px;
 
+      }
 
+      .collapse_info {
 
+        .info_item {
 
+          text-align: left;
 
           margin-bottom: 2px;
 
-          &:nth-last-child(1) {
 
-            margin-bottom: 0;
 
+          .van-col {
 
+            height: 20px;
 
+            font-size: 14px;
 
+            color: #9da0ac;
 
+            line-height: 20px;
 
           }
 
-        }
 
-        .reduce_type {
 
-          position: absolute;
 
-          top: 0;
 
-          right: 0;
 
-          height: 24px;
 
-          padding: 0 12px;
 
-          border-radius: 0px 4px 0px 10px;
 
-          span {
 
-            height: 16px;
 
-            font-size: 12px;
 
-            font-weight: 400;
 
-            color: #ffffff;
 
-            line-height: 16px;
 
-          }
 
-        }
 
-        .list_btn {
 
-          position: absolute;
 
-          bottom: 15px;
 
-          right: 12px;
 
-          .van-button {
 
-            &:nth-child(2) {
 
-              margin: 0 12px;
 
-            }
 
+          &:nth-last-child(1) {
 
+            margin: 0;
 
           }
 
         }
 
-        .collapse_title {
 
-          span {
 
-            height: 22px;
 
-            font-size: 16px;
 
-            font-weight: 500;
 
-            color: #0c1935;
 
-            line-height: 22px;
 
-          }
 
+      }
 
+    }
 
+    .reduce_record {
 
+      .van-col {
 
+        height: 18px;
 
+        font-size: 14px;
 
+        color: #999999;
 
+        line-height: 18px;
 
+        margin-bottom: 4px;
 
+        &:nth-last-child(1) {
 
+          margin-bottom: 0;
 
         }
 
-        .collapse_info {
 
-          .info_item {
 
-            text-align: left;
 
-            margin-bottom: 2px;
 
-            span {
 
-              height: 20px;
 
-              font-size: 14px;
 
-              color: #9da0ac;
 
-              line-height: 20px;
 
-            }
 
-            &:nth-last-child(1) {
 
-              margin: 0;
 
-            }
 
-          }
 
+      }
 
+      .header {
 
+        .van-col {
 
+          font-size: 16px;
 
+          color: #0c1935;
 
+          line-height: 22px;
 
+          margin-bottom: 8px;
 
         }
 
       }
 
     }
 
+    .reduce_type {
 
+      position: absolute;
 
+      top: 0;
 
+      right: 0;
 
+      height: 24px;
 
+      padding: 0 12px;
 
+      border-radius: 0px 4px 0px 10px;
 
+      .van-col {
 
+        font-size: 12px;
 
+        font-weight: 400;
 
+        color: #ffffff;
 
+        line-height: 16px;
 
+      }
 
+    }
 
   }
 
 }
 
 </style>

+ 20 - 15
src/views/repairDetail.vue
Vedi File 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <van-nav-bar :title="title" safe-area-inset-top>
 
+  <van-nav-bar title="详情" safe-area-inset-top>
 
     <template #left>
 
       <van-icon
 
         :name="require('@/assets/arrow-left.svg')"
 
@@ -62,8 +62,8 @@
 
       </van-cell-group>
 
     </div>
 
   </div>
 
-  <div class="save_btn">
 
-    <template v-if="role == 3">
 
+  <template v-if="dataForm.status == 2 && role == 'repair'">
 
+    <div class="save_btn">
 
       <van-button
 
         block
 
         type="primary"
 
@@ -74,8 +74,10 @@
 
       >
 
         维修完成
 
       </van-button>
 
-    </template>
 
-    <template v-if="role == 'admin' && dataForm.status == 1">
 
+    </div>
 
+  </template>
 
+  <template v-if="role == 'admin' && dataForm.status == 1">
 
+    <div class="save_btn">
 
       <van-button
 
         block
 
         type="primary"
 
@@ -84,8 +86,9 @@
 
       >
 
         指派维修人员
 
       </van-button>
 
-    </template>
 
-  </div>
 
+    </div>
 
+  </template>
 
+
 
   <van-popup
 
     v-model:show="showPopup"
 
     position="bottom"
 
@@ -120,11 +123,12 @@
 
         >
 
           <van-picker
 
             :columns="repairPersonList"
 
+            :columns-field-names="customFieldName"
 
             @cancel="showRepairPersonPicker = false"
 
             @confirm="
 
               (value) => {
 
-                dataForm.repairPersonId = value.value;
 
-                dataForm.repairPersonName = value.text;
 
+                dataForm.repairPersonId = value.id;
 
+                dataForm.repairPersonName = value.name;
 
                 showRepairPersonPicker = false;
 
               }
 
             "
 
@@ -181,7 +185,6 @@ export default {
 
     return {
 
       role: "",
 
       loading: false,
 
-      title: "",
 
       showImgPreview: false,
 
       imagesList: [],
 
       showPopup: false,
 
@@ -189,6 +192,10 @@ export default {
 
       showRepairPersonPicker: false,
 
       showUrgencyPicker: false,
 
       repairPersonList: [],
 
+      customFieldName: {
 
+        text: "name",
 
+        value: "id",
 
+      },
 
       repairUrgencyList: [
 
         { text: "非常紧急", value: 1 },
 
         { text: "紧急", value: 2 },
 
@@ -274,11 +281,6 @@ export default {
 
         if (res.code == 0) {
 
           this.dataForm = res.data;
 
           this.imagesList = this.dataForm.faultPics.split(",");
 
-          if (this.dataForm.status == 2 || this.dataForm.status == 3) {
 
-            this.title = "报修详情";
 
-          } else {
 
-            this.title = "工单详情";
 
-          }
 
         } else {
 
         }
 
       });
 
@@ -351,6 +353,9 @@ export default {
 
           align-items: center;
 
         }
 
       }
 
+      .van-cell__left-icon{
 
+        margin-right: 0;
 
+      }
 
     }
 
   }
 
 }

+ 52 - 37
src/views/repairList.vue
Vedi File 

@@ -10,13 +10,16 @@
 
   </van-nav-bar>
 
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
     <div class="page_info">
 
-      <div class="search_pannel">
 
+      <div
 
+        class="search_pannel"
 
+        v-if="role == 'admin' || role == 'Maintenance'"
 
+      >
 
         <van-tabs
 
           v-model:active="activeTab"
 
           title-active-color="#2E69EB"
 
           title-inactive-color="#0C1935"
 
         >
 
-          <van-tab name="1" title="待指派" />
 
+          <van-tab name="1" title="待指派" v-if="role == 'admin'" />
 
           <van-tab name="2" title="已指派(待维修)" />
 
           <van-tab name="3" title="已维修" />
 
         </van-tabs>
 
@@ -89,6 +92,7 @@ export default {
 
   },
 
   data() {
 
     return {
 
+      role: "",
 
       title: "",
 
       activeTab: 1,
 
       page: 1,
 
@@ -102,17 +106,23 @@ export default {
 
   watch: {
 
     activeTab: {
 
       handler(newval, oldval) {
 
-        if (newval == 2 || newval == 3) {
 
-          this.title = "报修工单";
 
-        } else {
 
-          this.title = "工单待办";
 
-        }
 
         this.onRefresh();
 
       },
 
       deep: true,
 
-      immediate: true,
 
     },
 
   },
 
+  created() {
 
+    this.role = localStorage.getItem("role");
 
+    if (this.role == "admin") {
 
+      this.title = "工单待办";
 
+    }
 
+    if (this.role == "Maintenance") {
 
+      this.title = "报修工单";
 
+    }
 
+    if (this.role == "Tenant") {
 
+      this.title = "报修记录";
 
+    }
 
+  },
 
 
   methods: {
 
     repairType_filter(val) {
 
@@ -143,6 +153,25 @@ export default {
 
         return { label: "普通", color: "#30D3A2" };
 
       }
 
     },
 
+    onLoad() {
 
+      setTimeout(async () => {
 
+        if (this.refreshing) {
 
+          this.dataList = [];
 
+          this.refreshing = false;
 
+        }
 
+        await this.getDataList();
 
+        this.page++; // 分页数加一
 
+      }, 100);
 
+    },
 
+    onRefresh() {
 
+      // 清空列表数据
 
+      this.finished = false;
 
+      // 重新加载数据
 
+      // 将 loading 设置为 true，表示处于加载状态
 
+      this.loading = true;
 
+      this.page = 1; // 分页数赋值为1
 
+      this.onLoad();
 
+    },
 
     // 获取列表数据方法
 
     async getDataList() {
 
       Api.repairInfoQuery({
 
@@ -151,18 +180,25 @@ export default {
 
         status: this.activeTab,
 
       }).then((res) => {
 
         if (res.code == 0) {
 
-          if (res.data && res.data.list.length == 0) {
 
+          if (res.data) {
 
+            if (res.data.list.length == 0) {
 
+              // 判断获取数据条数若等于0
 
+              this.dataList = []; // 清空数组
 
+              this.finished = true; // 停止加载
 
+            }
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data.list); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+
 
+            // 如果list长度大于等于总数据条数,数据全部加载完成
 
+            if (this.dataList.length >= res.data.total) {
 
+              this.finished = true; // 结束加载状态
 
+            }
 
+          } else {
 
             // 判断获取数据条数若等于0
 
             this.dataList = []; // 清空数组
 
             this.finished = true; // 停止加载
 
           }
 
-          // 若数据条数不等于0
 
-          this.dataList.push(...res.data.list); // 将数据放入list中
 
-          this.loading = false; // 加载状态结束
 
-          // 如果list长度大于等于总数据条数,数据全部加载完成
 
-          if (this.dataList.length >= res.data.total) {
 
-            this.finished = true; // 结束加载状态
 
-          }
 
         } else {
 
           this.loading = false; // 加载状态结束
 
           this.finished = true; // 停止加载
 
@@ -170,25 +206,6 @@ export default {
 
       });
 
     },
 
 
-    // 被 @load调用的方法
 
-    onLoad() {
 
-      // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
 
-      this.getDataList(); // 调用上面方法,请求数据
 
-      this.page++; // 分页数加一
 
-      this.finished;
 
-    },
 
-
 
-    // 下拉调用方法
 
-    onRefresh() {
 
-      // 清空列表数据
 
-      this.finished = false;
 
-      // 重新加载数据
 
-      // 将 loading 设置为 true，表示处于加载状态
 
-      this.loading = true;
 
-      this.page = 1; // 分页数赋值为1
 
-      this.dataList = []; // 清空数组
 
-      this.onLoad();
 
-    },
 
     toPath(id) {
 
       this.$router.push({
 
         path: "/repairDetail",
 
@@ -251,7 +268,6 @@ export default {
 
       .header {
 
         height: 22px;
 
         font-size: 16px;
 
-        font-weight: 600;
 
         color: #313836;
 
         line-height: 22px;
 
         margin-bottom: 8px;
 
@@ -259,7 +275,6 @@ export default {
 
       .van-col {
 
         height: 18px;
 
         font-size: 14px;
 
-        font-weight: 400;
 
         color: #999999;
 
         line-height: 18px;
 
         margin-bottom: 4px;

+ 137 - 150
src/views/repairOnline.vue
Vedi File 

@@ -9,145 +9,139 @@
 
     </template>
 
   </van-nav-bar>
 
   <div class="page_info">
 
-    <div class="info_list">
 
-      <van-form
 
-        input-align="right"
 
-        error-message-align="right"
 
-        @submit="onSubmit"
 
-      >
 
-        <van-cell-group :border="false">
 
-          <van-field
 
-            v-model="dataForm.repairPositionName"
 
-            label="报修位置"
 
-            required
 
-            is-link
 
-            placeholder="请选择报修位置"
 
-            clearable
 
-            :rules="[{ required: true, message: '请选择报修位置' }]"
 
-            @click="showRepairPositionPicker = true"
 
+    <van-form
 
+      input-align="right"
 
+      error-message-align="right"
 
+      @submit="onSubmit"
 
+    >
 
+      <van-cell-group :border="false">
 
+        <van-field
 
+          v-model="dataForm.repairPositionName"
 
+          label="报修位置"
 
+          required
 
+          is-link
 
+          placeholder="请选择报修位置"
 
+          clearable
 
+          :rules="[{ required: true, message: '请选择报修位置' }]"
 
+          @click="showRepairPositionPicker = true"
 
+        />
 
+        <van-popup
 
+          v-model:show="showRepairPositionPicker"
 
+          round
 
+          position="bottom"
 
+        >
 
+          <van-cascader
 
+            v-model="dataForm.repairPosition"
 
+            title="请选择报修位置"
 
+            active-color="#2e69eb"
 
+            :options="positionList"
 
+            :field-names="fieldNames"
 
+            @close="showRepairPositionPicker = false"
 
+            @finish="onFinish"
 
           />
 
-          <van-popup
 
-            v-model:show="showRepairPositionPicker"
 
-            round
 
-            position="bottom"
 
-          >
 
-            <van-cascader
 
-              v-model="dataForm.repairPosition"
 
-              title="请选择报修位置"
 
-              active-color="#2e69eb"
 
-              :options="positionList"
 
-              :field-names="fieldNames"
 
-              @close="showRepairPositionPicker = false"
 
-              @finish="onFinish"
 
-            />
 
-          </van-popup>
 
-          <van-field
 
-            v-model="dataForm.repairRegionName"
 
-            label="报修区域"
 
-            required
 
-            is-link
 
-            placeholder="请选择报修区域"
 
-            clearable
 
-            :rules="[{ required: true, message: '请选择报修区域' }]"
 
-            @click="showRepairRegionPicker = true"
 
+        </van-popup>
 
+        <van-field
 
+          v-model="dataForm.repairRegionName"
 
+          label="报修区域"
 
+          required
 
+          is-link
 
+          placeholder="请选择报修区域"
 
+          clearable
 
+          :rules="[{ required: true, message: '请选择报修区域' }]"
 
+          @click="showRepairRegionPicker = true"
 
+        />
 
+        <van-popup
 
+          v-model:show="showRepairRegionPicker"
 
+          round
 
+          position="bottom"
 
+        >
 
+          <van-picker
 
+            :columns="repairRegionList"
 
+            @cancel="showRepairRegionPicker = false"
 
+            @confirm="
 
+              (value) => {
 
+                dataForm.repairRegion = value.value;
 
+                dataForm.repairRegionName = value.text;
 
+                showRepairRegionPicker = false;
 
+              }
 
+            "
 
           />
 
-          <van-popup
 
-            v-model:show="showRepairRegionPicker"
 
-            round
 
-            position="bottom"
 
-          >
 
-            <van-picker
 
-              :columns="repairRegionList"
 
-              @cancel="showRepairRegionPicker = false"
 
-              @confirm="
 
-                (value) => {
 
-                  dataForm.repairRegion = value.value;
 
-                  dataForm.repairRegionName = value.text;
 
-                  showRepairRegionPicker = false;
 
-                }
 
-              "
 
-            />
 
-          </van-popup>
 
-          <van-field
 
-            v-model="dataForm.repairTypeName"
 
-            label="报修类型"
 
-            required
 
-            is-link
 
-            placeholder="请选择报修类型"
 
-            clearable
 
-            :rules="[{ required: true, message: '请选择报修类型' }]"
 
-            @click="showRepairTypePicker = true"
 
+        </van-popup>
 
+        <van-field
 
+          v-model="dataForm.repairTypeName"
 
+          label="报修类型"
 
+          required
 
+          is-link
 
+          placeholder="请选择报修类型"
 
+          clearable
 
+          :rules="[{ required: true, message: '请选择报修类型' }]"
 
+          @click="showRepairTypePicker = true"
 
+        />
 
+        <van-popup v-model:show="showRepairTypePicker" round position="bottom">
 
+          <van-picker
 
+            :columns="repairTypeList"
 
+            @cancel="showRepairTypePicker = false"
 
+            @confirm="
 
+              (value) => {
 
+                dataForm.repairType = value.value;
 
+                dataForm.repairTypeName = value.text;
 
+                showRepairTypePicker = false;
 
+              }
 
+            "
 
           />
 
-          <van-popup
 
-            v-model:show="showRepairTypePicker"
 
-            round
 
-            position="bottom"
 
-          >
 
-            <van-picker
 
-              :columns="repairTypeList"
 
-              @cancel="showRepairTypePicker = false"
 
-              @confirm="
 
-                (value) => {
 
-                  dataForm.repairType = value.value;
 
-                  dataForm.repairTypeName = value.text;
 
-                  showRepairTypePicker = false;
 
-                }
 
-              "
 
+        </van-popup>
 
+        <van-field
 
+          v-model="dataForm.contactPerson"
 
+          label="联系人"
 
+          required
 
+          placeholder="请输入联系人"
 
+          clearable
 
+          :rules="[{ required: true, message: '请输入联系人' }]"
 
+        />
 
+        <van-field
 
+          v-model="dataForm.contactPhone"
 
+          label="联系电话"
 
+          required
 
+          placeholder="请输入联系电话"
 
+          clearable
 
+          :rules="[{ required: true, message: '请输入联系电话' }]"
 
+        />
 
+        <van-field
 
+          v-model="dataForm.faultDes"
 
+          type="textarea"
 
+          label="故障描述"
 
+          required
 
+          rows="4"
 
+          autosize
 
+          maxlength="1000"
 
+          show-word-limit
 
+          placeholder="请输入故障描述"
 
+          clearable
 
+          :rules="[{ required: true, message: '请输入故障描述' }]"
 
+        />
 
+        <van-cell title="上传照片" :border="false" class="upload_cell">
 
+          <template #value>
 
+            <van-uploader
 
+              v-model="fileList"
 
+              multiple
 
+              :upload-icon="require('@/assets/camera.svg')"
 
+              :max-size="500 * 1024"
 
+              :max-count="10"
 
+              accept="image/jpeg,image/jpg,image/png"
 
+              :before-read="beforeRead"
 
+              :before-delete="beforeDelete"
 
+              :after-read="afterRead"
 
+              @oversize="onOversize"
 
             />
 
-          </van-popup>
 
-          <van-field
 
-            v-model="dataForm.contactPerson"
 
-            label="联系人"
 
-            required
 
-            placeholder="请输入联系人"
 
-            clearable
 
-            :rules="[{ required: true, message: '请输入联系人' }]"
 
-          />
 
-          <van-field
 
-            v-model="dataForm.contactPhone"
 
-            label="联系电话"
 
-            required
 
-            placeholder="请输入联系电话"
 
-            clearable
 
-            :rules="[{ required: true, message: '请输入联系电话' }]"
 
-          />
 
-          <van-field
 
-            v-model="dataForm.faultDes"
 
-            type="textarea"
 
-            label="故障描述"
 
-            required
 
-            rows="4"
 
-            autosize
 
-            maxlength="1000"
 
-            show-word-limit
 
-            placeholder="请输入故障描述"
 
-            clearable
 
-            :rules="[{ required: true, message: '请输入故障描述' }]"
 
-          />
 
-          <van-cell title="上传照片" :border="false" class="upload_cell">
 
-            <template #value>
 
-              <van-uploader
 
-                v-model="fileList"
 
-                multiple
 
-                :upload-icon="require('@/assets/camera.svg')"
 
-                :max-size="500 * 1024"
 
-                :max-count="10"
 
-                accept="image/jpeg,image/jpg,image/png"
 
-                :before-read="beforeRead"
 
-                :before-delete="beforeDelete"
 
-                :after-read="afterRead"
 
-                @oversize="onOversize"
 
-              />
 
-            </template>
 
-          </van-cell>
 
-        </van-cell-group>
 
-        <div class="save_btn">
 
-          <van-button block type="primary" native-type="submit">
 
-            提交
 
-          </van-button>
 
-        </div>
 
-      </van-form>
 
-    </div>
 
+          </template>
 
+        </van-cell>
 
+      </van-cell-group>
 
+      <div class="save_btn">
 
+        <van-button block type="primary" native-type="submit">
 
+          提交
 
+        </van-button>
 
+      </div>
 
+    </van-form>
 
   </div>
 
 </template>
 
 <script>
 
@@ -322,22 +316,15 @@ export default {
 
 </script>
 
 <style lang="scss" scoped>
 
 .page_info {
 
-  height: calc(
 
-    100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px - 60px -46px
 
-  );
 
   margin-top: 12px;
 
-  .info_list {
 
-    max-height: 100%;
 
-    overflow-y: auto;
 
-    /deep/ {
 
-      .upload_cell {
 
-        .van-cell__title {
 
-          flex: unset;
 
-        }
 
-        .van-cell__value {
 
-          margin-left: 8px;
 
-          text-align: center;
 
-        }
 
+  /deep/ {
 
+    .upload_cell {
 
+      .van-cell__title {
 
+        flex: unset;
 
+      }
 
+      .van-cell__value {
 
+        margin-left: 8px;
 
+        text-align: center;
 
       }
 
     }
 
   }

+ 0 - 266
src/views/reviewCheck.vue
Vedi File 

@@ -1,266 +0,0 @@
 
-<template>
 
-  <van-nav-bar
 
-    title="巡检记录"
 
-    left-arrow
 
-    @click-left="onClickLeft"
 
-    safe-area-inset-top
 
-  />
 
-  <div class="page_check">
 
-    <div class="search_pannel">
 
-      <div class="pannel_left">
 
-        <van-image
 
-          :src="require('@/assets/position.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
-        />
 
-        <span>{{ name }}</span>
 
-        <van-image
 
-          :src="require('@/assets/arrow-right.svg')"
 
-          width="24"
 
-          height="24"
 
-          fit="contain"
 
-        />
 
-      </div>
 
-      <div class="pannel_right" @click="toPath">
 
-        <van-image
 
-          :src="require('@/assets/search.svg')"
 
-          width="16"
 
-          height="16"
 
-          fit="contain"
 
-        />
 
-      </div>
 
-    </div>
 
-    <div class="drop_down">
 
-      <van-dropdown-menu active-color="#1989fa">
 
-        <van-dropdown-item
 
-          v-model="checkType"
 
-          @change="handelChange('checkType', checkType)"
 
-          :title="checkTypeTitle"
 
-          :options="checkTypeList"
 
-        />
 
-        <van-dropdown-item
 
-          v-model="checkPerson"
 
-          @change="handelChange('checkPerson', checkPerson)"
 
-          :title="checkPersonTitle"
 
-          :options="checkPersonList"
 
-        />
 
-      </van-dropdown-menu>
 
-    </div>
 
-    <div class="list_total">
 
-      <span>共有</span>
 
-      <v-count-up
 
-        :end-val="total"
 
-        class="count_up"
 
-        options="{ separator: ',' }"
 
-      />
 
-      <span>条记录</span>
 
-    </div>
 
-    <div class="check_info">
 
-      <div class="info_list">
 
-        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
-          <van-list
 
-            v-model:loading="loading"
 
-            :finished="finished"
 
-            :error="error"
 
-            error-text="请求失败，点击重新加载"
 
-            finished-text="没有更多了"
 
-            @load="onLoad"
 
-          >
 
-            <div v-for="item in list" :key="item.id" class="list_item">
 
-              <span class="header">{{ item.position }}</span>
 
-              <span>巡检类型：{{ item.checkType }}</span>
 
-              <span>巡检人员：{{ item.checkPerson }}</span>
 
-              <span>联系电话：{{ item.contactPhone }}</span>
 
-              <span>巡检时间：{{ item.checkTime }}</span>
 
-            </div>
 
-          </van-list>
 
-        </van-pull-refresh>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-<script>
 
-import VCountUp from "./CountUp";
 
-export default {
 
-  components: {
 
-    "v-count-up": VCountUp,
 
-  },
 
-  data() {
 
-    return {
 
-      loading: false,
 
-      name: "电商园四期-B座",
 
-      checkType: "",
 
-      checkPerson: "",
 
-      checkTypeTitle: "巡检类型",
 
-      checkPersonTitle: "巡检人员",
 
-      checkTypeList: [
 
-        { text: "安保", value: 1 },
 
-        { text: "保洁", value: 2 },
 
-      ],
 
-      checkPersonList: [
 
-        { text: "张三", value: 1 },
 
-        { text: "李四", value: 2 },
 
-      ],
 
-      total: 3,
 
-      list: [
 
-        {
 
-          position: "B座13楼1301",
 
-          checkType: 1,
 
-          checkPerson: "张浩",
 
-          contactPhone: 13212341111,
 
-          checkTime: "2022-09-20 10:34:22",
 
-        },
 
-      ],
 
-      loading: false,
 
-      refreshing: false,
 
-      finished: false,
 
-    };
 
-  },
 
-  methods: {
 
-    onLoad() {
 
-      setTimeout(() => {
 
-        if (this.refreshing) {
 
-          this.list = [];
 
-          this.refreshing = false;
 
-        }
 
-
 
-        for (let i = 0; i < 10; i++) {
 
-          this.list.push(this.list.length + 1);
 
-        }
 
-        this.loading = false;
 
-
 
-        if (this.list.length >= 40) {
 
-          this.finished = true;
 
-        }
 
-      }, 1000);
 
-    },
 
-
 
-    onRefresh() {
 
-      // 清空列表数据
 
-      this.finished = false;
 
-
 
-      // 重新加载数据
 
-      // 将 loading 设置为 true，表示处于加载状态
 
-      this.loading = true;
 
-      this.onLoad();
 
-    },
 
-    // change事件可以拿到的是value
 
-    handelChange(type, val) {
 
-      console.log(type, val);
 
-      if (type == "checkType") {
 
-        // 这里打印出来的值就是我们想要的text
 
-        this.checkTypeTitle = this.checkTypeList.filter(
 
-          (item) => item.value === val
 
-        )[0].text;
 
-      }
 
-      if (type == "checkPerson") {
 
-        // 这里打印出来的值就是我们想要的text
 
-        this.checkPersonTitle = this.checkPersonList.filter(
 
-          (item) => item.value === val
 
-        )[0].text;
 
-      }
 
-    },
 
-    onClickLeft() {},
 
-  },
 
-};
 
-</script>
 
-<style lang="scss" scoped>
 
-.page_check {
 
-  height: 100%;
 
-  .search_pannel {
 
-    padding: 10px 16px;
 
-    background: #5c8fff;
 
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
 
-    display: flex;
 
-    align-items: center;
 
-    .pannel_left {
 
-      display: flex;
 
-      align-items: center;
 
-      span {
 
-        height: 24px;
 
-        font-size: 16px;
 
-        font-weight: 400;
 
-        color: #ffffff;
 
-        line-height: 24px;
 
-        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
-        text-indent: 4px;
 
-      }
 
-    }
 
-    .pannel_left,
 
-    .pannel_right {
 
-      flex: 1;
 
-    }
 
-    .pannel_right {
 
-      text-align: right;
 
-    }
 
-  }
 
-  .drop_down {
 
-    /deep/ {
 
-      --van-gray-4: #999999;
 
-      --van-dropdown-menu-title-text-color: #0c1935;
 
-    }
 
-  }
 
-  .list_total {
 
-    padding: 0 16px;
 
-    margin: 8px 0;
 
-    display: flex;
 
-    text-align: left;
 
-    span {
 
-      height: 16px;
 
-      font-size: 12px;
 
-      font-weight: 400;
 
-      color: #999999;
 
-      line-height: 16px;
 
-    }
 
-    .count_up {
 
-      font-size: 16px;
 
-      font-weight: 500;
 
-      color: #fa5555;
 
-      margin: 0 2px;
 
-    }
 
-  }
 
-  .check_info {
 
-    padding: 0 16px;
 
-    height: calc(
 
-      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
 
-    );
 
-    .info_list {
 
-        height: 100%;
 
-        overflow-y: auto;
 
-      .list_item {
 
-        background: #ffffff;
 
-        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
-        border-radius: 4px;
 
-        margin-bottom: 12px;
 
-        padding: 12px 16px;
 
-        display: flex;
 
-        flex-direction: column;
 
-        align-items: flex-start;
 
-        &:nth-last-child(1) {
 
-          margin-bottom: 0;
 
-        }
 
-        .header {
 
-          height: 22px;
 
-          font-size: 16px;
 
-          font-weight: 600;
 
-          color: #313836;
 
-          line-height: 22px;
 
-          margin-bottom: 8px;
 
-        }
 
-        span {
 
-          height: 18px;
 
-          font-size: 14px;
 
-          font-weight: 400;
 
-          color: #999999;
 
-          line-height: 18px;
 
-          margin-bottom: 4px;
 
-          &:nth-last-child(1) {
 
-            margin-bottom: 0;
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 285 - 0
src/views/reviewRecord.vue
Vedi File 

@@ -0,0 +1,285 @@
 
+<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>
 
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
 
+    <div class="page_info">
 
+      <van-row align="center" class="position_pannel">
 
+        <van-col>
 
+          <van-image
 
+            :src="require('@/assets/position.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+          <van-col>{{ name }}</van-col>
 
+          <van-image
 
+            :src="require('@/assets/arrow-right.svg')"
 
+            width="24"
 
+            height="24"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+        <van-col
 
+          @click="
 
+            $route.push({ path: '/userInfo', query: { type: 'account' } })
 
+          "
 
+        >
 
+          <van-image
 
+            :src="require('@/assets/user.svg')"
 
+            width="16"
 
+            height="16"
 
+            fit="contain"
 
+          />
 
+        </van-col>
 
+      </van-row>
 
+      <div class="drop_down">
 
+        <van-dropdown-menu active-color="#1989fa">
 
+          <van-dropdown-item
 
+            v-model="checkType"
 
+            @change="handelChange('checkType', checkType)"
 
+            :title="checkTypeTitle"
 
+            :options="checkTypeList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="checkPerson"
 
+            @change="handelChange('checkPerson', checkPerson)"
 
+            :title="checkPersonTitle"
 
+            :options="checkPersonList"
 
+          />
 
+        </van-dropdown-menu>
 
+      </div>
 
+      <van-row align="center" class="list_total">
 
+        <van-col>共有</van-col>
 
+        <v-count-up
 
+          :end-val="dataList.length"
 
+          class="count_up"
 
+          options="{ separator: ',' }"
 
+        />
 
+        <van-col>条记录</van-col>
 
+      </van-row>
 
+      <div class="info_list">
 
+        <van-list
 
+          v-model:loading="loading"
 
+          :finished="finished"
 
+          :error="error"
 
+          error-text="请求失败，点击重新加载"
 
+          finished-text="没有更多了"
 
+          @load="onLoad"
 
+        >
 
+          <div v-for="item in list" :key="item.id" class="list_item">
 
+            <van-row class="header">
 
+              <van-col>{{ item.tenantInfo.name }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>巡检类型：</van-col>
 
+              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>巡检人员：</van-col>
 
+              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>联系电话：</van-col>
 
+              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
 
+            </van-row>
 
+            <van-row>
 
+              <van-col>巡检时间：</van-col>
 
+              <van-col style="color: #fa5555">￥{{ item.amount }}</van-col>
 
+            </van-row>
 
+          </div>
 
+        </van-list>
 
+      </div>
 
+    </div>
 
+  </van-pull-refresh>
 
+</template>
 
+<script>
 
+import Api from "../utils/api";
 
+import VCountUp from "./CountUp";
 
+export default {
 
+  components: {
 
+    "v-count-up": VCountUp,
 
+  },
 
+  data() {
 
+    return {
 
+      name: "电商园四期-B座",
 
+      checkType: "",
 
+      checkPerson: "",
 
+      checkTypeTitle: "巡检类型",
 
+      checkPersonTitle: "巡检人员",
 
+      checkTypeList: [
 
+        { text: "安保", value: 1 },
 
+        { text: "保洁", value: 2 },
 
+      ],
 
+      checkPersonList: [
 
+        { text: "张三", value: 1 },
 
+        { text: "李四", value: 2 },
 
+      ],
 
+      dataForm: {},
 
+      dataList: [],
 
+      loading: false,
 
+      refreshing: false,
 
+      finished: false,
 
+    };
 
+  },
 
+  methods: {
 
+    onLoad() {
 
+      setTimeout(async () => {
 
+        if (this.refreshing) {
 
+          this.dataList = [];
 
+          this.refreshing = false;
 
+        }
 
+        await this.getDataList();
 
+      }, 100);
 
+    },
 
+    onRefresh() {
 
+      // 清空列表数据
 
+      this.finished = false;
 
+      // 重新加载数据
 
+      // 将 loading 设置为 true，表示处于加载状态
 
+      this.loading = true;
 
+      this.dataList = [];
 
+      this.onLoad();
 
+    },
 
+    // 获取列表数据方法
 
+    getDataList() {
 
+      Api.reviewCheckList(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          if (res.data) {
 
+            if (res.data.length == 0) {
 
+              // 判断获取数据条数若等于0
 
+              this.dataList = []; // 清空数组
 
+              this.finished = true; // 停止加载
 
+            }
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+
 
+            // 如果list长度大于等于总数据条数,数据全部加载完成
 
+            if (this.dataList.length >= res.data.length) {
 
+              this.finished = true; // 结束加载状态
 
+            }
 
+          } else {
 
+            // 判断获取数据条数若等于0
 
+            this.dataList = []; // 清空数组
 
+            this.finished = true; // 停止加载
 
+          }
 
+        } else {
 
+          this.loading = false; // 加载状态结束
 
+          this.finished = true; // 停止加载
 
+        }
 
+      });
 
+    },
 
+    // change事件可以拿到的是value
 
+    handelChange(type, val) {
 
+      console.log(type, val);
 
+      if (type == "checkType") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.checkTypeTitle = this.checkTypeList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      if (type == "checkPerson") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.checkPersonTitle = this.checkPersonList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+    },
 
+    backPath() {
 
+      this.$router.back();
 
+    },
 
+  },
 
+};
 
+</script>
 
+<style lang="scss" scoped>
 
+.page_info {
 
+  height: 100%;
 
+  .position_pannel {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    padding: 10px 16px;
 
+    background: #5c8fff;
 
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
 
+    .van-col {
 
+      height: 24px;
 
+      font-size: 16px;
 
+      color: #ffffff;
 
+      line-height: 24px;
 
+      text-indent: 4px;
 
+      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
 
+      display: flex;
 
+      align-items: center;
 
+      letter-spacing: 2px;
 
+    }
 
+  }
 
+  .drop_down {
 
+    /deep/ {
 
+      --van-gray-4: #999999;
 
+      --van-dropdown-menu-title-text-color: #0c1935;
 
+    }
 
+  }
 
+  .list_total {
 
+    padding: 0 16px;
 
+    margin: 8px 0;
 
+    display: flex;
 
+    text-align: left;
 
+    .van-col {
 
+      height: 16px;
 
+      font-size: 12px;
 
+      font-weight: 400;
 
+      color: #999999;
 
+      line-height: 16px;
 
+    }
 
+    .count_up {
 
+      font-size: 16px;
 
+      font-weight: 500;
 
+      color: #fa5555;
 
+      margin: 0 2px;
 
+    }
 
+  }
 
+
 
+  .info_list {
 
+    padding: 0 16px;
 
+    .list_item {
 
+      background: #ffffff;
 
+      box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 
+      border-radius: 4px;
 
+      margin-bottom: 12px;
 
+      padding: 12px 16px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: flex-start;
 
+      &:nth-last-child(1) {
 
+        margin-bottom: 0;
 
+      }
 
+      .van-col {
 
+        height: 18px;
 
+        font-size: 14px;
 
+        color: #999999;
 
+        line-height: 18px;
 
+        margin-bottom: 4px;
 
+        &:nth-last-child(1) {
 
+          margin-bottom: 0;
 
+        }
 
+      }
 
+      .header {
 
+        .van-col {
 
+          height: 22px;
 
+          font-size: 16px;
 
+          color: #0c1935;
 
+          line-height: 22px;
 
+          margin-bottom: 8px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 6 - 6
src/views/userInfo.vue
Vedi File 

@@ -10,14 +10,14 @@
 
   </van-nav-bar>
 
   <div class="page_info">
 
     <div class="info_user">
 
-      <template v-if="source == 'account'">
 
+      <template v-if="type == 'account'">
 
         <van-cell-group>
 
           <van-cell title="账号名称" :value="dataForm.username" />
 
           <van-cell title="手机号码" :value="dataForm.tel" />
 
           <van-cell title="账号密码" :value="dataForm.password" />
 
         </van-cell-group>
 
       </template>
 
-      <template v-if="source == 'password'">
 
+      <template v-if="type == 'password'">
 
         <van-form input-align="right" @submit="onSubmit">
 
           <van-cell-group>
 
             <van-field
 
@@ -63,7 +63,7 @@
 
         </van-form>
 
       </template>
 
     </div>
 
-    <template v-if="source == 'account'">
 
+    <template v-if="type == 'account'">
 
       <van-button
 
         style="margin-top: 40px; border-radius: 0"
 
         block
 
@@ -80,7 +80,7 @@
 
 export default {
 
   data() {
 
     return {
 
-      source: "",
 
+      type: "",
 
       title: "",
 
       loading: false,
 
       dataForm: {
 
@@ -93,9 +93,9 @@ export default {
 
     };
 
   },
 
   created() {
 
-    this.source = this.$route.query.source;
 
+    this.type = this.$route.query.type;
 
     this.title =
 
-      (this.source && (this.source == "account" ? "账号中心" : "更改密码")) ||
 
+      (this.type && (this.type == "account" ? "账号中心" : "更改密码")) ||
 
       "";
 
     this.dataForm.username = this.$store.state.username;
 
     this.dataForm.tel = this.$store.state.userMobile;