双碳app新框架，admin端

babel.config.js

@@ -1,17 +1,6 @@
-
 module.exports = {
   "presets": [
     '@vue/cli-plugin-babel/preset'
-  ],
-  "plugins": [
-    [
-      "import",
-      {
-        "libraryName": "vant",
-        "libraryDirectory": "es",
-        "style": true
-      }
-    ]
   ]
 }
 

package.json

@@ -10,38 +10,22 @@
   "dependencies": {
     "axios": "^1.2.1",
     "axios-retry": "^3.3.1",
-    "core-js": "^3.8.3",
-    "vant": "^4.0.2",
+    "core-js": "^3.6.5",
+    "countup.js": "^2.3.2",
+    "node-sass": "^6.0.1",
+    "sass-loader": "^10.0.1",
+    "vant": "^3.6.0",
     "vconsole": "^3.15.0",
-    "vue": "^3.2.13",
-    "vue-router": "^4.1.6",
+    "vue": "^3.0.0",
+    "vue-countupjs": "^1.0.0",
+    "vue-router": "^4.0.0",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "babel-loader": "^9.1.0",
-    "babel-plugin-import": "^1.13.5",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "i": "^0.3.7"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "unplugin-vue-components": "^0.19.6"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -1,21 +1,57 @@
+
 <template>
-  <router-view> </router-view>
-  <!-- 开启顶部安全区适配 -->
-  <van-nav-bar safe-area-inset-top />
+  <div class="main">
+    <router-view> </router-view>
+  </div>
   <!-- 开启底部安全区适配 -->
   <van-number-keyboard safe-area-inset-bottom />
 </template>
-<script>
-export default {};
-</script>
-<style>
+<style lang="scss">
 #app {
-  font-family: ”Microsoft YaHei”, Arial, Helvetica, sans-serif, ”宋体”;
+  font-family: PingFangSC-Regular, PingFang SC;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #333333;
-  background: #f8f8f8;
+  background: #f6f6f6;
   height: 100vh;
+  box-sizing: border-box;
+}
+
+.main {
+  height: 100vh;
+  overflow-y: hidden;
+  .van-cell__title {
+    text-align: left;
+    color: #666666;
+  }
+  .van-cell__value {
+    color: #999999;
+  }
+  --van-cell-font-size: 16px;
+  --van-field-label-color: #666666;
+  --van-field-input-text-color: #333333;
+  --van-nav-bar-icon-color: #333333;
+  --van-nav-bar-title-text-color: #333333;
+  --van-font-weight-bold: 600;
+  --van-nav-bar-title-font-size: 16px;
+  --van-button-normal-font-size: 16px;
+  .van-button {
+    font-weight: 600;
+  }
+  .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-border-width: 0;
+    --van-button-default-border-color: unset;
+    --van-button-border-radius: 4px;
+    .van-button {
+      width: calc(100% - 32px);
+    }
+  }
 }
 </style>

src/main.js

@@ -1,14 +1,16 @@
-
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store/index'
 import VConsole from 'vconsole';
-import { Toast } from 'vant';
-import { Notify  } from 'vant';
+import { vant } from './utils/vant.config';
+import 'vant/es/toast/style';//无法自动按需引入这两个的样式，需要手动引入
+import 'vant/es/notify/style';
 
 if (process.env.NODE_ENV !== "production") {
     new VConsole({ theme: 'dark' });
 }
 
-createApp(App).use(store).use(router).use(Toast).use(Notify).mount('#app')
+const app = createApp(App)
+vant(app)
+app.use(store).use(router).mount('#app')

src/router/index.js

