邓平艺
4 years ago
11 changed files with 475 additions and 88 deletions
-
2common/js/config.js
-
18components/lf-payPassword/lf-payPassword.vue
-
7pages.json
-
4pages/recharge/balance/balance.vue
-
6pages/shop/search.vue
-
158pages/shop/searchList.vue
-
7pages/user/agreement/agreement.vue
-
168pages/user/my/newPhone.vue
-
89pages/user/my/setPassword.vue
-
54pages/user/my/verificationPhone.vue
-
46pages/user/my/vipinfo.vue
@ -0,0 +1,168 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="设置新手机号" :showIcon="true"></lf-nav> |
||||
|
<view class="content"> |
||||
|
<view class="list"> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="lf-font-28 lf-color-black" style="width: 140rpx;">新手机号</view> |
||||
|
<input class="input" placeholder="请输入新手机号" v-model="phone" maxlength="11" /> |
||||
|
</view> |
||||
|
<view class="clear" v-if="phone.length" @click="phone = ''"> |
||||
|
<text class="lf-iconfont icon-status-error"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list"> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="lf-font-28 lf-color-black" style="width: 140rpx;">验证码</view> |
||||
|
<input class="input input-code" placeholder="请输入验证码" maxlength="8" v-model="code" /> |
||||
|
</view> |
||||
|
<view class="code" :class="{'active-bg': is_code}" @click="getCode"> |
||||
|
<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<button class="next-btn" hover-class="lf-opacity" @click="submit">立即更换</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
phone: '', |
||||
|
code: '', |
||||
|
is_code: false, |
||||
|
timer: null, |
||||
|
num: 10, |
||||
|
token: '' |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
var token = this.$cookieStorage.get('user_token'); |
||||
|
this.token = token; |
||||
|
}, |
||||
|
onUnload(){ |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getCode(){ |
||||
|
let phone = this.phone; |
||||
|
if(!phone) return this.$msg('请输入手机号'); |
||||
|
if(!this.$check(phone, 'mobile')) return this.$msg('请输入正确的手机号'); |
||||
|
if(this.is_code) return; |
||||
|
this.is_code = true; |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
this.getVerifyCode(); |
||||
|
this.timer = setInterval(() => { |
||||
|
this.num--; |
||||
|
if(this.num <= 0){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
this.num = 10; |
||||
|
this.is_code = false; |
||||
|
} |
||||
|
}, 1000); |
||||
|
}, |
||||
|
getVerifyCode(){ |
||||
|
this.$http.post({ |
||||
|
api: 'api/sms/verify-code', |
||||
|
data: { |
||||
|
mobile: this.phone |
||||
|
}, |
||||
|
header: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded', |
||||
|
Authorization: this.token |
||||
|
} |
||||
|
}).then(res => { |
||||
|
console.log("-------", res); |
||||
|
if(res.data.code == 200){ |
||||
|
this.$msg(res.data.message, {icon: 'success'}); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
submit(){ |
||||
|
let phone = this.phone; |
||||
|
if(!phone) return this.$msg('请输入手机号'); |
||||
|
if(!this.$check(phone, 'mobile')) return this.$msg('请输入正确的手机号'); |
||||
|
if(!this.code) return this.$msg('请输入验证码'); |
||||
|
|
||||
|
this.$http.post({ |
||||
|
api: 'api/users/update/mobile', |
||||
|
data: { |
||||
|
code: this.code, |
||||
|
mobile: this.phone |
||||
|
}, |
||||
|
header: { |
||||
|
Authorization: this.token |
||||
|
} |
||||
|
}).then(res => { |
||||
|
this.$msg('更改手机号成功', {icon: 'success'}).then(() => { |
||||
|
uni.navigateBack({delta: 2}); // 返回前两个页面 |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
padding: 0 32rpx; |
||||
|
} |
||||
|
.next-btn{ |
||||
|
width: 550rpx; |
||||
|
height: 100rpx; |
||||
|
background: #15716E; |
||||
|
border-radius: 50rpx; |
||||
|
position: fixed; |
||||
|
bottom: 10vh; |
||||
|
left: calc(50% - 275rpx); |
||||
|
line-height: 100rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.list{ |
||||
|
height: 106rpx; |
||||
|
width: 100%; |
||||
|
border-bottom: 1rpx solid #e5e5e5; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
&:nth-child(2n){ |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
.input{ |
||||
|
width: 380rpx; |
||||
|
height: 80rpx; |
||||
|
font-size: 32rpx; |
||||
|
margin-left: 50rpx; |
||||
|
} |
||||
|
.input-code{ |
||||
|
width: 290rpx; |
||||
|
} |
||||
|
.clear{ |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
.code{ |
||||
|
min-width: 180rpx; |
||||
|
max-width: 220rpx; |
||||
|
height: 64rpx; |
||||
|
padding: 0 4rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #15716E; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 32rpx; |
||||
|
border: 2rpx solid #15716E; |
||||
|
} |
||||
|
.active-bg{ |
||||
|
background: #efefef; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue