75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
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="codeLogin"
|
|||
|
|
>
|
|||
|
|
提交
|
|||
|
|
</wd-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { passwordRegExp } from '@/constants/regular-expressions'
|
|||
|
|
|
|||
|
|
const password = ref<string>('')
|
|||
|
|
const confirmPassword = ref<string>('')
|
|||
|
|
|
|||
|
|
const passwordPass = computed(() => passwordRegExp.test(password.value))
|
|||
|
|
const confirmPasswordPass = computed(() => password.value === confirmPassword.value)
|
|||
|
|
|
|||
|
|
const passwordChange = (value: string) => {
|
|||
|
|
password.value = value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const confirmPasswordChange = (value: string) => {
|
|||
|
|
confirmPassword.value = value
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss"></style>
|