|
@@ -1,24 +1,35 @@
|
|
|
<template>
|
|
|
<view class="smsVerification-container">
|
|
|
<view class="sms-title">输入短信验证码</view>
|
|
|
- <text class="sms-describe">验证码已发送至157****7854,请在下方输入框内输入6位数字验证码</text>
|
|
|
+ <text class="sms-describe">验证码已发送至{{userPhone}},请在下方输入框内输入6位数字验证码</text>
|
|
|
<view class="sms-item" @tap="showKeyboard=!showKeyboard">
|
|
|
<u-message-input mode="bottomLine" :maxlength="6" v-model="value" :disabled-keyboard="true"></u-message-input>
|
|
|
</view>
|
|
|
<view class="sendcode-con">
|
|
|
- <text :class="['getcode-btn', isDisable ? 'grey-btn' : '']" @click="isDisable ? null : getCodeValidate()">{{nowVal}}</text>
|
|
|
+ <text :class="['getcode-btn', isDisable ? 'grey-btn' : '']" @click="isDisable ? null : pageInit()">{{nowVal}}</text>
|
|
|
</view>
|
|
|
- <view class="btn-con">
|
|
|
+ <!-- <view class="btn-con">
|
|
|
<u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
|
|
|
<u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<!-- 数字键盘 -->
|
|
|
<u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
|
|
|
+ <!-- 图文验证码 -->
|
|
|
+ <uni-popup ref="imageTxtPopup" type="center">
|
|
|
+ <popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
|
|
|
+ </uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
|
|
+ import popupCon from '@/components/uni-popup/popup-con.vue'
|
|
|
+ import { loginPhone, sendVerifyCode } from '@/api/user.js'
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ uniPopup,
|
|
|
+ popupCon
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
nowVal: '获取验证码', // 按钮显示内容
|
|
@@ -26,19 +37,84 @@
|
|
|
timer: null, // 倒计时
|
|
|
isDisable: false, // 是否禁止获取验证码
|
|
|
value: '', //输入的内容
|
|
|
- showKeyboard: false // 是否打开键盘
|
|
|
+ phone: '', // 用户手机号
|
|
|
+ showKeyboard: false, // 是否打开键盘
|
|
|
+ popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
|
|
|
+ changeImg: false, // 是否重新更换图形验证码
|
|
|
+ verifyCode: '',
|
|
|
+ randomCode: '', // 图片验证码随机码
|
|
|
}
|
|
|
},
|
|
|
- onShow() {
|
|
|
- this.getCodeValidate()
|
|
|
- },
|
|
|
onLoad() {
|
|
|
+ this.phone = this.$store.state.vuex_userData.mobile
|
|
|
+ console.log(this.$store.state.vuex_userData,'his.$store.state.vuex_OrderAddress')
|
|
|
//因为此时实例没有挂载完成,需要延迟操作
|
|
|
setTimeout(() => {
|
|
|
- this.showKeyboard = true
|
|
|
+ this.pageInit()
|
|
|
}, 50)
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ userPhone () {
|
|
|
+ return this.phone.substr(0,3) + "****" + this.phone.substr(7)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 监听输入框输入长度
|
|
|
+ value: {
|
|
|
+ handler(newVal) {
|
|
|
+ // console.log(newVal.length,'NNNNNNNNNNNN')
|
|
|
+ if(newVal.length==6) {
|
|
|
+ // 跳转到设置密码
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/userCenter/userInfo/paymentPwd?code=${this.value}&mobile=${this.phone}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
methods:{
|
|
|
+ pageInit () {
|
|
|
+ this.value = ''
|
|
|
+ this.showKeyboard = false
|
|
|
+ this.retsetCode()
|
|
|
+ // 图文验证码
|
|
|
+ this.$refs.imageTxtPopup.open()
|
|
|
+ },
|
|
|
+ // 验证图片验证码
|
|
|
+ captchaVerify(code, nowRandomCode){
|
|
|
+ let obj = {}
|
|
|
+ obj.phone = this.phone
|
|
|
+ obj.random = nowRandomCode
|
|
|
+ obj.code = code
|
|
|
+ // 短信验证码
|
|
|
+ sendVerifyCode(obj).then(res => {
|
|
|
+ console.log(JSON.stringify(res))
|
|
|
+ if(res.status == 200){ // 验证码输入正确
|
|
|
+ this.randomCode = nowRandomCode // 图片验证码随机码
|
|
|
+ // 关闭 图形验证码 弹框
|
|
|
+ this.$refs.imageTxtPopup.close()
|
|
|
+ // 开启倒计时
|
|
|
+ this.getCodeFun()
|
|
|
+ this.showKeyboard = true
|
|
|
+ uni.showToast({icon: 'none',title: '验证码发送成功'})
|
|
|
+ }else { // 验证码输入错误
|
|
|
+ this.retsetCode()
|
|
|
+ uni.showToast({icon: 'none',title: res.message})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 重新触发获取图片验证码
|
|
|
+ retsetCode(){
|
|
|
+ const _this = this
|
|
|
+ _this.verifyCode = ''
|
|
|
+ _this.randomCode = ''
|
|
|
+ // 切换验证码重新校验
|
|
|
+ _this.changeImg = false
|
|
|
+ _this.$nextTick(function(){
|
|
|
+ _this.changeImg = true
|
|
|
+ })
|
|
|
+ },
|
|
|
// 按键被点击(点击退格键不会触发此事件)
|
|
|
valChange(val) {
|
|
|
// 将每次按键的值拼接到value变量中,注意+=写法
|
|
@@ -51,21 +127,6 @@
|
|
|
// 删除value的最后一个字符
|
|
|
if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
|
|
|
},
|
|
|
- // 获取验证码
|
|
|
- getCodeValidate(){
|
|
|
- const _this = this
|
|
|
- // 短信验证码
|
|
|
- // memberVerifyCode({ phone: '15454787787' }).then(res => {
|
|
|
- // console.log(JSON.stringify(res))
|
|
|
- // if(res.status == 200){ // 验证码输入正确
|
|
|
- // 开启倒计时
|
|
|
- this.getCodeFun()
|
|
|
- uni.showToast({icon: 'none',title: '验证码发送成功'})
|
|
|
- // }else { // 验证码输入错误
|
|
|
- // uni.showToast({icon: 'none',title: res.message})
|
|
|
- // }
|
|
|
- // })
|
|
|
- },
|
|
|
// 开始倒计时
|
|
|
getCodeFun(){
|
|
|
const TIME_COUNT = 60
|