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