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

<template>
  <div v-if="status === 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 pointer ml354"
                @click="$router.push('/password/change')"
                >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="status = 1">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="status === 1" 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
                v-model="values.name"
                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
                v-model="values.mobile"
                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
                v-model="address[0]"
                class="ptc-input mb24"
                placeholder="Road"
              />
              <input
                v-model="address[1]"
                class="ptc-input mb24"
                placeholder="State"
              />
              <input
                v-model="address[2]"
                class="ptc-input"
                placeholder="Zip code"
              />
            </p>
          </div>
        </div>
      </div>
      <div class="ptc-button-group">
        <div class="ptc-inner">
          <button class="ptc-button" @click="handleSubmit(applyUpdate)">
            SUBMIT
          </button>
          <button class="ptc-button ptc-button--stroke" @click="status = 0">
            BACK
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { state, updateUserInfo } from '@/store'
import useForm from '@/hooks/useForm'
import { string } from 'yup'
import Toast from '@/components/toast'

const status = ref(0)
const address = ref<string[]>([])
const info = computed(() => state.userInfo)
const { values, handleSubmit } = useForm<ApiUser.Update.Request>({
  initialValues: {
    name: state.userInfo?.name,
    mobile: state.userInfo?.mobile,
  },
  schema: {
    name: string().required(),
    mobile: string().required(),
  },
})

watch(status, () => window.scrollTo(0, 0))

async function applyUpdate() {
  values.address = address.value.filter(Boolean).join(',')
  await updateUserInfo(values as any)
  Toast('success')
  status.value = 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>