560 lines
18 KiB
HTML
560 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
<html lang="en">
|
|||
|
|
|||
|
<head>
|
|||
|
<meta charset="UTF-8">
|
|||
|
<meta name="viewport"
|
|||
|
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|||
|
<title>云闪付红包</title>
|
|||
|
|
|||
|
<!-- <link rel="stylesheet" href="https://lsxd-zfb-reduction.oss-cn-hangzhou.aliyuncs.com/css/index.css"> css -->
|
|||
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=20210302151401"
|
|||
|
type="text/javascript" charset="utf-8"></script> <!-- vue -->
|
|||
|
<script type="text/javascript"
|
|||
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/wechat/axios.min.js?v=20210302151401"></script>
|
|||
|
<!-- axios -->
|
|||
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/Bcm_bank/js/mobile_pop.js?v=3"></script> <!-- 提示框 -->
|
|||
|
<script type="text/javascript"
|
|||
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/zhongguojianhang_bank/compontent/loading2.js?v=20210302151401"></script>
|
|||
|
<style>
|
|||
|
html {
|
|||
|
font-size: 26.66666667vw;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
body {
|
|||
|
padding: 0;
|
|||
|
font-size: 0.14rem;
|
|||
|
-webkit-text-size-adjust: 100%;
|
|||
|
-ms-text-size-adjust: 100%;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
* {
|
|||
|
padding: 0;
|
|||
|
margin: 0;
|
|||
|
list-style: none;
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (min-width: 900px) {
|
|||
|
html {
|
|||
|
transform: scale(0.3);
|
|||
|
background: #fff;
|
|||
|
transform-origin: 50% 0px 0px;
|
|||
|
height: calc(100vh);
|
|||
|
}
|
|||
|
|
|||
|
#app {
|
|||
|
height: 6rem !important;
|
|||
|
background: #f4f6f9;
|
|||
|
}
|
|||
|
|
|||
|
.modal {
|
|||
|
height: 6rem;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
#app {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
background: rgb(238 25 32);
|
|||
|
padding: 0.25rem 0.18rem 0.2rem;
|
|||
|
box-sizing: border-box;
|
|||
|
overflow: scroll;
|
|||
|
}
|
|||
|
|
|||
|
.content {
|
|||
|
min-height: 100%;
|
|||
|
background: #fff;
|
|||
|
position: relative;
|
|||
|
padding: 0 0.18rem 0.35rem;
|
|||
|
box-sizing: border-box;
|
|||
|
border-radius: 0 0 0.08rem 0.08rem;
|
|||
|
}
|
|||
|
|
|||
|
.bubble {
|
|||
|
width: 100%;
|
|||
|
border-radius: 0.08rem 0.08rem 0 0;
|
|||
|
display: flex;
|
|||
|
margin-bottom: -0.01rem;
|
|||
|
}
|
|||
|
|
|||
|
.segmentation {
|
|||
|
display: flex;
|
|||
|
justify-content: space-between;
|
|||
|
width: 100%;
|
|||
|
align-items: center;
|
|||
|
}
|
|||
|
|
|||
|
.left,
|
|||
|
.right {
|
|||
|
width: 0.08rem;
|
|||
|
height: 0.16rem;
|
|||
|
background: rgb(238 25 32);
|
|||
|
display: inline-block;
|
|||
|
}
|
|||
|
|
|||
|
.left {
|
|||
|
border-radius: 0 0.08rem 0.08rem 0;
|
|||
|
margin-left: -0.19rem;
|
|||
|
}
|
|||
|
|
|||
|
.right {
|
|||
|
border-radius: 0.08rem 0 0 0.08rem;
|
|||
|
margin-right: -0.19rem;
|
|||
|
}
|
|||
|
|
|||
|
.middle {
|
|||
|
width: 100%;
|
|||
|
height: 0.015rem;
|
|||
|
background-image: linear-gradient(to right,
|
|||
|
rgb(223, 222, 222) 0%,
|
|||
|
rgb(223, 222, 222) 50%,
|
|||
|
transparent 50%);
|
|||
|
background-size: 0.11rem 0.01rem;
|
|||
|
background-repeat: repeat-x;
|
|||
|
}
|
|||
|
|
|||
|
.title {
|
|||
|
color: rgb(163, 160, 163);
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
|
|||
|
.information {
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
|
|||
|
.information-p1 {
|
|||
|
font-size: 0.25rem;
|
|||
|
font-weight: 600;
|
|||
|
margin: 0.1rem 0 0.03rem;
|
|||
|
}
|
|||
|
|
|||
|
.information-p2 {
|
|||
|
color: rgb(145, 143, 146);
|
|||
|
font-size: 0.11rem;
|
|||
|
}
|
|||
|
|
|||
|
.form {
|
|||
|
margin: 0.25rem 0;
|
|||
|
}
|
|||
|
|
|||
|
.mt0 {
|
|||
|
margin-top: 0 !important;
|
|||
|
}
|
|||
|
|
|||
|
.form-label {
|
|||
|
font-size: 0.16rem;
|
|||
|
}
|
|||
|
|
|||
|
.form-input {
|
|||
|
width: 100%;
|
|||
|
height: 0.35rem;
|
|||
|
border-radius: 0.05rem;
|
|||
|
outline: 0;
|
|||
|
border: 0.01rem solid rgb(217, 216, 218);
|
|||
|
background: #fffefe;
|
|||
|
padding: 0 0.1rem;
|
|||
|
box-sizing: border-box;
|
|||
|
margin: 0.1rem 0;
|
|||
|
font-size: 0.12rem;
|
|||
|
}
|
|||
|
|
|||
|
.form-input::placeholder {
|
|||
|
color: rgb(204, 205, 209);
|
|||
|
font-size: 0.12rem;
|
|||
|
}
|
|||
|
|
|||
|
.form-note {
|
|||
|
color: red;
|
|||
|
font-size: 0.11rem;
|
|||
|
}
|
|||
|
|
|||
|
.text-center {
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
|
|||
|
.form-button {
|
|||
|
width: 100%;
|
|||
|
height: 0.4rem;
|
|||
|
border-radius: 1.2rem;
|
|||
|
outline: 0;
|
|||
|
border: 0;
|
|||
|
font-size: 0.15rem;
|
|||
|
color: white;
|
|||
|
background: rgb(238 25 32);
|
|||
|
margin-top: 0.25rem;
|
|||
|
}
|
|||
|
|
|||
|
.received-color {
|
|||
|
background: rgb(238 25 32);
|
|||
|
margin-top: 0;
|
|||
|
margin-bottom: 0.1rem;
|
|||
|
}
|
|||
|
|
|||
|
.disabledColor {
|
|||
|
background: rgb(252, 133, 122);
|
|||
|
}
|
|||
|
|
|||
|
.illustrate {
|
|||
|
margin-top: 0.2rem;
|
|||
|
}
|
|||
|
|
|||
|
.illustrate-title {
|
|||
|
font-size: 0.16rem;
|
|||
|
margin-bottom: 0.1rem;
|
|||
|
}
|
|||
|
|
|||
|
.illustrate-text {
|
|||
|
color: rgb(150, 152, 158);
|
|||
|
font-size: 0.12rem;
|
|||
|
line-height: 0.24rem;
|
|||
|
}
|
|||
|
|
|||
|
.modal {
|
|||
|
position: fixed;
|
|||
|
top: 0;
|
|||
|
left: 0;
|
|||
|
width: 100%;
|
|||
|
min-height: 100%;
|
|||
|
background-color: rgba(0, 0, 0, 0.15);
|
|||
|
z-index: 500;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
}
|
|||
|
|
|||
|
.loadingbg {
|
|||
|
position: fixed;
|
|||
|
top: 0;
|
|||
|
left: 0;
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
z-index: 1000;
|
|||
|
}
|
|||
|
|
|||
|
.spinner {
|
|||
|
margin: 55% auto;
|
|||
|
width: 0.46rem;
|
|||
|
height: 0.46rem;
|
|||
|
position: relative;
|
|||
|
text-align: center;
|
|||
|
z-index: 501;
|
|||
|
-webkit-animation: rotate 2s infinite linear;
|
|||
|
animation: rotate 2s infinite linear;
|
|||
|
}
|
|||
|
|
|||
|
.dot1,
|
|||
|
.dot2 {
|
|||
|
width: 60%;
|
|||
|
height: 60%;
|
|||
|
display: inline-block;
|
|||
|
position: absolute;
|
|||
|
top: 0;
|
|||
|
background-color: rgb(238 25 32);
|
|||
|
border-radius: 100%;
|
|||
|
|
|||
|
-webkit-animation: bounce 2s infinite ease-in-out;
|
|||
|
animation: bounce 2s infinite ease-in-out;
|
|||
|
}
|
|||
|
|
|||
|
.dot2 {
|
|||
|
top: auto;
|
|||
|
bottom: 0px;
|
|||
|
-webkit-animation-delay: -1s;
|
|||
|
animation-delay: -1s;
|
|||
|
}
|
|||
|
|
|||
|
@-webkit-keyframes rotate {
|
|||
|
100% {
|
|||
|
-webkit-transform: rotate(360deg);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@keyframes rotate {
|
|||
|
100% {
|
|||
|
transform: rotate(360deg);
|
|||
|
-webkit-transform: rotate(360deg);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@-webkit-keyframes bounce {
|
|||
|
|
|||
|
0%,
|
|||
|
100% {
|
|||
|
-webkit-transform: scale(0);
|
|||
|
}
|
|||
|
|
|||
|
50% {
|
|||
|
-webkit-transform: scale(1);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@keyframes bounce {
|
|||
|
|
|||
|
0%,
|
|||
|
100% {
|
|||
|
transform: scale(0);
|
|||
|
-webkit-transform: scale(0);
|
|||
|
}
|
|||
|
|
|||
|
50% {
|
|||
|
transform: scale(1);
|
|||
|
-webkit-transform: scale(1);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.popshowbox {
|
|||
|
width: 2.5rem;
|
|||
|
min-height: 1.7rem;
|
|||
|
background: #ffffff;
|
|||
|
position: fixed;
|
|||
|
z-index: 666;
|
|||
|
border-radius: 0.1rem;
|
|||
|
overflow: hidden;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
justify-content: space-between;
|
|||
|
margin-top: -3rem;
|
|||
|
}
|
|||
|
|
|||
|
.confirm-pop .closebtn {
|
|||
|
width: 38% !important;
|
|||
|
margin-left: 0 !important;
|
|||
|
margin-right: 0 !important;
|
|||
|
color: #fff;
|
|||
|
background: rgb(238 25 32);
|
|||
|
}
|
|||
|
|
|||
|
.confirm-pop .close {
|
|||
|
background-color: #ededed !important;
|
|||
|
color: #3f3f3f !important;
|
|||
|
}
|
|||
|
|
|||
|
.confirm-pop {
|
|||
|
display: flex;
|
|||
|
justify-content: space-evenly;
|
|||
|
}
|
|||
|
|
|||
|
.pop-title {
|
|||
|
width: 100%;
|
|||
|
font-size: 0.18rem;
|
|||
|
padding: 0.1rem 0;
|
|||
|
color: #0b0b1a;
|
|||
|
text-align: center;
|
|||
|
border-bottom: 0.01rem solid #e7e3e3;
|
|||
|
}
|
|||
|
|
|||
|
.pop-content {
|
|||
|
margin: 0 auto;
|
|||
|
margin-top: 0.15rem;
|
|||
|
min-height: 0.6rem;
|
|||
|
text-align: center;
|
|||
|
font-size: 0.15rem;
|
|||
|
color: #3f3f3f;
|
|||
|
padding: 0 0.2rem;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
flex: 1;
|
|||
|
}
|
|||
|
|
|||
|
.closebtn {
|
|||
|
width: 75%;
|
|||
|
height: 0.35rem;
|
|||
|
line-height: 0.35rem;
|
|||
|
margin: 0.15rem auto;
|
|||
|
text-align: center;
|
|||
|
color: #ffffff;
|
|||
|
border-radius: 1.2rem;
|
|||
|
margin-bottom: 0.2rem;
|
|||
|
font-size: 0.15rem;
|
|||
|
background-color:
|
|||
|
rgb(238 25 32);
|
|||
|
}
|
|||
|
</style>
|
|||
|
</head>
|
|||
|
|
|||
|
<body>
|
|||
|
<div id="app">
|
|||
|
<div class="loadingbg" v-show="loadShow">
|
|||
|
<div class="modal" @touchmove.prevent @mousewheel.prevent></div>
|
|||
|
<pageloading2></pageloading2>
|
|||
|
</div>
|
|||
|
<div class="modal" @touchmove.prevent @mousewheel.prevent v-show="messageLodging">
|
|||
|
<div class="popshowbox">
|
|||
|
<div class="pop-title">温馨提示</div>
|
|||
|
<div class="pop-content">{{popText}}</div>
|
|||
|
<div v-if="popType" class="confirm-pop">
|
|||
|
<div class="closebtn" @click="finalSubmit">确认</div>
|
|||
|
<div class="closebtn close" @click="coles">取消</div>
|
|||
|
</div>
|
|||
|
<div class="closebtn" @click="coles" v-else>关闭</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<img class="bubble" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/ysf-logo.png" alt="">
|
|||
|
<div class="content">
|
|||
|
<p class="title">云闪付</p>
|
|||
|
<div class="information">
|
|||
|
<p class="information-p1">满{{price_integer}}元减{{price_decimal}}元</p>
|
|||
|
<p class="information-p2">请在{{coupon.start_time}} - {{coupon.end_time}}内领取
|
|||
|
</p>
|
|||
|
</div>
|
|||
|
<div class="form" v-if="coupon.status===3">
|
|||
|
<p class="form-label">云闪付账号</p>
|
|||
|
<input class="form-input" v-model="account" type="text" placeholder="请输入手机号" />
|
|||
|
<input class="form-input mt0" v-model="confirmAccount" type="text" placeholder="请再次输入账号" />
|
|||
|
<p class="form-note">您可在云闪付的个人信息中查看【云闪付账号】</p>
|
|||
|
<button :class="account?'form-button':'form-button disabledColor'" @click="submit"
|
|||
|
:disabled='!account'>立即领取</button>
|
|||
|
</div>
|
|||
|
<div class="form" v-if="coupon.status===1">
|
|||
|
<button class="form-button received-color">已领取</button>
|
|||
|
<p class="form-note text-center">您可在云闪付APP-卡包-卡券查看</p>
|
|||
|
</div>
|
|||
|
<div class="form" v-if="coupon.status===-1">
|
|||
|
<button class="form-button received-color">活动已失效</button>
|
|||
|
</div>
|
|||
|
<div class="form" v-if="coupon.status===-2">
|
|||
|
<button class="form-button received-color">活动已过期</button>
|
|||
|
</div>
|
|||
|
<div class=" segmentation">
|
|||
|
<i class="left"></i>
|
|||
|
<i class="middle"></i>
|
|||
|
<i class="right"></i>
|
|||
|
</div>
|
|||
|
<div class="illustrate">
|
|||
|
<p class="illustrate-title">活动说明</p>
|
|||
|
<p class="illustrate-text" v-html="coupon.body"></p>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<script type="text/javascript">
|
|||
|
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|||
|
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
|
|||
|
new Vue({
|
|||
|
el: "#app",
|
|||
|
data () {
|
|||
|
return {
|
|||
|
coupon: {
|
|||
|
status: 3,
|
|||
|
start_time: '2023-12-30 23:59:59',
|
|||
|
end_time: '2025-12-30 23:59:59',
|
|||
|
body: `
|
|||
|
【卡密使用規則】<br>
|
|||
|
1.获得兑换链接后,打开链接进入兑换页面<br>
|
|||
|
2.请在支付宝APP-我的-昵称下方账号,核对并确认自己的支付宝账号,在兑换页面输入对应的支付宝账号(手机号或邮箱)领取立减金<br>
|
|||
|
3.使用支付宝扫一扫付款或使用付款码付款,输入密码时,请选择众邦银行银行卡支付,系统会自动选择支付宝立减金进行优惠抵扣<br>
|
|||
|
4.代金券需一次性使用,不可找零或提现<br>
|
|||
|
【注意事项】<br>
|
|||
|
1.红包自用户领取起90天内有效,红包不可拆分,不得提现、无法转赠、不得为他人付款,过期自动作废,无法使用,同时也不予补发<br>
|
|||
|
2.该红包可用场景为通用场景,使用支付宝选择众邦银行借记卡且单笔实际支付金额大于立减金面额0.01元时可抵扣使用(实际使用范围以红包可抵扣为准)。使用红包的订单若发生退款,订单可退金额及红包可退面额以消费者的退款页面信息为准。退回的红包若在有效期内则可继续使用,且使用规则不变;退回的红包若已过有效期则无法使用,且不予补发<br>
|
|||
|
3.支付宝端的众邦银行活动,仅限中华人民共和国境内的支付宝实名认证用户参与;同一用户活动期内仅能参加<br>
|
|||
|
2次。同一支付宝账号、手机号、身份证、手机终端,符合以上任一条件均视为同一用户<br>
|
|||
|
4.为确保活动公平性,如用户出现不正当行为(如虚假交易、作弊、恶意套取现金、刷信等),银行有权撤销用户优惠资格,并有权收回用户获得的福利<br>
|
|||
|
5.本商品使用过程中如有不明之处,请联系供应商成都蓝色兄弟网络科技有限公司客服:400xxxxxxx`
|
|||
|
},
|
|||
|
account: null,
|
|||
|
confirmAccount: null,
|
|||
|
messageLodging: false,
|
|||
|
loadShow: false,
|
|||
|
pop_obj_toast: null,
|
|||
|
popText: '系统错误',
|
|||
|
popType: true, /* true:账号询问框 false:提示框 */
|
|||
|
price_integer: 100.01,
|
|||
|
price_decimal: 100,
|
|||
|
};
|
|||
|
|
|||
|
},
|
|||
|
|
|||
|
components: {
|
|||
|
pageloading2
|
|||
|
},
|
|||
|
|
|||
|
mounted () {
|
|||
|
this.pop_obj_toast = new MobilePop_toast();
|
|||
|
this.pop_obj_toast.init();
|
|||
|
},
|
|||
|
|
|||
|
created () {
|
|||
|
let priceArr = '';
|
|||
|
if (this.coupon.coupon_price) {
|
|||
|
priceArr = this.coupon.coupon_price.split(".");
|
|||
|
if (priceArr.length == 2) {
|
|||
|
this.price_integer = priceArr[0];
|
|||
|
this.price_decimal = priceArr[1] == "00" ? "" : priceArr[1];
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/* 处理时间 */
|
|||
|
if (this.coupon.start_time) {
|
|||
|
this.coupon.start_time = this.coupon.start_time.split('-').join('.');
|
|||
|
}
|
|||
|
if (this.coupon.end_time) {
|
|||
|
this.coupon.end_time = this.coupon.end_time.split('-').join('.');
|
|||
|
}
|
|||
|
},
|
|||
|
|
|||
|
methods: {
|
|||
|
/* 立即领取 */
|
|||
|
submit () {
|
|||
|
if ((phoneReg.test(this.account) || emailReg.test(this.account)) && this.confirmAccount) {
|
|||
|
if (this.account === this.confirmAccount) {
|
|||
|
this.popType = true;
|
|||
|
this.messageLodging = true;
|
|||
|
this.popText = `领取账号为:${this.account},立减金一旦充值无法退回。`;
|
|||
|
} else {
|
|||
|
this.pop_obj_toast.show('账号输入不一致');
|
|||
|
}
|
|||
|
} else {
|
|||
|
this.pop_obj_toast.show('请输入正确的手机号或邮箱号');
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
|
|||
|
/* 验证后 最终提交 */
|
|||
|
finalSubmit () {
|
|||
|
this.messageLodging = false; /* 关闭弹窗 */
|
|||
|
this.loadShow = true;
|
|||
|
this.popType = false;
|
|||
|
const self = this;
|
|||
|
axios
|
|||
|
.post("/apcoupon/receive", {
|
|||
|
token: self.coupon.token,
|
|||
|
code: self.coupon.code,
|
|||
|
batch_id: self.coupon.stock_id,
|
|||
|
alipay_user_id: self.account
|
|||
|
})
|
|||
|
.then(function (response) {
|
|||
|
const res = response.data;
|
|||
|
if (res.code == 200 || res.code == "200") {
|
|||
|
self.popText = '领取成功';
|
|||
|
self.coupon.status = 1;
|
|||
|
} else if (res.code == 400 || res.code == "400") {
|
|||
|
self.popText = res.mes;
|
|||
|
} else {
|
|||
|
self.popText = res.mes;
|
|||
|
}
|
|||
|
self.loadShow = false;
|
|||
|
self.messageLodging = true;
|
|||
|
})
|
|||
|
.catch(function (error) {
|
|||
|
console.log(error.message);
|
|||
|
});
|
|||
|
},
|
|||
|
|
|||
|
/* 关闭弹窗 */
|
|||
|
coles () {
|
|||
|
this.messageLodging = false; /* 关闭弹窗 */
|
|||
|
if (this.coupon.status === 1) {
|
|||
|
this.loadShow = true;
|
|||
|
setTimeout(() => {
|
|||
|
this.loadShow = false;
|
|||
|
}, 5 * 100);
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
})
|
|||
|
</script>
|
|||
|
</body>
|
|||
|
|
|||
|
</html>
|