@@ -1,16 +1,67 @@
-
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 const routes = [
   {
     path: '/',
-    redirect:'login'
+    redirect: '/login'
+  },
+  {
+    name: 'login',
+    path: '/login',
+    component: () => import('../views/login'),
+    meta: {
+      title: '登录',
+    },
   },
   {
-    path: 'login',
-    name: '登录',
-    component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
+    name: 'home',
+    path: '/home',
+    component: () => import('../views/home'),
+    meta: {
+      title: '首页',
+    },
   },
+  {
+    name: 'userInfo',
+    path: '/userInfo',
+    component: () => import('../views/userInfo/index'),
+    meta: {
+      title: '账号中心',
+    },
+  },
+  {
+    name: 'changePassWord',
+    path: '/changePassWord',
+    component: () => import('../views/userInfo/changePassWord'),
+    meta: {
+      title: '修改密码',
+    },
+  },
+  {
+    name: 'repairOnline',
+    path: '/repairOnline',
+    component: () => import('../views/repairOnline'),
+    meta: {
+      title: '线上报修',
+    },
+  },
+  {
+    name: 'reviewCheck',
+    path: '/reviewCheck',
+    component: () => import('../views/reviewCheck'),
+    meta: {
+      title: '巡检记录',
+    },
+  }
+  ,
+  {
+    name: 'reduceRecord',
+    path: '/reduceRecord',
+    component: () => import('../views/reduceRecord'),
+    meta: {
+      title: '扣缴记录',
+    },
+  }
   // {
   //   path: '/alllist',
   //   name: '全部人员列表',
@@ -19,12 +70,16 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(), 
+  history: createWebHashHistory(),
   routes
 })
 // 全局前置守卫，设置页面标题
 router.beforeEach((to, from, next) => {
-  document.title = to.matched[0] == null ? '双碳感知资产运营管理平台' : to.matched[0].name;
+  // const title = to.meta && to.meta.title;
+  // if (title) {
+  //   document.title = title;
+  // }
+  document.title = '双碳感知资产运营管理平台';
   next(); //必须写
 });
 

src/utils/api.js

@@ -1,6 +1,6 @@
 
 import { service } from './request'
 export default {
-    // loginByPwd: (params) => service.post("/app/login", params),
-    // getUserInfo: (params) => service.get("/app/login", params)
+    loginByPwd: (params) => service.post("/app/login", params),
+    getUserInfo: (params) => service.get("/app/login", params)
 }

src/utils/vant.config.js

@@ -0,0 +1,81 @@
+
+import {
+    Button, Cell, CellGroup, Icon, Image as VanImage, Col, Row, Popup, Calendar, Cascader, Checkbox,
+    CheckboxGroup, Field, Form, Picker, RadioGroup, Radio, Rate, Search, Slider, Stepper,
+    Switch, Uploader, Dialog, DropdownMenu, DropdownItem, Loading,Toast, Notify, Overlay, PullRefresh, ShareSheet,
+    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
+} from 'vant';
+export function vant(app) {
+    app.use(Button);
+    app.use(Cell);
+    app.use(CellGroup);
+    app.use(Icon);
+    app.use(VanImage);
+    app.use(Col);
+    app.use(Row);
+    app.use(Popup);
+    app.use(Calendar);
+    app.use(Cascader);
+    app.use(Checkbox);
+    app.use(CheckboxGroup);
+    app.use(Field);
+    app.use(Form);
+    app.use(Picker);
+    app.use(RadioGroup);
+    app.use(Radio);
+    app.use(Rate);
+    app.use(Search);
+    app.use(Slider);
+    app.use(Stepper);
+    app.use(Switch);
+    app.use(Uploader);
+    app.use(Dialog);
+    app.use(DropdownMenu);
+    app.use(DropdownItem);
+    app.use(Toast);
+    app.use(Loading);
+    app.use(Notify);
+    app.use(Overlay);
+    app.use(PullRefresh);
+    app.use(ShareSheet);
+    app.use(SwipeCell);
+    app.use(Badge);
+    app.use(Circle);
+    app.use(Collapse);
+    app.use(CollapseItem);
+    app.use(CountDown);
+    app.use(Divider);
+    app.use(Empty);
+    app.use(ImagePreview);
+    app.use(List);
+    app.use(NoticeBar);
+    app.use(Popover);
+    app.use(Progress);
+    app.use(Skeleton);
+    app.use(Step);
+    app.use(Steps);
+    app.use(Sticky);
+    app.use(Swipe);
+    app.use(SwipeItem);
+    app.use(Tag);
+    app.use(ActionBar);
+    app.use(ActionBarIcon);
+    app.use(ActionBarButton);
+    app.use(Grid);
+    app.use(GridItem);
+    app.use(IndexBar);
+    app.use(IndexAnchor);
+    app.use(NavBar);
+    app.use(Pagination);
+    app.use(Sidebar);
+    app.use(SidebarItem);
+    app.use(Tab);
+    app.use(Tabs);
+    app.use(Tabbar);
+    app.use(TabbarItem);
+    app.use(TreeSelect);
+    app.use(NumberKeyboard);
+}

