全部页面都弄上去了

src/assets/line.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4px" height="16px" viewBox="0 0 4 16" 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="admin-首页-工单待办-已维修详情" transform="translate(-16.000000, -715.000000)" fill="#5776E6">
+            <g id="副标题-学生信息备份-2" transform="translate(0.000000, 703.000000)">
+                <rect id="矩形" x="16" y="12" width="4" height="16" rx="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/router/index.js

@@ -76,8 +76,7 @@ const routes = [
     meta: {
       title: '欠费待收',
     },
-  }
-  ,
+  },
   {
     name: 'remoteControl',
     path: '/remoteControl',
@@ -85,6 +84,39 @@ const routes = [
     meta: {
       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: '账单明细',
+    },
   }
   // {
   //   path: '/alllist',

src/views/reduceRecord.vue

@@ -284,18 +284,17 @@ export default {
         .header {
           height: 22px;
           font-size: 16px;
-          font-weight: 600;
-          color: #313836;
+          font-weight: 500;
+          color: #0c1935;
           line-height: 22px;
           margin-bottom: 8px;
         }
         span {
-          height: 18px;
+          height: 20px;
           font-size: 14px;
-          font-weight: 400;
           color: #999999;
-          line-height: 18px;
-          margin-bottom: 4px;
+          line-height: 20px;
+          margin-bottom: 2px;
           &:nth-last-child(1) {
             margin-bottom: 0;
           }

src/views/rentBill.vue

@@ -0,0 +1,319 @@
+<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="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 {
+      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>

src/views/rentBillDetail.vue

@@ -0,0 +1,518 @@
+<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>

src/views/repairDetail.vue

@@ -0,0 +1,312 @@
+<template>
+  <van-nav-bar
+    :title="title"
+    left-arrow
+    @click-left="onClickLeft"
+    safe-area-inset-top
+  />
+  <div class="page_info">
+    <div class="info_list">
+      <van-cell-group class="cell_title_icon">
+        <van-cell
+          title="报修信息"
+          :icon="require('@/assets/line.svg')"
+          v-if="dataForm.repairStatus == 2 || dataForm.repairStatus == 3"
+        />
+        <van-cell title="报修时间" :value="dataForm.repairTime" />
+        <van-cell title="报修位置" :value="dataForm.repairPositionName" />
+        <van-cell
+          title="报修区域"
+          :value="`${repairRegion_filter(dataForm.repairRegion)}`"
+        />
+        <van-cell
+          title="报修类型"
+          :value="`${repairType_filter(dataForm.repairType)}`"
+        />
+        <van-cell title="联系人" :value="dataForm.contactPerson" />
+        <van-cell title="联系电话" :value="dataForm.contactPhone" />
+        <van-cell title="故障描述" :value="dataForm.faultDes" />
+        <van-cell title="故障照片" :border="false" class="upload_cell">
+          <template #value>
+            <van-image
+              width="80"
+              height="80"
+              :src="item"
+              v-for="(item, index) in imagesList"
+              :key="item + '_' + index"
+              @click="showImgPreview = true"
+            />
+            <van-image-preview
+              v-model:show="showImgPreview"
+              :images="imagesList"
+              v-if="showImgPreview"
+            >
+            </van-image-preview>
+          </template>
+        </van-cell>
+      </van-cell-group>
+
+      <van-cell-group
+        class="cell_title_icon"
+        v-if="dataForm.repairStatus == 2 || dataForm.repairStatus == 3"
+      >
+        <van-cell title="维修信息" :icon="require('@/assets/line.svg')" />
+        <van-cell
+          title="紧急程度"
+          :value="`${urgency_filter(dataForm.urgency)}`"
+        />
+        <van-cell title="维修人员" :value="dataForm.repairPersonName" />
+        <van-cell title="联系电话" :value="dataForm.repairPerson" />
+        <van-cell
+          title="维修完成时间"
+          :value="dataForm.repairFinishTime"
+          v-if="dataForm.repairStatus == 3"
+        />
+      </van-cell-group>
+    </div>
+  </div>
+  <div class="save_btn">
+    <van-button
+      block
+      type="primary"
+      loading-type="spinner"
+      @click="handleClick"
+    >
+      指派维修人员
+    </van-button>
+  </div>
+  <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-form
+      ref="dataForm"
+      input-align="right"
+      error-message-align="right"
+      @submit="onSubmit"
+    >
+      <van-cell-group :border="false">
+        <van-field
+          v-model="dataForm.repairPersonName"
+          label="维修人员"
+          required
+          is-link
+          placeholder="请选择维修人员"
+          clearable
+          :rules="[{ required: true, message: '请选择维修人员' }]"
+          @click="showRepairPersonPicker = true"
+        />
+        <van-popup
+          v-model:show="showRepairPersonPicker"
+          round
+          position="bottom"
+        >
+          <van-picker
+            :columns="repairPersonList"
+            @cancel="showRepairPersonPicker = false"
+            @confirm="
+              (value) => {
+                dataForm.repairPerson = value.value;
+                dataForm.repairPersonName = value.text;
+                showRepairPersonPicker = false;
+              }
+            "
+          />
+        </van-popup>
+        <van-field
+          v-model="dataForm.urgencyName"
+          label="紧急程度"
+          required
+          is-link
+          placeholder="请选择紧急程度"
+          clearable
+          :rules="[{ required: true, message: '请选择紧急程度' }]"
+          @click="showUrgencyPicker = true"
+        />
+        <van-popup v-model:show="showUrgencyPicker" round position="bottom">
+          <van-picker
+            :columns="repairUrgencyList"
+            @cancel="showUrgencyPicker = false"
+            @confirm="
+              (value) => {
+                dataForm.urgency = value.value;
+                dataForm.urgencyName = value.text;
+                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"
+        >
+          提交
+        </van-button>
+      </div>
+    </van-form>
+  </van-popup>
+</template>
+<script>
+import { isEmpty } from "@/utils/index.js";
+import VCountUp from "./CountUp";
+export default {
+  components: {
+    "v-count-up": VCountUp,
+  },
+  data() {
+    return {
+      loading: false,
+      title: "",
+      showImgPreview: false,
+      imagesList: [],
+      showPopup: false,
+      popupTitle: "工单指派",
+      showRepairPersonPicker: false,
+      showUrgencyPicker: false,
+      repairPersonList: [],
+      repairUrgencyList: [
+        { text: "非常紧急", value: 1 },
+        { text: "紧急", value: 2 },
+        { text: "普通", value: 3 },
+      ],
+      dataForm: {
+        repairPerson: "15394820234",
+        repairPersonName: "王旭",
+        urgency: "",
+        urgencyName: "",
+        repairTime: "2022/05/24 13:32:22",
+        repairFinishTime: "2022/05/24 13:32:22",
+        repairPositionName: "B座13楼1301",
+        repairRegion: 1,
+        repairStatus: 1,
+        repairType: 1,
+        contactPerson: "张浩",
+        contactPhone: "13682307574",
+        faultDes: "女卫生间水龙头一直滴水，关不上，请尽快处理谢谢",
+        faultPics:
+          "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg,https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
+      },
+    };
+  },
+
+  created() {
+    this.imagesList = this.dataForm.faultPics.split(",");
+    if (this.dataForm.repairStatus == 2 || this.dataForm.repairStatus == 3) {
+      this.title = "报修详情";
+    } else {
+      this.title = "工单详情";
+    }
+  },
+  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 "普通";
+      }
+    },
+    handleClick() {
+      this.showPopup = !this.showPopup;
+      this.$nextTick(() => {
+        this.$refs.dataForm.resetValidation();
+      });
+    },
+    onSubmit() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.showPopup = false;
+      }, 2000);
+    },
+    onClickLeft() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_info {
+  .info_list {
+    /deep/ {
+      .upload_cell {
+        .van-cell__title {
+          flex: unset;
+        }
+        .van-cell__value {
+          text-align: center;
+        }
+        .van-image {
+          margin-left: 8px;
+        }
+      }
+      .cell_title_icon {
+        .van-icon {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.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 {
+    color: #666666;
+  }
+}
+</style>

src/views/repairList.vue

@@ -0,0 +1,253 @@
+<template>
+  <van-nav-bar
+    :title="title"
+    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-tab title="已指派(待维修)" />
+        <van-tab title="已维修" />
+      </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">
+      <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">
+              <template v-if="item.repairStatus != 1">
+                <div
+                  class="urgency_type"
+                  :style="{
+                    'background-color': `${
+                      urgency_filter(item.urgency)['color']
+                    }`,
+                  }"
+                >
+                  <span>{{ `${urgency_filter(item.urgency)["label"]}` }}</span>
+                </div>
+              </template>
+              <span class="header">{{ item.position }}</span>
+              <span>报修类型：{{ item.repairType }}</span>
+              <span>维修完成时间：{{ item.repairFinishTime }}</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,
+      title: "",
+      activeTab: 0,
+      total: 3,
+      list: [
+        {
+          position: "B座13楼1301",
+          urgency: 1,
+          repairType: 1,
+          repairStatus: 1,
+          repairFinishTime: "2022/12/04 13:32:22",
+        },
+      ],
+      loading: false,
+      refreshing: false,
+      finished: false,
+    };
+  },
+  watch: {
+    activeTab: {
+      handler(newval, oldval) {
+        if (newval == 1 || newval == 2) {
+          this.title = "报修工单";
+        } else {
+          this.title = "工单待办";
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+
+  methods: {
+    repairType_filter(val) {
+      if (isEmpty(val)) {
+        return "";
+      }
+      if (val == 1) {
+        return "水";
+      }
+      if (val == 2) {
+        return "电";
+      }
+      if (val == 3) {
+        return "其他";
+      }
+    },
+    urgency_filter(val) {
+      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" };
+      }
+    },
+    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();
+    },
+    onClickLeft() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_check {
+  height: 100%;
+  .search_pannel {
+    background: #ffffff;
+    /deep/ {
+      .van-tabs__line {
+        --van-tabs-bottom-bar-color: #2e69eb;
+      }
+    }
+  }
+  .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;
+          }
+        }
+        .urgency_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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/repairOnline.vue

@@ -21,6 +21,7 @@
             placeholder="请选择报修位置"
             clearable
             :rules="[{ required: true, message: '请选择报修位置' }]"
+             @click="showRepairPositionPicker = true"
           />
           <van-popup
             v-model:show="showRepairPositionPicker"