홈 탐색 도움말
가입하기 로그인
lmc
/
witcarbon-app
1
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

Merge branch 'master' of http://git.ringzle.com:3000/lmc/witcarbon-app

wh 1 년 전
부모
6ccc77d951 4e0336ab3d
커밋
c975f67c49
38개의 변경된 파일과 3722개의 추가작업 그리고 2650개의 파일을 삭제
분할 보기 변경상태 보기
  1. 5 0
      public/index.html
  2. 46 18
      src/App.vue
  3. 26 0
      src/assets/16pt／首页备份 (2).svg
  4. 31 0
      src/assets/checked-active.svg
  5. 24 0
      src/assets/close.svg
  6. 27 0
      src/assets/unchecked.svg
  7. 100 77
      src/router/index.js
  8. 47 11
      src/utils/api.js
  9. 20 0
      src/utils/index.js
  10. 6 6
      src/utils/request.js
  11. 2 1
      src/utils/vant.config.js
  12. 746 0
      src/views/bill/detail.vue
  13. 114 0
      src/views/bill/fee.vue
  14. 3 0
      src/views/bill/index.vue
  15. 383 0
      src/views/bill/list.vue
  16. 209 0
      src/views/bill/pay.vue
  17. 3 0
      src/views/device/index.vue
  18. 51 35
      src/views/deviceAlarm.vue
  19. 230 145
      src/views/home.vue
  20. 0 356
      src/views/lackFee.vue
  21. 1 1
      src/views/login.vue
  22. 399 0
      src/views/pay/fee.vue
  23. 3 0
      src/views/pay/index.vue
  24. 359 0
      src/views/pay/record.vue
  25. 0 321
      src/views/reduceRecord.vue
  26. 0 1
      src/views/remoteControl.vue
  27. 0 321
      src/views/rentBill.vue
  28. 0 518
      src/views/rentBillDetail.vue
  29. 337 0
      src/views/repair/create.vue
  30. 114 118
      src/views/repairDetail.vue
  31. 3 0
      src/views/repair/index.vue
  32. 121 85
      src/views/repairList.vue
  33. 0 346
      src/views/repairOnline.vue
  34. 1 4
      src/views/checkClock.vue
  35. 3 0
      src/views/review/index.vue
  36. 281 0
      src/views/review/list.vue
  37. 0 266
      src/views/reviewCheck.vue
  38. 27 20
      src/views/userInfo.vue

+ 5 - 0
public/index.html
파일 보기 

@@ -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>

+ 46 - 18
src/App.vue
파일 보기 

@@ -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 });
 
@@ -91,23 +112,30 @@ body {
 
   letter-spacing: 2px;
 
   font-weight: 600;
 
 }
 
+.van-submit-bar__button {
 
+  width: unset !important;
 
+  padding: 0 12px !important;
 
+  --van-submit-bar-button-height: 28px;
 
+  --van-font-weight-bold: 500;
 
+  .van-button__text {
 
+    font-size: 14px;
 
+  }
 
+}
 
 .save_btn {
 
-  position: fixed;
 
-  bottom: 0;
 
-  width: 100%;
 
-  padding: 8px 16px;
 
   background-color: #ffffff;
 
-  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.2);
 
-  .van-button {
 
-    width: calc(100% - 32px);
 
-  }
 
+  --van-submit-bar-height: 60px;
 
 }
 
 .van-tab--active,
 
 .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;
 
   --van-gray-6: #999999;
 
   --van-gray-7: #666666;

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 26 - 0
src/assets/16pt／首页备份 (2).svg


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 31 - 0
src/assets/checked-active.svg


+ 24 - 0
src/assets/close.svg
파일 보기 

@@ -0,0 +1,24 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
+    <title>矩形</title>
 
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 
+        <g id="租户-线上报修" transform="translate(-16.000000, -54.000000)">
 
+            <rect fill="#F8F8F8" x="0" y="0" width="375" height="812"></rect>
 
+            <g id="标题" transform="translate(0.000000, 44.000000)">
 
+                <g id="矩形" fill="#FFFFFF">
 
+                    <rect x="0" y="0" width="375" height="44"></rect>
 
+                </g>
 
+                <g id="编组" transform="translate(16.000000, 10.000000)" stroke="#666666" stroke-linecap="round">
 
+                    <g>
 
+                        <line x1="5.5" y1="4.5" x2="18.6066017" y2="19.5934668" id="路径-8"></line>
 
+                        <polyline id="路径-8备份" points="18.6066017 4.5 11.8251139 12.3095118 5.5 19.5934668"></polyline>
 
+                    </g>
 
+                </g>
 
+                <g id="返回" transform="translate(16.000000, 10.000000)" stroke="#666666" stroke-linecap="round">
 
+                    <line x1="5.5" y1="4.5" x2="18.6066017" y2="19.5934668" id="路径-8"></line>
 
+                    <polyline id="路径-8备份" points="18.6066017 4.5 11.8251139 12.3095118 5.5 19.5934668"></polyline>
 
+                </g>
 
+            </g>
 
+        </g>
 
+    </g>
 
+</svg>

+ 27 - 0
src/assets/unchecked.svg
파일 보기 

@@ -0,0 +1,27 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
+    <title>矩形</title>
 
+    <defs>
 
+        <rect id="path-1" x="16" y="350" width="343" height="112" rx="4"></rect>
 
+        <filter x="-2.6%" y="-8.0%" width="105.2%" height="116.1%" filterUnits="objectBoundingBox" id="filter-2">
 
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
 
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
 
+            <feColorMatrix values="0 0 0 0 0.2   0 0 0 0 0.2   0 0 0 0 0.2  0 0 0 0.0801020269 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
 
+        </filter>
 
+    </defs>
 
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 
+        <g id="租户-账单待缴" transform="translate(-24.000000, -365.000000)">
 
+            <rect fill="#F8F8F8" x="0" y="0" width="375" height="812"></rect>
 
+            <g id="矩形备份">
 
+                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
 
+                <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
 
+            </g>
 
+            <g id="椭圆形" transform="translate(24.000000, 365.000000)" fill="#E6E7EA" stroke="#D8D8D8">
 
+                <circle cx="12" cy="12" r="7.5"></circle>
 
+            </g>
 
+            <g id="返回备份" transform="translate(24.000000, 365.000000)" fill="#E6E7EA" stroke="#D8D8D8">
 
+                <circle id="椭圆形" cx="12" cy="12" r="7.5"></circle>
 
+            </g>
 
+        </g>
 
+    </g>
 
+</svg>

+ 100 - 77
src/router/index.js
파일 보기 

@@ -30,44 +30,114 @@ const routes = [
 
     },
 
   },
 
   {
 
-    name: 'repairOnline',
 
-    path: '/repairOnline',
 
-    component: () => import('../views/repairOnline'),
 
-    meta: {
 
-      title: '线上报修',
 
-    },
 
+    path: '/repair',
 
+    component: () => import('../views/repair/index.vue'),
 
+    children: [
 
+      {
 
+        name: 'repairOnline',
 
+        path: 'create',
 
+        component: () => import('../views/repair/create.vue'),
 
+        meta: {
 
+          title: '线上报修',
 
+        },
 
+      },
 
+      {
 
+        name: 'repairList',
 
+        path: 'list',
 
+        component: () => import('../views/repair/list.vue'),
 
+        meta: {
 
+          title: '工单待办',
 
+        },
 
+      },
 
+      {
 
+        name: 'repairDetail',
 
+        path: 'detail',
 
+        component: () => import('../views/repair/detail.vue'),
 
+        meta: {
 
+          title: '工单详情',
 
+        },
 
+      },
 
+    ]
 
   },
 
   {
 
-    name: 'reviewCheck',
 
-    path: '/reviewCheck',
 
-    component: () => import('../views/reviewCheck'),
 
-    meta: {
 
-      title: '巡检记录',
 
-    },
 
+    path: '/review',
 
+    component: () => import('../views/review/index.vue'),
 
+    children: [
 
+      {
 
+        name: 'reviewRecord',
 
+        path: 'list',
 
+        component: () => import('../views/review/list.vue'),
 
+        meta: {
 
+          title: '巡检记录',
 
+        },
 
+      },
 
+      {
 
+        name: 'repairClock',
 
+        path: 'create',
 
+        component: () => import('../views/review/create.vue'),
 
+        meta: {
 
+          title: '巡检打卡',
 
+        },
 
+      },
 
+    ]
 
   },
 
   {
 
-    name: 'reduceRecord',
 
-    path: '/reduceRecord',
 
-    component: () => import('../views/reduceRecord'),
 
-    meta: {
 
-      title: '扣缴记录',
 
-    },
 
+    path: '/bill',
 
+    component: () => import('../views/bill/index.vue'),
 
+    children: [
 
+      {
 
+        name: 'billList',
 
+        path: 'list',
 
+        component: () => import('../views/bill/list.vue'),
 
+        meta: {
 
+          title: '租户账单',
 
+        },
 
+      },
 
+      {
 
+        name: 'billDetail',
 
+        path: 'detail',
 
+        component: () => import('../views/bill/detail.vue'),
 
+        meta: {
 
+          title: '账单明细',
 
+        },
 
+      },
 
+    ]
 
   },
 
   {
 
-    name: 'deviceAlarm',
 
-    path: '/deviceAlarm',
 
-    component: () => import('../views/deviceAlarm'),
 
-    meta: {
 
-      title: '设备异常',
 
-    },
 
+    path: '/pay',
 
+    component: () => import('../views/pay/index.vue'),
 
+    children: [
 
+      {
 
+        name: 'payRecord',
 
+        path: 'record',
 
+        component: () => import('../views/pay/record.vue'),
 
+        meta: {
 
+          title: '扣缴记录',
 
+        },
 
+      },
 
+      {
 
+        name: 'payFee',
 
+        path: 'fee',
 
+        component: () => import('../views/pay/fee.vue'),
 
+        meta: {
 
+          title: '欠费待收',
 
+        },
 
+      },
 
+    ]
 
   },
 
   {
 
-    name: 'lackFee',
 
-    path: '/lackFee',
 
-    component: () => import('../views/lackFee'),
 
-    meta: {
 
-      title: '欠费待收',
 
-    },
 
+    path: '/device',
 
+    component: () => import('../views/device/index.vue'),
 
+    children: [
 
+      {
 
+        name: 'deviceAlarm',
 
+        path: 'list',
 
+        component: () => import('../views/device/list.vue'),
 
+        meta: {
 
+          title: '设备异常',
 
+        },
 
+      },
 
+    ]
 
   },
 
   {
 
     name: 'remoteControl',
 
@@ -77,53 +147,6 @@ const routes = [
 
       title: '远程管控',
 
     },
 
   },
 
-  {
 
-    name: 'repairList',
 
-    path: '/repairList',
 
-    component: () => import('../views/repairList'),
 
-    meta: {
 
-      title: '工单待办',
 
-    },
 
-  },
 
-  {
 
-    name: 'repairDetail',
 
-    path: '/repairDetail',
 
-    component: () => import('../views/repairDetail'),
 
-    meta: {
 
-      title: '工单详情',
 
-    },
 
-  },
 
-  {
 
-    name: 'rentBill',
 
-    path: '/rentBill',
 
-    component: () => import('../views/rentBill'),
 
-    meta: {
 
-      title: '租户账单',
 
-    },
 
-  }
 
-  ,
 
-  {
 
-    name: 'rentBillDetail',
 
-    path: '/rentBillDetail',
 
-    component: () => import('../views/rentBillDetail'),
 
-    meta: {
 
-      title: '账单明细',
 
-    },
 
-  }
 
-  ,
 
-  {
 
-    name: 'checkClock',
 
-    path: '/checkClock',
 
-    component: () => import('../views/checkClock'),
 
-    meta: {
 
-      title: '巡检打卡',
 
-    },
 
-  }
 
-  // {
 
-  //   path: '/alllist',
 
-  //   name: '全部人员列表',
 
-  //   component: () => import(/* webpackChunkName: "about" */ '../views/alllist.vue')
 
-  // },
 
 ]
 
 
 const router = createRouter({

+ 47 - 11
src/utils/api.js
파일 보기 

@@ -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,17 +45,44 @@ 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 }),
 
+
 
     //空调下发指令
 
-    setControl:(params) => service.post("/app/airconditioner/command", params),
 
+    setControl: (params) => service.post("/app/airconditioner/command", params),
 
+
 
     //继电器下发指令
 
-    setControlElec:(params) => service.post("/app/relay/control/command", params),
 
+    setControlElec: (params) => service.post("/app/relay/control/command", 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),
 
+
 
+    //获取缴费账户
 
+    getTenantAccount: (params) => service.get(`/app/accountinfo/detail/${params}`),
 
+
 
+    //预存缴费
 
+    tenantPay: (params) => service.post('/app/accountinfo/pay', params),
 
 
+    //立即支付
 
+    billPay: (params) => service.post('/app/billinfo/billPay', params),
 
 
+    //巡检记录
 
+    reviewCheckList: (params) => service.post("/app/circuitrecord", params),
 
 }

+ 20 - 0
src/utils/index.js
파일 보기 

@@ -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 []
 
+    }
 
+}

+ 6 - 6
src/utils/request.js
파일 보기 

@@ -1,3 +1,4 @@
 
+import router from '@/router'
 
 import axios from "axios";
 
 import { Notify } from "vant";
 
 import axiosRetry from "axios-retry";
 