src/views/CountUp/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <span ref="count" />
+</template>
+ 
+<script>
+import { CountUp } from 'countup.js'
+const defaultOptions = {
+  startVal: 0, // number to start at (0)
+  decimalPlaces: 0, // number of decimal places (0)
+  duration: 2, // animation duration in seconds (2)
+  useGrouping: true, // example: 1,000 vs 1000 (true)
+  useEasing: true, // ease animation (true)
+  smartEasingThreshold: 999, // smooth easing for large numbers above this if useEasing (999)
+  smartEasingAmount: 333, // amount to be eased for numbers above threshold (333)
+  separator: ',', // grouping separator (',')
+  decimal: '.' // decimal ('.')
+}
+export default {
+  name: 'CountUp',
+  props: {
+    // 起始值
+    endVal: {
+      type: Number,
+      default: 0
+    },
+    options: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    endVal() {
+      if (this.$refs.count) {
+        this.initCountUp()
+      }
+    }
+  },
+  mounted() {
+    this.initCountUp()
+  },
+  methods: {
+    initCountUp() {
+      const coutOptions = Object.assign({}, defaultOptions, this.options)
+      const countUp = new CountUp(this.$refs.count, this.endVal, coutOptions)
+      countUp.start()
+    }
+  }
+}
+</script>

