sl-express/project-wl-siji-uniapp-vue3/pages/user/components/ChangePhon.vue

260 lines
6.1 KiB
Vue
Raw Normal View History

2023-09-04 16:40:17 +08:00
<!-- 更改手机号 -->
<template>
<!-- 登录表单 手机号验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone">
<uni-easyinput class="item" v-model="fromInfo.phone" :clearable="false" :placeholder=" step == 1 ? '请输入已绑定手机号' : '请输入新手机号'" />
</uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" :clearable="false" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>{{step == 1 ? '下一步' : '确定绑定'}}</text>
</view>
<!-- end -->
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
import { getsmsCode, checksmsCode, bindPhone } from '@/pages/api/user.js'
//vuex获取储存数据
const store = useStore();
const customForm = ref();
const isVerifySuccess = ref(false);
const step = ref(1) // 1 换绑手机 老手机号验证 2 新手机号绑定
const time = ref(null) // 倒计时对象缓存 在切换下一步时清除用
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' // 验证码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// 获取验证码
const getCode = async () => {
let phone = fromInfo.phone;
isVerifySuccess.value = isPhone(phone);
if (isVerifySuccess.value) {
time.value = timeCountdown(codeInfo);
const parent = {
phone
};
// 获取手机验证码
const {data} = await getsmsCode(parent)
if(data.code == 0 || data.code == 200){
uni.showToast({
title: '验证码已发送成功',
duration: 1000,
icon: 'none'
});
}else{
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
} else {
return uni.showToast({
title: '手机号输入错误!请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 效验验证码通过进入下一步
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid && step.value == 1) {
// 效验验证码
checkCode()
} else {
// 绑定手机号
bindPhoneHandle()
}
};
// 效验验证码
async function checkCode(){
// 效验验证码
await checksmsCode(fromInfo)
.then(res => {
if (res.code === 200) {
// 进入下一步
step.value = 2
// 清空输入框
fromInfo.phone = ''
fromInfo.verifyCode = ''
// 还原倒计时
codeInfo.show = true
codeInfo.times = 60
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误!请重新输入
// 账号输入错误!请重新输入
}
})
.catch(err => {});
}
// 绑定手机号
async function bindPhoneHandle(){
// 绑定手机号
await bindPhone(fromInfo)
.then(res => {
if (res.code === 200) {
// 绑定成功 重新登录
uni.showToast({
title: '绑定成功请重新登录!',
duration: 1000,
icon: 'none'
});
setTimeout(()=>{
goLogin()
}, 500)
goLogin()
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误!请重新输入
// 账号输入错误!请重新输入
}
})
.catch(err => {});
}
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style lang="scss" scoped>
.loginMain {
background-color: #fff;
height: calc(100vh - 90rpx);
::v-deep .uni-input-input{
color: var(--neutral-color-main);
}
padding: 66rpx;
.item {
::v-deep .is-input-border {
padding: 30rpx 0;
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #797979;
letter-spacing: 0.36rpx;
border: 0 none;
border-bottom: 1px solid var(--neutral-color-background);
position: relative;
border-radius: 0;
.uni-easyinput__placeholder-class {
font-size: 32rpx;
color: var(--neutral-color-font);
letter-spacing: 0.36rpx;
}
.uni-easyinput__content-input {
padding-left: 0 !important;
font-size: 32rpx;
}
}
::v-deep .is-input-error-border {
border-bottom: 1px solid var(--essential-color-red);
margin-bottom: 44rpx;
}
::v-deep .content-clear-icon{
padding: 0;
font-size: 28rpx !important;
line-height: 46rpx;
}
::v-deep .uniui-eye-filled{
background: url(@/static/icon-close.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
::v-deep .uniui-eye-slash-filled{
background: url(@/static/icon-open.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
}
::v-deep .uni-forms-item__inner {
padding-bottom: 0;
}
::v-deep .uni-error-message {
bottom: -10rpx;
}
::v-deep .content-clear-icon {
margin-right: 30rpx;
}
.inputW{
::v-deep .is-input-border{
padding-right: 166rpx;
}
}
.codeBox {
position: absolute;
right: 40rpx;
top: 34rpx;
font-size: 28rpx;
color: #818181;
border-left: solid 4rpx #f4f4f4;
padding-left: 20rpx;
}
}
</style>