冲突
This commit is contained in:
Zy
@@ -1,107 +1,120 @@
|
||||
<template>
|
||||
<view class="forget-page">
|
||||
<!-- <view class="status_bar"></view>
|
||||
<view class="forget-page">
|
||||
<!-- <view class="status_bar"></view>
|
||||
<view class="nav-bar">
|
||||
<uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons>
|
||||
<view class="nav-title">忘记密码</view>
|
||||
</view> -->
|
||||
<!-- 手机号输入框 -->
|
||||
<view class="input-item">
|
||||
<view class="input-icon">
|
||||
<image src="https://wuyeadmin.bugtc.com/images/login/phone.png" mode="" style="height: 100%;width: 100%;"></image>
|
||||
</view>
|
||||
<uni-easyinput class="input-content" type="number" v-model="phoneNumber" trim="all"
|
||||
placeholder="请输入手机号" :inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle">
|
||||
</uni-easyinput>
|
||||
</view>
|
||||
<!-- 验证码输入 + 获取验证码按钮 -->
|
||||
<view class="input-item verify-item">
|
||||
<view class="input-icon">
|
||||
<image src="https://wuyeadmin.bugtc.com/images/login/code.png" mode="" style="height: 100%;width: 100%;"></image>
|
||||
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
|
||||
</view>
|
||||
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" trim="all"
|
||||
placeholder="请输入验证码" :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle">
|
||||
</uni-easyinput>
|
||||
<button
|
||||
class="get-verify-btn"
|
||||
:disabled="!canGetVerify || countDown > 0"
|
||||
@click="getVerifyCode"
|
||||
>
|
||||
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
<!-- 确定 -->
|
||||
<button
|
||||
class="forget-btn"
|
||||
:disabled="!canRegister"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
|
||||
</view>
|
||||
<!-- 手机号输入框 -->
|
||||
<view class="input-item">
|
||||
<view class="input-icon">
|
||||
<image
|
||||
src="https://wuyeadmin.bugtc.com/images/login/phone.png"
|
||||
mode=""
|
||||
style="height: 100%; width: 100%"
|
||||
></image>
|
||||
</view>
|
||||
<uni-easyinput
|
||||
class="input-content"
|
||||
type="number"
|
||||
v-model="phoneNumber"
|
||||
trim="all"
|
||||
placeholder="请输入手机号"
|
||||
:inputBorder="false"
|
||||
maxlength="11"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
>
|
||||
</uni-easyinput>
|
||||
</view>
|
||||
<!-- 验证码输入 + 获取验证码按钮 -->
|
||||
<view class="input-item verify-item">
|
||||
<view class="input-icon">
|
||||
<image
|
||||
src="https://wuyeadmin.bugtc.com/images/login/code.png"
|
||||
mode=""
|
||||
style="height: 100%; width: 100%"
|
||||
></image>
|
||||
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
|
||||
</view>
|
||||
<uni-easyinput
|
||||
class="input-content verify-input"
|
||||
type="number"
|
||||
v-model="verifyCode"
|
||||
trim="all"
|
||||
placeholder="请输入验证码"
|
||||
:inputBorder="false"
|
||||
maxlength="6"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
>
|
||||
</uni-easyinput>
|
||||
<button
|
||||
class="get-verify-btn"
|
||||
:disabled="!canGetVerify || countDown > 0"
|
||||
@click="getVerifyCode"
|
||||
>
|
||||
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
<!-- 确定 -->
|
||||
<button class="forget-btn" :disabled="!canRegister" @click="handleConfirm">确定</button>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed, onUnmounted } from 'vue';
|
||||
import {getSendCode,changePhone} from '../../api/api.js'
|
||||
import { ref, computed, onUnmounted } from 'vue'
|
||||
import { getSendCode, changePhone } from '../../api/api.js'
|
||||
|
||||
// ====响应式数据======
|
||||
const phoneNumber = ref('')
|
||||
const verifyCode = ref('')
|
||||
|
||||
const countDown = ref(0)
|
||||
let timer = null;
|
||||
let timer = null
|
||||
const placeholderStyle = ref('font-size:24rpx')
|
||||
|
||||
// ========== 计算属性 ==========
|
||||
// 是否可获取验证码（手机号格式正确）
|
||||
const canGetVerify = computed(() => {
|
||||
const phoneReg = /^1[3-9]\d{9}$/;
|
||||
return phoneReg.test(phoneNumber.value);
|
||||
});
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
return phoneReg.test(phoneNumber.value)
|
||||
})
|
||||
|
||||
// 获取验证码
|
||||
const getVerifyCode = () => {
|
||||
if (!canGetVerify.value) return;
|
||||
if (!canGetVerify.value) return
|
||||
let params = {
|
||||
phone:phoneNumber.value,
|
||||
scene:'butler_login'
|
||||
phone: phoneNumber.value,
|
||||
scene: 'butler_login'
|
||||
}
|
||||
getSendCode(params).then(res =>{
|
||||
if(res.code === 200){
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'success'
|
||||
});
|
||||
// 开始60秒倒计时
|
||||
countDown.value = 60;
|
||||
timer = setInterval(() => {
|
||||
countDown.value--;
|
||||
if (countDown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '验证码发送失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
getSendCode(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'success'
|
||||
})
|
||||
// 开始60秒倒计时
|
||||
countDown.value = 60
|
||||
timer = setInterval(() => {
|
||||
countDown.value--
|
||||
if (countDown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '验证码发送失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
// 是否确认
|
||||
const canRegister = computed(() => {
|
||||
const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
|
||||
const verifyReg = /^\d{6}$/; // 验证码6位
|
||||
const phoneReg = /^1[3-9]\d{9}$/ // 手机号11位
|
||||
const verifyReg = /^\d{6}$/ // 验证码6位
|
||||
|
||||
return phoneReg.test(phoneNumber.value)
|
||||
&& verifyReg.test(verifyCode.value)
|
||||
});
|
||||
return phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value)
|
||||
})
|
||||
// 确认
|
||||
const handleConfirm = () => {
|
||||
if (!canRegister.value) {
|
||||
@@ -113,41 +126,43 @@ const handleConfirm = () => {
|
||||
changePhone({
|
||||
phone: phoneNumber.value,
|
||||
smsCode: verifyCode.value
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
// 把参数存到本地缓存
|
||||
uni.setStorageSync('tempChangePwdParams', {
|
||||
phoneNumber:phoneNumber.value
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 800)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '修改失败', icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '请求失败，请重试', icon: 'none' })
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
// 把参数存到本地缓存
|
||||
uni.setStorageSync('tempChangePwdParams', {
|
||||
phoneNumber: phoneNumber.value
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 800)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '修改失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({ title: '请求失败，请重试', icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
// 返回上一页
|
||||
// const goBack = () => {
|
||||
// uni.navigateBack();
|
||||
// };
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.forget-page{
|
||||
padding: 20rpx 40rpx 40rpx;
|
||||
min-height: 100vh;
|
||||
background-color: #f9f9f9;
|
||||
/* background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF ); */
|
||||
.forget-page {
|
||||
padding: 20rpx 40rpx 40rpx;
|
||||
min-height: 100vh;
|
||||
background-color: #f9f9f9;
|
||||
/* background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF ); */
|
||||
}
|
||||
.status_bar{
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
.status_bar {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
}
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
@@ -209,7 +224,7 @@ const handleConfirm = () => {
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #4D5DFA;
|
||||
background-color: #4d5dfa;
|
||||
color: #fff;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
@@ -222,24 +237,22 @@ const handleConfirm = () => {
|
||||
color: #fff;
|
||||
}
|
||||
/* 按钮 */
|
||||
.forget-btn{
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #4D5DFA;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 40rpx;
|
||||
.forget-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #4d5dfa;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.forget-btn:disabled{
|
||||
background-color: #99c8ff;
|
||||
color: #fff;
|
||||
.forget-btn:disabled {
|
||||
background-color: #99c8ff;
|
||||
color: #fff;
|
||||
}
|
||||
/* 禁用按钮边框 */
|
||||
.get-verify-btn:after{
|
||||
border-radius: 40px;
|
||||
.get-verify-btn:after {
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user