389 lines
10 KiB
Vue
389 lines
10 KiB
Vue
<template>
|
||
<view class="content">
|
||
<image class="superRed-back" src="/static/img/superRed.jpg" mode="widthFix"></image>
|
||
<view class="superRed-cont">
|
||
<image class="superRed-img" src="/static/img/superRed-img.png" mode="widthFix"></image>
|
||
<view class="superRed-see">
|
||
<view class="superRed-white">
|
||
<view class="superRed-title"><text>领取消费金</text></view>
|
||
<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">
|
||
<input class="inputs-input" type="text" placeholder="请输入办理业务的手机号" @input="getNameValue"
|
||
:value="mobile"></input>
|
||
</view>
|
||
<view class="packetText-label">
|
||
<input class="inputs-input" placeholder="请输入验证码" @input="getCodeValue" :value="code"></input>
|
||
<button class="packetText-code" @click="codeBind" hover-class="none" :disabled="disabled">{{codename}}</button>
|
||
</view>
|
||
<view class="packetText-label">
|
||
<input class="inputs-input" type="text" placeholder="消费金使用账户【微信关联手机号码】" @input="getMobileValue"
|
||
:value="getMobile"></input>
|
||
</view>
|
||
<view class="packetText-cozy">
|
||
<view class="packetText-cozy-name">温馨提示：</view>
|
||
<text>1.消费金仅限本系统使用；</text>
|
||
<text>2.消费金当月有效，当月权益请在当月使用；</text>
|
||
<text>3.如消费金兑换成电子券后，请按电子券有效期使用；如逾期未用，视为放弃使用资格，平台将不予补发，不予延期。</text>
|
||
</view>
|
||
<view class="packetText-btn">
|
||
<button type="default" form-type="submit"><text>立即领取</text></button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</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 } from '@/apis/interfaces/auth'
|
||
import { monthsPacket } from '@/apis/interfaces/giftPack'
|
||
export default {
|
||
data() {
|
||
return {
|
||
mobile : '', //手机号码
|
||
code : '',
|
||
getMobile : '',
|
||
iscode : null, //用于存放验证码接口里获取到的code
|
||
codename : '获取验证码',
|
||
countDownNum: '',
|
||
popContHide : false, //领取成功弹出
|
||
popData : '', //领取金额
|
||
disabled : false
|
||
}
|
||
},
|
||
|
||
// 生命周期函数--监听页面显示
|
||
onShow() {
|
||
// 存储环境-月兑活动
|
||
getApp().globalData.envType = 'giftPEnv'
|
||
},
|
||
methods: {
|
||
|
||
// 获取手机号码
|
||
getNameValue(e) {
|
||
this.mobile = e.detail.value
|
||
},
|
||
|
||
// 获取验证码
|
||
getCodeValue(e) {
|
||
this.code = e.detail.value
|
||
},
|
||
|
||
// 获取领取红包的手机号
|
||
getMobileValue(e) {
|
||
this.getMobile = e.detail.value
|
||
},
|
||
|
||
// code发送
|
||
codeBind(e){
|
||
this.disabled = true
|
||
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 : 'month'
|
||
}).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,
|
||
getmobile = this.getMobile,
|
||
code = this.code,
|
||
that = this,
|
||
countDownNum = 5 //获取倒计时初始值
|
||
that.countDownNum = countDownNum
|
||
|
||
monthsPacket({
|
||
mobile : mobile,
|
||
get_mobile: getmobile,
|
||
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)
|
||
}).catch(err=>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 关闭弹窗
|
||
popClick() {
|
||
this.popContHide = !this.popContHide
|
||
|
||
// 跳转
|
||
uni.redirectTo({
|
||
url: '/pages/giftPack/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background-color: #f31a16;
|
||
height: 100vh;
|
||
overflow-y: scroll;
|
||
position: relative;
|
||
}
|
||
|
||
.superRed-back {
|
||
width: 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.superRed-cont {
|
||
top: 0;
|
||
position: absolute;
|
||
.superRed-img {
|
||
width: 100%;
|
||
}
|
||
.superRed-see {
|
||
padding: 0 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.superRed-white {
|
||
position: relative;
|
||
background-color: #fffcf4;
|
||
border-radius: 20rpx;
|
||
padding: 80rpx 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.superRed-title {
|
||
width: 100%;
|
||
position: absolute;
|
||
text-align: center;
|
||
top: -38rpx;
|
||
left: 0;
|
||
text {
|
||
display: inline-block;
|
||
background-color: #f95433;
|
||
box-shadow: 0 8rpx 5rpx rgba(249, 84, 51, .4);
|
||
border: 4rpx solid #ffeca0;
|
||
line-height: 76rpx;
|
||
padding: 0 50rpx;
|
||
border-radius: 80rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.packetText-title {
|
||
display: flex;
|
||
color: #f25448;
|
||
line-height: 48rpx;
|
||
.packetText-title-name {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
}
|
||
text{
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
.packetText-label {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
margin-top: 40rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 80rpx;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.inputs-input {
|
||
display: inline-block;
|
||
height: 100%;
|
||
flex: 1;
|
||
}
|
||
.packetText-code {
|
||
line-height: 100rpx;
|
||
border: none;
|
||
background-color: transparent;
|
||
border: none;
|
||
width: auto !important;
|
||
padding: 0;
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
color: #f25448;
|
||
&::after {
|
||
display: none;
|
||
}
|
||
&[disabled]{
|
||
color: #C8C7CC;
|
||
}
|
||
}
|
||
}
|
||
.packetText-cozy {
|
||
color: #f25448;
|
||
margin-top: 40rpx;
|
||
font-size: 26rpx;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
.packetText-cozy-name {
|
||
font-weight: 600;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
text {
|
||
padding: 10rpx 0 10rpx 30rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
display: block;
|
||
line-height: 34rpx;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 0;
|
||
top: 24rpx;
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
background-color: #f25448;
|
||
transform: rotate(45deg);
|
||
}
|
||
}
|
||
}
|
||
.packetText-btn {
|
||
text-align: center;
|
||
padding: 60rpx 30rpx 40rpx;
|
||
box-sizing: border-box;
|
||
button {
|
||
background-image: linear-gradient(to bottom, #ff4459, #fe1924);
|
||
box-shadow: 0 8rpx 5rpx rgba(249, 84, 51, .4);
|
||
border-radius: 80rpx;
|
||
color: #ffffff;
|
||
line-height: 94rpx;
|
||
}
|
||
}
|
||
|
||
|
||
/* 弹出 */
|
||
.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%;
|
||
}
|
||
|
||
.popBack.active,
|
||
.popCont.active {
|
||
display: block;
|
||
}
|
||
|
||
.popCont-name {
|
||
margin-bottom: 50rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.popCont-name 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);
|
||
}
|
||
</style> |