src/views/home.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="page_home">
+    <div class="home_bg">
+      <div class="bg_title">
+        <div class="title_info">
+          <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="user_info" @click="toPath">
+          <van-image
+            :src="require('@/assets/user.svg')"
+            width="16"
+            height="16"
+            fit="contain"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="home_info">
+      <div class="info_content">
+        <div
+          class="content_item"
+          v-for="(item, index) in functionList"
+          :key="index"
+        >
+          <van-image :src="item.src" width="36" height="36" fit="contain" />
+          <span>{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="card_list">
+      <div class="sub_title">
+        <span>工单待办</span>
+        <div class="function_btn">
+          <span>立即处理</span>
+          <van-image
+            :src="require('@/assets/btn-arrow-right.svg')"
+            width="24"
+            height="24"
+            fit="contain"
+          />
+        </div>
+      </div>
+      <div class="list_item">
+        <div
+          class="item_info"
+          v-for="(item, index) in workList"
+          :key="item + '_' + index"
+        >
+          <span class="label">{{ item.label }}</span>
+          <v-count-up
+            :end-val="Number(item['count'])"
+            class="count_up"
+            :options="item['options']"
+          />
+        </div>
+      </div>
+      <div class="sub_title">
+        <span>设备异常</span>
+        <div class="function_btn">
+          <span>立即处理</span>
+          <van-image
+            :src="require('@/assets/btn-arrow-right.svg')"
+            width="24"
+            height="24"
+            fit="contain"
+          />
+        </div>
+      </div>
+      <div class="list_item">
+        <div
+          class="item_info"
+          v-for="(item, index) in deviceErrorList"
+          :key="item + '-' + index"
+        >
+          <span class="label">{{ item.label }}</span>
+          <v-count-up
+            :end-val="Number(item['count'])"
+            class="count_up"
+            :options="item['options']"
+            style="color: #fa5555"
+          />
+        </div>
+      </div>
+      <div class="sub_title">
+        <span>欠费待收</span>
+        <div class="function_btn">
+          <span>立即处理</span>
+          <van-image
+            :src="require('@/assets/btn-arrow-right.svg')"
+            width="24"
+            height="24"
+            fit="contain"
+          />
+        </div>
+      </div>
+      <div class="list_item list_table">
+        <div class="table_info">
+          <div class="table_header">
+            <span>欠费类型</span>
+            <span>欠费租户数</span>
+            <span>累计欠费</span>
+          </div>
+          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+            <van-list
+              v-model:loading="loading"
+              :finished="finished"
+              :error="error"
+              error-text="请求失败，点击重新加载"
+              finished-text="没有更多了"
+              @load="onLoad"
+            >
+              <van-row v-for="item in list" :key="item.id">
+                <van-cell :value="item.type" />
+                <van-cell :value="item.fee" />
+                <van-cell :value="item.totalFee" />
+              </van-row>
+            </van-list>
+          </van-pull-refresh>
+        </div>
+      </div>
+    </div>
+    <van-tabbar
+      v-model="activeTab"
+      active-color="#5776E6"
+      inactive-color="#333333"
+    >
+      <van-tabbar-item name="home" :icon="require('@/assets/home.svg')" to=""
+        >首页</van-tabbar-item
+      >
+      <van-tabbar-item
+        name="rentBill"
+        :icon="require('@/assets/rent-bill.svg')"
+        to=""
+        >租户账单</van-tabbar-item
+      >
+      <van-tabbar-item
+        name="remoteControl"
+        :icon="require('@/assets/remote-control.svg')"
+        to=""
+        >远程管控</van-tabbar-item
+      >
+    </van-tabbar>
+  </div>
+</template>
+<script>
+import VCountUp from "./CountUp";
+export default {
+  components: {
+    "v-count-up": VCountUp,
+  },
+  data() {
+    return {
+      name: "电商园四期-B座",
+      activeTab: "rentBill",
+      functionList: [
+        { src: require("@/assets/repair-online.svg"), label: "线上报修" },
+        { src: require("@/assets/check-review.svg"), label: "巡检记录" },
+        { src: require("@/assets/reduce-record.svg"), label: "扣缴记录" },
+      ],
+      workList: [
+        {
+          label: "待指派",
+          count: 3,
+          options: {
+            separator: ",",
+          },
+        },
+        {
+          label: "待维修",
+          count: 2,
+          options: {
+            separator: ",",
+          },
+        },
+        {
+          label: "已维修",
+          count: 1,
+          options: {
+            separator: ",",
+          },
+        },
+      ],
+      deviceErrorList: [
+        {
+          label: "异常总数",
+          count: 7,
+          options: {
+            separator: ",",
+          },
+        },
+        {
+          label: "电表异常",
+          count: 5,
+          options: {
+            separator: ",",
+          },
+        },
+        {
+          label: "水表异常",
+          count: 2,
+          options: {
+            separator: ",",
+          },
+        },
+      ],
+      list: [],
+      loading: false,
+      refreshing: false,
+      finished: false,
+    };
+  },
+  methods: {
+    onLoad() {
+      setTimeout(() => {
+        if (this.refreshing.value) {
+          this.list.value = [];
+          this.refreshing.value = false;
+        }
+
+        for (let i = 0; i < 10; i++) {
+          this.list.value.push(this.list.value.length + 1);
+        }
+        this.loading.value = false;
+
+        if (this.list.value.length >= 40) {
+          this.finished.value = true;
+        }
+      }, 1000);
+    },
+
+    onRefresh() {
+      // 清空列表数据
+      this.finished.value = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading.value = true;
+      this.onLoad();
+    },
+    toPath() {
+      this.$router.push("/userInfo");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_home {
+  position: relative;
+  .home_bg {
+    width: 100%;
+    height: 102px;
+    background: #5c8fff;
+    border-radius: 0px 0px 16px 16px;
+    padding-top: 12px;
+    margin-bottom: 42px;
+    .bg_title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+      .title_info {
+        display: flex;
+        align-items: center;
+        span {
+          height: 24px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #ffffff;
+          line-height: 24px;
+          text-align: center;
+          text-indent: 4px;
+          text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+        }
+      }
+
+      .user-info {
+      }
+    }
+  }
+  .home_info {
+    position: absolute;
+    top: 52px;
+    width: calc(100% - 32px);
+    padding: 0 16px;
+    .info_content {
+      background: #ffffff;
+      box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 30px;
+      .content_item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        span {
+          height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #697081;
+          line-height: 20px;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+  .card_list {
+    padding: 0 16px;
+    .sub_title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 12px 0 6px 0;
+      span {
+        height: 20px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #0c1935;
+        line-height: 20px;
+      }
+      .function_btn {
+        display: flex;
+        align-items: center;
+        span {
+          height: 16px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #2e69eb;
+          line-height: 16px;
+        }
+      }
+    }
+    .list_item {
+      background: #ffffff;
+      box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.08);
+      border-radius: 4px;
+      padding: 16px 30px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .item_info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .label {
+          height: 16px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #697081;
+          line-height: 16px;
+        }
+        .count_up {
+          margin-top: 4px;
+          height: 22px;
+          font-size: 20px;
+          font-weight: 500;
+          color: #0c1935;
+          line-height: 22px;
+        }
+      }
+    }
+    .list_table {
+      padding: 16px 20px;
+      .table_info {
+        .table_header {
+          display: flex;
+          justify-content: space-between;
+          padding-bottom: 8px;
+          border-bottom: 1px solid #eeeeee;
+
+          span {
+            height: 16px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #9da0ac;
+            line-height: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/login.vue

@@ -1,97 +1,111 @@
 
+
 <template>
-  <van-form>
-    <div style="background-color: #fff">
-      <van-image
-        width="48"
-        height="48"
-        style="margin-top: 20%"
-        :src="require('@/assets/jujia.png')"
-      />
-      <div
-        style="
-          font-size: 18px;
-          text-align: center;
-          color: #5776e6;
-          margin-top: 20px;
-          font-weight: 600;
-        "
-      >
-        双碳感知资产运营管理平台
+  <!-- 开启顶部安全区适配 -->
+  <van-nav-bar
+    :border="false"
+    safe-area-inset-top
+    style="background-color: #5c8fff"
+  />
+  <div class="page_login">
+    <div class="login_bg">
+      <div class="bg_title">
+        <van-image
+          :src="require('@/assets/logo.svg')"
+          width="32"
+          height="32"
+          fit="contain"
+        />
+        <span>双碳感知资产运营管理平台</span>
       </div>
-      <van-field
-        v-model="tel"
-        type="tel"
-        name="手机号"
-        label="手机号"
-        style="margin: 50px 0 50px 20px"
-        placeholder="请输入手机号"
-        :rules="[{ required: true, message: '请输入手机号' }]"
-      />
-      <van-field
-        v-model="password"
-        type="password"
-        name="密码"
-        label="密码"
-        style="margin: 50px 0 50px 20px"
-        placeholder="请输入密码"
-        :rules="[{ required: true, message: '请输入密码' }]"
-      />
-
-      <div style="margin: 16px">
-        <van-button
-          round
-          block
-          type="primary"
-          :disabled="disBtn"
-          @click="submitForm"
-        >
-          进入体验
-        </van-button>
+    </div>
+    <div class="login_info">
+      <div class="info_content">
+        <div class="title">
+          <span>登录</span>
+        </div>
+        <van-form @submit="onSubmit">
+          <van-cell-group>
+            <van-field
+              v-model="tel"
+              name="手机号"
+              :left-icon="require('@/assets/phone.svg')"
+              placeholder="请输入手机号码"
+              :clearable="true"
+              :rules="[{ required: true, message: '请输入手机号码' }]"
+              style="margin-bottom: 20px"
+            />
+            <van-field
+              v-model="password"
+              type="password"
+              name="密码"
+              :left-icon="require('@/assets/password.svg')"
+              placeholder="请输入密码"
+              :clearable="true"
+              :rules="[{ required: true, message: '请输入密码' }]"
+            />
+          </van-cell-group>
+          <div style="margin-top: 50px">
+            <van-button
+              round
+              block
+              type="primary"
+              :loading="loading"
+              loading-text="登陆中。。。"
+              native-type="submit"
+            >
+              登录
+            </van-button>
+          </div>
+        </van-form>
       </div>
     </div>
-  </van-form>
+  </div>
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
-import Api from "./utils/api";
+import { getUserInfo } from "../utils/api";
 export default {
-  setup() {
-    const tel = ref("");
-    const password = ref("");
-    return { tel, password };
+  data() {
+    return {
+      loading: false,
+      tel: "",
+      password: "",
+    };
   },
   mounted() {
     window.localStorage.setItem("token", "");
     window.localStorage.setItem("role", "");
   },
   methods: {
-    submitForm() {
-      this.$toast({
-        message: "登录中...",
-        forbidClick: true,
-      });
-      Api.loginByPwd({
+    onSubmit() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.$router.push("/home");
+      }, 2000);
+      // Api.loginByPwd({
+      //   username: this.tel,
+      //   password: this.password,
+      //   captcha: "1",
+      //   uuid: "1",
+      // }).then((res) => {
+      // this.loading = false
+      //   if (res.code == 0) {
+      //     this.$toast.clear();
+      //     window.localStorage.setItem("token", res.data.token);
+      // this.getUserInfo();
+      //   } else {
+      //     this.$notify({ type: "danger", message: res.msg });
+      //   }
+      // });
+    },
+    getUserInfo() {
+      Api.getUserInfo({
         username: this.tel,
         password: this.password,
-        captcha: "1",
-        uuid:'1'
       }).then((res) => {
         if (res.code == 0) {
-          this.$toast.clear();
-          window.localStorage.setItem("token", res.data.token);
-          this.getUserInfo();
-        } else {
-          this.$notify({ type: "danger", message: res.msg });
-        }
-      });
-    },
-    //获取用户信息role分类
-    getUserInfo() {
-      Api.getUserInfo().then((res) => {
-        if (res.code == 0) {
-          console.log(res.data);
         } else {
           this.$notify({ type: "danger", message: res.msg });
         }
@@ -101,14 +115,64 @@ export default {
 };
 </script>
 
-<style>
-#app {
-  font-family: ”Microsoft YaHei”, Arial, Helvetica, sans-serif, ”宋体”;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #333333;
-  background: #f8f8f8;
-  height: 100vh;
+<style lang="scss" scoped>
+.page_login {
+  position: relative;
+  .login_bg {
+    width: 100%;
+    height: 245px;
+    background: #5c8fff;
+    border-radius: 0px 0px 16px 16px;
+    padding-top: 16px;
+    .bg_title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        height: 24px;
+        font-size: 18px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 24px;
+        text-align: center;
+      }
+    }
+  }
+  .login_info {
+    position: absolute;
+    top: 142px;
+    width: calc(100% - 32px);
+    padding: 0 16px;
+    .info_content {
+      background: #ffffff;
+      box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
+      border-radius: 16px;
+      padding: 30px 20px 50px 20px;
+      .title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 30px;
+        span {
+          height: 24px;
+          font-size: 20px;
+          font-weight: 600;
+          color: #0c1935;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+  /deep/ {
+    --van-cell-vertical-padding: 8px;
+    .van-icon__image {
+      margin-top: 4px;
+    }
+    .van-field {
+      background: #f4f7ff;
+      border-radius: 18px;
+      border: 1px solid #5c8fff;
+    }
+  }
 }
 </style>

src/views/reduceRecord.vue

@@ -0,0 +1,318 @@
+<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 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: 1,
+          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 (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: 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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/repairOnline.vue

@@ -0,0 +1,273 @@
+<template>
+  <van-nav-bar
+    title="线上报修"
+    left-arrow
+    @click-left="onClickLeft"
+    safe-area-inset-top
+  />
+  <div class="page_repair">
+    <div class="repair_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: '请选择报修位置' }]"
+          />
+          <van-popup
+            v-model:show="showRepairPositionPicker"
+            round
+            position="bottom"
+          >
+            <van-picker
+              :columns="repairPositionList"
+              @cancel="showRepairPositionPicker = false"
+              @confirm="
+                (value) => {
+                  dataForm.repairPosition = value.value;
+                  dataForm.repairPositionName = value.text;
+                  showRepairPositionPicker = false;
+                }
+              "
+            />
+          </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"
+                :after-read="afterRead"
+                @oversize="onOversize"
+              />
+            </template>
+          </van-cell>
+        </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-form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      fileList: [],
+      showRepairPositionPicker: false,
+      showRepairRegionPicker: false,
+      showRepairTypePicker: false,
+      repairPositionList: [
+        { text: "水", value: 1 },
+        { text: "电", value: 2 },
+        { text: "其他", value: 3 },
+      ],
+      repairRegionList: [
+        {
+          text: "公共区域",
+          value: 1,
+        },
+        {
+          text: "室内",
+          value: 2,
+        },
+      ],
+      repairTypeList: [
+        { text: "水", value: 1 },
+        { text: "电", value: 2 },
+        { text: "其他", value: 3 },
+      ],
+      dataForm: {
+        id: "",
+        repairPosition: "",
+        repairPositionName: "",
+        repairRegion: 1,
+        repairRegionName: "",
+        repairType: 1,
+        repairTypeName: "",
+        contactPerson: "",
+        contactPhone: "",
+        faultDes: "",
+        faultPics: "",
+      },
+    };
+  },
+  methods: {
+    onClickLeft() {},
+    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;
+    },
+    afterRead(file) {
+      console.log(file);
+      file.status = "uploading";
+      file.message = "上传中...";
+
+      setTimeout(() => {
+        file.status = "failed";
+        file.message = "上传失败";
+      }, 1000);
+    },
+    onSubmit() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.$router.push("/");
+      }, 2000);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_repair {
+  height: calc(
+    100% - var(--van-button-default-height) - var(--van-nav-bar-height) - 28px
+  );
+  margin-top: 12px;
+  .repair_info {
+    height: 100%;
+    overflow-y: auto;
+    /deep/ {
+      .upload_cell {
+        .van-cell__title {
+          flex: unset;
+        }
+        .van-cell__value {
+          margin-left: 8px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/reviewCheck.vue

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

src/views/userInfo/changePassWord.vue

@@ -0,0 +1,101 @@
+<template>
+<van-nav-bar title="更改密码" left-arrow @click-left="onClickLeft" />
+  <div class="page_user">
+    <div class="user_info">
+      <van-form input-align="right" @submit="onSubmit">
+        <van-cell-group>
+          <van-field
+            v-model="dataForm.password"
+            label="原密码"
+            required
+            placeholder="请输入原密码"
+            clearable
+            :rules="[{ required: true, message: '请输入原密码' }]"
+          />
+          <van-field
+            v-model="dataForm.newpassword"
+            type="password"
+            label="新密码"
+            required
+            placeholder="请输入新密码"
+            clearable
+            :rules="[{ required: true, message: '请输入新密码' }]"
+          />
+          <van-field
+            v-model="dataForm.confirmpassword"
+            type="password"
+            label="确认密码"
+            required
+            placeholder="请再次输入新密码"
+            clearable
+            :rules="[{ required: true, message: '请再次输入新密码' }]"
+            @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-form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      dataForm: {
+        id: "",
+        password: "123456",
+        newpassword: "123456",
+        confirmpassword: "123456",
+      },
+    };
+  },
+  created() {
+    this.dataForm.password = this.plusXing(this.dataForm.password, 0, 0, "*");
+  },
+  methods: {
+    /* 部分隐藏处理
+     ** str 需要处理的字符串
+     ** frontLen 保留的前几位
+     ** endLen 保留的后几位
+     ** cha 替换的字符串
+     */
+    plusXing(str, frontLen, endLen, cha) {
+      let len = str.length - frontLen - endLen;
+      let xing = "";
+      for (let i = 0; i < len; i++) {
+        xing += cha;
+      }
+      return (
+        str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
+      );
+    },
+    onClickLeft() {},
+    //修改后的密码和原来不能相同
+    handleBlur() {},
+    onSubmit() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.$router.push("/");
+      }, 2000);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_user {
+    margin: 12px 0 40px 0;
+}
+</style>

src/views/userInfo/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <van-nav-bar title="账号中心" left-arrow @click-left="onClickLeft" />
+  <div class="page_user">
+    <div class="user_info">
+      <van-cell-group>
+        <van-cell title="账号名称" :value="username" />
+        <van-cell title="手机号码" :value="tel" />
+        <van-cell title="账号密码" :value="password" />
+      </van-cell-group>
+    </div>
+
+    <van-button
+      style="margin-top: 40px"
+      block
+      color="#2E69EB"
+      plain
+      :loading="loading"
+      @click="loginOut"
+    >
+      注销登录
+    </van-button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      username: "张浩",
+      tel: 158304802928,
+      password: "123456",
+    };
+  },
+  created() {
+    this.password = this.plusXing(this.password, 0, 0, "*");
+  },
+  methods: {
+    /* 部分隐藏处理
+     ** str 需要处理的字符串
+     ** frontLen 保留的前几位
+     ** endLen 保留的后几位
+     ** cha 替换的字符串
+     */
+    plusXing(str, frontLen, endLen, cha) {
+      let len = str.length - frontLen - endLen;
+      let xing = "";
+      for (let i = 0; i < len; i++) {
+        xing += cha;
+      }
+      return (
+        str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
+      );
+    },
+    onClickLeft() {},
+    loginOut() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = falsed;
+        this.$router.push("/");
+      }, 2000);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_user {
+  margin: 12px 0 40px 0;
+  /deep/ {
+    --van-button-border-width: 0;
+    --van-button-default-border-color: unset;
+  }
+}
+</style>

vue.config.js

@@ -1,3 +1,5 @@
+const { VantResolver } = require("unplugin-vue-components/resolvers");
+const ComponentsPlugin = require("unplugin-vue-components/webpack");
 module.exports = {
   //配置路径别名
   devServer: {
@@ -9,4 +11,11 @@ module.exports = {
   productionSourceMap: false,
   publicPath: "./",
   transpileDependencies: [],
+  configureWebpack: {
+    plugins: [
+      ComponentsPlugin({
+        resolvers: [VantResolver()],
+      }),
+    ],
+  },
 }