364 lines
13 KiB
Vue
364 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<image class="packetCont-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/packet.png"></image>
|
||
|
||
<view class="packetCont-title">
|
||
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/packet_title.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="packetText">
|
||
<image class="packetText-tips" src="https://card.ysd-bs.com/storage/materials/2021/09/01/packetText_top.png" mode="widthFix"></image>
|
||
<view class="packetText-form">
|
||
<view class="packetText-title">
|
||
<view class="packetText-title-name">请输入办理业务手机号</view>
|
||
<text>例：185XXXX0001</text>
|
||
</view>
|
||
<form action="" @submit="forgetlogin">
|
||
<view class="packetText-label">
|
||
<image src="/static/img/packetText_icon.png"></image>
|
||
<input class="inputs-input" type="text" placeholder="请输入手机号领取红包" @input="getNameValue"
|
||
:value="mobile"></input>
|
||
</view>
|
||
<view class="packetText-label">
|
||
<input class="inputs-code" placeholder="请输入验证码" @input="getCodeValue" :value="code"></input>
|
||
<button class="packetText-code" @click="codeBind" hover-class="none">{{codename}}</button>
|
||
</view>
|
||
<view class="packetText-cozy">
|
||
<view class="packetText-cozy-name">温馨提示：</view>
|
||
<text>消费红包仅在本系统内使用，有效期12个月</text>
|
||
<text>消费红包不找零，不兑现</text>
|
||
<text>消费红包兑换成电子券后，不支持退货</text>
|
||
<text>如出现电子券核销问题，请致电咨询0451-88895511（9:00-20:00）</text>
|
||
</view>
|
||
<view class="packetText-btn">
|
||
<button type="default" form-type="submit"><text>立即领取</text><image src="/static/img/packet_arr.png"></image></button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popBack" :class="{active : popContHide}"></view>
|
||
<view class="popCont" :class="{active : popContHide}">
|
||
<image class="popCont-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/receive.png" mode="widthFix"></image>
|
||
<view class="popCont-text">
|
||
<view class="popCont-name">领取成功,共领取<text>{{ popData }}</text>,可在账户中查看</view>
|
||
<view class="popCont-btn" @click="popClick">我知道了 <text v-if="countDownNum > 0">({{ countDownNum }})</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { send, unicom } from '@/apis/interfaces/auth'
|
||
export default {
|
||
data() {
|
||
return {
|
||
mobile : '', // 手机号码
|
||
code : '', // 验证码
|
||
iscode : null, // 用于存放验证码接口里获取到的code
|
||
codename : '获取验证码', // 验证码-文字提示
|
||
countDownNum: '', // 提示信息
|
||
popContHide : false, // 领取成功弹出
|
||
popData : '' // 领取金额
|
||
}
|
||
},
|
||
onLoad(options) {},
|
||
methods:{
|
||
// 获取手机号码
|
||
getNameValue(e) {
|
||
this.mobile = e.detail.value
|
||
},
|
||
|
||
// 获取验证码
|
||
getCodeValue(e) {
|
||
this.code = e.detail.value
|
||
},
|
||
|
||
// code发送
|
||
codeBind(e){
|
||
let mobile = this.mobile,
|
||
myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/
|
||
var _this = this
|
||
if (mobile == "") {
|
||
uni.showToast({
|
||
title : '手机号不能为空',
|
||
icon : 'none',
|
||
duration : 1000
|
||
})
|
||
return false;
|
||
}else if (!myreg.test(mobile)) {
|
||
uni.showToast({
|
||
title : '请输入正确的手机号',
|
||
icon : 'none',
|
||
duration : 1000
|
||
})
|
||
return false;
|
||
}else{
|
||
send({
|
||
mobile : mobile,
|
||
channel :'DEFAULT',
|
||
type :'unicom'
|
||
}).then(res=>{
|
||
uni.showToast({
|
||
title : '发送成功',
|
||
icon : 'success',
|
||
duration: 2000
|
||
})
|
||
var num = 61;
|
||
var timer = setInterval(function () {
|
||
num--;
|
||
if (num <= 0) {
|
||
clearInterval(timer);
|
||
_this.codename = '重新发送',
|
||
_this.disabled = false
|
||
|
||
} else {
|
||
_this.codename = num + "s后重新获取",
|
||
_this.disabled = true
|
||
}
|
||
}, 1000)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err.message
|
||
})
|
||
})
|
||
}
|
||
},
|
||
|
||
// 立即领取
|
||
forgetlogin(e) {
|
||
let mobile = this.mobile,
|
||
code = this.code,
|
||
that = this,
|
||
countDownNum = 5 //获取倒计时初始值
|
||
that.countDownNum = countDownNum
|
||
unicom({
|
||
mobile: mobile,
|
||
channel: 'DEFAULT',
|
||
code: code
|
||
}).then(res=>{
|
||
that.popContHide = !this.popContHide
|
||
that.popData = res
|
||
var timerPop = setInterval(function () {
|
||
countDownNum--;
|
||
that.countDownNum = countDownNum
|
||
if (countDownNum <= 0) {
|
||
clearInterval(timerPop);
|
||
that.countDownNum = 0
|
||
uni.switchTab({
|
||
url: '/pages/user/index'
|
||
})
|
||
}
|
||
}, 1000)
|
||
})
|
||
},
|
||
|
||
// 关闭弹窗
|
||
popClick() {
|
||
this.popContHide = !this.popContHide
|
||
|
||
// 跳转
|
||
uni.switchTab({
|
||
url: '/pages/user/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 红包领取 */
|
||
.packetCont-img {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
}
|
||
.packetCont-title {
|
||
width: 100vw;
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: 0;
|
||
top: 0;
|
||
text-align: center;
|
||
margin-top: 60rpx;
|
||
}
|
||
.packetText {
|
||
position: absolute;
|
||
top: 16%;
|
||
left: 40rpx;
|
||
right: 40rpx;
|
||
text-align: center;
|
||
.packetText-tips {
|
||
margin: 0 auto;
|
||
display: block;
|
||
}
|
||
.packetText-form {
|
||
background: rgba(255, 255, 255, .7);
|
||
border-radius: 30rpx;
|
||
padding: 40rpx 40rpx 70rpx 40rpx;
|
||
box-sizing: border-box;
|
||
color: #000;
|
||
text-align: left;
|
||
margin-bottom: 100rpx;
|
||
position: relative;
|
||
.packetText-title {
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
padding: 0 10rpx 40rpx 10rpx;
|
||
.packetText-title-name {
|
||
font-size: 38rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
.packetText-label {
|
||
background-color: #fff;
|
||
border-radius: 80rpx;
|
||
margin-bottom: 60rpx;
|
||
box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .4);
|
||
display: flex;
|
||
padding: 25rpx 30rpx;
|
||
box-sizing: border-box;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-top: 2rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
.packetText-code {
|
||
border: none;
|
||
background-color: transparent;
|
||
width: auto !important;
|
||
padding: 0;
|
||
font-weight: normal;
|
||
font-size: 32rpx;
|
||
line-height: 40rpx !important;
|
||
&::after{
|
||
display: none;
|
||
}
|
||
}
|
||
.inputs-input {
|
||
position: relative;
|
||
padding-left: 30rpx;
|
||
&::after,
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
top: 0;
|
||
background: #000;
|
||
width: 4rpx;
|
||
height: 100%;
|
||
}
|
||
&::after {
|
||
left: 0;
|
||
}
|
||
&::after {
|
||
right: 0;
|
||
}
|
||
|
||
}
|
||
}
|
||
.packetText-btn {
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 90rpx;
|
||
position: absolute;
|
||
bottom: -40rpx;
|
||
left: 0;
|
||
button {
|
||
width: 50%;
|
||
line-height: 90rpx;
|
||
border-radius: 25rpx;
|
||
background-image: radial-gradient(#fdcf7c 50%,#fdebb8);
|
||
border: none;
|
||
font-size: 38rpx;
|
||
color: #fff;
|
||
margin: 0 auto;
|
||
padding: 0;
|
||
}
|
||
text{
|
||
background: linear-gradient(to bottom, #e38b3c, #cb6418);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
image {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
vertical-align: -4rpx;
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
|
||
.packetText-cozy {
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
text {
|
||
display: block;
|
||
margin: 15rpx 0;
|
||
position: relative;
|
||
padding-left: 30rpx;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 0;
|
||
top: 12rpx;
|
||
background-color: #000;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 弹出 */
|
||
.popBack {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: rgba(0, 0, 0, .8);
|
||
z-index: 8;
|
||
display: none;
|
||
}
|
||
.popCont {
|
||
position: fixed;
|
||
z-index: 9;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
text-align: center;
|
||
display: none;
|
||
.popCont-text {
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
z-index: 10;
|
||
left: 20%;
|
||
top: 340px;
|
||
width: 60%;
|
||
.popCont-name {
|
||
margin-bottom: 50rpx;
|
||
font-size: 30rpx;
|
||
text {
|
||
font-size: 40rpx;
|
||
color: #fd5238;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
.popCont-btn {
|
||
background-color: #ffea37;
|
||
color: #ff3900;
|
||
display: inline-block;
|
||
border-radius: 80rpx;
|
||
padding: 20rpx 70rpx;
|
||
box-shadow: 0 10rpx 10rpx rgba(196, 160, 0, 0.4);
|
||
}
|
||
}
|
||
}
|
||
.popBack.active,
|
||
.popCont.active {
|
||
display: block;
|
||
}
|
||
</style>
|