全局样式

src/App.vue

@@ -12,49 +12,42 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #333333;
+  color: #0c1935;
   background: #f6f6f6;
   height: 100vh;
   box-sizing: border-box;
 }
 
-.main {
-  height: 100vh;
-  overflow-y: hidden;
+.van-cell {
   .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-cell-text-color: #666666;
+}
+.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 {
-    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);
-    }
+    width: calc(100% - 32px);
   }
 }
 :root {
+  --van-gray-3: unset;
+  --van-gray-6: #999999;
+  --van-gray-7: #666666;
+  --van-gray-8: #333333;
+  --van-font-weight-bold: 600;
+  --van-text-color: #333333;
+  --van-font-size-md: 16px;
+  --van-font-size-lg: 16px;
   --van-border-radius-sm: 4px;
+  --van-border-width-base: 0;
 }
 </style>

src/router/index.js

@@ -24,19 +24,11 @@ const routes = [
   {
     name: 'userInfo',
     path: '/userInfo',
-    component: () => import('../views/userInfo/index'),
+    component: () => import('../views/userInfo'),
     meta: {
       title: '账号中心',
     },
   },
-  {
-    name: 'changePassWord',
-    path: '/changePassWord',
-    component: () => import('../views/userInfo/changePassWord'),
-    meta: {
-      title: '修改密码',
-    },
-  },
   {
     name: 'repairOnline',
     path: '/repairOnline',

src/views/home.vue

@@ -335,7 +335,13 @@ export default {
       }
     },
     toPath() {
-      this.$router.push("/userInfo");
+      this.$router.push({
+        path: "/userInfo",
+        query: {
+          title: "账号中心",
+          source: "account",
+        },
+      });
     },
   },
 };

src/views/login.vue

@@ -50,6 +50,7 @@
               round
               block
               type="primary"
+              color="#2E69EB"
               :loading="loading"
               loading-text="登陆中。。。"
               native-type="submit"

src/views/userInfo.vue

@@ -0,0 +1,132 @@
+<template>
+  <van-nav-bar :title="title">
+    <template #left>
+      <van-icon :name="require('@/assets/arrow-left.svg')" size="24" />
+    </template>
+  </van-nav-bar>
+  <div class="page_info">
+    <div class="info_user">
+      <template v-if="source == 'password'">
+        <van-cell-group>
+          <van-cell title="账号名称" :value="dataForm.username" />
+          <van-cell title="手机号码" :value="dataForm.tel" />
+          <van-cell title="账号密码" :value="dataForm.password" />
+        </van-cell-group>
+      </template>
+      <template v-if="source == 'account'">
+        <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>
+      </template>
+    </div>
+    <template v-if="source == 'password'">
+      <van-button
+        style="margin-top: 40px; border-radius: 0"
+        block
+        color="#2E69EB"
+        plain
+        @click="loginOut"
+      >
+        注销登录
+      </van-button>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      source: "",
+      title: "",
+      loading: false,
+      dataForm: {
+        username: "张浩",
+        tel: 158304802928,
+        password: "123456",
+        newpassword: "",
+        confirmpassword: "",
+      },
+    };
+  },
+  created() {
+    this.title = this.$route.query.title;
+    this.source = this.$route.query.source;
+    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)
+      );
+    },
+    //修改后的密码和原来不能相同
+    handleBlur() {},
+    onSubmit() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.$router.push("/");
+      }, 2000);
+    },
+    loginOut() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_info {
+  .info_user {
+    margin: 12px 0 40px 0;
+  }
+}
+</style>

src/views/userInfo/changePassWord.vue

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

@@ -1,64 +0,0 @@
-<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
-      @click="loginOut"
-    >
-      注销登录
-    </van-button>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      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() {},
-  },
-};
-</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>