166 lines
3.5 KiB
Vue
166 lines
3.5 KiB
Vue
<template>
|
||
<view>
|
||
<text class="sms" @tap="openPopup">{{ smsTxt }}</text>
|
||
<verify @success="onSuccess" mode="pop" captchaType="blockPuzzle" :imgSize="{ width: '330px', height: '155px' }"
|
||
ref="verify"></verify>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import verify from "./verify/verify.vue"
|
||
import uniPopup from "./uni-popup/uni-popup.vue"
|
||
import { baseUrl } from "../common/http/index.js"
|
||
import url from "@/common/http/url.js"
|
||
export default {
|
||
props: {
|
||
phone: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
username: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
// 短信验证码类型：0=注册，1=找回密码，2=短信验证码登入，3=修改手机号, 4=修改支付密码
|
||
typeCode: {
|
||
type: String,
|
||
default: "1"
|
||
}
|
||
},
|
||
components: { uniPopup, verify },
|
||
data () {
|
||
return {
|
||
imageCodeUrl: baseUrl + url.common.getImgCode,
|
||
smsTxt: "发送验证码",
|
||
disable: false,
|
||
time: 60,
|
||
pic: "",
|
||
code: ""
|
||
}
|
||
},
|
||
mounted () {
|
||
let time = uni.getStorageSync('smsTime') || 60
|
||
time = parseInt(time)
|
||
console.log("time...", time)
|
||
if (time < 60) {
|
||
this.time = time
|
||
this.timer()
|
||
}
|
||
},
|
||
methods: {
|
||
openPopup () {
|
||
if (!this.phone) {
|
||
this.$msg("请输入手机号")
|
||
return
|
||
}
|
||
if (this.disable) return
|
||
// this.code = ""
|
||
// this.generationImg()
|
||
// this.$refs.popup.open()
|
||
// this.$refs.verify.show()
|
||
this.sendSMS()
|
||
},
|
||
closePopup () {
|
||
this.$refs.popup.close()
|
||
},
|
||
onSuccess () {
|
||
|
||
this.sendSMS()
|
||
},
|
||
generationImg () {
|
||
let time = new Date().getTime();
|
||
this.pic = this.imageCodeUrl + '?telephone=' + this.phone + "&time=" + time;
|
||
},
|
||
sendSMS () {
|
||
this.$http("POST", url.common.getSmsCode, {
|
||
phone: this.phone,
|
||
username: this.username,
|
||
// captchaVerification: params,
|
||
typeCode: this.typeCode
|
||
}).then(res => {
|
||
this.$msg("发送成功，请注意查收")
|
||
this.timer()
|
||
})
|
||
},
|
||
timer () {
|
||
this.disable = true
|
||
let _this = this;
|
||
let interval = setInterval(() => {
|
||
if ((_this.time <= 60 && _this.time > 0) && this.disable) {
|
||
_this.time--
|
||
_this.smsTxt = _this.time + 's'
|
||
uni.setStorageSync("smsTime", _this.time)
|
||
} else {
|
||
_this.disable = false;
|
||
_this.time = 60
|
||
_this.smsTxt = "发送验证码"
|
||
// uni.setStorageSync("smsTime", _this.time)
|
||
uni.removeStorageSync('smsTime')
|
||
clearInterval(interval);
|
||
}
|
||
}, 1000)
|
||
this.closePopup()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.sms {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
// border: 2rpx solid #0065cd;
|
||
width: 165rpx;
|
||
text-align: center;
|
||
// height: 55rpx;
|
||
// line-height: 55rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.con {
|
||
width: 700rpx;
|
||
border-radius: 10rpx;
|
||
|
||
.title {
|
||
width: 700rpx;
|
||
padding: 30rpx 0;
|
||
text-align: center;
|
||
display: inline-block;
|
||
}
|
||
|
||
.image {
|
||
padding: 50rpx;
|
||
|
||
.pic {
|
||
width: 600rpx;
|
||
height: 180rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.input {
|
||
width: 600rpx;
|
||
height: 100rpx;
|
||
text-align: center;
|
||
border-radius: 50rpx;
|
||
border: 2rpx solid #eee;
|
||
}
|
||
}
|
||
|
||
.bom {
|
||
height: 100rpx;
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
width: 350rpx;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.green {
|
||
color: #32b748;
|
||
}
|
||
}
|
||
}
|
||
</style>
|