You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
4.2 KiB
Vue
190 lines
4.2 KiB
Vue
<template>
|
|
<view class="main">
|
|
<navBar navTitle="" :hasLogo="true" :hasRight="true" :backToUrl="'/pages/mine/setting/setting'"
|
|
@clickRight="clickRight" :color="'#000000'" :backBackGroundColor="'#3D553D'" />
|
|
<u-code :seconds="seconds" @start="start" ref="uCode"
|
|
:start-text="$t('code.start')"
|
|
:change-text="$t('code.change')"
|
|
:end-text="$t('code.end')"
|
|
@change="codeChange"></u-code>
|
|
<view class="info">
|
|
<view class="item">
|
|
<view class="lable">{{$t('phone.old')}}</view>
|
|
<view class="gray">{{ telNum }}</view>
|
|
</view>
|
|
<u-divider></u-divider>
|
|
<view class="item">
|
|
<view class="lable">{{$t('phone.code')}}</view>
|
|
<view style="margin-left: 30upx;">
|
|
<u--input style="width: 130upx;" border="none" v-model="code" type="number"></u--input>
|
|
</view>
|
|
<view class="resend" @tap="getCode">{{ tips }}</view>
|
|
</view>
|
|
</view>
|
|
<view style="color: #717171; text-align: right;font-size: 10rpx;margin-right:56rpx;margin-top:16rpx">*{{$t('update.phone.title')}}</view>
|
|
<view class="info" style="height: 120upx;">
|
|
<view class="item">
|
|
<view class="lable">{{$t('phone.new')}}</view>
|
|
<view style="margin-left: 30upx;">
|
|
<u--input style="width: 200upx; color:#878787" :placeholder="$t('input.pla')" border="none" v-model="newTelNum" type="number"></u--input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-button :text="$t('save.update')" color="#699A70" @click="changePhone" class="btn" style=""></u-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tips: '',
|
|
// refCode: null,
|
|
seconds: 60,
|
|
wathTime: 10,
|
|
code: '',
|
|
focus: false,
|
|
telNum: '',
|
|
newTelNum: ''
|
|
};
|
|
},
|
|
onLoad(opt) {
|
|
this.telNum = opt.telNum
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
uni.navigateTo({
|
|
url: '/pages/mine/setting/setting'
|
|
});
|
|
},
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
},
|
|
async getCode() {
|
|
if (this.$refs.uCode.canGetCode) {
|
|
uni.showLoading({
|
|
title: this.$t('sendCode.loading')
|
|
});
|
|
|
|
let res = await this.$api.mine.mineCode();
|
|
if (res.status === 0) {
|
|
uni.hideLoading();
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
this.focus = true;
|
|
this.$refs.uCode.start();
|
|
// 通知验证码组件内部开始倒计时
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
} else {
|
|
uni.$u.toast(this.$t('sendCode.toast'));
|
|
}
|
|
},
|
|
start() {
|
|
uni.$u.toast(this.$t('sendCode'));
|
|
},
|
|
async changePhone(){
|
|
if(!this.code || !this.newTelNum){
|
|
uni.$u.toast(this.$t('input.phoneCode'));
|
|
return
|
|
}
|
|
let data = {code:this.code,newTelNum:this.newTelNum}
|
|
let res = await this.$api.mine.verifyCode(data);
|
|
if (res.status === 0) {
|
|
uni.navigateTo({
|
|
url: '/pages/login/sendCode/sendCode?token='+res.data.token+'&newNum='+this.newTelNum
|
|
});
|
|
} else {
|
|
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: url('@/static/image/home/new_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-attachment: fixed;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.main {
|
|
display: grid;
|
|
justify-content: center;
|
|
/deep/.uni-input-input{
|
|
color: #878787;
|
|
}
|
|
.title {
|
|
margin-top: 40upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
image {
|
|
width: 201upx;
|
|
height: 60upx;
|
|
}
|
|
}
|
|
.btn {
|
|
height: 56rpx;
|
|
width: 600upx;
|
|
border-radius: 40rpx;
|
|
margin-top: 30rpx;
|
|
position: absolute;
|
|
bottom: 120upx;
|
|
left: 10%;
|
|
}
|
|
.cancel {
|
|
text-align: center;
|
|
height: 56rpx;
|
|
width: 600upx;
|
|
border-radius: 40rpx;
|
|
margin-top: 30rpx;
|
|
position: absolute;
|
|
bottom: 40upx;
|
|
left: 10%;
|
|
}
|
|
}
|
|
.info {
|
|
box-sizing: border-box;
|
|
border-radius: 8rpx;
|
|
width: 650upx;
|
|
height: 218upx;
|
|
background: #FFFFFF;
|
|
margin: 65rpx 50rpx 0 50rpx;
|
|
|
|
padding: 0 65rpx 0 65rpx;
|
|
.item {
|
|
font-size: 30upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 40upx;
|
|
.rz {
|
|
margin-left: 10upx;
|
|
font-size: 28rpx;
|
|
background-color: #558bf2;
|
|
width: 60upx;
|
|
|
|
border-radius: 40upx;
|
|
padding: 0upx 20upx 4upx 20upx;
|
|
}
|
|
}
|
|
.lable{
|
|
color: #434343;
|
|
}
|
|
.gray {
|
|
color: #878787;
|
|
}
|
|
/deep/ .u-input__content__field-wrapper__field {
|
|
color: #fff !important;
|
|
}
|
|
.resend {
|
|
color: #699A70;
|
|
}
|
|
}
|
|
</style>
|