|
@@ -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>
|