ZGZQBWG/game/src/views/FindPassword.vue

<template>
  <div
    class="find-password"
  >
    <div class="bg-deco" />

    <img
      class="logo-and-title"
      src="@/assets/images/logo-and-title.png"
      alt=""
      draggable="false"
    >

    <div class="form-item">
      <div class="title">
        <img
          src="@/assets/images/icon-account.png"
          alt=""
          draggable="false"
        >
        <span>帐号</span>
      </div>
      <input
        v-model.trim="account"
        type="text"
        placeholder="请输入邮箱"
        aotufocus
        :class="{
          invalid: isAccountInputOver && !isAccountValid
        }"
        @blur="isAccountInputOver=true"
      >
    </div>
    <div class="form-item">
      <div class="title">
        <img
          src="@/assets/images/icon-phone.png"
          alt=""
          draggable="false"
        >
        <span>手机号</span>
      </div>
      <input
        v-model="phone"
        type="number"
        placeholder="请输入11位手机号"
        :class="{
          invalid: isPhoneInputOver && !isPhoneValid
        }"
        @blur="isPhoneInputOver=true"
      >
    </div>
    <div class="form-item form-item-verifi">
      <div class="title">
        <!-- <img
          src="@/assets/images/icon-lock.png"
          alt=""
          draggable="false"
        > -->
        <span>验证码</span>
      </div>
      <div class="row">
        <input
          v-model="verifiCode"
          placeholder="请输入验证码"
          :class="{
            invalid: isVerifiCodeInputOver && !isVerifiCodeValid
          }"
          @blur="isVerifiCodeInputOver=true"
        >
        <button
          class="get-verifi-code"
          @click="onClickVerifiCode"
        >
          <img
            v-if="isShowVerifiCode"
            class=""
            src="https://sit-cnzhengquan.4dage.com/api/show/getRandCode"
            alt=""
            draggable="false"
          >
        </button>
      </div>
    </div>

    <button
      class="submit"
      @click="submit"
    >
      发送验证邮件
    </button>
    <button
      class="return"
      @click="$router.push({
        name: 'HomeView',
      })"
    >
      返回首页
    </button>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { showDialog } from 'vant'
import { findPassowrd } from '@/api.js'

const route = useRoute()
const router = useRouter()
const store = useStore()

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(390, 752)

const account = ref('')
const phone = ref('')
const password = ref('')
const passwordRepeat = ref('')
const verifiCode = ref('')

const accountTrimed = computed(() => {
  return account.value.trim()
})
const phoneTrimed = computed(() => {
  return phone.value.toString().trim()
})
const verifiCodeTrimed = computed(() => {
  return verifiCode.value.trim()
})

const isAccountValid = computed(() => {
  return !!accountTrimed.value
})
const isPhoneValid = computed(() => {
  return phoneTrimed.value.length === 11
})
const isVerifiCodeValid = computed(() => {
  return verifiCodeTrimed.value.length > 0
})

const isAccountInputOver = ref(false)
const isPhoneInputOver = ref(false)
const isVerifiCodeInputOver = ref(false)

const isShowVerifiCode = ref(true)
const onClickVerifiCode = utils.throttle(() => {
  isShowVerifiCode.value = false
  nextTick(() => {
    isShowVerifiCode.value = true
  })
}, 333)

function submit() {
  if (!isAccountValid.value) {
    showDialog({
      message: '请正确输入邮箱',
      theme: 'round-button',
    })
    isAccountInputOver.value = true
    return
  }
  if (!isPhoneValid.value) {
    showDialog({
      message: '请正确输入手机号',
      theme: 'round-button',
    })
    isPhoneInputOver.value = true
    return
  }
  if (!isVerifiCodeValid.value) {
    showDialog({
      message: '请输入验证码',
      theme: 'round-button',
    })
    isVerifiCodeInputOver.value = true
    return
  }

  findPassowrd(accountTrimed.value, phoneTrimed.value, verifiCodeTrimed.value).then(() => {
    showDialog({
      message: '已发送邮件到您的邮箱',
      theme: 'round-button',
    }).then(() => {
      router.replace({
        name: 'HomeView'
      })
    })
  }).catch((err) => {
    showDialog({
      message: err,
      theme: 'round-button',
    })
  })
}
</script>

<style lang="less" scoped>
.find-password{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  >.bg-deco{
    position: absolute;
    left: calc(-67 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(-130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: #D1B489;
    filter: blur(calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
  }
  >.logo-and-title{
    margin-top: calc(53 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    margin-bottom: calc(38 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.form-item{
    width: calc(321 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    margin-bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    >.title{
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >img{
        width: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >span{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #D1B489;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
    >input{
      width: 100%;
      height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border-bottom: 1px solid #D9D9D9;
      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      color: black;
      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      &::placeholder {
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #B8B8B8;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
    >input.invalid{
      border-bottom: 1px solid red;
    }
  }
  >.form-item{
    >.title{
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >img{
        width: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >span{
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #D1B489;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
    >div.row{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: calc(-11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >input{
        width: 50%;
        height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        border-bottom: 1px solid #D9D9D9;
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: black;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        &::placeholder {
          font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-weight: 400;
          color: #B8B8B8;
          line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
      >input.invalid{
        border-bottom: 1px solid red;
      }
      >button.get-verifi-code{
        height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >img{
          height: 100%;
        }
      }
    }
  }

  >button.submit{
    width: calc(332 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: rgba(197, 161, 108, 0.8);
    border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >button.return{
    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    color: #A97C46;
    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    padding: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    opacity: 0.5;
  }
}
</style>