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>

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

<script setup>
import { ref, computed, watch, onMounted } 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 accountTrimed = computed(() => {
  return account.value.trim()
})
const phoneTrimed = computed(() => {
  return phone.value.toString().trim()
})

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

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



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
  }

  findPassowrd(accountTrimed.value, phoneTrimed.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;
    }
  }
  >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>