wx-starlock/pages/user/forgotPassword.vue

<template>
  <view>
    <view class="mx-6 mt-10">
      <view class="mt-4 flex items-center w-full" @click="toJump('countryList')">
        <view class="w-200">国家/地区</view>
        <view class="text-#63b8af">
          {{ country.name }}
          +{{ country.code }}
        </view>
      </view>
      <view class="mt-4">
        <up-input
          placeholder="请输入手机号或邮箱"
          fontSize="32rpx"
          :placeholderStyle="{
            color: '#333333',
            fontSize: '32rpx'
          }"
          :customStyle="{
            padding: '0',
            height: '80rpx'
          }"
          border="bottom"
          clearable
          v-model="username"
          :maxlength="50"
          @change="handleUsernameInput"
        ></up-input>
      </view>
      <view class="mt-4">
        <up-input
          fontSize="32rpx"
          :placeholderStyle="{
            color: '#333333',
            fontSize: '32rpx'
          }"
          :customStyle="{
            padding: '0',
            height: '80rpx'
          }"
          placeholder="请输入密码"
          type="password"
          border="bottom"
          clearable
          v-model="password"
          :maxlength="20"
          @change="handlePasswordInput"
        ></up-input>
        <view class="text-#999999 text-sm mt-1">
          密码必须是8-20位，至少包括数字/字母/符号中的2种
        </view>
      </view>
      <view class="mt-4">
        <up-input
          fontSize="32rpx"
          :placeholderStyle="{
            color: '#333333',
            fontSize: '32rpx'
          }"
          :customStyle="{
            padding: '0',
            height: '80rpx'
          }"
          placeholder="确认密码"
          type="password"
          border="bottom"
          clearable
          v-model="confirmPassword"
          :maxlength="20"
          @change="handleConfirmPasswordInput"
        ></up-input>
      </view>
      <view class="mt-4 flex items-center">
        <up-input
          fontSize="32rpx"
          :placeholderStyle="{
            color: '#333333',
            fontSize: '32rpx'
          }"
          :customStyle="{
            padding: '0',
            height: '80rpx'
          }"
          placeholder="请输入验证码"
          type="number"
          border="bottom"
          clearable
          v-model="code"
          :maxlength="20"
          @change="handleCodeInput"
        >
          <template #suffix>
            <up-button @tap="getCode" :disabled="!canGetCode" color="#63b8af">
              {{ tips }}
            </up-button>
            <up-code
              :seconds="seconds"
              ref="uCodeRef"
              changeText="X秒后重新获取"
              endText="获取验证码"
              @change="codeChange"
            ></up-code
          ></template>
        </up-input>
      </view>
      <view
        class="w-full rounded-full h-88 text-center leading-[88rpx] text-white mt-6"
        :class="[canResetPassword ? 'bg-#4777ee' : 'bg-#9d9da1']"
        @click="register"
      >
        重置密码
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useBasicStore } from '@/stores/basic'
  import { PHONE_REG, EMAIL_REG, PASSWORD_REG } from '@/constant/reg'
  import { resetPasswordRequest } from '@/api/user'

  const $basic = useBasicStore()

  const username = ref('')
  const password = ref('')
  const confirmPassword = ref('')
  const code = ref('')

  const tips = ref('')
  const seconds = ref(120)
  const uCodeRef = ref(null)

  const pending = ref(false)

  const codeChange = text => {
    tips.value = text
  }

  const getCode = () => {
    if (!uCodeRef.value.canGetCode) {
      return
    }
    const params = {
      account: username.value,
      codeType: 2,
      countryCode: country.value.code,
      channel: EMAIL_REG.test(username.value) ? 2 : 1
    }
    $basic.routeJump({
      name: 'safeVerify',
      events: {
        successEvent() {
          uCodeRef.value.start()
        }
      },
      params
    })
  }

  const country = ref({
    countryId: 0,
    name: '中国',
    code: '86',
    flag: 'https://lock.xhjcn.ltd/storage/country-flags/86.png',
    abbreviation: 'CN',
    group: 'Z'
  })

  const isValidUsername = computed(() => {
    if (!username.value) return false

    return EMAIL_REG.test(username.value) || PHONE_REG.test(username.value)
  })

  const isValidPassword = computed(() => {
    if (!password.value) return false
    return PASSWORD_REG.test(password.value)
  })

  const isValidConfirmPassword = computed(() => {
    if (!confirmPassword.value) return false
    return confirmPassword.value === password.value
  })

  const isValidCode = computed(() => {
    if (!code.value) return false
    return code.value.length === 6
  })

  const canGetCode = computed(() => {
    return isValidUsername.value
  })

  const canResetPassword = computed(() => {
    return (
      isValidUsername.value &&
      isValidPassword.value &&
      isValidConfirmPassword.value &&
      isValidCode.value
    )
  })

  const register = async () => {
    if (!canResetPassword.value) {
      return
    }
    if (pending.value) {
      return
    }
    pending.value = true
    uni.showLoading({
      title: '重置中'
    })
    const res = await resetPasswordRequest({
      account: username.value,
      newPassword: password.value,
      countryCode: country.value.code,
      verificationCode: code.value
    })
    pending.value = false
    uni.hideLoading()
    if (res.code === 0) {
      $basic.backAndToast('密码重置成功')
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none'
      })
    }
  }

  const handleUsernameInput = text => {
    username.value = text
  }
  const handlePasswordInput = text => {
    password.value = text
  }
  const handleConfirmPasswordInput = text => {
    confirmPassword.value = text
  }
  const handleCodeInput = text => {
    code.value = text
  }

  const toJump = path => {
    $basic.routeJump({
      name: path,
      events: {
        country(data) {
          country.value = data
        }
      }
    })
  }
</script>