@@ -8,8 +9,8 @@ export const getBaseURI = () => {
 
 
   //    开发环境
 
   if (env === "dev" || env == "development") {
 
-    // return 'http://192.168.1.51:9013/witcarbon-app';
 
-    return "http://gpu.ringzle.com:8082/witcarbon-app";
 
+    return 'http://192.168.1.51: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);
 
   }

+ 2 - 1
src/utils/vant.config.js
파일 보기 

@@ -6,7 +6,7 @@ import {
 
     SwipeCell, Badge, Circle, Collapse, CollapseItem, CountDown, Divider, Empty, ImagePreview, List, NoticeBar,
 
     Popover, Progress, Skeleton, Step, Steps, Sticky, Swipe, SwipeItem, Tag, ActionBar, ActionBarIcon,
 
     ActionBarButton, Grid, GridItem, IndexBar, IndexAnchor, NavBar, Pagination, Sidebar, SidebarItem, Tab,
 
-    Tabs, Tabbar, TabbarItem, TreeSelect, NumberKeyboard
 
+    Tabs, Tabbar, TabbarItem, TreeSelect, NumberKeyboard,SubmitBar 
 } from 'vant';
 
 export function vant(app) {
 
     app.use(Button);
 
@@ -78,4 +78,5 @@ export function vant(app) {
 
     app.use(TabbarItem);
 
     app.use(TreeSelect);
 
     app.use(NumberKeyboard);
 
+    app.use(SubmitBar);
 
 }

+ 746 - 0
src/views/bill/detail.vue
파일 보기 

@@ -0,0 +1,746 @@
 
+<template>
 
+  <van-nav-bar :title="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">
 
+      <div class="search_pannel">
 
+        <van-tabs
 
+          v-model:active="activeTab"
 
+          title-active-color="#2E69EB"
 
+          title-inactive-color="#0C1935"
 
+          @change="handleChangeTab"
 
+        >
 
+          <van-tab name="bill" 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', dataForm.costType)"
 
+                :title="costTypeTitle"
 
+                :options="payTypeList"
 
+              />
 
+              <van-dropdown-item
 
+                v-model="dataForm.status"
 
+                @change="handelChange('status', dataForm.status)"
 
+                :title="statusTitle"
 
+                :options="payStatusList"
 
+              />
 
+            </van-dropdown-menu>
 
+          </van-tab>
 
+          <van-tab name="record" title="扣缴记录">
 
+            <van-dropdown-menu active-color="#2E69EB">
 
+              <van-dropdown-item
 
+                v-model="dataForm.reduceDate"
 
+                @change="handelChange('reduceDate', dataForm.reduceDate)"
 
+                :title="reduceDateTitle"
 
+                :options="reduceDateList"
 
+              />
 
+              <van-dropdown-item
 
+                v-model="dataForm.type"
 
+                @change="handelChange('type', dataForm.type)"
 
+                :title="typeTitle"
 
+                :options="payTypeList"
 
+              />
 
+              <van-dropdown-item
 
+                v-model="dataForm.operator"
 
+                @change="handelChange('operator', dataForm.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 == 'bill'">
 
+        <div class="info_list" key="bill">
 
+          <van-list
 
+            v-model:loading="loading"
 
+            :finished="finished"
 
+            :error="error"
 
+            error-text="请求失败，点击重新加载"
 
+            finished-text="没有更多了"
 
+            @load="onLoad"
 
+          >
 
+            <van-checkbox-group
 
+              ref="checkboxGroup"
 
+              v-model="checkedCollapse"
 
+              style="width: 100%"
 
+            >
 
+              <div
 
+                v-for="item in dataList"
 
+                :key="item.id"
 
+                class="list_item"
 
+                style="flex-direction: row; align-items: baseline"
 
+              >
 
+                <van-checkbox
 
+                  :name="item.id"
 
+                  :disabled="item.status == 1"
 
+                  style="margin-left: 16px"
 
+                ></van-checkbox>
 
+                <van-collapse
 
+                  v-model="activeCollapse"
 
+                  :border="false"
 
+                  style="flex: 1"
 
+                  accordion
 
+                >
 
+                  <van-collapse-item :name="item.id">
 
+                    <template #title>
 
+                      <van-row class="collapse_title">
 
+                        <van-col class="label"
 
+                          >{{
 
+                            `${
 
+                              dict_filter(item.costType, "payTypeList")[
 
+                                "dictLabel"
 
+                              ]
 
+                            }`
 
+                          }}：</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">
 
+                      <van-row
 
+                        class="info_item"
 
+                        v-for="ele in item.billLists"
 
+                        :key="ele.id"
 
+                      >
 
+                        <template
 
+                          v-if="
 
+                            item.costType == 'Water' || item.costType == 'Elec'
 
+                          "
 
+                        >
 
+                          <van-col
 
+                            >{{ ele.equipName }}费用：￥{{
 
+                              (parseInt(ele.amount * 100) / 100).toFixed(2)
 
+                            }}</van-col
 
+                          >
 
+                        </template>
 
+                        <template v-if="item.costType == 'PropertyFee'">
 
+                          <van-col
 
+                            >{{
 
+                              `${
 
+                                dict_filter(ele.costType, "propertyTypeList")[
 
+                                  "dictLabel"
 
+                                ]
 
+                              }`
 
+                            }}：￥{{
 
+                              (parseInt(ele.amount * 100) / 100).toFixed(2)
 
+                            }}</van-col
 
+                          >
 
+                        </template>
 
+                      </van-row>
 
+                    </div>
 
+                  </van-collapse-item>
 
+                </van-collapse>
 
+              </div>
 
+            </van-checkbox-group>
 
+          </van-list>
 
+        </div>
 
+      </template>
 
+      <template v-if="activeTab == 'record'">
 
+        <div class="info_list" key="record">
 
+          <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"
 
+            >
 
+              <van-row
 
+                align="center"
 
+                class="reduce_type"
 
+                :style="{
 
+                  'background-color': `${
 
+                    dict_filter(item.type, 'payTypeList')['color']
 
+                  }`,
 
+                }"
 
+              >
 
+                <van-col>{{
 
+                  `${dict_filter(item.type, "payTypeList")["dictLabel"]}`
 
+                }}</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>
 
+  </van-pull-refresh>
 
+  <template v-if="role == 'admin'">
 
+    <van-tabbar v-model="activeTabBar" 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>
 
+  <template v-if="role == 'Tenant' && activeTab == 'record'">
 
+    <van-submit-bar class="save_btn">
 
+      <template #button>
 
+        <van-button block type="primary" @click="handleClick('fee')">
 
+          预存充值
 
+        </van-button>
 
+      </template>
 
+    </van-submit-bar>
 
+  </template>
 
+  <template
 
+    v-if="role == 'Tenant' && activeTab == 'bill' && checkedCollapse.length"
 
+  >
 
+    <van-submit-bar
 
+      :price="parseInt(amount * 100)"
 
+      button-text="立即支付"
 
+      button-color="#2E69EB"
 
+      @submit="handleClick('bill')"
 
+    >
 
+      <van-checkbox v-model="checkedAll" :disabled="disabledAll"
 
+        >全选</van-checkbox
 
+      >
 
+    </van-submit-bar>
 
+  </template>
 
+  <van-popup
 
+    v-model:show="showPayPopup"
 
+    position="bottom"
 
+    :safe-area-inset-bottom="true"
 
+    :overlay-style="{ background: 'unset' }"
 
+    class="popup_info"
 
+  >
 
+    <component
 
+      :is="currComponent"
 
+      :pay-info="payInfo"
 
+      @close="close"
 
+      v-if="showPayPopup"
 
+    ></component>
 
+  </van-popup>
 
+</template>
 
+<script>
 
+import Api from "@/utils/api";
 
+import { isEmpty, getDictDataList } from "@/utils/index";
 
+import VCountUp from "../CountUp";
 
+import payFee from "./fee.vue";
 
+import payBill from "./pay.vue";
 
+export default {
 
+  components: {
 
+    "v-count-up": VCountUp,
 
+    "pay-fee": payFee,
 
+    "pay-bill": payBill,
 
+  },
 
+  data() {
 
+    return {
 
+      showPayPopup: false,
 
+      payInfo: {},
 
+      currComponent: "",
 
+      role: "",
 
+      title: "",
 
+      disabledAll: false,
 
+      showPopup: false,
 
+      popupTitle: "",
 
+      flag: false,
 
+      checkedAll: false,
 
+      checkedCollapse: [],
 
+      amount: 0,
 
+      activeTab: "",
 
+      activeTabBar: 0,
 
+      activeCollapse: "",
 
+      costCycleTitle: "计费周期",
 
+      costTypeTitle: "缴费类型",
 
+      statusTitle: "支付状态",
 
+      reduceDateTitle: "扣缴时间",
 
+      typeTitle: "扣缴类型",
 
+      operatorTitle: "操作人",
 
+      costCycleList: [],
 
+      payStatusList: [],
 
+      reduceDateList: [],
 
+      payTypeList: [],
 
+      operatorList: [],
 
+      propertyList: [],
 
+      dataForm: {
 
+        tenantId: "",
 
+        costCycle: "2022-08",
 
+        costType: "",
 
+        status: "",
 
+        type: "",
 
+        reduceDate: "",
 
+        operator: "",
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
+      dataList: [],
 
+      loading: false,
 
+      refreshing: false,
 
+      finished: false,
 
+    };
 
+  },
 
+  watch: {
 
+    checkedCollapse: {
 
+      handler(newval, oldval) {
 
+        if (newval.length == this.dataList.length) {
 
+          if (this.dataList.length) {
 
+            this.checkedAll = true;
 
+          }
 
+        } else {
 
+          this.checkedAll = false;
 
+        }
 
+        this.amount = 0;
 
+        this.checkedCollapse.forEach((item) => {
 
+          this.amount += this.dataList.find((ele) => ele.id == item).amount;
 
+        });
 
+      },
 
+      deep: true,
 
+    },
 
+    checkedAll: {
 
+      handler(newval, oldval) {
 
+        if (newval) {
 
+          this.checkedCollapse = [];
 
+          this.dataList.forEach((item) => {
 
+            this.checkedCollapse.push(item.id);
 
+          });
 
+        } else {
 
+          if (this.checkedCollapse.length == this.dataList.length) {
 
+            this.checkedCollapse = [];
 
+          }
 
+        }
 
+      },
 
+      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.dataForm.costCycle;
 
+    this.activeTab = this.$route.query.activeTab;
 
+    this.getPayStatusList();
 
+    this.getPayTypeList();
 
+    this.getPropertyTypeList();
 
+  },
 
+  methods: {
 
+    getPayStatusList() {
 
+      this.payStatusList = getDictDataList("PayStatus");
 
+      this.payStatusList.forEach((item) => {
 
+        item.text = item.dictLabel;
 
+        item.value = item.dictValue;
 
+      });
 
+    },
 
+    getPayTypeList() {
 
+      this.payTypeList = getDictDataList("PayType");
 
+      this.payTypeList.forEach((item) => {
 
+        item.text = item.dictLabel;
 
+        item.value = item.dictValue;
 
+        if (item.value == "PreStorage") {
 
+          item.color = "#30D3A2";
 
+        }
 
+        if (item.value == "Subsidy") {
 
+          item.color = "#09C700";
 
+        }
 
+        if (item.value == "Refund") {
 
+          item.color = "#FA5555";
 
+        }
 
+        if (item.value == "Water") {
 
+          item.color = "#FF9C27";
 
+        }
 
+        if (item.value == "Elec") {
 
+          item.color = "#FF9C27";
 
+        }
 
+        if (item.value == "PropertyFee") {
 
+          item.color = "#FF9C27";
 
+        }
 
+        if (item.value == "CancelSubsidy") {
 
+          item.color = "#ED3A25";
 
+        }
 
+      });
 
+    },
 
+    getPropertyTypeList() {
 
+      this.propertyTypeList = getDictDataList("PropertyType");
 
+    },
 
+    dict_filter(val, list) {
 
+      if (isEmpty(val)) {
 
+        return "";
 
+      }
 
+      return this[list].find((item) => item.dictValue == val);
 
+    },
 
+    onLoad() {
 
+      setTimeout(async () => {
 
+        if (this.refreshing) {
 
+          this.dataList = [];
 
+          this.refreshing = false;
 
+        }
 
+        await this.getDataList();
 
+        this.dataForm.page++; // 分页数加一
 
+      }, 100);
 
+    },
 
+    onRefresh() {
 
+      // 清空列表数据
 
+      this.checkedAll = false;
 
+      this.checkedCollapse = [];
 
+      this.activeCollapse = "";
 
+      this.amount = 0;
 
+      this.finished = false;
 
+      this.dataList = [];
 
+      // 重新加载数据
 
+      // 将 loading 设置为 true，表示处于加载状态
 
+      this.loading = true;
 
+      this.dataForm.page = 1; // 分页数赋值为1
 
+      this.onLoad();
 
+    },
 
+    // 获取列表数据方法
 
+    getDataList() {
 
+      if (this.activeTab == "bill") {
 
+        this.getRentBillList();
 
+      }
 
+      if (this.activeTab == "record") {
 
+        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; // 停止加载
 
+            }
 
+            res.data.forEach((item, index) => {
 
+              item.id = "index_" + index;
 
+            });
 
+            // 若数据条数不等于0
 
+            this.dataList.push(...res.data); // 将数据放入list中
 
+            this.loading = false; // 加载状态结束
 
+            this.disabledAll = this.dataList.every((item) => item.status == 1);
 
+            // 如果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(type, val) {
 
+      if (type == "costType") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.costTypeTitle = this.payTypeList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      if (type == "type") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.typeTitle = this.payTypeList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      if (type == "status") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.typeTitle = this.payStatusList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      this.onRefresh();
 
+    },
 
+    handleChangeTab() {
 
+      this.onRefresh();
 
+    },
 
+    handleChangeTabBar(val) {
 
+      let popupTitle = "";
 
+      let payType = "";
 
+      if (val == 1) {
 
+        popupTitle = "预存";
 
+        payType = "PreStorage";
 
+      }
 
+      if (val == 2) {
 
+        popupTitle = "补助";
 
+        payType = "Subsidy";
 
+      }
 
+      if (val == 3) {
 
+        popupTitle = "退费";
 
+        payType = "Refund";
 
+      }
 
+      this.currComponent = "pay-fee";
 
+      this.payInfo = {
 
+        payType: payType,
 
+        tenantId: this.dataForm.tenantId,
 
+        popupTitle: popupTitle,
 
+      };
 
+      this.showPayPopup = true;
 
+    },
 
+    handleClick(type) {
 
+      if (type == "fee") {
 
+        this.currComponent = "pay-fee";
 
+        this.payInfo = {
 
+          payType: "PreStorage",
 
+          tenantId: this.dataForm.tenantId,
 
+          popupTitle: "预存",
 
+        };
 
+      }
 
+      if (type == "bill") {
 
+        let billIds = [];
 
+        this.checkedCollapse.forEach((item) => {
 
+          let tempBillList = [];
 
+          tempBillList = this.dataList.find((ele) => ele.id == item).billLists;
 
+          tempBillList.forEach((bill) => {
 
+            billIds.push(bill.id);
 
+          });
 
+        });
 
+        this.currComponent = "pay-bill";
 
+        this.payInfo = {
 
+          tenantId: this.dataForm.tenantId,
 
+          amount: this.amount,
 
+          billIds: billIds,
 
+        };
 
+      }
 
+      this.showPayPopup = true;
 
+    },
 
+    close() {
 
+      this.payInfo = {};
 
+      this.showPayPopup = false;
 
+    },
 
+    backPath() {
 
+      this.$router.back();
 
+    },
 
+  },
 
+};
 
+</script>
 
+<style lang="scss" scoped>
 
+.page_info {
 
+  height: 100%;
 
+  .search_pannel {
 
+    background: #ffffff;
 
+    /deep/ {
 
+      .van-tabs__line {
 
+        --van-tabs-bottom-bar-color: #2e69eb;
 
+      }
 
+      .van-dropdown-menu__bar {
 
+        --van-gray-4: #999999;
 
+        --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 {
 
+    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: 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;
 
+          }
 
+        }
 
+      }
 
+      .collapse_title {
 
+        .label {
 
+          font-size: 16px;
 
+          font-weight: 500;
 
+          color: #666666;
 
+        }
 
+      }
 
+      .collapse_info {
 
+        .info_item {
 
+          text-align: left;
 
+          margin-bottom: 2px;
 
+          .van-col {
 
+            height: 20px;
 
+            font-size: 14px;
 
+            color: #9da0ac;
 
+            line-height: 20px;
 
+          }
 
+          &:nth-last-child(1) {
 
+            margin: 0;
 
+          }
 
+        }
 
+      }
 
+      /deep/ {
 
+        .van-cell:after {
 
+          border-bottom: 0;
 
+        }
 
+        .van-collapse-item__content {
 
+          padding: 0 16px;
 
+        }
 
+      }
 
+    }
 
+    .reduce_record {
 
+      .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 {
 
+          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>
 
+<style lang="scss">
 
+.tab_bar {
 
+  /deep/ {
 
+    .van-tabbar-item {
 
+      color: #2e69eb;
 
+      font-size: 14px;
 
+      font-weight: 600;
 
+    }
 
+  }
 
+}
 
+.popup_info {
 
+  height: auto;
 
+  box-shadow: 0px -10px 20px 0px rgba(27, 32, 38, 0.1);
 
+  border-radius: 20px 20px 0px 0px;
 
+}
 
+</style>

+ 114 - 0
src/views/bill/fee.vue
파일 보기 

@@ -0,0 +1,114 @@
 
+<template>
 
+  <van-row align="center" justify="center" class="popup_title">
 
+    <van-col>{{ payInfo.popupTitle }}</van-col>
 
+  </van-row>
 
+  <van-divider
 
+    style="border-color: #d8d8d8; border-bottom-width: 1px; margin: 0"
 
+  />
 
+  <van-form
 
+    ref="dataForm"
 
+    input-align="left"
 
+    error-message-align="left"
 
+    @submit="onSubmit"
 
+    style="background: #f6f6f6"
 
+  >
 
+    <van-cell-group :border="false">
 
+      <van-field
 
+        v-model="dataForm.amount"
 
+        type="number"
 
+        label="￥"
 
+        clearable
 
+        placeholder="请输入金额"
 
+        class="input_field"
 
+      />
 
+    </van-cell-group>
 
+    <div style="margin-top: 12px; padding: 8px 16px" class="save_btn">
 
+      <van-button
 
+        block
 
+        type="primary"
 
+        :disabled="!parseFloat(dataForm.amount)"
 
+        native-type="submit"
 
+      >
 
+        立即缴费
 
+      </van-button>
 
+    </div>
 
+  </van-form>
 
+</template>
 
+<script>
 
+import Api from "@/utils/api";
 
+export default {
 
+  props: {
 
+    payInfo: {
 
+      type: Object,
 
+      default: function () {
 
+        return {};
 
+      },
 
+    },
 
+  },
 
+  data() {
 
+    return {
 
+      dataForm: {
 
+        id: "",
 
+        tenantId: "",
 
+        amount: "",
 
+        type: "",
 
+      },
 
+    };
 
+  },
 
+
 
+  mounted() {
 
+    this.dataForm.tenantId = this.dataForm.tenantId;
 
+    this.dataForm.type = this.payInfo.type;
 
+    this.getTenantAccount();
 
+    this.$nextTick(() => {
 
+      this.$refs.dataForm.resetValidation();
 
+    });
 
+  },
 
+  methods: {
 
+    getTenantAccount() {
 
+      Api.getTenantAccount(this.dataForm.tenantId).then((res) => {
 
+        if (res.code == 0) {
 
+          this.dataForm.id = res.data.id;
 
+        }
 
+      });
 
+    },
 
+    onSubmit() {
 
+      this.$toast.loading({
 
+        message: "正在缴费...",
 
+        forbidClick: true,
 
+      });
 
+      Api.tenantPay(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          this.$toast.success("缴费成功");
 
+        } else {
 
+          this.$toast.fail("缴费失败");
 
+        }
 
+      });
 
+    },
 
+  },
 
+};
 
+</script>
 
+<style lang="scss" scoped>
 
+.popup_title {
 
+  padding: 12px 0;
 
+  font-weight: 500;
 
+  background-color: #ffffff;
 
+  .van-col {
 
+    font-size: 18px;
 
+  }
 
+}
 
+.input_field {
 
+  line-height: 68px;
 
+  /deep/ {
 
+    .van-field__label {
 
+      width: unset;
 
+      color: #0c1935;
 
+      font-size: 24px;
 
+      font-weight: 600;
 
+    }
 
+    .van-field__value {
 
+      font-size: 20px;
 
+    }
 
+  }
 
+}
 
+</style>

+ 3 - 0
src/views/bill/index.vue
파일 보기 

@@ -0,0 +1,3 @@
 
+<template >
 
+  <router-view></router-view>
 
+</template>

+ 383 - 0
src/views/bill/list.vue
파일 보기 

@@ -0,0 +1,383 @@
 
+<template>
 
+  <van-nav-bar
 
+    :border="false"
 
+    safe-area-inset-top
 
+    style="background-color: #5c8fff"
 
+  />
 
+  <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', dataForm.cycle)"
 
+            :title="cycleTitle"
 
+            :options="cycleList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="dataForm.status"
 
+            @change="handelChange('status', dataForm.status)"
 
+            :title="statusTitle"
 
+            :options="isFinishedList"
 
+          />
 
+        </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 dataList"
 
+            :key="item.id"
 
+            class="list_item"
 
+            @click="toPath('/bill/detail', item)"
 
+          >
 
+            <van-row
 
+              align="center"
 
+              class="reduce_type"
 
+              :style="{
 
+                'background-color': `${
 
+                  dict_filter(item.status, 'isFinishedList')['color']
 
+                }`,
 
+              }"
 
+            >
 
+              <van-col>{{
 
+                `${dict_filter(item.status, "isFinishedList")["dictLabel"]}`
 
+              }}</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
 
+              >
 
+            </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"
 
+              @click.stop="handleClick([parseInt(item.id)])"
 
+            >
 
+              <van-button plain type="primary" size="small">催费</van-button>
 
+            </div>
 
+          </div>
 
+        </van-list>
 
+      </div>
 
+    </div>
 
+  </van-pull-refresh>
 
+</template>
 
+<script>
 
+import Api from "@/utils/api";
 
+import { isEmpty, getDictDataList } from "@/utils/index";
 
+import VCountUp from "../CountUp";
 
+export default {
 
+  components: {
 
+    "v-count-up": VCountUp,
 
+  },
 
+  data() {
 
+    return {
 
+      name: "电商园四期-B座",
 
+      cycleTitle: "计费周期",
 
+      statusTitle: "是否结清",
 
+      isFinishedList: [],
 
+      cycleList: [],
 
+      dataForm: {
 
+        cycle: "2022-08",
 
+        status: "",
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
+      dataList: [],
 
+      loading: false,
 
+      refreshing: false,
 
+      finished: false,
 
+    };
 
+  },
 
+  created() {
 
+    this.getIsFinishedList();
 
+  },
 
+  methods: {
 
+    getIsFinishedList() {
 
+      this.isFinishedList = getDictDataList("isFinished");
 
+      this.isFinishedList.forEach((item) => {
 
+        item.text = item.dictLabel;
 
+        item.value = item.dictValue;
 
+        if (item.dictValue == 1) {
 
+          item.color = "#09C700";
 
+        } else {
 
+          item.color = "#FA5555";
 
+        }
 
+      });
 
+    },
 
+    dict_filter(val, list) {
 
+      if (isEmpty(val)) {
 
+        return {};
 
+      }
 
+      return this[list].find((item) => item.dictValue == val);
 
+    },
 
+    onLoad() {
 
+      setTimeout(async () => {
 
+        if (this.refreshing) {
 
+          this.dataList = [];
 
+          this.refreshing = false;
 
+        }
 
+        await this.getDataList();
 
+        this.dataForm.page++; // 分页数加一
 
+      }, 100);
 
+    },
 
+    onRefresh() {
 
+      // 清空列表数据
 
+      this.finished = false;
 
+      // 重新加载数据
 
+      this.dataList = [];
 
+      // 将 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) {
 
+      this.$toast.loading({
 
+        message: "正在催费...",
 
+        forbidClick: true,
 
+      });
 
+      Api.lackFeeInfoPay(ids).then((res) => {
 
+        if (res.code == 0) {
 
+          this.$toast.success("催费成功");
 
+          this.onRefresh();
 
+        } else {
 
+          this.$toast.fail("催费失败");
 
+        }
 
+      });
 
+    },
 
+    // change事件可以拿到的是value
 
+    handelChange(type, val) {
 
+      if (type == "cycle") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.cycleTitle = this.cycleList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      if (type == "status") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.statusTitle = this.isFinishedList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      this.onRefresh();
 
+    },
 
+    toPath(path, val) {
 
+      this.$router.push({
 
+        path: path,
 
+        query: {
 
+          tenantId: val.id,
 
+          tenantName: val.name,
 
+          costCycle: val.cycle,
 
+          activeTab: "bill",
 
+        },
 
+      });
 
+    },
 
+    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;
 
+      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 {
 
+        .van-col {
 
+          height: 22px;
 
+          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;
 
+        }
 
+      }
 
+      .list_btn {
 
+        position: absolute;
 
+        bottom: 15px;
 
+        right: 12px;
 
+        .van-button {
 
+          border-width: 1px;
 
+          &:nth-child(2) {
 
+            margin: 0 12px;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 209 - 0
src/views/bill/pay.vue
파일 보기 

@@ -0,0 +1,209 @@
 
+<template>
 
+  <!-- 立即支付begin -->
 
+  <van-row justify="center" class="popup_title">
 
+    <van-col style="font-size: 18px"> ￥ </van-col>
 
+    <van-col style="font-size: 24px">
 
+      {{ (parseInt(dataForm.amount * 100) / 100).toFixed(2) }}
 
+    </van-col>
 
+  </van-row>
 
+  <van-divider
 
+    style="border-color: #d8d8d8; border-bottom-width: 1px; margin: 0"
 
+  />
 
+  <div class="info_list">
 
+    <van-row
 
+      align="center"
 
+      justify="space-between"
 
+      class="list_item"
 
+      v-for="(item, index) in payTypeList"
 
+      :key="item.value"
 
+      @click="handleClick(item.value)"
 
+      :style="{ display: showPayTypeMore && index > 1 ? 'none' : 'flex' }"
 
+    >
 
+      <van-row align="center">
 
+        <van-icon
 
+          :name="item.icon"
 
+          size="20"
 
+          color="#2e69eb"
 
+          style="margin-right: 8px"
 
+        ></van-icon>
 
+        <van-col>
 
+          {{ item.text }}
 
+          <template v-if="item.value == 'Account'">
 
+            （{{ "可用￥" + (parseInt(amount * 100) / 100).toFixed(2) }}）
 
+          </template>
 
+        </van-col>
 
+      </van-row>
 
+      <template v-if="dataForm.payType == item.value">
 
+        <van-col>
 
+          <van-icon
 
+            name="checked"
 
+            size="20"
 
+            :style="{
 
+              color: dataForm.payType == item.value ? '#2e69eb' : '',
 
+            }"
 
+          ></van-icon>
 
+        </van-col>
 
+      </template>
 
+      <template v-else>
 
+        <van-col>
 
+          <van-icon name="circle" size="20"></van-icon>
 
+        </van-col>
 
+      </template>
 
+    </van-row>
 
+    <template v-if="showPayTypeMore">
 
+      <van-row
 
+        align="center"
 
+        justify="center"
 
+        class="type_more"
 
+        @click="showPayTypeMore = false"
 
+      >
 
+        <van-col>更多支付方式</van-col>
 
+        <van-icon name="arrow-down" color="#999999"></van-icon>
 
+      </van-row>
 
+    </template>
 
+
 
+    <div style="margin-top: 50px">
 
+      <van-button block type="primary"> 确认支付 </van-button>
 
+    </div>
 
+  </div>
 
+  <!-- 立即支付end -->
 
+</template>
 
+<script>
 
+import Api from "@/utils/api";
 
+import { getDictDataList } from "@/utils/index";
 
+export default {
 
+  props: {
 
+    payInfo: {
 
+      type: Object,
 
+      default: function () {
 
+        return {};
 
+      },
 
+    },
 
+  },
 
+  data() {
 
+    return {
 
+      amount: "", //账户余额
 
+      showPayTypeMore: true,
 
+      payTypeList: [],
 
+      dataForm: {
 
+        tenantId: "",
 
+        amount: "",
 
+        billIds: [],
 
+        payType: "",
 
+      },
 
+    };
 
+  },
 
+
 
+  mounted() {
 
+    this.dataForm.tenantId = this.payInfo.tenantId;
 
+    this.dataForm.amount = this.payInfo.amount;
 
+    this.dataForm.billIds = this.payInfo.billIds;
 
+    this.getTenantAccount();
 
+  },
 
+  methods: {
 
+    getTenantAccount() {
 
+      Api.getTenantAccount(this.dataForm.tenantId).then((res) => {
 
+        if (res.code == 0) {
 
+          this.amount = res.data.amount;
 
+        }
 
+        this.getPayTypeList();
 
+      });
 
+    },
 
+    getPayTypeList() {
 
+      this.payTypeList = [];
 
+      let tempArr = [];
 
+      let obj = null;
 
+      tempArr = getDictDataList("PayMode");
 
+      tempArr.forEach((item) => {
 
+        let icon = "";
 
+        if (item.dictValue == "WeChat") {
 
+          icon = "wechat-pay";
 
+        }
 
+        if (item.dictValue == "Alipay") {
 
+          icon = "alipay";
 
+        }
 
+        if (item.dictValue == "UnionPay") {
 
+          icon = "card";
 
+        }
 
+        if (item.dictValue == "Account") {
 
+          icon = "gold-coin";
 
+          if (this.amount) {
 
+            this.payTypeList.unshift({
 
+              text: item.dictLabel,
 
+              value: item.dictValue,
 
+              icon: icon,
 
+            });
 
+          } else {
 
+            obj = {
 
+              text: item.dictLabel,
 
+              value: item.dictValue,
 
+              icon: icon,
 
+              disabled: true,
 
+            };
 
+          }
 
+        } else {
 
+          this.payTypeList.push({
 
+            text: item.dictLabel,
 
+            value: item.dictValue,
 
+            icon: icon,
 
+          });
 
+        }
 
+      });
 
+      if (obj) {
 
+        this.payTypeList.push(obj);
 
+      }
 
+      if (this.amount) {
 
+        this.dataForm.payType = "Account";
 
+      } else {
 
+        this.dataForm.payType = this.payTypeList[0].value;
 
+      }
 
+    },
 
+    handleClick(val) {
 
+      this.dataForm.payType = val;
 
+    },
 
+    payMoney() {
 
+      this.$toast.loading({
 
+        message: "正在支付...",
 
+        forbidClick: true,
 
+      });
 
+      Api.billPay(this.dataForm).then((res) => {
 
+        if (res.code == 0) {
 
+          this.$toast.success("付款成功");
 
+        } else {
 
+          this.$toast.fail("付款失败");
 
+        }
 
+      });
 
+    },
 
+  },
 
+};
 
+</script>
 
+<style lang="scss" scoped>
 
+.popup_title {
 
+  align-items: baseline;
 
+  padding: 12px 0;
 
+  font-weight: 500;
 
+  background-color: #ffffff;
 
+}
 
+.info_list {
 
+  padding: 10px 16px;
 
+  .list_item {
 
+    line-height: 44px;
 
+    .van-col {
 
+      font-size: 16px;
 
+    }
 
+  }
 
+  .type_more {
 
+    margin-top: 10px;
 
+    .van-col {
 
+      font-size: 14px;
 
+      color: #999999;
 
+    }
 
+  }
 
+}
 
+.van-field__label {
 
+  width: unset;
 
+  font-weight: 600;
 
+  color: #0c1935;
 
+  --van-cell-font-size: 24px;
 
+}
 
+</style>

+ 3 - 0
src/views/device/index.vue
파일 보기 

@@ -0,0 +1,3 @@
 
+<template >
 
+  <router-view></router-view>
 
+</template>

+ 51 - 35
src/views/deviceAlarm.vue
파일 보기 

@@ -26,9 +26,9 @@
 
             fit="contain"
 
           />
 
         </van-col>
 
-        <van-col @click="toPath('/userInfo', 'account')">
 
+        <van-col>
 
           <van-image
 
-            :src="require('@/assets/user.svg')"
 
+            :src="require('@/assets/search.svg')"
 
             width="16"
 
             height="16"
 
             fit="contain"
 
@@ -70,11 +70,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>
 
@@ -82,8 +98,8 @@
 
   </van-pull-refresh>
 
 </template>
 
 <script>
 
-import Api from "../utils/api";
 
-import VCountUp from "./CountUp";
 
+import Api from "@/utils/api";
 
+import VCountUp from "../CountUp";
 
 export default {
 
   components: {
 
     "v-count-up": VCountUp,
 
@@ -91,6 +107,8 @@ export default {
 
   data() {
 
     return {
 
       name: "电商园四期-B座",
 
+      page: 1,
 
+      limit: 10,
 
       dataList: [],
 
       loading: false,
 
       refreshing: false,
 
@@ -106,6 +124,7 @@ export default {
 
           this.refreshing = false;
 
         }
 
         await this.getDataList();
 
+        this.page++; // 分页数加一
 
       }, 100);
 
     },
 
     onRefresh() {
 
@@ -114,6 +133,7 @@ export default {
 
       // 重新加载数据
 
       // 将 loading 设置为 true，表示处于加载状态
 
       this.loading = true;
 
+      this.page = 1; // 分页数赋值为1
 
       this.onLoad();
 
     },
 
     // 获取列表数据方法
 
@@ -121,20 +141,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 +242,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 +252,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;
 
         }
 
       }
 
     }

+ 230 - 145
src/views/home.vue
파일 보기 

@@ -7,26 +7,43 @@
 
   />
 
   <div class="page_info">
 
     <div
 
-      class="info_bg"
 
-      :style="{ 'margin-bottom': role == 'repair' ? 0 : '42px' }"
 
+      class="info_title"
 
+      :style="{
 
+        'margin-bottom': role != 'Maintenance' ? '54px' : '12px',
 
+        'padding-bottom': role != 'Maintenance' ? '58px' : '',
 
+      }"
 
     >
 
       <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="toPath('/userInfo', 'account')">
 
+        <template v-if="role == 'Tenant'">
 
+          <van-row justify="center" style="flex: 1">
 
+            <van-col>首页</van-col>
 
+          </van-row>
 
+        </template>
 
+        <template v-else>
 
+          <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>
 
+        </template>
 
+
 
+        <van-col
 
+          @click="
 
+            () => {
 
+              $router.push({ path: '/userInfo', query: { type: 'password' } });
 
+            }
 
+          "
 
+        >
 
           <van-image
 
             :src="require('@/assets/user.svg')"
 
             width="16"
 
@@ -37,14 +54,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 +70,19 @@
 
         </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="
 
+              () => {
 
+                $router.push({ path: '/review/clock' });
 
+              }
 
+            "
 
+          >
 
             <van-col>立即巡检</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -81,7 +97,7 @@
 
             align="center"
 
             justify="center"
 
             style="flex-direction: column"
 
-            v-for="(item, index) in checkList"
 
+            v-for="(item, index) in reviewList"
 
             :key="item + '_' + index"
 
           >
 
             <van-col>{{ item.label }}</van-col>
 
@@ -96,12 +112,19 @@
 
       <!-- 实时巡检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" ? "工单待办" : "实时报修"
 
           }}</van-col>
 
-          <van-col class="function_btn" @click="toPath('/repairList')">
 
+          <van-col
 
+            class="function_btn"
 
+            @click="
 
+              () => {
 
+                $router.push({ path: '/repair/list' });
 
+              }
 
+            "
 
+          >
 
             <van-col>{{ role == "admin" ? "立即处理" : "立即查看" }}</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -132,10 +155,17 @@
 
       <!-- 工单待办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')">
 
+          <van-col
 
+            class="function_btn"
 
+            @click="
 
+              () => {
 
+                $router.push({ path: '/device/list' });
 
+              }
 
+            "
 
+          >
 
             <van-col>立即查看</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -146,26 +176,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>{{ item.dictLabel }}</van-col>
 
             <v-count-up :end-val="Number(item['count'])" class="count_up" />
 
           </van-row>
 
         </van-row>
 
@@ -176,7 +194,14 @@
 
       <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="
 
+              () => {
 
+                $router.push({ path: '/pay/fee' });
 
+              }
 
+            "
 
+          >
 
             <van-col>立即催收</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -192,26 +217,50 @@
 
             <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">{{
 
+                    `${dict_filter(item.payType, "payTypeList")["dictLabel"]}`
 
+                  }}</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="
 
+              () => {
 
+                $router.push({
 
+                  path: '/bill/detail',
 
+                  query: {
 
+                    activeTab: 'bill',
 
+                  },
 
+                });
 
+              }
 
+            "
 
+          >
 
             <van-col>立即缴费</van-col>
 
             <van-image
 
               :src="require('@/assets/btn-arrow-right.svg')"
 
@@ -227,17 +276,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">{{
 
+                    `${dict_filter(item.payType, "payTypeList")["dictLabel"]}`
 
+                  }}</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 -->
 
@@ -248,7 +309,6 @@
 
     v-model="activeTabBar"
 
     active-color="#2E69EB"
 
     inactive-color="#0c1935"
 
-    safe-area-inset-bottom
 
   >
 
     <van-tabbar-item
 
       name="home"
 
@@ -263,11 +323,11 @@
 
     <van-tabbar-item
 
       name="rentBill"
 
       :icon="
 
-        activeTabBar == 'rentBill'
 
+        activeTabBar == 'bill'
 
           ? require('@/assets/rent-bill-active.svg')
 
           : require('@/assets/rent-bill.svg')
 
       "
 
-      to="/rentBill"
 
+      to="/bill/list"
 
       >租户账单</van-tabbar-item
 
     >
 
     <van-tabbar-item
 
@@ -283,7 +343,7 @@
 
   </van-tabbar>
 
 </template>
 
 <script>
 
-import { isEmpty } from "@/utils/index.js";
 
+import { isEmpty, getDictDataList } from "@/utils/index.js";
 
 import api from "../utils/api";
 
 import VCountUp from "./CountUp";
 
 export default {
 
@@ -293,46 +353,31 @@ export default {
 
   data() {
 
     return {
 
       role: "",
 
+      tenantInfo: {}, //角色为Tenant时有值
 
       name: "电商园四期-B座",
 
       activeTabBar: "home",
 
       functionList: [
 
         {
 
-          path: "/repairOnline",
 
+          path: "/repair/create",
 
           src: require("@/assets/repair-online.svg"),
 
           label: "线上报修",
 
-          role: ["admin", "check", "rent"],
 
+          role: ["admin", "Inspection", "Tenant"],
 
         },
 
         {
 
-          path: "/checkRecord",
 
+          path: "/review/list",
 
           src: require("@/assets/check-review.svg"),
 
           label: "巡检记录",
 
-          role: ["admin", "check"],
 
+          role: ["admin", "Inspection"],
 
         },
 
         {
 
-          path: "/reduceRecord",
 
+          path: "/pay/record",
 
           src: require("@/assets/reduce-record.svg"),
 
           label: "扣缴记录",
 
-          role: ["admin", "rent"],
 
-        },
 
-      ],
 
-      checkList: [
 
-        {
 
-          label: "今日待巡检",
 
-          count: 88,
 
-          options: {
 
-            separator: ",",
 
-          },
 
-        },
 
-        {
 
-          label: "今日已巡检",
 
-          count: 2,
 
-          options: {
 
-            separator: ",",
 
-          },
 
+          role: ["admin", "Tenant"],
 
+          activeTab: "record",
 
         },
 
       ],
 
-      billPaymentList: [],
 
-      abnormalNum: { label: "异常总数", count: "" },
 
+      reviewList: [],
 
       workList: [
 
         {
 
           label: "待指派",
 
@@ -342,39 +387,45 @@ 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: [],
 
+      payTypeList: [],
 
+      billPaymentList: [],
 
+      loading: true,
 
     };
 
   },
 
   created() {
 
-    if(localStorage.getItem('token')){
 
-      this.getHomeData();
 
+    this.role = localStorage.getItem("role");
 
+    this.getHomeData();
 
+    this.getPayTypeList();
 
+    this.getDeviceAlarmList();
 
+    if (this.role == "Tenant") {
 
+      this.tenantInfo = JSON.parse(localStorage.getItem("tenantInfo"));
 
+    } else {
 
+      this.tenantInfo = {};
 
     }
 
-    // this.role = localStorage.getItem("role");
 
   },
 
   methods: {
 
-    payType_filter(val) {
 
+    getPayTypeList() {
 
+      this.payTypeList = getDictDataList("PayType");
 
+    },
 
+    getDeviceAlarmList() {
 
+      this.deviceAlarmList = getDictDataList("DeviceAlarm");
 
+    },
 
+    dict_filter(val, list) {
 
       if (isEmpty(val)) {
 
-        return "";
 
-      }
 
-      if (val == "Water") {
 
-        return "水费";
 
-      }
 
-      if (val == "Elec") {
 
-        return "电费";
 
-      }
 
-      if (val == 3) {
 
-        return "物业相关";
 
+        return {};
 
       }
 
+      return this[list].find((item) => item.dictValue == val);
 
     },
 
+
 
     getHomeData() {
 
       api.homedata().then((res) => {
 
         if (res.code == 0) {
 
@@ -383,27 +434,58 @@ export default {
 
             this.workList[k - 1].count = res.data.workOrder[k];
 
           }
 
           //设备异常数据
 
-          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);
 
+          let deviceArr = [];
 
+          for (let key in res.data.equip.maps) {
 
+            if (key != "Relay") {
 
+              deviceArr.push({
 
+                dictValue: key,
 
+                count: res.data.equip.maps[key],
 
+              });
 
+            }
 
           }
 
-          this.deviceErrorList = mapsArr;
 
           //赋值异常总数
 
-          this.abnormalNum.count = res.data.equip.abnormalNum;
 
+          deviceArr.unshift({
 
+            dictValue: "abnormalNum",
 
+            count: res.data.equip.abnormalNum,
 
+          });
 
+          this.deviceAlarmList.forEach((item) => {
 
+            item.count = deviceArr.find(
 
+              (ele) => ele.dictValue == item.dictValue
 
+            ).count;
 
+          });
 
+
 
+          //实时巡检数据
 
+          let reviewArr = [];
 
+          for (let key in res.data.inspectionInfo) {
 
+            reviewArr.push({
 
+              dictValue: key,
 
+              count: res.data.inspectionInfo[key],
 
+            });
 
+          }
 
+          this.reviewList.forEach((item) => {
 
+            item.count = reviewArr.find(
 
+              (ele) => ele.dictValue == item.dictValue
 
+            ).count;
 
+          });
 
           //欠费待收数据
 
           this.billPaymentList = res.data.billPaymentList;
 
         }
 
+        this.loading = false;
 
       });
 
     },
 
     toPath(path, val) {
 
+      let params = {};
 
+      if (this.role != "admin" && val) {
 
+        params = {
 
+          tenantId: this.tenantInfo.tenantId,
 
+          tenantName: this.tenantInfo.tenantName,
 
+          activeTab: val,
 
+        };
 
+        path = "/bill/detail";
 
+      }
 
       this.$router.push({
 
         path: path,
 
-        query: {
 
-          source: val,
 
-        },
 
+        query: params,
 
       });
 
     },
 
   },
 
@@ -412,16 +494,10 @@ export default {
 
 <style lang="scss" scoped>
 
 .page_info {
 
   position: relative;
 
-  height: calc( 100vh - 85px);
 
-     overflow: auto;
 
-    // height:100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 50px -46px
 
-  .info_bg {
 
+  .info_title {
 
     width: 100%;
 
-    height: 102px;
 
     background: #5c8fff;
 
     border-radius: 0px 0px 16px 16px;
 
-    padding-top: 12px;
 
-    margin-bottom: 42px;
 
     box-sizing: border-box;
 
     .position_pannel {
 
       display: flex;
 
@@ -429,7 +505,8 @@ export default {
 
       justify-content: space-between;
 
       padding: 0 16px;
 
       .van-col {
 
-        height: 24px;
 
+        height: 44px;
 
+        font-weight: 600;
 
         font-size: 16px;
 
         color: #ffffff;
 
         line-height: 24px;
 
@@ -470,11 +547,9 @@ export default {
 
     }
 
   }
 
   .info_list {
 
-    max-height: calc(100% - 102px - 42px - 20px);
 
     padding: 0 16px;
 
-    overflow-y: auto;
 
     .sub_title {
 
-      margin: 16px 0 6px 0;
 
+      margin: 12px 0 6px 0;
 
       .title {
 
         height: 20px;
 
         font-size: 14px;
 
@@ -499,6 +574,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;
 
@@ -516,6 +592,7 @@ export default {
 
     }
 
     .list_table {
 
       padding: 8px 16px 4px 16px;
 
+      min-height: 156px;
 
       .table_header {
 
         padding: 8px 0;
 
         border-bottom: 1px solid #eeeeee;
 
@@ -528,8 +605,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;
 
@@ -537,6 +617,11 @@ export default {
 
           line-height: 16px;
 
         }
 
       }
 
+      .loading_info {
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+      }
 
     }
 
   }
 
 }

+ 0 - 356
src/views/lackFee.vue
파일 보기 

@@ -1,356 +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="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">
 
-      <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
 
-              >
 
-              <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>
 
-    </div>
 
-  </div>
 
-</template>
 
-<script>
 
-import { isEmpty } from "@/utils/index.js";
 
-import VCountUp from "./CountUp";
 
-export default {
 
-  components: {
 
-    "v-count-up": VCountUp,
 
-  },
 
-  data() {
 
-    return {
 
-      loading: false,
 
-      name: "电商园四期-B座",
 
-      lackType: "",
 
-      lackStatus: "",
 
-      lackTypeTitle: "欠费类型",
 
-      lackStatusTitle: "保水保电",
 
-      lackTypeList: [
 
-        { text: "电费", value: 1 },
 
-        { text: "水费", value: 2 },
 
-      ],
 
-      lackStatusList: [
 
-        { 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",
 
-        },
 
-      ],
 
-      loading: false,
 
-      refreshing: false,
 
-      finished: false,
 
-    };
 
-  },
 
-
 
-  methods: {
 
-    lackStatus_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return {};
 
-      }
 
-      if (val == 1) {
 
-        return {
 
-          label: "未保电",
 
-          color: "#FF9C27",
 
-          btn_1: "保电",
 
-          btn_2: "断闸",
 
-        };
 
-      }
 
-      if (val == 2) {
 
-        return {
 
-          label: "已保电",
 
-          color: "#30D3A2",
 
-          btn_1: "取消保电",
 
-          btn_2: "开闸",
 
-        };
 
-      }
 
-    },
 
-    lackType_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return "";
 
-      }
 
-      if (val == 1) {
 
-        return "电费";
 
-      }
 
-      if (val == 2) {
 
-        return "水费";
 
-      }
 
-    },
 
-    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 == "lackType") {
 
-        // 这里打印出来的值就是我们想要的text
 
-        this.lackTypeTitle = this.lackTypeList.filter(
 
-          (item) => item.value === val
 
-        )[0].text;
 
-      }
 
-      if (type == "lackStatus") {
 
-        // 这里打印出来的值就是我们想要的text
 
-        this.lackStatusTitle = this.lackStatusList.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;
 
-        position: relative;
 
-        &: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;
 
-          }
 
-        }
 
-        .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;
 
-            }
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 1 - 1
src/views/login.vue
파일 보기 

@@ -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;
 
     },
 
   },
 
 };

+ 399 - 0
src/views/pay/fee.vue
파일 보기 

@@ -0,0 +1,399 @@
 
+<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>
 
+          <van-image
 
+            :src="require('@/assets/search.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', dataForm.cycle)"
 
+            :title="cycleTitle"
 
+            :options="cycleList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="dataForm.billType"
 
+            @change="handelChange('billType', dataForm.billType)"
 
+            :title="billTypeTitle"
 
+            :options="billTypeList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="dataForm.arrearDay"
 
+            @change="handelChange('arrearDay', dataForm.arrearDay)"
 
+            :title="arrearDayTitle"
 
+            :options="arrearDayList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="dataForm.isExpedit"
 
+            @change="handelChange('isExpedit', dataForm.isExpedit)"
 
+            :title="isExpeditTitle"
 
+            :options="isExpeditList"
 
+          />
 
+        </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 dataList" :key="item.id" class="list_item">
 
+            <div
 
+              class="reduce_type"
 
+              :style="{
 
+                'background-color': `${
 
+                  dict_filter(item.isExpedit, 'isExpeditList')['color']
 
+                }`,
 
+              }"
 
+            >
 
+              <span>{{
 
+                `${dict_filter(item.isExpedit, "isExpeditList")["dictLabel"]}`
 
+              }}</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
 
+              >欠费类型：{{
 
+                `${dict_filter(dataForm.billType, "billTypeList")["dictLabel"]}`
 
+              }}</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
 
+              >
 
+            </div>
 
+          </div>
 
+        </van-list>
 
+      </div>
 
+    </div>
 
+  </van-pull-refresh>
 
+</template>
 
+<script>
 
+import Api from "@/utils/api";
 
+import { isEmpty, getDictDataList } from "@/utils/index";
 
+import VCountUp from "../CountUp";
 
+export default {
 
+  components: {
 
+    "v-count-up": VCountUp,
 
+  },
 
+  data() {
 
+    return {
 
+      name: "电商园四期-B座",
 
+      isExpeditTitle: "是否催费",
 
+      cycleTitle: "计费周期",
 
+      billTypeTitle: "欠费类型",
 
+      arrearDayTitle: "欠费天数",
 
+      billTypeList: [],
 
+      arrearDayList: [],
 
+      cycleList: [],
 
+      isExpeditList: [],
 
+      dataForm: {
 
+        cycle: "",
 
+        billType: "",
 
+        arrearDay: "",
 
+        isExpedit: "",
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
+      dataList: [],
 
+      loading: false,
 
+      refreshing: false,
 
+      finished: false,
 
+    };
 
+  },
 
+  created() {
 
+    this.getArrearDayList();
 
+    this.getBillTypeList();
 
+    this.getIsExpeditList();
 
+  },
 
+  methods: {
 
+    getArrearDayList() {
 
+      this.arrearDayList = getDictDataList("ArrearageDay");
 
+      this.arrearDayList.forEach((item) => {
 
+        item.text = item.dictLabel;
 
+        item.value = item.dictValue;
 
+      });
 
+    },
 
+    getBillTypeList() {
 
+      this.billTypeList = getDictDataList("PayType");
 
+      this.billTypeList.forEach((item) => {
 
+        item.text = item.dictLabel;
 
+        item.value = item.dictValue;
 
+      });
 
+    },
 
+    getIsExpeditList() {
 
+      this.isExpeditList = getDictDataList("isExpedit");
 
+      this.isExpeditList.forEach((item) => {
 
+        item.text = item.dictLabel;
 
+        item.value = item.dictValue;
 
+        if (item.dictValue == 1) {
 
+          item.color = "#09C700";
 
+        } else {
 
+          item.color = "#FA5555";
 
+        }
 
+      });
 
+    },
 
+    dict_filter(val, list) {
 
+      if (isEmpty(val)) {
 
+        return {};
 
+      }
 
+      return this[list].find((item) => item.dictValue == val);
 
+    },
 
+    onLoad() {
 
+      setTimeout(async () => {
 
+        if (this.refreshing) {
 
+          this.dataList = [];
 
+          this.refreshing = false;
 
+        }
 
+        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.lackFeeInfoQuery(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) {
 
+      if (type == "cycle") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.cycleTitle = this.cycleList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      if (type == "billType") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        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();
 
+    },
 
+  },
 
+};
 
+</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;
 
+      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 {
 
+        .van-col {
 
+          height: 22px;
 
+          font-size: 16px;
 
+          color: #0c1935;
 
+          line-height: 22px;
 
+          margin-bottom: 8px;
 
+        }
 
+      }
 
+      .list_btn {
 
+        width: 100%;
 
+        text-align: right;
 
+        margin-top: 8px;
 
+        padding-top: 10px;
 
+        border-top: 1px solid #d8d8d8;
 
+        .van-button {
 
+          border-width: 1px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 3 - 0
src/views/pay/index.vue
파일 보기 

@@ -0,0 +1,3 @@
 
+<template >
 
+  <router-view></router-view>
 
+</template>

+ 359 - 0
src/views/pay/record.vue
파일 보기 

@@ -0,0 +1,359 @@
 
+<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>
 
+          <van-image
 
+            :src="require('@/assets/search.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', dataFrom.feeDate)"
 
+            :title="feeDateTitle"
 
+            :options="feeDateList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="dataForm.type"
 
+            @change="handelChange('type', dataForm.type)"
 
+            :title="typeTitle"
 
+            :options="payTypeList"
 
+          />
 
+          <van-dropdown-item
 
+            v-model="operator"
 
+            @change="handelChange('operator', dataForm.operator)"
 
+            :title="operatorTitle"
 
+            :options="operatorList"
 
+          />
 
+        </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 dataList" :key="item.id" class="list_item">
 
+            <van-row
 
+              align="center"
 
+              class="reduce_type"
 
+              :style="{
 
+                'background-color': `${
 
+                  dict_filter(item.type, 'payTypeList')['color']
 
+                }`,
 
+              }"
 
+            >
 
+              <van-col>{{
 
+                `${dict_filter(item.type, "payTypeList")["dictLabel"]}`
 
+              }}</van-col>
 
+            </van-row>
 
+            <van-row class="header">
 
+              <van-col>{{ 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.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>
 
+    </div>
 
+  </van-pull-refresh>
 
+</template>
 
+<script>
 
+import Api from "@/utils/api";
 
+import { isEmpty, getDictDataList } from "@/utils/index";
 
+import VCountUp from "../CountUp";
 
+export default {
 
+  components: {
 
+    "v-count-up": VCountUp,
 
+  },
 
+  data() {
 
+    return {
 
+      name: "电商园四期-B座",
 
+      feeDateTitle: "扣缴时间",
 
+      typeTitle: "扣缴类型",
 
+      operatorTitle: "操作人",
 
+      payTypeList: [],
 
+      operatorList: [],
 
+      feeDateList: [],
 
+      dataForm: {
 
+        feeDate: "",
 
+        operator: "",
 
+        type: "",
 
+        tenantId: "",
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
+      dataList: [],
 
+      loading: false,
 
+      refreshing: false,
 
+      finished: false,
 
+    };
 
+  },
 
+  created() {
 
+    this.dataForm.tenantId = localStorage.getItem("tenantId");
 
+    this.getPayTypeList();
 
+  },
 
+  methods: {
 
+    getPayTypeList() {
 
+      this.payTypeList = getDictDataList("PayType");
 
+      this.payTypeList.forEach((item) => {
 
+        item.text = item.dictLabel;
 
+        item.value = item.dictValue;
 
+        if (item.value == "PreStorage") {
 
+          item.color = "#30D3A2";
 
+        }
 
+        if (item.value == "Subsidy") {
 
+          item.color = "#09C700";
 
+        }
 
+        if (item.value == "Refund") {
 
+          item.color = "#FA5555";
 
+        }
 
+        if (item.value == "Water") {
 
+          item.color = "#FF9C27";
 
+        }
 
+        if (item.value == "Elec") {
 
+          item.color = "#FF9C27";
 
+        }
 
+        if (item.value == "PropertyFee") {
 
+          item.color = "#FF9C27";
 
+        }
 
+        if (item.value == "CancelSubsidy") {
 
+          item.color = "#ED3A25";
 
+        }
 
+      });
 
+    },
 
+    dict_filter(val, list) {
 
+      if (isEmpty(val)) {
 
+        return {};
 
+      }
 
+      return this[list].find((item) => item.dictValue == val);
 
+    },
 
+    onLoad() {
 
+      setTimeout(async () => {
 
+        if (this.refreshing) {
 
+          this.dataList = [];
 
+          this.refreshing = false;
 
+        }
 
+        await this.getDataList();
 
+        this.dataForm.page++; // 分页数加一
 
+      }, 100);
 
+    },
 
+    onRefresh() {
 
+      // 清空列表数据
 
+      this.finished = false;
 
+      this.dataList = [];
 
+      // 重新加载数据
 
+      // 将 loading 设置为 true，表示处于加载状态
 
+      this.loading = true;
 
+      this.dataForm.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) {
 
+      if (type == "type") {
 
+        // 这里打印出来的值就是我们想要的text
 
+        this.typeTitle = this.payTypeList.filter(
 
+          (item) => item.value === val
 
+        )[0].text;
 
+      }
 
+      this.onRefresh();
 
+    },
 
+    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;
 
+      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 {
 
+        .van-col {
 
+          height: 22px;
 
+          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>

+ 0 - 321
src/views/reduceRecord.vue
파일 보기 

@@ -1,321 +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">
 
-              <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>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-<script>
 
-import { isEmpty } from "@/utils/index.js";
 
-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: [
 
-        {
 
-          name: "合肥市传秀科技有限公司",
 
-          reduceType: 2,
 
-          reduceMoney: 100,
 
-          accountMoney: 100,
 
-          tel: 13212341111,
 
-          operator: "张浩",
 
-          reduceTime: "2022-09-20 10:34:22",
 
-        },
 
-      ],
 
-      loading: false,
 
-      refreshing: false,
 
-      finished: false,
 
-    };
 
-  },
 
-
 
-  methods: {
 
-    reduceType_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return {};
 
-      }
 
-      if (val == 1) {
 
-        return { label: "预存", color: "#30D3A2" };
 
-      }
 
-      if (val == 2) {
 
-        return { label: "补助", color: "#09C700" };
 
-      }
 
-      if (val == 3) {
 
-        return { label: "退费", color: "#FA5555" };
 
-      }
 
-      if (val == 4) {
 
-        return { label: "核缴（水）", color: "#FF9C27" };
 
-      }
 
-      if (val == 4) {
 
-        return { label: "核缴（电）", color: "#FF9C27" };
 
-      }
 
-      if (val == 4) {
 
-        return { label: "核缴（物业）", color: "#FF9C27" };
 
-      }
 
-    },
 
-    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;
 
-        position: relative;
 
-        &:nth-last-child(1) {
 
-          margin-bottom: 0;
 
-        }
 
-        .header {
 
-          height: 22px;
 
-          font-size: 16px;
 
-          font-weight: 500;
 
-          color: #0c1935;
 
-          line-height: 22px;
 
-          margin-bottom: 8px;
 
-        }
 
-        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;
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 0 - 1
src/views/remoteControl.vue
파일 보기 

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

+ 0 - 321
src/views/rentBill.vue
파일 보기 

@@ -1,321 +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" style="display: flex">
 
-      <van-dropdown-menu active-color="#1989fa">
 
-        <van-dropdown-item
 
-          v-model="rentStatus"
 
-          @change="handelChange('rentStatus', rentStatus)"
 
-          :title="rentStatusTitle"
 
-          :options="rentStatusList"
 
-        />
 
-      </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">
 
-              <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
 
-              >
 
-              <span
 
-                >欠费天数：<span style="color: #0c1935; font-weight: 600">{{
 
-                  item.rentDays
 
-                }}</span>
 
-              </span>
 
-              <span
 
-                >账户余额：<span style="color: #0c1935; font-weight: 600"
 
-                  >￥{{ item.accountMoney }}
 
-                </span></span
 
-              >
 
-              <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>
 
-    </div>
 
-  </div>
 
-</template>
 
-<script>
 
-import { isEmpty } from "@/utils/index.js";
 
-import VCountUp from "./CountUp";
 
-export default {
 
-  components: {
 
-    "v-count-up": VCountUp,
 
-  },
 
-  data() {
 
-    return {
 
-      minDate: new Date(2020, 0, 1),
 
-      maxDate: new Date(2025, 5, 1),
 
-      currentDate: "",
 
-      loading: false,
 
-      name: "电商园四期-B座",
 
-      rentStatus: "",
 
-      rentStatusTitle: "是否结清",
 
-      rentStatusList: [
 
-        { text: "已结清", value: 1 },
 
-        { text: "未结清", value: 2 },
 
-      ],
 
-      total: 3,
 
-      list: [
 
-        {
 
-          name: "合肥市传秀科技有限公司",
 
-          rentStatus: 1,
 
-          rentMoney: 3454,
 
-          rentDays: 0,
 
-          accountMoney: 100,
 
-          tel: 13212341111,
 
-        },
 
-      ],
 
-      loading: false,
 
-      refreshing: false,
 
-      finished: false,
 
-    };
 
-  },
 
-
 
-  methods: {
 
-    rentStatus_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return {};
 
-      }
 
-      if (val == 1) {
 
-        return { label: "已结清", color: "#09C700" };
 
-      }
 
-      if (val == 2) {
 
-        return { label: "未结清", color: "#FA5555" };
 
-      }
 
-    },
 
-    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;
 
-        position: relative;
 
-        &: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;
 
-          }
 
-        }
 
-        .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;
 
-            }
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 0 - 518
src/views/rentBillDetail.vue
파일 보기 

@@ -1,518 +0,0 @@
 
-<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: ',' }"
 
-      />
 
-      <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"
 
-            >
 
-              <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
 
-                        >
 
-                      </div>
 
-                    </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
 
-                          >
 
-                        </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>
 
-        </div>
 
-      </template>
 
-      <template v-if="activeTab == 1">
 
-        <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"
 
-            >
 
-              <div
 
-                v-for="item in list"
 
-                :key="item.id"
 
-                class="list_item"
 
-                style="padding: 12px 16px"
 
-              >
 
-                <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>
 
-        </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-popup
 
-    v-model:show="showPopup"
 
-    position="bottom"
 
-    :style="{ height: '30%' }"
 
-    class="popup_info"
 
-  >
 
-    <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-popup>
 
-</template>
 
-<script>
 
-import { isEmpty } from "@/utils/index.js";
 
-import VCountUp from "./CountUp";
 
-export default {
 
-  components: {
 
-    "v-count-up": VCountUp,
 
-  },
 
-  data() {
 
-    return {
 
-      name: "合肥市传秀科技有限公司",
 
-      loading: false,
 
-      showPopup: false,
 
-      popupTitle: "",
 
-      money: "",
 
-      activeTab: 0,
 
-      activeTabBar: 0,
 
-      activeCollapse: [],
 
-      feeType: "",
 
-      feeStatus: "",
 
-      reduceType: "",
 
-      operator: "",
 
-      feeTypeTitle: "缴费类型",
 
-      feeStatusTitle: "支付状态",
 
-      reduceTypeTitle: "扣缴类型",
 
-      operatorTitle: "操作人",
 
-      feeTypeList: [
 
-        { text: "电费", value: 1 },
 
-        { text: "水费", value: 2 },
 
-        { text: "物业相关费用", value: 3 },
 
-      ],
 
-      rentStatusList: [
 
-        { text: "已支付", value: 1 },
 
-        { text: "待支付", value: 2 },
 
-      ],
 
-      reduceTypeList: [
 
-        { text: "预存", value: 1 },
 
-        { text: "补助", value: 2 },
 
-        { text: "退费", value: 3 },
 
-        { 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 },
 
-          ],
 
-        },
 
-      ],
 
-      loading: false,
 
-      refreshing: false,
 
-      finished: false,
 
-    };
 
-  },
 
-
 
-  methods: {
 
-    reduceType_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return {};
 
-      }
 
-      if (val == 1) {
 
-        return { label: "预存", color: "#30D3A2" };
 
-      }
 
-      if (val == 2) {
 
-        return { label: "补助", color: "#09C700" };
 
-      }
 
-      if (val == 3) {
 
-        return { label: "退费", color: "#FA5555" };
 
-      }
 
-      if (val == 4) {
 
-        return { label: "核缴（水）", color: "#FF9C27" };
 
-      }
 
-      if (val == 4) {
 
-        return { label: "核缴（电）", color: "#FF9C27" };
 
-      }
 
-      if (val == 4) {
 
-        return { label: "核缴（物业）", color: "#FF9C27" };
 
-      }
 
-    },
 
-    rentStatus_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return {};
 
-      }
 
-      if (val == 1) {
 
-        return { label: "已支付", color: "#09C700" };
 
-      }
 
-      if (val == 2) {
 
-        return { label: "未支付", color: "#FA5555" };
 
-      }
 
-    },
 
-    handleChangeTabBar(val) {
 
-      this.money = "";
 
-      if (val == 1) {
 
-        this.popupTitle = "预存";
 
-      }
 
-      if (val == 2) {
 
-        this.popupTitle = "补助";
 
-      }
 
-      if (val == 3) {
 
-        this.popupTitle = "退费";
 
-      }
 
-      this.showPopup = !this.showPopup;
 
-    },
 
-    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();
 
-    },
 
-    onSubmit() {
 
-      this.loading = true;
 
-      setTimeout(() => {
 
-        this.loading = false;
 
-        this.showPopup = false;
 
-      }, 2000);
 
-    },
 
-    onClickLeft() {},
 
-  },
 
-};
 
-</script>
 
-<style lang="scss" scoped>
 
-.page_check {
 
-  height: 100%;
 
-  .search_pannel {
 
-    background: #ffffff;
 
-    /deep/ {
 
-      .van-tabs__line {
 
-        --van-tabs-bottom-bar-color: #2e69eb;
 
-      }
 
-      .van-dropdown-menu__bar {
 
-        --van-gray-4: #999999;
 
-        --van-dropdown-menu-title-font-size: 14px;
 
-        --van-dropdown-menu-title-text-color: #0c1935;
 
-        --van-dropdown-menu-box-shadow: 0;
 
-      }
 
-    }
 
-  }
 
-  .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: 6px 0;
 
-        display: flex;
 
-        flex-direction: column;
 
-        align-items: flex-start;
 
-        position: relative;
 
-        &:nth-last-child(1) {
 
-          margin-bottom: 0;
 
-        }
 
-        .header {
 
-          height: 22px;
 
-          font-size: 16px;
 
-          font-weight: 500;
 
-          color: #0c1935;
 
-          line-height: 22px;
 
-          margin-bottom: 8px;
 
-        }
 
-        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;
 
-          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;
 
-            }
 
-          }
 
-        }
 
