帐号信息页面补全

src/App.vue

@@ -5,6 +5,24 @@
     :fixed="true"
   />
   <router-view :key="$route.fullPath" class="page-container" />
+
+  <ul v-if="$route.path === '/'" class="contents">
+    <li><router-link to="/login">登录</router-link></li>
+    <li><router-link to="/account">账号信息</router-link></li>
+    <li><router-link to="/password">密码找回</router-link></li>
+    <li><router-link to="/order">我的订单</router-link></li>
+    <li><router-link to="/gift-card">我的礼品卡</router-link></li>
+    <li><router-link to="/benefits">会员权益</router-link></li>
+    <li><router-link to="/renewal">续费管理</router-link></li>
+    <li><router-link to="/mailing/fill">邮寄商品</router-link></li>
+    <li><router-link to="/fill-order">购买下单</router-link></li>
+    <li><router-link to="/pay-result/success">支付成功</router-link></li>
+    <li><router-link to="/pay-result/fail">支付失败</router-link></li>
+    <li><router-link to="/imei/bind">绑定IMEI</router-link></li>
+    <li><router-link to="/appointment">维修预约</router-link></li>
+    <li><router-link to="/appointment-list">维修记录</router-link></li>
+    <li><router-link to="/invite">邀请好友</router-link></li>
+  </ul>
 </template>
 
 <script setup lang="ts">
@@ -26,4 +44,16 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
     padding-top: $nav-bar-height;
   }
 }
+
+.contents {
+  margin-top: $nav-bar-height + 50px;
+  text-align: center;
+  line-height: 74px;
+  font-size: 36px;
+
+  a {
+    color: $primary-color;
+    text-decoration: underline;
+  }
+}
 </style>

src/components/nav-bar/index.vue

@@ -2,7 +2,7 @@
   <div :class="['nav-bar-wrap', { 'nav-bar-wrap--fixed': fixed }]">
     <div class="nav-bar">
       <i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
-      <i class="icon-logo"></i>
+      <router-link class="icon-logo" to="/"></router-link>
       <i v-if="showNavIcons" class="icon-mine" @click="showMine = true"></i>
     </div>
     <transition enter-active-class="fadeIn" leave-active-class="fadeOut">

src/pages/account/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-account">
+  <div v-if="state === 0" class="p-account">
     <h3 class="ptc-title">Account Information</h3>
     <div class="ptc-block">
       <p class="ptc-label">QR code</p>
@@ -14,9 +14,7 @@
         <p class="ptc-label">Password</p>
         <p class="ptc-value">
           <span>********</span>
-          <span class="ptc-text" @click="$router.push('/password')"
-            >Edit ></span
-          >
+          <span class="ptc-text" @click="state = 1">Edit ></span>
         </p>
       </div>
     </div>
@@ -32,7 +30,7 @@
       </div>
     </div>
     <h3 class="ptc-title pr">
-      Login Detail<button class="stroke-btn">Edit</button>
+      Login Detail<button class="stroke-btn" @click="state = 2">Edit</button>
     </h3>
     <div class="ptc-block">
       <div class="ptc-cell">
@@ -49,8 +47,69 @@
       </div>
     </div>
   </div>
+
+  <div v-else-if="state === 1" class="p-account">
+    <h3 class="ptc-title">Change Password</h3>
+    <div class="ptc-block">
+      <div class="ptc-cell">
+        <p class="ptc-label">New password</p>
+        <p class="ptc-value">
+          <input class="ptc-input" type="password" placeholder="Please enter" />
+        </p>
+      </div>
+    </div>
+    <div class="button-group">
+      <button class="ptc-button">SUBMIT</button>
+      <button class="ptc-button ptc-button--stroke" @click="state = 0">
+        BACK
+      </button>
+    </div>
+  </div>
+
+  <div v-else class="p-account">
+    <h3 class="ptc-title">Modify My profile</h3>
+    <div class="ptc-block">
+      <div class="ptc-cell">
+        <p class="ptc-label">Name</p>
+        <p class="ptc-value">
+          <input class="ptc-input" placeholder="Please enter your real name" />
+        </p>
+      </div>
+      <div class="ptc-cell">
+        <p class="ptc-label">Phone Number</p>
+        <p class="ptc-value">
+          <input
+            class="ptc-input"
+            placeholder="Please enter your phone number"
+          />
+        </p>
+      </div>
+      <div class="ptc-cell">
+        <p class="ptc-label">Address</p>
+        <p class="ptc-value">
+          <input class="ptc-input mb24" placeholder="Road" />
+          <input class="ptc-input mb24" placeholder="State" />
+          <input class="ptc-input" placeholder="Zip code" />
+        </p>
+      </div>
+    </div>
+    <div class="button-group">
+      <button class="ptc-button">SUBMIT</button>
+      <button class="ptc-button ptc-button--stroke" @click="state = 0">
+        BACK
+      </button>
+    </div>
+  </div>
 </template>
 
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const state = ref(0)
+
+watch(state, () => window.scrollTo(0, 0))
+</script>
+
 <style lang="scss">
 .p-account {
   background: #f7f7f7;
@@ -92,5 +151,16 @@
   .a-facebook {
     background-image: url(@img/a-facebook.png);
   }
+
+  .button-group {
+    margin: 48px 36px 0;
+    .ptc-button + .ptc-button {
+      margin-top: 36px;
+    }
+  }
+
+  .mb24 {
+    margin-bottom: 24px;
+  }
 }
 </style>