|
@@ -5,8 +5,8 @@
|
|
|
<view class="tel-row">
|
|
|
<view class="my-tel-title">绑定新手机号</view>
|
|
|
<view class="my-input-box">
|
|
|
- <input class="my-input" type="text" v-model="bindObj.telNumber" placeholder="请输入手机号"
|
|
|
- maxlength="11" @input="changeTelInput" />
|
|
|
+ <input class="my-input" type="text" v-model="bindObj.telNumber" placeholder="请输入手机号" maxlength="11"
|
|
|
+ @input="changeTelInput" />
|
|
|
<view class="close-btn" v-if="bindObj.clearTelIcon" @click="clearTel"></view>
|
|
|
</view>
|
|
|
<view id="my-yzm-slider"></view>
|
|
@@ -16,20 +16,25 @@
|
|
|
<view class="yzm-row">
|
|
|
<view class="yzm-tip" v-if="bindObj.getYzmFlag">验证码已发送至:{{bindObj.telNumber}}</view>
|
|
|
<view class="my-input-box">
|
|
|
- <input class="my-input" type="text" v-model="bindObj.yzmNumber" placeholder="请输入验证码"
|
|
|
- maxlength="6" @input="changeYzmInput" />
|
|
|
+ <input class="my-input" type="text" v-model="bindObj.yzmNumber" placeholder="请输入验证码" maxlength="6"
|
|
|
+ @input="changeYzmInput" />
|
|
|
<view class="close-btn" v-if="bindObj.clearYzmIcon" @click="clearYzm"></view>
|
|
|
</view>
|
|
|
<view @click="bindBtn" class="my-bind-btn">绑定</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import cacheManager from '@/utils/cacheManager.js';
|
|
|
- import {telBind,sendCode} from "@/api/login.js"
|
|
|
- import {toast} from "../../utils/common";
|
|
|
+ import {
|
|
|
+ telBind,
|
|
|
+ sendCode
|
|
|
+ } from "@/api/login.js"
|
|
|
+ import {
|
|
|
+ toast
|
|
|
+ } from "../../utils/common";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -38,10 +43,10 @@
|
|
|
sig: '',
|
|
|
token: '',
|
|
|
},
|
|
|
- bindObj:{
|
|
|
- telNumber:'',
|
|
|
+ bindObj: {
|
|
|
+ telNumber: '',
|
|
|
clearTelIcon: false,
|
|
|
- yzmNumber:'',
|
|
|
+ yzmNumber: '',
|
|
|
clearYzmIcon: false,
|
|
|
/*** 验证码 ***/
|
|
|
yzmStatus: 'login-btn-disabled',
|
|
@@ -51,33 +56,33 @@
|
|
|
buttonText: '获取验证码', // 按钮文本
|
|
|
getYzmFlag: false, // 是否发送验证码
|
|
|
},
|
|
|
- activeAWSC:null
|
|
|
+ activeAWSC: null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- getSliderData(AWSC) {
|
|
|
- this.activeAWSC = AWSC
|
|
|
- AWSC.getSliderData();
|
|
|
- },
|
|
|
+ getSliderData(AWSC) {
|
|
|
+ this.activeAWSC = AWSC
|
|
|
+ AWSC.getSliderData();
|
|
|
+ },
|
|
|
receiveRenderData(data) {
|
|
|
- this.sliderObj =data;
|
|
|
+ this.sliderObj = data;
|
|
|
this.getYzmBtn();
|
|
|
},
|
|
|
telClose(AWSC) {
|
|
|
- AWSC.getReset();
|
|
|
+ AWSC.getReset();
|
|
|
this.$emit('telClose')
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 清空手机号
|
|
|
- clearTel(){
|
|
|
+ clearTel() {
|
|
|
this.bindObj.telNumber = '';
|
|
|
this.bindObj.isDisabled = true;
|
|
|
this.bindObj.clearTelIcon = false;
|
|
|
this.bindObj.getYzmFlag = false;
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 判断是否输入手机号
|
|
|
- changeTelInput(event){
|
|
|
+ changeTelInput(event) {
|
|
|
if (event.detail.value.length > 0) {
|
|
|
this.bindObj.clearTelIcon = true;
|
|
|
this.validatePhoneNumber(event.detail.value);
|
|
@@ -85,9 +90,9 @@
|
|
|
this.bindObj.clearTelIcon = false;
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 手机号校验规则
|
|
|
- validatePhoneNumber(value){
|
|
|
+ validatePhoneNumber(value) {
|
|
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
|
|
if (phoneRegex.test(value)) {
|
|
|
// 通过
|
|
@@ -98,20 +103,20 @@
|
|
|
}
|
|
|
},
|
|
|
// 获取验证码按钮
|
|
|
- getYzmBtn(){
|
|
|
+ getYzmBtn() {
|
|
|
// 判断手机号校验是否通过
|
|
|
- if(this.bindObj.isDisabled === true){
|
|
|
+ if (this.bindObj.isDisabled === true) {
|
|
|
toast("请输入正确的手机号!")
|
|
|
return
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.startCountdown();
|
|
|
this.getMessage();
|
|
|
- this.activeAWSC.getReset();
|
|
|
+ this.activeAWSC.getReset();
|
|
|
this.sliderObj = {};
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- getMessage(){
|
|
|
+
|
|
|
+ getMessage() {
|
|
|
let req = {
|
|
|
appkey: "FFFF0N00000000007EC0",
|
|
|
phone: this.bindObj.telNumber,
|
|
@@ -123,40 +128,40 @@
|
|
|
sendCode(req).then(res => {
|
|
|
this.bindObj.getYzmFlag = true;
|
|
|
}).catch(err => {
|
|
|
- toast('验证码获取失败:'+ err)
|
|
|
+ toast('验证码获取失败:' + err)
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 清空验证码
|
|
|
- clearYzm(){
|
|
|
+ clearYzm() {
|
|
|
this.bindObj.yzmNumber = '';
|
|
|
this.bindObj.isDisabled = true;
|
|
|
this.bindObj.clearYzmIcon = false;
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 判断是否输入验证码
|
|
|
- changeYzmInput(event){
|
|
|
+ changeYzmInput(event) {
|
|
|
if (event.detail.value.length > 0) {
|
|
|
this.bindObj.clearYzmIcon = true;
|
|
|
} else {
|
|
|
this.bindObj.clearYzmIcon = false;
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 开始计时
|
|
|
startCountdown() {
|
|
|
-
|
|
|
- if(this.bindObj.buttonText === '重新发送'){
|
|
|
+
|
|
|
+ if (this.bindObj.buttonText === '重新发送') {
|
|
|
this.sliderFlag = true;
|
|
|
}
|
|
|
this.bindObj.isDisabled = true;
|
|
|
this.bindObj.buttonText = `重新发送(${this.bindObj.timeLeft}S)`;
|
|
|
-
|
|
|
+
|
|
|
// 清除之前的定时器(如果有)
|
|
|
if (this.bindObj.intervalId) {
|
|
|
clearInterval(this.bindObj.intervalId);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 设置新的定时器
|
|
|
this.bindObj.intervalId = setInterval(() => {
|
|
|
this.bindObj.timeLeft--;
|
|
@@ -170,18 +175,18 @@
|
|
|
}
|
|
|
}, 1000);
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 绑定按钮
|
|
|
- bindBtn(){
|
|
|
- if(this.bindObj.telNumber===''){
|
|
|
+ bindBtn() {
|
|
|
+ if (this.bindObj.telNumber === '') {
|
|
|
toast('手机号不能为空')
|
|
|
return;
|
|
|
}
|
|
|
- if(this.bindObj.yzmNumber===''){
|
|
|
+ if (this.bindObj.yzmNumber === '') {
|
|
|
toast('验证码不能为空')
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
let req = {
|
|
|
tel: this.bindObj.telNumber,
|
|
|
code: this.bindObj.yzmNumber,
|
|
@@ -195,9 +200,9 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 在缓存中修改手机号
|
|
|
- updataTel(data){
|
|
|
+ updataTel(data) {
|
|
|
cacheManager.updateObject('auth', {
|
|
|
userName: data
|
|
|
})
|
|
@@ -207,7 +212,9 @@
|
|
|
</script>
|
|
|
|
|
|
<script module="AWSC" lang="renderjs">
|
|
|
- import {toast} from "../../utils/common";
|
|
|
+ import {
|
|
|
+ toast
|
|
|
+ } from "../../utils/common";
|
|
|
export default {
|
|
|
mounted() {
|
|
|
const script = document.createElement('script');
|
|
@@ -222,12 +229,12 @@
|
|
|
sessionId: '',
|
|
|
sig: '',
|
|
|
token: '',
|
|
|
- nc:null,
|
|
|
+ nc: null,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- let that =this
|
|
|
+ let that = this
|
|
|
AWSC.use("nc", function(state, module) {
|
|
|
that.nc = module.init({
|
|
|
// 应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
|
|
@@ -251,29 +258,29 @@
|
|
|
});
|
|
|
})
|
|
|
},
|
|
|
- getData(data){
|
|
|
- this.sessionId =data.sessionId
|
|
|
- this.sig =data.sig
|
|
|
- this.token =data.token
|
|
|
+ getData(data) {
|
|
|
+ this.sessionId = data.sessionId
|
|
|
+ this.sig = data.sig
|
|
|
+ this.token = data.token
|
|
|
AWSC.getSliderData;
|
|
|
},
|
|
|
- getReset(){
|
|
|
+ getReset() {
|
|
|
this.sessionId = '';
|
|
|
this.sig = '';
|
|
|
this.token = '';
|
|
|
this.nc.reset();
|
|
|
},
|
|
|
getSliderData(e, ownerInstance) {
|
|
|
- if(this.sessionId){
|
|
|
+ if (this.sessionId) {
|
|
|
ownerInstance.callMethod('receiveRenderData', {
|
|
|
sessionId: this.sessionId,
|
|
|
sig: this.sig,
|
|
|
token: this.token
|
|
|
})
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
toast("请先完成滑块验证!")
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|