123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <template>
- <view class="smsVerification-container">
- <view v-if="sendCode" class="">
- <view class="sms-title">输入短信验证码</view>
- <text class="sms-describe">验证码已发送至{{userPhone}},请在下方输入框内输入6位数字验证码</text>
- <view class="sms-item" @click="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 : pageInit()">{{nowVal}}</text>
- </view>
- </view>
-
- <u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
-
- <uni-popup :maskClick="false" 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 { sendVerifyCode } from '@/api/user.js'
- import { checkCode } from '@/api/order.js'
- export default {
- components: {
- uniPopup,
- popupCon
- },
- data() {
- return {
- nowVal: '获取验证码',
- count: '',
- timer: null,
- isDisable: false,
- value: '',
- phone: '',
- showKeyboard: false,
- popBtn: [],
- changeImg: false,
- verifyCode: '',
- randomCode: '',
- sendCode: false
- }
- },
- onLoad() {
- this.phone = this.$store.state.vuex_userData.mobile
- console.log(this.$store.state.vuex_userData,'his.$store.state.vuex_OrderAddress')
-
- setTimeout(() => {
- this.pageInit()
- }, 50)
- },
- computed: {
- userPhone () {
- return this.phone.substr(0,3) + "****" + this.phone.substr(7)
- }
- },
- watch: {
-
- value: {
- handler(newVal) {
-
- if(newVal.length==6) {
- let params = {
- mobile: this.phone,
- verifiCode: newVal
- }
- checkCode(params).then(res=>{
- if(res.status==200) {
-
- uni.redirectTo({
- url: `/pages/userCenter/userInfo/paymentPwd?code=${this.value}&mobile=${this.phone}`
- })
- }
- })
-
- }
- },
- deep: true
- }
- },
- methods:{
- pageInit () {
- this.value = ''
- this.sendCode = false
- 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.sendCode = true
- 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) {
-
- if(this.value.length < 6){
- this.value += val
- }
- },
-
- backspace() {
-
- if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
- },
-
- getCodeFun(){
- const TIME_COUNT = 60
- if (!this.timer) {
- this.count = TIME_COUNT
- this.timer = setInterval(() => {
- if (this.count > 0 && this.count <= TIME_COUNT) {
- this.count--
- this.nowVal = this.count + '秒后重新发送'
- this.isDisable = true
- } else {
- this.nowVal = '重新获取验证码'
- clearInterval(this.timer)
- this.timer = null
- this.isDisable = false
- }
- }, 1000)
- }
- },
-
- cancel(){
- uni.navigateBack({
- delta: 1
- })
- }
- }
- }
- </script>
- <style lang="less">
- .smsVerification-container{
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background-color: #fff;
- .sms-title {
- margin: 50rpx 0 30rpx;
- font-size: 36rpx;
- font-weight: bold;
- }
- .sms-describe{
- display: block;
- color: #606266;
- margin: 20rpx 0 50rpx;
- }
- .sendcode-con{
- text-align: center;
- padding-top: 70rpx;
- .getcode-btn {
- display: block;
- font-size: 28rpx;
- color: #298bf2;
- }
- .grey-btn{
- color: #999;
- }
- }
- .btn-con{
- display: flex;
- justify-content: space-between;
- padding-top: 130rpx;
- .handle-btn{
- display: inline-block;
- width: 45%;
- margin: 0 auto;
- text-align: center;
- }
- }
- }
- </style>
|