3 changed files with 647 additions and 10 deletions
@ -0,0 +1,574 @@ |
|||
<template> |
|||
<div class="hotVipV2-wrap"> |
|||
<!-- 头图 --> |
|||
<div class="top-img"></div> |
|||
<div class="scroll-wrap"> |
|||
<div class="scroll-box" > |
|||
<div class="scroll-item" v-for="(item, index) in scrollArr" :key="index">{{item}} <span style="color: rgb(255, 240, 148);">领取成功</span></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 手机号输入框 --> |
|||
<div class="mid-box" > |
|||
<div class="cls_div_phone_input"> |
|||
<input class="cls_input_phone" ref="phoneInput" v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号码"> |
|||
</div> |
|||
<img class="cls_img_btn" @click="aiThreePay()" src="https://image.ireadwo.cn/resources/yq-mtwm-20djj/btn-get.png"> |
|||
|
|||
|
|||
<!-- 隐私协议 --> |
|||
<div class="privacy-box"> |
|||
<img v-if="!agreePrivacy" @click="clickAgreePrivacy()" src="https://image.ireadwo.cn/resources/yq-6gb-ypvip/ic-select-not.png" class="selectBox" /> |
|||
<img v-if="agreePrivacy" @click="clickAgreePrivacy()" src="https://image.ireadwo.cn/resources/yq-6gb-ypvip/ic-select.png" class="selectBox" /> |
|||
|
|||
我已阅读并同意 |
|||
<span class="cls_sp_procotol_2" @click="changeShowRule()"> 活动规则 </span>、 |
|||
<span class="cls_sp_procotol_2" @click="goLookPrivacy()"> 隐私条款 </span> 等协议 |
|||
</div> |
|||
<!-- <div class="price" style="margin-top:0.05rem;">产品名称：惠点生活</div> --> |
|||
|
|||
<!-- 资费 --> |
|||
<div class="price" style="margin-top:0.05rem;">升级联合会员，月月领热门VIP会员+外卖券 <br/>业务资费：19.9元/月 </div> |
|||
|
|||
|
|||
<!-- <div class="price"></div> --> |
|||
</div> |
|||
<!-- 规则 --> |
|||
<div v-if="showRule" class="rule-wrap"> |
|||
<div class="rule-box"> |
|||
<img class="closeBtn" src="https://image.ireadwo.cn/resources/flownode/ic-confirm-close.png" @click="changeShowRule()"> |
|||
<div class="rule-icon">活动规则</div> |
|||
<div class="rule-content"> |
|||
[产品名称] :惠点生活 <br/> |
|||
[计费方式] : 支付宝连续包月<br/> |
|||
[权益说明] :<br/> |
|||
活动期间在本页面成功开通业务，即可获得爆款会员月卡(10选1) +美团外卖20元代金券(每月领取5元代金卷，连续领取4个月)，数量有限，送完即止。<br/> |
|||
[爆款会员月卡] :<br/> |
|||
腾讯视频月卡、爱奇艺月卡、优酷月卡、芒果TV月卡、哗哩哗哩大会员月卡、网易云音乐月卡、喜马拉雅会员月卡、知乎盐选会员月卡、饿了么会员月卡、百度网盘会员月卡。<br/> |
|||
[领取方式]:<br/> |
|||
本产品订购生效后，用户需要通过关注【次元意境】微信公众号，[会员福利 - 会员月月领] 入口及时领取权益，领取成功后1小时到账。凭订购手机号登录相应APP即可享受会员权益。<br/> |
|||
[注意事项]：<br/> |
|||
1.权益领取成功后当月内不能进行退订、更改；<br/> |
|||
2.订购生效后凭订购手机号可每月领取会员一次，不可结转与转赠，当月不领取则视为自动放弃当月领取资格；<br/> |
|||
3.如您在权益充值未到账期间退订产品，将会导致权益充值失败。<br/> |
|||
[退订方式]：<br/> |
|||
进入支付宝APP---右下方“我的”---右上方的齿轮进入设置页面---点击“支付设置”---点击“免密支付/自动扣款”---选择“惠点生活”---点击“关闭服务”即可完成退订。<br/> |
|||
[联系我们]：<br/> |
|||
致电客服热线：19983417235，客服在线时间：9:00-18:00。 |
|||
<!-- 致电客服热线：4008723215，客服在线时间：9:00-18:00。 --> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="bottom-tips">成都英来科技有限公司 <br/> 400-8723215</div> --> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Toast, Indicator } from "mint-ui"; |
|||
export default { |
|||
data() { |
|||
return{ |
|||
scrollTop: 0, |
|||
phoneFixed: false, |
|||
mobile: '', |
|||
lid: 0, |
|||
channelType: null, |
|||
canClick: true, |
|||
showPop: false, |
|||
agreePrivacy: false, |
|||
appkey: null, |
|||
showRule: false, |
|||
scrollArr:[ |
|||
'151**** 2分钟前 ', |
|||
'135**** 1分钟前 ', |
|||
'132**** 1分钟前 ', |
|||
'189**** 3分钟前 ', |
|||
'180**** 2分钟前 ', |
|||
'181**** 1分钟前 ', |
|||
'134**** 4分钟前 ', |
|||
'132**** 3分钟前 ', |
|||
'189**** 3分钟前 ', |
|||
'153**** 1分钟前 ', |
|||
'172**** 1分钟前 ', |
|||
'185**** 1分钟前 ', |
|||
'199**** 4分钟前 ', |
|||
'175**** 1分钟前 ', |
|||
'156**** 1分钟前 ', |
|||
'145**** 3分钟前 ', |
|||
'175**** 2分钟前 ', |
|||
'137**** 2分钟前 ', |
|||
'177**** 1分钟前 ', |
|||
'189**** 1分钟前 ', |
|||
], |
|||
|
|||
} |
|||
}, |
|||
created(){ |
|||
document.documentElement.scrollTop = 0; |
|||
document.title = "会员权益随心选"; |
|||
}, |
|||
watch:{ |
|||
'mobile' : { |
|||
handler(value) { |
|||
this.checkPhone(value) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getUrlParam() |
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
// 同意隐私授权 |
|||
clickAgreePrivacy() { |
|||
this.agreePrivacy = !this.agreePrivacy |
|||
}, |
|||
goLookPrivacy() { |
|||
window.open ("https://rights.bnyer.cn/#/privacy") |
|||
}, |
|||
|
|||
changeShowRule() { |
|||
this.showRule = !this.showRule |
|||
}, |
|||
|
|||
// 手机号居底 |
|||
handleScroll() { |
|||
const scrollTop = window.scrollY || document.documentElement.scrollTop; |
|||
if (scrollTop > this.scrollTop + 50) { |
|||
this.phoneFixed = true; |
|||
} else { |
|||
this.phoneFixed = false; |
|||
} |
|||
}, |
|||
// 获取lid |
|||
getUrlParam() { |
|||
this.lid = this.$route.query.id; |
|||
this.channelType = this.$route.query.type; |
|||
console.log(this.lid); |
|||
console.log(this.channelType); |
|||
|
|||
// if(this.channelType == 'llg') { |
|||
// this.getLLGAppKey() |
|||
// } else { |
|||
// this.getAppKey() |
|||
// } |
|||
|
|||
if(this.lid == '1160') { |
|||
// ta |
|||
this.getTAAppKey() |
|||
} else if(this.lid == '1162') { |
|||
// 赤金头条 |
|||
this.getAppKey() |
|||
} |
|||
}, |
|||
// ta |
|||
getTAAppKey() { |
|||
// this.appkey = location.search.replace(/^\?/, '') + location.hash.replace(/^\#/, '&') |
|||
this.appkey = this.$route.query.a_oId; |
|||
}, |
|||
// llg |
|||
getLLGAppKey() { |
|||
this.appkey = this.$route.query.llgclickid; |
|||
}, |
|||
// gdt tt |
|||
getAppKey() { |
|||
this.appkey = ""; |
|||
|
|||
let testNew = window.location.hash; |
|||
let testsNew = decodeURIComponent(testNew); |
|||
console.log(testsNew); |
|||
this.union_site = ((testsNew || '').split("&")[1] || '').split("=")[1]; |
|||
|
|||
var test = window.location.search; |
|||
|
|||
var tests = decodeURIComponent(test); |
|||
|
|||
var clickid; |
|||
var dkey; |
|||
|
|||
if (tests.indexOf("?") != -1) { |
|||
var str = tests.substr(1); |
|||
var strs = str.split("&"); |
|||
console.log(strs,'打印strs'); |
|||
// console.log(strs); |
|||
for (var i = 0; i < strs.length; i++) { |
|||
// Request.push(strs[i].split("=")) |
|||
// console.log(strs[i].split("=")); |
|||
if ( |
|||
strs[i].split("=")[0] == "clickid" || |
|||
strs[i].split("=")[0] == "clickid " || |
|||
strs[i].split("=")[1] == "clickid" || |
|||
strs[i].split("=")[0] == "qz_gdt" || |
|||
strs[i].split("=")[0] == "gdt_vid" || |
|||
strs[i].split("=")[0] == "llgclickid" |
|||
) { |
|||
clickid = strs[i].split("=")[1]; |
|||
// console.log(clickid); |
|||
// console.log(clickid) |
|||
this.appkey = clickid; |
|||
console.log('打印this.appkey===',clickid,); |
|||
// alert(this.appkey) |
|||
// alert(this.appkey,"344444444444444444444444") |
|||
} |
|||
if ( |
|||
strs[i].split("=")[0] == "adid" || |
|||
strs[i].split("=")[0] == "adid " |
|||
) { |
|||
dkey = strs[i].split("=")[1]; |
|||
// console.log(dkey, '0000000000000000000000') |
|||
this.dkey = dkey; |
|||
console.log(this.dkey); |
|||
// alert(this.dkey,"566666666666666666666666") |
|||
} |
|||
} |
|||
} |
|||
// console.log(this.appkey); |
|||
}, |
|||
|
|||
// 手机号末尾判断 |
|||
checkPhone(mobile) { |
|||
if(mobile.length == 11) { |
|||
this.agreePrivacy = true |
|||
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; |
|||
if (!myreg.test(this.mobile)) { |
|||
Toast('请输入正确的手机号') |
|||
return |
|||
} else { |
|||
this.aiThreePay() |
|||
} |
|||
} |
|||
}, |
|||
// 开通 |
|||
aiThreePay() { |
|||
// 手机号校验 |
|||
if(this.mobile) { |
|||
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; |
|||
if (!myreg.test(this.mobile)) { |
|||
Toast('请输入正确的手机号') |
|||
return |
|||
} |
|||
} else { |
|||
Toast('请输入正确的手机号') |
|||
return |
|||
} |
|||
if(!this.agreePrivacy) { |
|||
Toast('请阅读并同意隐私协议') |
|||
return |
|||
} |
|||
// 防连点 |
|||
if(!this.canClick) return |
|||
// 加载中 |
|||
Indicator.open('领取中...') |
|||
this.canClick = false |
|||
// 参数 |
|||
const data = { |
|||
mobile: this.mobile, |
|||
linkId: this.lid, |
|||
sendApiData: this.appkey, |
|||
// channelType: this.channelType |
|||
} |
|||
this.axios({ |
|||
method: "post", |
|||
url:"https://interface.bnyer.cn/alipay/signUp", |
|||
// url: `http://192.168.2.8:8086/alipay/signUp`, |
|||
data: data |
|||
}).then((res) => { |
|||
Indicator.close() |
|||
this.canClick = true |
|||
if(res.code == 0){ |
|||
// 跳转支付宝 |
|||
window.location.href = res.result |
|||
} else if (res.code == '10031') { |
|||
Toast('您当前已开通，请勿重复开通~') |
|||
} else if (res.code == '10033') { |
|||
// 黑名单用户 |
|||
Toast('网络繁忙，请稍后再试~') |
|||
} else{ |
|||
Toast('网络繁忙，请稍后再试~') |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.mint-indicator-wrapper { |
|||
z-index: 9999; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
|
|||
.hotVipV2-wrap { |
|||
width: 100%; |
|||
height: auto; |
|||
position: absolute; |
|||
background-color: #ff5900; |
|||
padding-bottom: 0.5rem; |
|||
padding-top: 8.7rem; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
overflow-x: hidden; |
|||
overflow-y: scroll; |
|||
background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230815174126.png'); |
|||
background-size: 100% auto; |
|||
background-repeat: no-repeat; |
|||
|
|||
// .top-img { |
|||
// background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230815174126.png'); |
|||
// background-size: 100% 100%; |
|||
// width: 100%; |
|||
// // height: 360px; |
|||
// height: 12.8rem; |
|||
// } |
|||
|
|||
.bottom-tips { |
|||
text-align: center; |
|||
margin-top: 1rem; |
|||
font-size: 0.22rem; |
|||
color: #fdf9e3; |
|||
} |
|||
|
|||
|
|||
|
|||
.scroll-wrap { |
|||
margin-top: 10px; |
|||
width: 100%; |
|||
// overflow: hidden; |
|||
animation: 5s goleft linear infinite normal; |
|||
@keyframes goleft { |
|||
from { |
|||
transform: translateX(0); |
|||
} |
|||
to { |
|||
transform: translateX(-100%); |
|||
} |
|||
} |
|||
.scroll-box { |
|||
// width: 5100px; |
|||
width: auto; |
|||
display: flex; |
|||
|
|||
|
|||
.scroll-item { |
|||
flex-shrink: 0; |
|||
// width: 235px; |
|||
display: inline-block; |
|||
color: #fff; |
|||
background-color: rgba($color: #000000, $alpha: 0.25); |
|||
padding: 5px 15px; |
|||
text-align: center; |
|||
font-size: 0.25rem; |
|||
border-radius: 25px; |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.fixed { |
|||
position: fixed !important; |
|||
bottom: 0rem !important; |
|||
left: 0.16rem !important; |
|||
right: 0; |
|||
// z-index: 100; |
|||
transform: scale(0.8); |
|||
margin-top: 0rem !important; |
|||
} |
|||
|
|||
.mid-box { |
|||
// z-index: 100; |
|||
width: 87%; |
|||
left: 0rem; |
|||
right: 0rem; |
|||
position: relative; |
|||
margin-top: 0rem; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
// background-color: #fff; |
|||
|
|||
box-sizing: border-box; |
|||
padding:35px 0px; |
|||
border-radius: 10px; |
|||
// box-sizing: border-box; |
|||
|
|||
.cls_div_phone_input { |
|||
height: 1rem; |
|||
width: 7rem; |
|||
position: relative; |
|||
|
|||
.phone-icon { |
|||
width: 0.6rem; |
|||
position: absolute; |
|||
top: 0.18rem; |
|||
left: 1.1rem; |
|||
// z-index: 1; |
|||
} |
|||
.cls_input_phone { |
|||
position: relative; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
height: 1rem; |
|||
width: 5.6rem; |
|||
border-radius: 25px; |
|||
padding-left: 20px; |
|||
box-sizing: border-box; |
|||
font-size: 0.32rem; |
|||
// font-weight: bold; |
|||
// text-align: center; |
|||
background-color: white; |
|||
// border: 2px solid red; |
|||
|
|||
border: none; |
|||
} |
|||
} |
|||
.cls_img_btn { |
|||
margin-top: 0.3rem; |
|||
position: relative; |
|||
width: 5.2rem; |
|||
// height: 1rem; |
|||
animation: btnScaleAnim 1s infinite; |
|||
@keyframes btnScaleAnim { |
|||
0%{ |
|||
transform: scale(0.9); |
|||
} |
|||
50% { |
|||
transform: scale(1.05); |
|||
} |
|||
100% { |
|||
transform: scale(0.9); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.price { |
|||
// font-weight: bold; |
|||
// margin-top: 0.25rem; |
|||
text-align: center; |
|||
// color: rgba(0,0,0,0.9); |
|||
color: #fff; |
|||
font-size: 0.24rem; |
|||
|
|||
} |
|||
|
|||
.tips { |
|||
color: #fff; |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 600; |
|||
// margin-top: 0.25rem; |
|||
// text-align: center; |
|||
// color: rgb(108, 1, 1); |
|||
font-size: 0.24rem; |
|||
|
|||
margin-bottom: -0.2rem; |
|||
} |
|||
|
|||
.privacy-box { |
|||
// color: rgba(0,0,0,0.9); |
|||
color: #fff; |
|||
|
|||
margin-top: 0.35rem; |
|||
// margin-bottom: 0.2rem; |
|||
width: 100%; |
|||
// z-index: 1; |
|||
// line-height: 0.25rem; |
|||
text-align: center; |
|||
// color: #fff6f3; |
|||
font-size: 0.24rem; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.selectBox { |
|||
margin-right: 0.1rem; |
|||
|
|||
width: 0.35rem; |
|||
height: 0.35rem; |
|||
} |
|||
.cls_sp_procotol_2 { |
|||
// margin-left: 0.1rem; |
|||
color: #ffdd5c; |
|||
// font-weight: bold; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
|
|||
|
|||
.rule-wrap { |
|||
position: fixed; |
|||
top: 0px; |
|||
right: 0px; |
|||
height: 100vh; |
|||
width: 100%; |
|||
background-color: #ff5900; |
|||
display: flex; |
|||
// align-items: center; |
|||
justify-content: center; |
|||
// padding-bottom: 2rem; |
|||
overflow-y: scroll; |
|||
} |
|||
.rule-box { |
|||
|
|||
margin-top: 0.5rem; |
|||
position: relative; |
|||
width: 97%; |
|||
// height: auto; |
|||
// background-color: #fdf9e3; |
|||
border-radius: 10px; |
|||
padding: 30px 18px; |
|||
box-sizing: border-box; |
|||
|
|||
.closeBtn { |
|||
position: absolute; |
|||
top: -0.1rem; |
|||
right: 0.4rem; |
|||
} |
|||
.rule-icon { |
|||
position: relative; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
// margin: 0 auto; |
|||
// background-image: url('https://vediocnd.corpring.com/hotVIP/rule-icon.png'); |
|||
// background-size: 100% 100%; |
|||
background-color: #ffc72c; |
|||
border-radius: 25px; |
|||
font-weight: bold; |
|||
font-size: 0.38rem; |
|||
padding: 8px 30px; |
|||
display: inline-block; |
|||
// width: auto; |
|||
// width: 1.7rem; |
|||
// height: 0.6rem; |
|||
} |
|||
.rule-content { |
|||
margin-top: -20px; |
|||
margin-bottom: 20px; |
|||
line-height: 15px; |
|||
font-size: 0.26rem; |
|||
line-height: 0.46rem; |
|||
// color: #FFF; |
|||
padding: 40px 20px; |
|||
border-radius: 10px; |
|||
|
|||
background-color: #fdf9e3; |
|||
// margin-bottom: 20px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue