yiyi-h5/src/pages/login/index.vue

<template>
  <div class="container">
    <div class="page">
      <div style="margin-top: 380px;">
        
        <van-field v-model="phoneNum" clearable placeholder="请输入手机号">
          <template #label>
            <div style="color: #E5E5E5;">
              手机号11
            </div>
          </template>
        </van-field>

        <van-field style="margin-top: 20px;" v-model="code" clearable placeholder="6位数字验证码">
          <template #label>
            <div style="color: #E5E5E5;">
              验证码
            </div>
          </template>
          <template #button>
            <a @click="getUserCode" v-if="codeCountDown == 60" style="color: #3B78FF;">获取验证码</a>
            <a v-else style="color: #6E6E6E;">重新发送（{{ codeCountDown }}）</a>
          </template>
        </van-field>
        <van-field v-show="false">
        </van-field>

      </div>
      <van-button v-if="phoneNum && code" @click="goLogin" style="width: 92%;margin-top: 30px;" color="#1936C9">登录</van-button>
      <van-button v-else color="#464646" style="width: 92%;margin-top: 30px;">登录</van-button>
      <div style="margin-top: 20px;color: #959595; font-size: 14px;">
        登录即绑定了该账号
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { login,getCode } from '@/api/login'
import { showToast  } from 'vant';
const phoneNum = ref('')
const code = ref('')

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

const codeCountDown = ref(60)
const getUserCode = async() => {
  if (!phoneNum.value) {
    showToast ('请输入手机号')
    return
  }
  if (!/^1[3-9]\d{9}$/.test(phoneNum.value)) {
    showToast ('请输入正确的手机号')
    return
  }
  try {
    const res = await getCode({
      telNum: phoneNum.value
    })
    if (res.status === 0) {
      showToast ('验证码已发送')
      const timer = setInterval(() => {
        codeCountDown.value--
        if (codeCountDown.value === 0) {
          clearInterval(timer)
          codeCountDown.value = 60
        }
      }, 1000)
    } else {
      showToast (res.msg || '发送失败')
    }
  } catch (error) {
    showToast ('发送失败')
  }
}
// 登录
const goLogin = async() => {
  try {
    const res = await login({
      telNum: phoneNum.value,
      code: code.value
    })
    if (res.status === 0) {
      showToast ('登录成功')
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('accountInfo', res.data.accountInfo)
      setTimeout(() => {
        router.push('/home')
      }, 1000)
    } else {
      showToast (res.err || '登录失败')
    }
  } catch (error) {
    showToast ('登录失败')
  }
}
onMounted(() => {

})
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/yybg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.page {
  height: 100vh;
  padding: 31px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.van-field {
  background: none;
}

.van-cell-group {
  background: none;
}
/deep/ .van-cell__title{
  margin-right: 0;
}

/deep/ .van-field__control {
  color: #898989 !important;
}

/deep/ .van-field__placeholder {
  color: #898989 !important;
}
</style>