|
|
@@ -0,0 +1,276 @@
|
|
|
+<template>
|
|
|
+ <view class="my-tel-dialog">
|
|
|
+ <view class="my-tel-content">
|
|
|
+ <view class="tel-close" @click="telClose"></view>
|
|
|
+ <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" />
|
|
|
+ <view class="close-btn" v-if="bindObj.clearTelIcon" @click="clearTel"></view>
|
|
|
+ </view>
|
|
|
+ <view id="my-yzm-slider"></view>
|
|
|
+ <view class="get-yzm-btn" @click="AWSC.getSliderData"
|
|
|
+ :class="{ 'get-yzm-disabled': bindObj.isDisabled}">{{bindObj.buttonText}}</view>
|
|
|
+ </view>
|
|
|
+ <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" />
|
|
|
+ <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";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sliderObj: {
|
|
|
+ sessionId: '',
|
|
|
+ sig: '',
|
|
|
+ token: '',
|
|
|
+ },
|
|
|
+ bindObj:{
|
|
|
+ telNumber:'',
|
|
|
+ clearTelIcon: false,
|
|
|
+ yzmNumber:'',
|
|
|
+ clearYzmIcon: false,
|
|
|
+ /*** 验证码 ***/
|
|
|
+ yzmStatus: 'login-btn-disabled',
|
|
|
+ timeLeft: 60, // 初始倒计时时间（秒）
|
|
|
+ intervalId: null, // 定时器ID
|
|
|
+ isDisabled: true, // 按钮是否禁用
|
|
|
+ buttonText: '获取验证码', // 按钮文本
|
|
|
+ getYzmFlag: false, // 是否发送验证码
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ receiveRenderData(data) {
|
|
|
+ this.sliderObj =data;
|
|
|
+ this.getYzmBtn();
|
|
|
+ },
|
|
|
+ telClose() {
|
|
|
+ this.getReset();
|
|
|
+ this.$emit('telClose')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清空手机号
|
|
|
+ clearTel(){
|
|
|
+ this.bindObj.telNumber = '';
|
|
|
+ this.bindObj.isDisabled = true;
|
|
|
+ this.bindObj.clearTelIcon = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 判断是否输入手机号
|
|
|
+ changeTelInput(event){
|
|
|
+ if (event.detail.value.length > 0) {
|
|
|
+ this.bindObj.clearTelIcon = true;
|
|
|
+ this.validatePhoneNumber(event.detail.value);
|
|
|
+ } else {
|
|
|
+ this.bindObj.clearTelIcon = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 手机号校验规则
|
|
|
+ validatePhoneNumber(value){
|
|
|
+ const phoneRegex = /^1[3-9]\d{9}$/;
|
|
|
+ if (phoneRegex.test(value)) {
|
|
|
+ // 通过
|
|
|
+ this.bindObj.isDisabled = false;
|
|
|
+ } else {
|
|
|
+ // 不通过
|
|
|
+ this.bindObj.isDisabled = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取验证码按钮
|
|
|
+ getYzmBtn(){
|
|
|
+ // 判断手机号校验是否通过
|
|
|
+ if(this.bindObj.isDisabled === true){
|
|
|
+ toast("请输入正确的手机号！")
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ this.startCountdown();
|
|
|
+ this.getMessage();
|
|
|
+ this.getReset();
|
|
|
+ this.sliderObj = {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getMessage(){
|
|
|
+ let req = {
|
|
|
+ appkey: "FFFF0N00000000007EC0",
|
|
|
+ phone: this.bindObj.telNumber,
|
|
|
+ scene: "nc_message_h5',",
|
|
|
+ sessionid: this.sliderObj.sessionId,
|
|
|
+ sig: this.sliderObj.sig,
|
|
|
+ token: this.sliderObj.token,
|
|
|
+ }
|
|
|
+ sendCode(req).then(res => {
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ toast('验证码获取失败：'+ err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清空验证码
|
|
|
+ clearYzm(){
|
|
|
+ this.bindObj.yzmNumber = '';
|
|
|
+ this.bindObj.isDisabled = true;
|
|
|
+ this.bindObj.clearYzmIcon = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 判断是否输入验证码
|
|
|
+ changeYzmInput(event){
|
|
|
+ if (event.detail.value.length > 0) {
|
|
|
+ this.bindObj.clearYzmIcon = true;
|
|
|
+ } else {
|
|
|
+ this.bindObj.clearYzmIcon = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 开始计时
|
|
|
+ startCountdown() {
|
|
|
+
|
|
|
+ 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--;
|
|
|
+ if (this.bindObj.timeLeft <= 0) {
|
|
|
+ clearInterval(this.bindObj.intervalId);
|
|
|
+ this.bindObj.timeLeft = 60; // 重置倒计时
|
|
|
+ this.bindObj.isDisabled = false;
|
|
|
+ this.bindObj.buttonText = '重新发送';
|
|
|
+ } else {
|
|
|
+ this.bindObj.buttonText = `重新发送（${this.bindObj.timeLeft}S）`;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 绑定按钮
|
|
|
+ bindBtn(){
|
|
|
+ cacheManager.updateArrayInObject('userName', 'hobbies', (hobbies) => {
|
|
|
+ hobbies.push('123');
|
|
|
+ hobbies = 'coding';
|
|
|
+ hobbies.pop();
|
|
|
+ });
|
|
|
+ // cacheManager.updateObject('userName','123');
|
|
|
+ /* console.log(this.bindObj.telNumber,'this.bindObj.telNumber');
|
|
|
+ if(this.bindObj.telNumber===''){
|
|
|
+ toast('手机号不能为空')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.bindObj.yzmNumber===''){
|
|
|
+ toast('验证码不能为空')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let req = {
|
|
|
+ tel: this.bindObj.telNumber,
|
|
|
+ code: this.bindObj.yzmNumber,
|
|
|
+ }
|
|
|
+ telBind(req).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ toast('手机号绑定成功')
|
|
|
+ telClose();
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ toast('手机号绑定失败：'+ err)
|
|
|
+ }) */
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<script module="AWSC" lang="renderjs">
|
|
|
+ import {toast} from "../../utils/common";
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ const script = document.createElement('script');
|
|
|
+ script.src = 'https://g.alicdn.com/AWSC/AWSC/awsc.js';
|
|
|
+ document.body.appendChild(script);
|
|
|
+ script.onload = () => {
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sessionId: '',
|
|
|
+ sig: '',
|
|
|
+ token: '',
|
|
|
+ nc:null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ let that =this
|
|
|
+ AWSC.use("nc", function(state, module) {
|
|
|
+ that.nc = module.init({
|
|
|
+ // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
|
|
|
+ appkey: "FFFF0N00000000007EC0",
|
|
|
+ //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
|
|
|
+ scene: "nc_message_h5",
|
|
|
+ // 声明滑动验证需要渲染的目标ID。
|
|
|
+ renderTo: "my-yzm-slider",
|
|
|
+ //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
|
|
|
+ success: function(data) {
|
|
|
+ that.getData(data)
|
|
|
+ },
|
|
|
+ // 滑动验证失败时触发该回调参数。
|
|
|
+ fail: function(failCode) {
|
|
|
+ console.log('失败：' + failCode)
|
|
|
+ },
|
|
|
+ // 验证码加载出现异常时触发该回调参数。
|
|
|
+ error: function(errorCode) {
|
|
|
+ console.log('异常：' + errorCode)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getData(data){
|
|
|
+ this.sessionId =data.sessionId
|
|
|
+ this.sig =data.sig
|
|
|
+ this.token =data.token
|
|
|
+ AWSC.getSliderData;
|
|
|
+ },
|
|
|
+ getReset(){
|
|
|
+ this.sessionId = '';
|
|
|
+ this.sig = '';
|
|
|
+ this.token = '';
|
|
|
+ this.nc.reset();
|
|
|
+ console.log(this.nc.reset(),'nc');
|
|
|
+ },
|
|
|
+ getSliderData(e, ownerInstance) {
|
|
|
+ if(this.sessionId){
|
|
|
+ ownerInstance.callMethod('receiveRenderData', {
|
|
|
+ sessionId: this.sessionId,
|
|
|
+ sig: this.sig,
|
|
|
+ token: this.token
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ toast("请先完成滑块验证！")
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
tanxue
