<template>
<view class="container">
<u-form :model="forgetForm" ref="forgetForm" label-width="160"
:label-style="{ color: '#000', fontSize: '30rpx'}">
<u-form-item label="手机号" prop="shouJiHao" :border-bottom="false">
<u-input height="80" placeholder="请输入手机号" border-color="#d0d0d0" v-model="forgetForm.shouJiHao"
:border="true" class="form-item-input" type="number" />
</u-form-item>
<u-form-item label="验证码" prop="yanZhengMa" :border-bottom="false">
<view class="code-form-item">
<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="forgetForm.yanZhengMa"
:border="true" class="form-item-input code-input">
</u-input>
<u-button size="mini" type="primary" class="code-button" @click="getCode">{{ tips }}</u-button>
</view>
</u-form-item>
<u-form-item label="新密码" prop="xinMiMa" :border-bottom="false">
<u-input height="80" placeholder="请输入新密码" border-color="#d0d0d0" v-model="forgetForm.xinMiMa"
:border="true" class="form-item-input" type="password" />
</u-form-item>
<view class="form-button" @click="submit">
确认
</view>
</u-form>
<u-verification-code :seconds="seconds" ref="uCode1" @change="codeChange"></u-verification-code>
<u-popup v-model="show" mode="center" border-radius="10">
<view class="popup">
<text class="popup-title">请输入验证码</text>
<view class="popup-content">
<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0"
v-model="shuzijiaoduimaForm.shuZiJiaoDuiMa" :border="true" class="form-item-input"
style="flex-grow: 1;" @confirm="submitCode" />
<image :src="shuzijiaoduimaSrc" mode="aspectFit"
style="height:40px;margin-left:20rpx;width: 180rpx;flex: 0 0 auto;"></image>
</view>
<view class="popup-btn">
<u-button type="primary" @click="submitCode" style="width: 48%;flex: 0 0 auto;">提交</u-button>
<u-button type="default" @click="closePopup" style="width: 48%;flex: 0 0 auto;">取消</u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
msg
} from "@/utils/common.js"
export default {
data() {
return {
// ----验证码 start -----
shuzijiaoduimaForm: {
shuZiJiaoDuiMa: '',
shuZiJiaoDuiMaUuid: ''
},
shuzijiaoduimaSrc: 'https://imgconvert.csdnimg.cn/aHR0cDovL3RjLnhpYW55dWNvZGVyLmNuL2Jsb2cyMDIwMDEwNDIwMzUwNy5wbmc?x-oss-process=image/format,png',
show: false,
tips: '',
seconds: 60,
// ----验证码 end -----
forgetForm: {
shouJiHao: '', //手机号
yanZhengMa: "", //验证码
yanZhengMaUuid: "",
xinMiMa: '', // 新密码
},
rules: {
yanZhengMa: [{
required: true,
message: '请输入验证码',
trigger: ['blur']
}],
xinMiMa: [{
required: true,
message: '请输入新密码',
trigger: ['blur']
}],
shouJiHao: [{
required: true,
message: '请输入手机号码',
trigger: ['blur']
}, {
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号',
trigger: ['blur']
}]
}
};
},
methods: {
submit() {
const that = this;
that.$refs.forgetForm.validate((valid) => {
console.log(valid, that.forgetForm, 456);
if (valid) {
msg("数据验证成功")
// 联调
}
})
},
back() {
uni.navigateBack({
delta: 1,
animationType: 'pop-out',
animationDuration: 200
})
},
// --------验证码 start---------
codeChange(text) {
this.tips = text;
},
getCode() {
let { shouJiHao } = this.forgetForm
if(!/^1[3-9]\d{9}$/.test(shouJiHao)){
msg("请输入正确的手机号");
return;
}
if (this.$refs.uCode1.canGetCode) {
this.showPopup()
} else {
msg('倒计时结束后再发送');
}
},
end() {
msg('倒计时结束');
},
start() {
msg('倒计时开始');
},
showPopup() {
// 模拟向后端请求验证码
// 1.获取数字校验码图片
// 2.显示弹窗
uni.showLoading({
title: '正在获取图片'
})
setTimeout(() => {
uni.hideLoading();
msg('获取成功')
this.show = true;
}, 1500);
// 联调
// this.loadImage()
// this.show = true;
},
closePopup() {
this.show = false;
this.shuzijiaoduimaForm.shuZiJiaoDuiMa = ''; // 清空输入框
},
async submitCode() {
let { shuZiJiaoDuiMa } = this.shuzijiaoduimaForm
if (!/^\d{4}$/.test(shuZiJiaoDuiMa)) {
uni.showToast({
title: '请输入4位验证码',
icon: 'none'
});
return;
}
// 联调 检验是否正确
// const checkRes = await checkShuzijiaoduima();
// if(!checkRes){
// uni.showToast({
// title: '验证码输入错误',
// icon: 'none'
// });
// return;
// }
// // 发送手机验证码
// const codeRes = await getCodeApi();
// if(codeRes && codeRes.yanZhengMaUuid){
// this.forgetForm.yanZhengMaUuid = codeRes.yanZhengMaUuid
// this.closePopup();
// this.$refs.uCode1.start()
// }
uni.showLoading({
title: '正在校验验证码'
})
setTimeout(() => {
uni.hideLoading();
msg('填写正确');
this.closePopup();
this.$refs.uCode1.start()
}, 1500);
},
// 加载验证码图片
async loadImage() {
// 联调
// const img = await loadShuzijiaoduima();
// this.shuzijiaoduimaForm.shuZiJiaoDuiMaUuid = img.shuZiJiaoDuiMaUuid
// this.shuzijiaoduimaSrc = img.shuzijiaoduimaSrc
console.log("加载图片")
}
// --------验证码 end---------
},
onLoad() {},
onReady() {
this.$refs.forgetForm.setRules(this.rules);
}
}
</script>
<style lang="scss">
.u-form-item {
padding: 30rpx 0 !important;
}
.u-form-item .u-input--border {
border-radius: 16rpx !important;
}
.u-form-item .u-form-item--left__content__label {
display: block !important;
text-align: justify;
text-align-last: justify;
padding: 0 20rpx 0 10rpx;
}
.u-input {
background-color: #f7f7f7 !important;
}
.code-input .u-input{
padding-right: 200rpx !important;
}
.code-button .u-size-mini{
display: block !important;
}
</style>
<style lang="scss" scoped>
.container {
height: 100vh;
width: 100vw;
background-color: #ffffff;
padding: 0 40rpx;
}
.form-item-input {
width: 100%;
}
.form-button {
background: linear-gradient(90deg, #006af5, #21b0fc);
border-radius: 20rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
margin: 50rpx 0;
}
.form-tip {
text-align: center;
color: #000000;
}
.code-form-item{
position: relative;
.code-button{
position: absolute;
right: 15rpx;
top: 50%;
transform: translateY(-50%);
}
}
// 数字验证码弹窗
.popup {
padding: 40rpx;
border-radius: 20rpx;
.popup-title {
font-size: 18px;
text-align: center;
display: inline-block;
width: 100%;
// margin-bottom: 15px;
}
.popup-content {
display: flex;
align-items: center;
margin: 50rpx 0;
}
.popup-btn {
display: flex;
justify-content: space-between;
}
}
</style>