[本时生活h5端]
This commit is contained in:
363
pages/packet/packet.vue
Normal file
363
pages/packet/packet.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<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="" bindsubmit="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>
|
||||
Reference in New Issue
Block a user