|
|
@@ -0,0 +1,290 @@
|
|
|
+<template>
|
|
|
+ <view class="my-tel-dialog">
|
|
|
+ <view class="my-tel-content">
|
|
|
+ <view class="tel-close" @click="telClose(AWSC)"></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" :myflag="myflag" :change:myflag="AWSC.getReset"></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 {
|
|
|
+ firstTelBind,
|
|
|
+ sendCode
|
|
|
+ } from "@/api/login.js"
|
|
|
+ import {
|
|
|
+ toast
|
|
|
+ } from "../../utils/common";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myflag: 0,
|
|
|
+ sliderObj: {
|
|
|
+ sessionId: '',
|
|
|
+ sig: '',
|
|
|
+ token: '',
|
|
|
+ },
|
|
|
+ bindObj: {
|
|
|
+ apple: false,
|
|
|
+ openId: '',
|
|
|
+ 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(AWSC) {
|
|
|
+ AWSC.getReset();
|
|
|
+ this.$emit('telClose')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清空手机号
|
|
|
+ clearTel() {
|
|
|
+ this.bindObj.telNumber = '';
|
|
|
+ this.bindObj.isDisabled = true;
|
|
|
+ this.bindObj.clearTelIcon = false;
|
|
|
+ this.bindObj.getYzmFlag = false;
|
|
|
+ },
|
|
|
+ getOpenId(data){
|
|
|
+ this.bindObj.openId = data
|
|
|
+
|
|
|
+ },
|
|
|
+ // 判断是否输入手机号
|
|
|
+ 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.timeLeft != 60) {
|
|
|
+ toast('请在' + this.bindObj.timeLeft + '后重新获取验证码！')
|
|
|
+ return
|
|
|
+ } else if (this.bindObj.isDisabled === true) {
|
|
|
+ toast("请输入正确的手机号！")
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.startCountdown();
|
|
|
+ this.getMessage();
|
|
|
+ this.myflag++;
|
|
|
+ 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 => {
|
|
|
+ this.bindObj.getYzmFlag = true;
|
|
|
+ }).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() {
|
|
|
+ if (this.bindObj.telNumber === '') {
|
|
|
+ toast('手机号不能为空')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.bindObj.yzmNumber === '') {
|
|
|
+ toast('验证码不能为空')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let req = {
|
|
|
+ tel: this.bindObj.telNumber,
|
|
|
+ code: this.bindObj.yzmNumber,
|
|
|
+ apple: this.bindObj.apple,
|
|
|
+ openId: this.bindObj.openId,
|
|
|
+ }
|
|
|
+ console.log(req);
|
|
|
+ firstTelBind(req).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ console.log(res.data);
|
|
|
+ toast('手机号绑定成功')
|
|
|
+ cacheManager.set('auth',res.data)
|
|
|
+ this.$emit('bindBtn',res.data)
|
|
|
+ // this.telClose();
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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 && this.nc.reset();
|
|
|
+ },
|
|
|
+ getSliderData(e, ownerInstance) {
|
|
|
+ if (this.sessionId) {
|
|
|
+ ownerInstance.callMethod('receiveRenderData', {
|
|
|
+ sessionId: this.sessionId,
|
|
|
+ sig: this.sig,
|
|
|
+ token: this.token
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ toast("请先完成滑块验证！")
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
wangxy