146 lines
3.9 KiB
Vue
146 lines
3.9 KiB
Vue
<template>
|
|
<view class='card'>
|
|
<up-input v-model="form.phone" placeholder="手机号" border="none" readonly></up-input>
|
|
<view style="margin: 30rpx 0;">
|
|
<up-line color="#D3E3FD"></up-line>
|
|
</view>
|
|
<view style="display: flex;justify-content: space-between;align-items: center;">
|
|
<up-input v-model="form.code" placeholder="验证码" border="none" type='number'></up-input>
|
|
<view class="code-btn">
|
|
<view style="margin: 0 20rpx;">
|
|
<up-line color="grey" direction="col" length="30rpx"></up-line>
|
|
</view>
|
|
<text class='btn-text' style="color: grey;" v-if='cutDown'>重新获取({{cutDown}})</text>
|
|
<text @click="getCode" class='btn-text' v-else> {{flag?'获取验证码':'重新获取' }} </text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='card'>
|
|
<view @click="showKeyBorad=true,type=1">
|
|
<up-input style="pointer-events: none;" type='password' v-model="form.password" placeholder="请输入你的密码"
|
|
border="none" readonly></up-input>
|
|
</view>
|
|
<view style="margin: 30rpx 0;">
|
|
<up-line color="#D3E3FD"></up-line>
|
|
</view>
|
|
<view @click="showKeyBorad=true,type=2">
|
|
<up-input style="pointer-events: none;" type='password' v-model="form.rePassword" placeholder="请再次输入你的密码"
|
|
border="none" readonly></up-input>
|
|
</view>
|
|
</view>
|
|
|
|
<view class='submit-btn'>
|
|
<up-button color="#20B128" shape="circle" @click="submit">确认</up-button>
|
|
</view>
|
|
<up-keyboard dotDisabled safeAreaInsetBottom ref="uKeyboard" @close="showKeyBorad=false" mode="number"
|
|
:tooltip="false" :show="showKeyBorad" @change='onKetDown' @backspace='backspaceFn' />
|
|
</template>
|
|
|
|
<script setup>
|
|
import useUserStore from "@/store/user";
|
|
import {
|
|
getMassageCode,
|
|
setPayPassword
|
|
} from "@/api/address.js"
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from "vue"
|
|
|
|
const userInfo = useUserStore().userInfo;
|
|
const form = reactive({
|
|
phone: userInfo.mobile, //手机号
|
|
code: "", //验证码
|
|
password: "", //6位数密码
|
|
rePassword: "" //确认密码
|
|
})
|
|
|
|
// 获取验证码
|
|
const cutDown = ref(0)
|
|
const flag = ref(true)
|
|
const code = ref('')
|
|
const checkPhone = (phone) => {
|
|
const regex = /^1[3-9]\d{9}$/;
|
|
return regex.test(phone) ? true : false
|
|
}
|
|
|
|
const getCode = async () => {
|
|
if (!checkPhone(form.phone)) return uni.$u.toast('请输入正确的手机号')
|
|
await getMassageCode()
|
|
flag.value = false
|
|
cutDown.value = 60
|
|
let timer = setInterval(() => {
|
|
cutDown.value--
|
|
if (cutDown.value <= 0) clearInterval(timer)
|
|
}, 1000)
|
|
}
|
|
// 获取验证码结束
|
|
|
|
// 键盘事件
|
|
const showKeyBorad = ref(false)
|
|
const type = ref(1) // 1 输入密码 2 再次输入密码
|
|
|
|
const onKetDown = (e) => {
|
|
uni.vibrateShort();
|
|
if (type.value == 1) {
|
|
form.password.length < 6 ?
|
|
form.password += e :
|
|
showKeyBorad.value = false
|
|
if (form.password.length == 6) showKeyBorad.value = false;
|
|
} else {
|
|
form.rePassword.length < 6 ?
|
|
form.rePassword += e :
|
|
showKeyBorad.value = false
|
|
if (form.rePassword.length == 6) showKeyBorad.value = false;
|
|
}
|
|
}
|
|
|
|
const backspaceFn = () => {
|
|
if (type.value == 1) {
|
|
form.password = form.password.slice(0, -1);
|
|
} else {
|
|
form.rePassword = form.rePassword.slice(0, -1);
|
|
}
|
|
}
|
|
|
|
// 键盘事件结束
|
|
|
|
const submit = async () => {
|
|
if (!form.code) return uni.$u.toast('请输入验证码');
|
|
if (form.password.length < 6) return uni.$u.toast('请输入6位数密码');
|
|
if (form.password !== form.rePassword) return uni.$u.toast('两次密码不一致');
|
|
await setPayPassword({
|
|
...form
|
|
})
|
|
uni.$u.toast('设置成功')
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.card {
|
|
padding: 50rpx;
|
|
background-color: white;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.submit-btn {
|
|
position: absolute;
|
|
bottom: 100rpx;
|
|
width: 710rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.code-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-text {
|
|
color: #20B128;
|
|
}
|
|
</style> |