starwork-uniapp/src/pages/reset-password/reset-password.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    disableScroll: true
  }
}
</route>
<template>
  <view>
    <TopNavigation></TopNavigation>
    <view class="text-6 ml-4 pt-7 custom-color-black font-bold">请输入手机号</view>
    <view class="p-5">
      <wd-input
        v-model="password"
        :maxlength="20"
        class="mt-6"
        clearable
        placeholder="请输入新密码"
        placeholderClass="text-4 custom-color-grey"
        show-password
        size="large"
        @change="passwordChange"
      />
      <wd-input
        v-model="confirmPassword"
        :maxlength="20"
        class="mt-6"
        clearable
        placeholder="再次输入新密码"
        placeholderClass="text-4 custom-color-grey"
        show-password
        size="large"
        @change="confirmPasswordChange"
      />
    </view>
    <view class="bg-[#eeeff4] p-2 mx-5 rounded-2">
      <view class="p-2">
        <view class="text-3 color-[#525458]">密码为8-20位，至少含数字/字母/字符中的2种</view>
      </view>
    </view>
    <view class="p-5">
      <wd-button
        :block="true"
        :disabled="!(passwordPass && confirmPasswordPass && password === confirmPassword)"
        :round="false"
        size="large"
        @click="resetPassword"
      >
        提交
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { passwordRegExp } from '@/constants/regular-expressions'
  import { resetPasswordApi } from '@/service/user'
  import { Result } from '@/constants/result'

  const phone = ref<string>('')
  const code = ref<string>('')

  const password = ref<string>('')
  const confirmPassword = ref<string>('')

  const passwordPass = computed(() => passwordRegExp.test(password.value))
  const confirmPasswordPass = computed(() => password.value === confirmPassword.value)

  onLoad(options => {
    phone.value = options.phone
    code.value = options.code
  })

  const resetPassword = async () => {
    if (password.value === '' || confirmPassword.value === '') {
      uni.showToast({
        title: '密码不能为空',
        icon: 'none'
      })
      return
    } else if (!passwordPass.value || !confirmPasswordPass.value) {
      uni.showToast({
        title: '密码格式不正确',
        icon: 'none'
      })
      return
    } else if (password.value !== confirmPasswordPass.value) {
      uni.showToast({
        title: '两次密码不一致',
        icon: 'none'
      })
      return
    }

    await uni.showLoading({
      title: '修改中'
    })
    try {
      const resetPasswordApiResult = await resetPasswordApi({
        newPassword: password.value,
        account: phone.value,
        verificationCode: code.value
      })
      uni.hideLoading()
      if (resetPasswordApiResult.errorCode === Result.Success.code) {
        await uni.navigateBack({ delta: 2 })
        await uni.showToast({
          title: '密码重置成功',
          icon: 'icon'
        })
      } else {
        await uni.showToast({
          title: resetPasswordApiResult.errorMsg,
          icon: 'none'
        })
      }
    } catch (err) {
      console.log(err)
      uni.hideLoading()
      await uni.showToast({
        title: '密码重置失败，请稍后再试',
        icon: 'none'
      })
    }
  }

  const passwordChange = (value: string) => {
    password.value = value
  }

  const confirmPasswordChange = (value: string) => {
    confirmPassword.value = value
  }
</script>

<style scoped lang="scss"></style>