账号设置

src/router/modules/personal.js

@@ -15,15 +15,36 @@ const personal = [
         },
         children: [
           {
-            path:'/personalAccount/editPassword',
+            path: '/personalAccount/editPassword',
             component: () => import('@/views/Home/personal/account/dynamic/editPassword'),
-            meta:{
-              title:'修改密码'
+            meta: {
+              title: '修改密码'
+            }
+          },
+          {
+            path: '/personalAccount/accountBinding',
+            component: () => import('@/views/Home/personal/account/dynamic/accountBinding'),
+            meta: {
+              title: '账号绑定'
+            }
+          },
+          {
+            path: '/personalAccount/realAuthentication',
+            component: () => import('@/views/Home/personal/account/dynamic/realAuthentication'),
+            meta: {
+              title: '实名认证'
+            }
+          },
+          {
+            path: '/personalAccount/privacySettings',
+            component: () => import('@/views/Home/personal/account/dynamic/privacySettings'),
+            meta: {
+              title: '隐私设置'
             }
           }
         ]
       }
     ]
-  },
+  }
 ]
 export default personal

src/views/Home/personal/account/dynamic/accountBinding.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h3>账号绑定</h3>
+    <v-divider class="mb-4"></v-divider>
+    <div>
+      <div class="login-user">当前登录账号： <span>13229740091</span> <span class="activeText ml-3">改绑手机号</span></div>
+      <div class="tips mt-2 mb-1">账号即绑定的手机号，用于使用账号密码或获取验证码进行登录。</div>
+    </div>
+  </div>
+</template>
+
+<script setup name="accountBinding">
+</script>
+
+<style lang="scss" scoped>
+h3 {
+  font-size: 20px;
+  text-align: left;
+  font-weight: 600;
+  padding-bottom: 25px;
+}
+.activeText {
+  font-size: 17px;
+  color: var(--v-primary-base);
+  cursor: pointer;
+}
+.tips {
+  color: grey;
+  font-size: 12px;
+  font-weight: 600;
+}
+.login-user {
+  color: grey;
+  font-weight: 600;
+}
+</style>

src/views/Home/personal/account/dynamic/editPassword.vue

@@ -34,7 +34,9 @@
           @click:append-inner="show = !show"
         ></v-text-field>
       </v-form>
-      <v-btn color="primary" rounded @click="handleSubmit" :loading="loading">提 交</v-btn>
+      <div class="text-center">
+        <v-btn class="buttons" color="primary" @click="handleSubmit" :loading="loading">确认密码</v-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -93,7 +95,7 @@ h3 {
 }
 .error-tips {
   color: #f44336;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
 }
 .login-user {

src/views/Home/personal/account/dynamic/privacySettings.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h3>隐私设置</h3>
+    <v-divider class="mb-4"></v-divider>
+  </div>
+</template>
+
+<script setup name="privacySettings">
+</script>
+
+<style lang="scss" scoped>
+h3 {
+  font-size: 20px;
+  text-align: left;
+  font-weight: 600;
+  padding-bottom: 25px;
+}
+</style>

src/views/Home/personal/account/dynamic/realAuthentication.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h3>实名认证</h3>
+    <v-divider class="mb-4"></v-divider>
+    <div class="tips mt-2 mb-1">一经实名认证后将无法修改，请填写真实的实名信息！</div>
+  </div>
+</template>
+
+<script setup name="realAuthentication">
+</script>
+
+<style lang="scss" scoped>
+h3 {
+  font-size: 20px;
+  text-align: left;
+  font-weight: 600;
+  padding-bottom: 25px;
+}
+.tips {
+  color: grey;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>

src/views/Home/personal/account/index.vue

@@ -25,10 +25,10 @@
 <script setup>
 defineOptions({ name:'personal-account-index'})
 const items = [
-  { title: '账号绑定', value: 1, },
-  { title: '实名认证', value: 2, },
+  { title: '账号绑定', path: '/personalAccount/accountBinding', },
+  { title: '实名认证', path: '/personalAccount/realAuthentication', },
   { title: '修改密码', path: '/personalAccount/editPassword', },
-  { title: '隐私设置', value: 4 }
+  { title: '隐私设置', path: '/personalAccount/privacySettings' }
 ]
 </script>