vue-ptc/src/pages/account/index.vue

<template>
  <div v-if="state === 0 && info" class="p-account">
    <h3 class="ptc-title">Account Information</h3>
    <div class="ptc-wrapper">
      <div class="ptc-block">
        <div class="ptc-inner">
          <p class="ptc-label">QR code</p>
          <img class="qrcode" />
        </div>
      </div>
      <div v-if="info.from === 1" class="ptc-block">
        <div class="ptc-inner">
          <div class="ptc-cell">
            <p class="ptc-label">Email</p>
            <p class="ptc-value">{{ info.email }}</p>
          </div>
          <div class="ptc-cell">
            <p class="ptc-label">Password</p>
            <p class="ptc-value">
              <span>********</span>
              <span class="primary ml354" @click="state = 1">Edit ></span>
            </p>
          </div>
        </div>
      </div>
      <div v-else class="ptc-block">
        <div class="ptc-inner">
          <div class="ptc-cell">
            <p class="ptc-label">Account</p>
            <p class="ptc-value flex-ac">
              {{ info.email
              }}<i
                class="account-icon"
                :class="{
                  'a-facebook': info.from === 2,
                  'a-google': info.from === 3,
                  'a-apple': info.from === 4,
                }"
              ></i>
            </p>
          </div>
        </div>
      </div>
    </div>
    <h3 class="ptc-title pr">
      Login Detail<button class="stroke-btn" @click="state = 2">Edit</button>
    </h3>
    <div class="ptc-block">
      <div class="ptc-inner">
        <div class="ptc-cell">
          <p class="ptc-label">Name</p>
          <p class="ptc-value">{{ info.name }}</p>
        </div>
        <div class="ptc-cell">
          <p class="ptc-label">Pone number</p>
          <p class="ptc-value">{{ info.mobile }}</p>
        </div>
        <div class="ptc-cell">
          <p class="ptc-label">Address</p>
          <p class="ptc-value">{{ info.address }}</p>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="state === 1" class="p-account">
    <h3 class="ptc-title">Change Password</h3>
    <div class="ptc-wrapper">
      <div class="ptc-block">
        <div class="ptc-inner">
          <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>
      <div class="ptc-button-group">
        <div class="ptc-inner">
          <button class="ptc-button">SUBMIT</button>
          <button class="ptc-button ptc-button--stroke" @click="state = 0">
            BACK
          </button>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="state === 2" class="p-account">
    <h3 class="ptc-title">Modify My profile</h3>
    <div class="ptc-wrapper">
      <div class="ptc-block">
        <div class="ptc-inner">
          <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>
      <div class="ptc-button-group">
        <div class="ptc-inner">
          <button class="ptc-button">SUBMIT</button>
          <button class="ptc-button ptc-button--stroke" @click="state = 0">
            BACK
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { getUserInfo } from '@/service/user'

export default defineComponent({
  name: 'Account',
  async beforeRouteEnter(to, from, next) {
    const { results } = await getUserInfo()
    next(vm => (vm.info = results))
  },
  data() {
    return {
      /** @type {ApiUser.Info.Response} */
      info: null,
      state: 0,
    }
  },
  watch: {
    state() {
      window.scrollTo(0, 0)
    },
  },
})
</script>

<style lang="scss">
.p-account {
  .qrcode {
    width: 212px;
    height: 212px;
    background: #efefef;
  }
  .stroke-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 310px;
    width: 132px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid $primary-color;
    font-size: 32px;
    font-weight: bold;
    color: $primary-color;
  }

  .primary {
    margin-left: 48px;
  }

  .account-icon {
    margin-left: 24px;
    width: 56px;
    height: 56px;
    background-size: contain;
  }
  .a-google {
    background-image: url(@img/a-google.png);
  }
  .a-apple {
    background-image: url(@img/a-apple.png);
  }
  .a-facebook {
    background-image: url(@img/a-facebook.png);
  }

  .mb24 {
    margin-bottom: 24px;
  }
  .ml354 {
    margin-left: 354px;
  }
}
</style>