-        .collapse_title {
 
-          span {
 
-            height: 22px;
 
-            font-size: 16px;
 
-            font-weight: 500;
 
-            color: #0c1935;
 
-            line-height: 22px;
 
-          }
 
-        }
 
-        .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;
 
-            }
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>
 
-<style lang="scss">
 
-.tab_bar {
 
-  /deep/ {
 
-    .van-tabbar-item {
 
-      color: #2e69eb;
 
-      font-size: 14px;
 
-      font-weight: 600;
 
-    }
 
-  }
 
-}
 
-.popup_info {
 
-  box-shadow: 0px -10px 20px 0px rgba(27, 32, 38, 0.1);
 
-  border-radius: 20px 20px 0px 0px;
 
-  /deep/ {
 
-    .popup_title {
 
-      padding: 14px 0;
 
-      font-weight: 600;
 
-      font-size: 16px;
 
-      color: #333333;
 
-      text-shadow: 0px -10px 20px rgba(27, 32, 38, 0.1);
 
-    }
 
-  }
 
-  .van-field__label {
 
-    width: unset;
 
-    font-weight: 600;
 
-    color: #0c1935;
 
-  }
 
-  --van-cell-font-size: 24px;
 
-}
 
-</style>

+ 337 - 0
src/views/repair/create.vue
파일 보기 

