267 lines
6.4 KiB
Vue
267 lines
6.4 KiB
Vue
<template>
|
|
<view id="replace-password">
|
|
<view class="form-box phone-box">
|
|
<view class="form-item login-name">
|
|
<view class="iconfont icon-shoujihao"></view>
|
|
<view class="phone-num">
|
|
{{oldPhone}}
|
|
</view>
|
|
</view>
|
|
<view class="form-item login-phone">
|
|
<view class="iconfont icon-yanzhengma"></view>
|
|
<input v-model.trim="oldCode" type="text" placeholder="请输入旧手机验证码" />
|
|
<button type="primary" class="login-phone-btn" @click="verifygetImgCode('old')">获取验证码</button>
|
|
</view>
|
|
<view class="form-item login-name">
|
|
<view class="iconfont icon-shoujihao"></view>
|
|
<input v-model.trim="newPhone" type="text" placeholder="请输入新手机号" />
|
|
</view>
|
|
<view class="form-item login-phone">
|
|
<view class="iconfont icon-yanzhengma"></view>
|
|
<input v-model.trim="newCode" type="text" placeholder="请输入新手机验证码" />
|
|
<button type="primary" class="login-phone-btn" @click="verifygetImgCode('new')">获取验证码</button>
|
|
</view>
|
|
</view>
|
|
<view class="btn">
|
|
<button type="default" @click="submit">确认提交</button>
|
|
</view>
|
|
<u-modal v-model="codeShow" ref="codeModal" async-close title="图片验证码" :mask-close-able="true" @confirm="verifySenCode">
|
|
<view class="slot-content imgCodeModel-content" >
|
|
<view class="imgCodeModel-content-title">
|
|
<image slot="right" style="width: 500rpx;height:150rpx" @click="getImgCodeTxt" :src="imgCodePath" mode=""></image>
|
|
</view>
|
|
<view class="imgCodeModel-content-input">
|
|
<u-input border class="login-input" type="text" v-model="imgCodeTxt" c
|
|
laceholder-style="font-size:36rpx" placeholder="请输入图片验证码" />
|
|
</view>
|
|
</view>
|
|
</u-modal>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import NavBar from '@/common/components/navbar/NavBar.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
infoData:{},
|
|
// 手机号及验证码
|
|
oldPhone:'',
|
|
oldCode:'',
|
|
newPhone:'',
|
|
newCode:'',
|
|
// 图片验证码弹窗
|
|
codeShow:false,
|
|
imgPhone:'',
|
|
imgCodePath:'',
|
|
imgCodeKey:'',
|
|
imgCodeTxt:'',
|
|
}
|
|
},
|
|
components: {
|
|
NavBar
|
|
},
|
|
onLoad() {
|
|
this.infoData = uni.getStorageSync('userInfo');
|
|
// this.oldPhone = this.infoData.mobile;
|
|
this.oldPhone = '17859911022';
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
verifygetImgCode(type){
|
|
console.log("获取验证码1")
|
|
if(type == 'old'){
|
|
this.imgPhone = this.oldPhone;
|
|
}else{
|
|
this.imgPhone = this.newPhone;
|
|
}
|
|
|
|
if(!this.imgPhone){
|
|
this.$refs.uToast.show({
|
|
title: '请先输入手机号',
|
|
type: 'error',
|
|
})
|
|
}else if(!this.$u.test.mobile(this.imgPhone)){
|
|
this.$refs.uToast.show({
|
|
title: '请先输入正确的手机号',
|
|
type: 'error',
|
|
})
|
|
}else{
|
|
this.getImgCodeTxt();
|
|
}
|
|
},
|
|
getImgCodeTxt(){
|
|
let opt = {
|
|
url: '/user/admin/site/captcha',
|
|
method: 'GET',
|
|
header: {
|
|
},
|
|
};
|
|
this.$request.TokenRequest(opt, {}).then(res => {
|
|
if(res.code == 0){
|
|
this.imgCodeKey = res.data.cid;
|
|
this.imgCodePath = res.data.base64;
|
|
this.imgCodeTxt = '';
|
|
// 获取图片验证码
|
|
this.codeShow = true;
|
|
}else{
|
|
this.$u.toast(res.message);
|
|
}
|
|
}, error => {
|
|
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
|
})
|
|
},
|
|
submit(){
|
|
if(this.verification()){
|
|
let opt = {
|
|
url: '/user/admin/member/updatePwd',
|
|
method: "POST",
|
|
}
|
|
let params={
|
|
id:this.infoData.id,
|
|
newPassword:this.newPassword,
|
|
oldPassword:this.oldPassword,
|
|
}
|
|
this.$request.TokenRequest(opt,params).then(res => {
|
|
console.log("submit",res);
|
|
if(res.code==0){
|
|
this.$u.toast(res.message);
|
|
this.$store.commit('setTokenKey', '');
|
|
uni.$u.toast('退出登录成功');
|
|
uni.removeStorageSync('token')
|
|
uni.removeStorageSync('password')
|
|
setTimeout(()=>{
|
|
uni.reLaunch({
|
|
url:"../tabbar/login"
|
|
})
|
|
return;
|
|
},200)
|
|
}else{
|
|
this.$u.toast(res.message);
|
|
}
|
|
}, error => {
|
|
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
|
})
|
|
}
|
|
},
|
|
// 表单验证
|
|
verification(){
|
|
if(!this.oldPhone){
|
|
this.$refs.uToast.show({
|
|
title: '没有获取到旧手机号!',
|
|
type: 'error',
|
|
})
|
|
return false;
|
|
}else if(!this.$u.test.mobile(this.oldPhone)){
|
|
this.$refs.uToast.show({
|
|
title: '旧手机号错误!',
|
|
type: 'error',
|
|
})
|
|
return false;
|
|
}else if(!this.oldCode){
|
|
this.$refs.uToast.show({
|
|
title: '请输入旧手机验证码!',
|
|
type: 'error',
|
|
})
|
|
return false;
|
|
}else if(!this.newPhone){
|
|
this.$refs.uToast.show({
|
|
title: '请输入新手机号!',
|
|
type: 'error',
|
|
})
|
|
return false;
|
|
}else if(!this.$u.test.mobile(this.newPhone)){
|
|
this.$refs.uToast.show({
|
|
title: '请输入正确的新手机号!',
|
|
type: 'error',
|
|
})
|
|
return false;
|
|
}else if(!this.newCode){
|
|
this.$refs.uToast.show({
|
|
title: '请输入新手机验证码!',
|
|
type: 'error',
|
|
})
|
|
return false;
|
|
}else if(this.oldPhone==this.newPhone){
|
|
this.$refs.uToast.show({
|
|
title: '换绑手机号和旧手机号相同!',
|
|
type: 'error',
|
|
})
|
|
return false;
|
|
}else{
|
|
console.log('true',true)
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#replace-password{
|
|
.form-box{
|
|
padding: 0 30rpx;
|
|
.form-item {
|
|
height: 126rpx;
|
|
border-bottom: 1px solid #ddd;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 21rpx;
|
|
|
|
.iconfont {
|
|
&:first-of-type {
|
|
font-size: 50rpx;
|
|
color: #45a5ff;
|
|
font-weight: 550;
|
|
}
|
|
}
|
|
input {
|
|
width: 500rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
&.login-phone{
|
|
input {
|
|
width: 350rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
.login-phone-btn{
|
|
font-size: 30rpx;
|
|
background: #2F7EFD;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.phone-num{
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 142rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
button{
|
|
width: 690rpx;
|
|
height: 90rpx;
|
|
background: #3683FD;
|
|
border-radius: 43rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.imgCodeModel-content{
|
|
padding: 10rpx 50rpx;
|
|
}
|
|
</style>
|