@@ -0,0 +1,337 @@
 
+<template>
 
+  <van-nav-bar title="线上报修" safe-area-inset-top>
 
+    <template #left>
 
+      <van-icon
 
+        :name="require('@/assets/arrow-left.svg')"
 
+        size="24"
 
+        @click="backPath"
 
+      />
 
+    </template>
 
+  </van-nav-bar>
 
+  <div class="page_info">
 
+    <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>
 
+        <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"
 
+            :columns-field-names="columnsFieldNames"
 
+            @cancel="showRepairRegionPicker = false"
 
+            @confirm="
 
+              (value) => {
 
+                dataForm.repairRegion = value.dictValue;
 
+                dataForm.repairRegionName = value.dictLabel;
 
+                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 v-model:show="showRepairTypePicker" round position="bottom">
 
+          <van-picker
 
+            :columns="repairTypeList"
 
+            :columns-field-names="columnsFieldNames"
 
+            @cancel="showRepairTypePicker = false"
 
+            @confirm="
 
+              (value) => {
 
+                dataForm.repairType = value.dictValue;
 
+                dataForm.repairTypeName = value.dictLabel;
 
+                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
 
+          maxlength="11"
 
+          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>
 
+      <van-submit-bar class="save_btn">
 
+        <template #button>
 
+          <van-button block type="primary" native-type="submit">
 
+            提交
 
+          </van-button>
 
+        </template>
 
+      </van-submit-bar>
 
+    </van-form>
 
+  </div>
 
+</template>
 
+<script>
 
+import Api from "@/utils/api";
 
+import { getDictDataList } from "@/utils/index";
 
+export default {
 
+  data() {
 
+    return {
 
+      loading: false,
 
+      fileList: [],
 
+      tempFileList: [],
 
+      positionList: [],
 
+      columnsFieldNames: {
 
+        text: "dictLabel",
 
+        value: "dictValue",
 
+      },
 
+      fieldNames: {
 
+        text: "orgName",
 
+        value: "orgId",
 
+        children: "childrenList",
 
+      },
 
+      showRepairPositionPicker: false,
 
+      showRepairRegionPicker: false,
 
+      showRepairTypePicker: false,
 
+      repairRegionList: [],
 
+      repairTypeList: [],
 
+      dataForm: {
 
+        id: "",
 
+        buildingId: "",
 
+        storeyId: "",
 
+        houseId: "",
 
+        repairPosition: "",
 
+        repairPositionName: "",
 
+        repairRegion: 1,
 
+        repairRegionName: "",
 
+        repairType: 1,
 
+        repairTypeName: "",
 
+        contactPerson: "",
 
+        contactPhone: "",
 
+        faultDes: "",
 
+        faultPics: "",
 
+      },
 
+    };
 
+  },
 
+  created() {
 
+    this.getBuildList();
 
+    this.getRepairTypeList();
 
+    this.getRepairRegionList();
 
+  },
 
+  methods: {
 
+    getRepairTypeList() {
 
+      this.repairTypeList = getDictDataList("RepairType");
 
+    },
 
+    getRepairRegionList() {
 
+      this.repairRegionList = getDictDataList("RepairRegion");
 
+    },
 
+    //获取楼栋
 
+    getBuildList() {
 
+      Api.getBuildInfo().then((res) => {
 
+        if (res.code == 0) {
 
+          this.positionList = res.data[0].childrenList;
 
+        }
 
+      });
 
+    },
 
+    onFinish(val) {
 
+      this.dataForm.buildingId = val.selectedOptions[0].orgId;
 
+      this.dataForm.storeyId = val.selectedOptions[1].orgId;
 
+      this.dataForm.houseId = val.selectedOptions[2].orgId;
 
+      this.dataForm.repairPositionName =
 
+        val.selectedOptions[0].orgName +
 
+        "/" +
 
+        val.selectedOptions[1].orgName +
 
+        "/" +
 
+        val.selectedOptions[2].orgName;
 
+      this.showRepairPositionPicker = false;
 
+    },
 
+    onOversize() {
 
+      this.$toast("单个文件大小不能超过 500kb");
 
+    },
 
+    beforeRead(file) {
 
+      if (file instanceof Array) {
 
+        const obj = file.find(
 
+          (item) =>
 
+            !(
 
+              item.type == "image/jpg" ||
 
+              item.type == "image/jpeg" ||
 
+              item.type == "image/png"
 
+            )
 
+        );
 
+        if (obj) {
 
+          this.$toast("请上传 jpeg、jpg或png 格式图片");
 
+          return false;
 
+        }
 
+      } else {
 
+        const isJPG = file.type == "image/jpg";
 
+        const isJPEG = file.type == "image/jpeg";
 
+        const isPNG = file.type == "image/png";
 
+        if (!(isJPG || isJPEG || isPNG)) {
 
+          this.$toast("请上传 jpeg、jpg或png 格式图片");
 
+          return false;
 
+        }
 
+      }
 
+      return true;
 
+    },
 
+    beforeDelete(file) {
 
+      this.tempFileList = this.tempFileList.filter(
 
+        (item) => item.name != file.file.name
 
+      );
 
+      this.fileList = this.fileList.filter(
 
+        (item) => item.file.name != file.file.name
 
+      );
 
+    },
 
+    afterRead(file) {
 
+      if (file instanceof Array) {
 
+        file.forEach((file) => {
 
+          file.status = "uploading";
 
+          file.message = "上传中...";
 
+          setTimeout(async () => {
 
+            await this.uploadFile(file);
 
+          }, 1000);
 
+        });
 
+      } else {
 
+        file.status = "uploading";
 
+        file.message = "上传中...";
 
+        setTimeout(() => {
 
+          this.uploadFile(file);
 
+        }, 1000);
 
+      }
 
+    },
 
+    uploadFile(file) {
 
+      //  这时候我们创建一个formData对象实例
 
+      const formData = new FormData();
 
+      // 通过append方法添加需要的file
 
+      // 这里需要注意 append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
 
+      formData.append("file", file.file);
 
+
 
+      // 上传文件、成功后， 把Url 赋值给 field
 
+      Api.uploadFile(formData).then((res) => {
 
+        if (res.code == 0) {
 
+          file.status = "done";
 
+          file.message = "上传成功";
 
+          this.tempFileList.push({ name: file.file.name, url: res.data });
 
+        } else {
 
+          file.status = "failed";
 
+          file.message = "上传失败";
 
+        }
 
+      });
 
+    },
 
+    onSubmit() {
 
+      let tempArr = [];
 
+      this.tempFileList.forEach((item) => {
 
+        tempArr.push(item.url);
 
+      });
 
+      this.dataForm.faultPics = tempArr.join(",");
 
+      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();
 
+    },
 
+  },
 
+};
 
+</script>
 
+<style lang="scss" scoped>
 
+.page_info {
 
+  margin-top: 12px;
 
+  /deep/ {
 
+    .upload_cell {
 
+      .van-cell__title {
 
+        flex: unset;
 
+      }
 
+      .van-cell__value {
 
+        margin-left: 8px;
 
+        text-align: center;
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 114 - 118
src/views/repairDetail.vue
파일 보기 

@@ -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')"
 
@@ -10,9 +10,10 @@
 
   </van-nav-bar>
 
   <div class="page_info">
 
     <div class="info_list">
 
-      <van-cell-group class="cell_title_icon">
 
+      <van-cell-group :border="false">
 
         <van-cell
 
           title="报修信息"
 
+          title-style="color: #0c1935"
 
           :icon="require('@/assets/line.svg')"
 
           v-if="
 
             role == 'admin' && (dataForm.status == 2 || dataForm.status == 3)
 
@@ -22,11 +23,15 @@
 
         <van-cell title="报修位置" :value="dataForm.repairPosition" />
 
         <van-cell
 
           title="报修区域"
 
-          :value="`${repairRegion_filter(dataForm.repairRegion)}`"
 
+          :value="`${
 
+            dict_filter(dataForm.repairRegion, 'repairRegionList')['dictLabel']
 
+          }`"
 
         />
 
         <van-cell
 
           title="报修类型"
 
-          :value="`${repairType_filter(dataForm.repairType)}`"
 
+          :value="`${
 
+            dict_filter(dataForm.repairType, 'repairTypeList')['dictLabel']
 
+          }`"
 
         />
 
         <van-cell title="联系人" :value="dataForm.contactPerson" />
 
         <van-cell title="联系电话" :value="dataForm.contactPhone" />
 
@@ -44,16 +49,21 @@
 
         </van-cell>
 
       </van-cell-group>
 
       <van-cell-group
 
-        class="cell_title_icon"
 
         v-if="role == 'admin' && (dataForm.status == 2 || dataForm.status == 3)"
 
       >
 
-        <van-cell title="维修信息" :icon="require('@/assets/line.svg')" />
 
+        <van-cell
 
+          title="维修信息"
 
+          title-style="color: #0c1935"
 
+          :icon="require('@/assets/line.svg')"
 
+        />
 
         <van-cell
 
           title="紧急程度"
 
-          :value="`${urgency_filter(dataForm.urgency)}`"
 
+          :value="`${
 
+            dict_filter(dataForm.urgency, 'urgencyTypeList')['dictLabel']
 
+          }`"
 
         />
 
         <van-cell title="维修人员" :value="dataForm.repairPersonName" />
 
-        <van-cell title="联系电话" :value="dataForm.repairPersonId" />
 
+        <van-cell title="联系电话" :value="dataForm.repairPersonMobile" />
 
         <van-cell
 
           title="维修完成时间"
 
           :value="dataForm.repairFinishTime"
 
@@ -62,45 +72,44 @@
 
       </van-cell-group>
 
     </div>
 
   </div>
 
-  <div class="save_btn">
 
-    <template v-if="role == 3">
 
-      <van-button
 
-        block
 
-        type="primary"
 
-        loading-type="spinner"
 
-        :loading="loading"
 
-        loading-text="维修完成"
 
-        @click="handleClick('finish')"
 
-      >
 
-        维修完成
 
-      </van-button>
 
-    </template>
 
-    <template v-if="role == 'admin' && dataForm.status == 1">
 
-      <van-button
 
-        block
 
-        type="primary"
 
-        loading-type="spinner"
 
-        @click="handleClick('dispatch')"
 
-      >
 
-        指派维修人员
 
-      </van-button>
 
-    </template>
 
-  </div>
 
+  <template v-if="dataForm.status == 2 && role == 'repair'">
 
+    <van-submit-bar class="save_btn">
 
+      <template #button>
 
+        <van-button block type="primary" @click="handleClick('finish')">
 
+          维修完成
 
+        </van-button>
 
+      </template>
 
+    </van-submit-bar>
 
+  </template>
 
+  <template v-if="role == 'admin' && dataForm.status == 1 && !showPopup">
 
+    <van-submit-bar class="save_btn">
 
+      <template #button>
 
+        <van-button block type="primary" @click="handleClick('dispatch')">
 
+          指派维修人员
 
+        </van-button>
 
+      </template>
 
+    </van-submit-bar>
 
+  </template>
 
+
 
   <van-popup
 
     v-model:show="showPopup"
 
     position="bottom"
 
-    :style="{ height: '30%' }"
 
+    :safe-area-inset-bottom="true"
 
+    :overlay-style="{ background: 'unset' }"
 
     class="popup_info"
 
   >
 
-    <van-row class="popup_title">
 
-      <van-col :span="24">{{ popupTitle }}</van-col>
 
+    <van-row align="center" justify="center" class="popup_title">
 
+      <van-col>{{ popupTitle }}</van-col>
 
     </van-row>
 
-    <van-divider style="margin: 0" />
 
+    <van-divider
 
+      style="border-color: #d8d8d8; border-bottom-width: 1px; margin: 0"
 
+    />
 
     <van-form
 
       ref="dataForm"
 
       input-align="right"
 
       error-message-align="right"
 
       @submit="onSubmit"
 
+      style="background: #f6f6f6"
 
     >
 
       <van-cell-group :border="false">
 
         <van-field
 
@@ -120,11 +129,12 @@
 
         >
 
           <van-picker
 
             :columns="repairPersonList"
 
+            :columns-field-names="userFieldNames"
 
             @cancel="showRepairPersonPicker = false"
 
             @confirm="
 
               (value) => {
 
-                dataForm.repairPersonId = value.value;
 
-                dataForm.repairPersonName = value.text;
 
+                dataForm.repairPersonId = value.id;
 
+                dataForm.repairPersonName = value.name;
 
                 showRepairPersonPicker = false;
 
               }
 
             "
 
@@ -142,27 +152,21 @@
 
         />
 
         <van-popup v-model:show="showUrgencyPicker" round position="bottom">
 
           <van-picker
 
-            :columns="repairUrgencyList"
 
+            :columns="urgencyTypeList"
 
+            :columns-field-names="urgencyFieldNames"
 
             @cancel="showUrgencyPicker = false"
 
             @confirm="
 
               (value) => {
 
-                dataForm.urgency = value.value;
 
-                dataForm.urgencyName = value.text;
 
+                dataForm.urgency = value.dictValue;
 
+                dataForm.urgencyName = value.dictLabel;
 
                 showUrgencyPicker = false;
 
               }
 
             "
 
           />
 
         </van-popup>
 
       </van-cell-group>
 
-      <div class="save_btn">
 
-        <van-button
 
-          block
 
-          type="primary"
 
-          :loading="loading"
 
-          loading-type="spinner"
 
-          loading-text="提交"
 
-          native-type="submit"
 
-        >
 
+      <div style="margin-top: 12px; padding: 8px 16px" class="save_btn">
 
+        <van-button block type="primary" native-type="submit">
 
           提交
 
         </van-button>
 
       </div>
 
@@ -170,9 +174,9 @@
 
   </van-popup>
 
 </template>
 
 <script>
 
-import Api from "../utils/api";
 
-import { isEmpty } from "@/utils/index.js";
 
-import VCountUp from "./CountUp";
 
+import Api from "@/utils/api";
 
+import { isEmpty, getDictDataList } from "@/utils/index";
 
+import VCountUp from "../CountUp";
 
 export default {
 
   components: {
 
     "v-count-up": VCountUp,
 
@@ -180,8 +184,6 @@ export default {
 
   data() {
 
     return {
 
       role: "",
 
-      loading: false,
 
-      title: "",
 
       showImgPreview: false,
 
       imagesList: [],
 
       showPopup: false,
 
@@ -189,15 +191,22 @@ export default {
 
       showRepairPersonPicker: false,
 
       showUrgencyPicker: false,
 
       repairPersonList: [],
 
-      repairUrgencyList: [
 
-        { text: "非常紧急", value: 1 },
 
-        { text: "紧急", value: 2 },
 
-        { text: "普通", value: 3 },
 
-      ],
 
+      urgencyFieldNames: {
 
+        text: "dictLabel",
 
+        value: "dictValue",
 
+      },
 
+      userFieldNames: {
 
+        text: "name",
 
+        value: "mobile",
 
+      },
 
+      repairTypeList: [],
 
+      repairRegionList: [],
 
+      urgencyTypeList: [],
 
       dataForm: {
 
         id: "",
 
         repairPersonId: "",
 
         repairPersonName: "",
 
+        repairPersonMobile: "",
 
         urgency: "",
 
         urgencyName: "",
 
         repairTime: "",
 
@@ -213,51 +222,15 @@ export default {
 
       },
 
     };
 
   },
 
-  created() {
 
+  async mounted() {
 
     this.role = localStorage.getItem("role");
 
-    this.getDataDetail();
 
-    this.getUserList();
 
+    this.getRepairTypeList();
 
+    this.getRepairRegionList();
 
+    this.getUrgencyTypeList();
 
+    await this.getUserList();
 
+    this.getDataList();
 
   },
 
   methods: {
 
-    repairType_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return "";
 
-      }
 
-      if (val == 1) {
 
-        return "水";
 
-      }
 
-      if (val == 2) {
 
-        return "电";
 
-      }
 
-      if (val == 3) {
 
-        return "其他";
 
-      }
 
-    },
 
-    repairRegion_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return "";
 
-      }
 
-      if (val == 1) {
 
-        return "公共区域";
 
-      }
 
-      if (val == 2) {
 
-        return "室内";
 
-      }
 
-    },
 
-    urgency_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return "";
 
-      }
 
-      if (val == 1) {
 
-        return "非常紧急";
 
-      }
 
-      if (val == 2) {
 
-        return "紧急";
 
-      }
 
-      if (val == 3) {
 
-        return "普通";
 
-      }
 
-    },
 
     //获取维修人员
 
     getUserList() {
 
       Api.repairInfoUser({
 
@@ -269,15 +242,36 @@ export default {
 
         }
 
       });
 
     },
 
-    getDataDetail() {
 
+    getRepairRegionList() {
 
+      this.repairRegionList = getDictDataList("RepairRegion");
 
+    },
 
+
 
+    getRepairTypeList() {
 
+      this.repairTypeList = getDictDataList("RepairType");
 
+    },
 
+
 
+    getUrgencyTypeList() {
 
+      this.urgencyTypeList = getDictDataList("UrgencyType");
 
+    },
 
+    dict_filter(val, list) {
 
+      if (isEmpty(val)) {
 
+        return {};
 
+      }
 
+      return this[list].find((item) => item.dictValue == val);
 
+    },
 
+
 
+    getDataList() {
 
       Api.repairInfoDetail(this.$route.query.id).then((res) => {
 
         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 = "工单详情";
 
+          if (this.dataForm.repairPersonId) {
 
+            this.dataForm.repairPersonName = this.repairPersonList.find(
 
+              (item) => (item.id = this.dataForm.repairPersonId)
 
+            ).name;
 
+            this.dataForm.repairPersonMobile = this.repairPersonList.find(
 
+              (item) => (item.id = this.dataForm.repairPersonId)
 
+            ).mobile;
 
           }
 
         } else {
 
         }
 
@@ -290,10 +284,6 @@ export default {
 
             message: "请确认是否维修完成",
 
           })
 
           .then(() => {
 
-            this.loading = true;
 
-            setTimeout(() => {
 
-              this.loading = false;
 
-            }, 2000);
 
             // on confirm
 
           })
 
           .catch(() => {
 
@@ -320,7 +310,7 @@ export default {
 
         if (res.code == 0) {
 
           this.$toast.success("保存成功");
 
           this.showPopup = false;
 
-          this.getDataDetail();
 
+          this.getDataList();
 
         } else {
 
           this.$toast.fail("保存失败");
 
         }
 
@@ -345,27 +335,33 @@ export default {
 
           margin-bottom: 8px;
 
         }
 
       }
 
-      .cell_title_icon {
 
+      .van-cell-group {
 
+        margin: 12px 0 0 0;
 
         .van-icon {
 
           display: flex;
 
           align-items: center;
 
         }
 
       }
 
+      .van-cell__left-icon {
 
+        margin-right: 0;
 
+      }
 
     }
 
   }
 
 }
 
 </style>
 
 <style lang="scss">
 
 .popup_info {
 
+  height: auto;
 
   box-shadow: 0px -10px 20px 0px rgba(27, 32, 38, 0.1);
 
   border-radius: 20px 20px 0px 0px;
 
   /deep/ {
 
     .popup_title {
 
-      padding: 14px 0;
 
-      font-weight: 600;
 
-      font-size: 16px;
 
-      color: #333333;
 
-      text-shadow: 0px -10px 20px rgba(27, 32, 38, 0.1);
 
+      padding: 12px 0;
 
+      font-weight: 500;
 
+      background-color: #ffffff;
 
+      .van-col {
 
+        font-size: 18px;
 
+      }
 
     }
 
   }
 
   .van-field__label {

+ 3 - 0
src/views/repair/index.vue
파일 보기 

@@ -0,0 +1,3 @@
 
+<template >
 
+  <router-view></router-view>
 
+</template>

+ 121 - 85
src/views/repairList.vue
파일 보기 

@@ -10,15 +10,24 @@
 
   </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"
 
+          v-model:active="dataForm.status"
 
           title-active-color="#2E69EB"
 
           title-inactive-color="#0C1935"
 
         >
 
-          <van-tab name="1" title="待指派" />
 
-          <van-tab name="2" title="已指派(待维修)" />
 
-          <van-tab name="3" title="已维修" />
 
+          <van-tab
 
+            :name="item.dictValue"
 
+            :title="item.dictLabel"
 
+            v-for="item in repairStatusList"
 
+            :key="item.dictValue"
 
+            :style="{
 
+              display: role == 'admin' && item.dictValue == 1 ? '' : 'none',
 
+            }"
 
+          />
 
         </van-tabs>
 
       </div>
 
       <van-row align="center" class="list_total">
 
@@ -51,18 +60,20 @@
 
                 class="urgency_type"
 
                 :style="{
 
                   'background-color': `${
 
-                    urgency_filter(item.urgency)['color']
 
+                    dict_filter(item.urgency, 'urgencyTypeList')['color']
 
                   }`,
 
                 }"
 
               >
 
                 <van-col>{{
 
-                  `${urgency_filter(item.urgency)["label"]}`
 
+                  `${dict_filter(item.urgency, "urgencyTypeList")["dictLabel"]}`
 
                 }}</van-col>
 
               </van-row>
 
             </template>
 
             <van-col class="header">{{ item.repairPosition }}</van-col>
 
             <van-col
 
-              >报修类型：{{ `${repairType_filter(item.repairType)}` }}</van-col
 
+              >报修类型：{{
 
+                `${dict_filter(item.repairType, "repairTypeList")["dictLabel"]}`
 
+              }}</van-col
 
             >
 
             <template v-if="item.status == 1">
 
               <van-col>报修时间：{{ item.createDate }}</van-col>
 
@@ -80,19 +91,25 @@
 
   </van-pull-refresh>
 
 </template>
 
 <script>
 
-import Api from "../utils/api";
 
-import { isEmpty } from "@/utils/index.js";
 
-import VCountUp from "./CountUp";
 
+import Api from "@/utils/api";
 
+import { isEmpty, getDictDataList } from "@/utils/index";
 
+import VCountUp from "../CountUp";
 
 export default {
 
   components: {
 
     "v-count-up": VCountUp,
 
   },
 
   data() {
 
     return {
 
+      role: "",
 
       title: "",
 
-      activeTab: 1,
 
-      page: 1,
 
-      limit: 10,
 
+      repairStatusList: [],
 
+      repairTypeList: [],
 
+      urgencyTypeList: [],
 
+      dataForm: {
 
+        status: 1,
 
+        page: 1,
 
+        limit: 10,
 
+      },
 
       dataList: [],
 
       loading: false,
 
       refreshing: false,
 
@@ -100,69 +117,108 @@ export default {
 
     };
 
   },
 
   watch: {
 
-    activeTab: {
 
+    "dataForm.status": {
 
       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 = "报修记录";
 
+      this.dataForm.status = "";
 
+    }
 
+    this.getRepairStatusList();
 
+    this.getRepairTypeList();
 
+    this.getUrgencyTypeList();
 
+  },
 
 
   methods: {
 
-    repairType_filter(val) {
 
-      if (isEmpty(val)) {
 
-        return "";
 
-      }
 
-      if (val == 1) {
 
-        return "水";
 
-      }
 
-      if (val == 2) {
 
-        return "电";
 
-      }
 
-      if (val == 3) {
 
-        return "其他";
 
+    getRepairStatusList() {
 
+      this.repairStatusList = getDictDataList("RepairStatus");
 
+      if (this.role == "Maintenance") {
 
+        this.repairStatusList = this.repairStatusList.filter(
 
+          (item) => item.dictValue != 1
 
+        );
 
       }
 
     },
 
-    urgency_filter(val) {
 
+
 
+    getRepairTypeList() {
 
+      this.repairTypeList = getDictDataList("RepairType");
 
+    },
 
+
 
+    getUrgencyTypeList() {
 
+      this.urgencyTypeList = getDictDataList("UrgencyType");
 
+      this.urgencyTypeList.forEach((item) => {
 
+        if (item.dictValue == 1) {
 
+          item.color = "#ED3A25";
 
+        }
 
+        if (item.dictValue == 2) {
 
+          item.color = "#FF9C27";
 
+        }
 
+        if (item.dictValue == 3) {
 
+          item.color = "#30D3A2";
 
+        }
 
+      });
 
+    },
 
+
 
+    dict_filter(val, list) {
 
       if (isEmpty(val)) {
 
         return {};
 
       }
 
-      if (val == 1) {
 
-        return { label: "非常紧急", color: "#ED3A25" };
 
-      }
 
-      if (val == 2) {
 
-        return { label: "紧急", color: "#FF9C27" };
 
-      }
 
-      if (val == 3) {
 
-        return { label: "普通", color: "#30D3A2" };
 
-      }
 
+      return this[list].find((item) => item.dictValue == val);
 
+    },
 
+    onLoad() {
 
+      setTimeout(async () => {
 
+        if (this.refreshing) {
 
+          this.dataList = [];
 
+          this.refreshing = false;
 
+        }
 
+        await this.getDataList();
 
+        this.dataForm.page++; // 分页数加一
 
+      }, 100);
 
+    },
 
+    onRefresh() {
 
+      // 清空列表数据
 
+      this.finished = false;
 
+      this.dataList = [];
 
+      // 重新加载数据
 
+      // 将 loading 设置为 true，表示处于加载状态
 
+      this.loading = true;
 
+      this.dataForm.page = 1; // 分页数赋值为1
 
+      this.onLoad();
 
     },
 
     // 获取列表数据方法
 
     async getDataList() {
 
-      Api.repairInfoQuery({
 
-        page: this.page,
 
-        limit: this.limit,
 
-        status: this.activeTab,
 
-      }).then((res) => {
 
+      Api.repairInfoQuery(this.dataForm).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,28 +226,9 @@ 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",
 
+        path: "/repair/detail",
 
         query: {
 
           id: id,
 
         },
 
@@ -250,18 +287,10 @@ 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;
 
-      }
 
+
 
       .van-col {
 
         height: 18px;
 
         font-size: 14px;
 
-        font-weight: 400;
 
         color: #999999;
 
         line-height: 18px;
 
         margin-bottom: 4px;
 
@@ -269,6 +298,13 @@ export default {
 
           margin-bottom: 0;
 
         }
 
       }
 
+      .header {
 
+        height: 22px;
 
+        font-size: 16px;
 
+        color: #0c1935;
 
+        line-height: 22px;
 
+        margin-bottom: 8px;
 
+      }
 
       .urgency_type {
 
         position: absolute;
 
         top: 0;

+ 0 - 346
src/views/repairOnline.vue
파일 보기 

@@ -1,346 +0,0 @@
 
-<template>
 
-  <van-nav-bar title="线上报修" safe-area-inset-top>
 
-    <template #left>
 
-      <van-icon
 
-        :name="require('@/assets/arrow-left.svg')"
 
-        size="24"
 
-        @click="backPath"
 
-      />
 
-    </template>
 
-  </van-nav-bar>
 
-  <div class="page_info">
 
-    <div class="info_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-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
 
-            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
 
-            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"
 
-              />
 
-            </template>
 
-          </van-cell>
 
-        </van-cell-group>
 
-        <div class="save_btn">
 
-          <van-button block type="primary" native-type="submit">
 
-            提交
 
-          </van-button>
 
-        </div>
 
-      </van-form>
 
-    </div>
 
-  </div>
 
-</template>
 
-<script>
 
-import Api from "../utils/api";
 
-export default {
 
-  data() {
 
-    return {
 
-      
-      loading: false,
 
-      fileList: [],
 
-      tempFileList: [],
 
-      positionList: [],
 
-      fieldNames: {
 
-        text: "orgName",
 
-        value: "orgId",
 
-        children: "childrenList",
 
-      },
 
-      showRepairPositionPicker: false,
 
-      showRepairRegionPicker: false,
 
-      showRepairTypePicker: false,
 
-      repairRegionList: [
 
-        {
 
-          text: "公共区域",
 
-          value: 1,
 
-        },
 
-        {
 
-          text: "室内",
 
-          value: 2,
 
-        },
 
-      ],
 
-      repairTypeList: [
 
-        { text: "水", value: 1 },
 
-        { text: "电", value: 2 },
 
-        { text: "其他", value: 3 },
 
-      ],
 
-      dataForm: {
 
-        id: "",
 
-        buildingId: "",
 
-        storeyId: "",
 
-        houseId: "",
 
-        repairPosition: "",
 
-        repairPositionName: "",
 
-        repairRegion: 1,
 
-        repairRegionName: "",
 
-        repairType: 1,
 
-        repairTypeName: "",
 
-        contactPerson: "",
 
-        contactPhone: "",
 
-        faultDes: "",
 
-        faultPics: "",
 
-      },
 
-    };
 
-  },
 
-  created() {
 
-    this.getBuildList();
 
-  },
 
-  methods: {
 
-    //获取楼栋
 
-    getBuildList() {
 
-      Api.getBuildInfo().then((res) => {
 
-        if (res.code == 0) {
 
-          this.positionList = res.data[0].childrenList;
 
-        }
 
-      });
 
-    },
 
-    onFinish(val) {
 
-      this.dataForm.buildingId = val.selectedOptions[0].orgId;
 
-      this.dataForm.storeyId = val.selectedOptions[1].orgId;
 
-      this.dataForm.houseId = val.selectedOptions[2].orgId;
 
-      this.dataForm.repairPositionName =
 
-        val.selectedOptions[0].orgName +
 
-        "/" +
 
-        val.selectedOptions[1].orgName +
 
-        "/" +
 
-        val.selectedOptions[2].orgName;
 
-      this.showRepairPositionPicker = false;
 
-    },
 
-    onOversize() {
 
-      this.$toast("单个文件大小不能超过 500kb");
 
-    },
 
-    beforeRead(file) {
 
-      if (file instanceof Array) {
 
-        const obj = file.find(
 
-          (item) =>
 
-            !(
 
-              item.type == "image/jpg" ||
 
-              item.type == "image/jpeg" ||
 
-              item.type == "image/png"
 
-            )
 
-        );
 
-        if (obj) {
 
-          this.$toast("请上传 jpeg、jpg或png 格式图片");
 
-          return false;
 
-        }
 
-      } else {
 
-        const isJPG = file.type == "image/jpg";
 
-        const isJPEG = file.type == "image/jpeg";
 
-        const isPNG = file.type == "image/png";
 
-        if (!(isJPG || isJPEG || isPNG)) {
 
-          this.$toast("请上传 jpeg、jpg或png 格式图片");
 
-          return false;
 
-        }
 
-      }
 
-      return true;
 
-    },
 
-    beforeDelete(file) {
 
-      this.tempFileList = this.tempFileList.filter(
 
-        (item) => item.name != file.file.name
 
-      );
 
-      this.fileList = this.fileList.filter(
 
-        (item) => item.file.name != file.file.name
 
-      );
 
-    },
 
-    afterRead(file) {
 
-      if (file instanceof Array) {
 
-        file.forEach((file) => {
 
-          file.status = "uploading";
 
-          file.message = "上传中...";
 
-          setTimeout(async () => {
 
-            await this.uploadFile(file);
 
-          }, 1000);
 
-        });
 
-      } else {
 
-        file.status = "uploading";
 
-        file.message = "上传中...";
 
-        setTimeout(() => {
 
-          this.uploadFile(file);
 
-        }, 1000);
 
-      }
 
-    },
 
-    uploadFile(file) {
 
-      //  这时候我们创建一个formData对象实例
 
-      const formData = new FormData();
 
-      // 通过append方法添加需要的file
 
-      // 这里需要注意 append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
 
-      formData.append("file", file.file);
 
-
 
-      // 上传文件、成功后， 把Url 赋值给 field
 
-      Api.uploadFile(formData).then((res) => {
 
-        if (res.code == 0) {
 
-          file.status = "done";
 
-          file.message = "上传成功";
 
-          this.tempFileList.push({ name: file.file.name, url: res.data });
 
-        } else {
 
-          file.status = "failed";
 
-          file.message = "上传失败";
 
-        }
 
-      });
 
-    },
 
-    onSubmit() {
 
-      let tempArr = [];
 
-      this.tempFileList.forEach((item) => {
 
-        tempArr.push(item.url);
 
-      });
 
-      this.dataForm.faultPics = tempArr.join(",");
 
-      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();
 
-    },
 
-  },
 
-};
 
-</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;
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 1 - 4
src/views/checkClock.vue
파일 보기 

@@ -62,7 +62,7 @@
 
   </div>
 
 </template>
 
 <script>
 
-import { isEmpty } from "@/utils/index.js";
 
+import { isEmpty } from "@/utils/index";
 
 export default {
 
   data() {
 
     return {
 
@@ -130,9 +130,6 @@ export default {
 
 <style lang="scss" scoped>
 
 .page_info {
 
   padding: 16px;
 
-  max-height: calc(
 
-    100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 46px - 32px
 
-  );
 
   overflow-y: auto;
 
   .info_pannel {
 
     display: flex;

+ 3 - 0
src/views/review/index.vue
파일 보기 

@@ -0,0 +1,3 @@
 
+<template >
 
+  <router-view></router-view>
 
+</template>

+ 281 - 0
src/views/review/list.vue
파일 보기 

@@ -0,0 +1,281 @@
 
+<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>
 
+          <van-image
 
+            :src="require('@/assets/search.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>

+ 0 - 266
src/views/reviewCheck.vue
파일 보기 

@@ -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>

+ 27 - 20
src/views/userInfo.vue
파일 보기 

@@ -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
 
@@ -48,22 +48,25 @@
 
               @blur="handleBlur"
 
             />
 
           </van-cell-group>
 
-          <div class="save_btn">
 
-            <van-button
 
-              block
 
-              type="primary"
 
-              :loading="loading"
 
-              loading-type="spinner"
 
-              native-type="submit"
 
-              loading-text="提交"
 
-            >
 
-              提交
 
-            </van-button>
 
-          </div>
 
+
 
+          <van-submit-bar class="save_btn">
 
+            <template #button>
 
+              <van-button
 
+                block
 
+                type="primary"
 
+                :loading="loading"
 
+                loading-type="spinner"
 
+                loading-text="提交"
 
+                native-type="submit"
 
+              >
 
+                提交
 
+              </van-button>
 
+            </template>
 
+          </van-submit-bar>
 
         </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 +83,7 @@
 
 export default {
 
   data() {
 
     return {
 
-      source: "",
 
+      type: "",
 
       title: "",
 
       loading: false,
 
       dataForm: {
 
@@ -93,13 +96,17 @@ 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;
 
-    this.dataForm.password = this.plusXing(this.dataForm.password, 0, 0, "*");
 
+    this.dataForm.password = this.plusXing(
 
+      this.$store.state.password,
 
+      0,
 
+      0,
 
+      "*"
 
+    );
 
   },
 
   methods: {
 
     /* 部分隐藏处理