You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
527 lines
17 KiB
527 lines
17 KiB
<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}}</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://img.bnyer.cn/vip/vip-btn.gif">
|
|
|
|
|
|
<!-- 隐私协议 -->
|
|
<div class="privacy-box">
|
|
<img v-if="!agreePrivacy" @click="clickAgreePrivacy()" src="https://ydsh0516.cjdsp.com/ydshh5s/static/images-gd/ic-select-not.png" class="selectBox" />
|
|
<img v-if="agreePrivacy" @click="clickAgreePrivacy()" src="https://ydsh0516.cjdsp.com/ydshh5s/static/images-gd/ic-select.png" class="selectBox" />
|
|
|
|
我已阅读并同意下方活动规则、
|
|
<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;">业务资费：19.9元/月 </div>
|
|
|
|
|
|
<!-- <div class="price"></div> -->
|
|
</div>
|
|
<!-- 规则 -->
|
|
<div class="rule-box">
|
|
<div class="rule-icon">活动规则</div>
|
|
<div class="rule-content">
|
|
[产品名称] :惠点联合会员 <br/>
|
|
[计费方式] : 支付宝连续包月<br/>
|
|
[商品权益说明] :<br/>
|
|
用户每月可领取腾讯视频月卡、爱奇艺月卡、优酷月卡、芒果TV月卡、哗哩哗哩大会员月卡、网易云音乐月卡、喜马拉雅会员月卡、知乎盐选会员月卡、饿了么会员月卡、百度网盘会员月卡中的任意一张。<br/>
|
|
[领取方式]:<br/>
|
|
本产品订购生效后，用户需要通过关注【次元意境】微信公众号，[会员福利 - 会员月月领] 入口及时领取权益，领取成功后1小时到账。凭订购手机号登录相应APP即可享受会员权益。<br/>
|
|
[注意事项]：<br/>
|
|
1.权益领取成功后当月内不能进行退订、更改；<br/>
|
|
2.订购生效后凭订购手机号可每月领取会员一次，不可结转与转赠，当月不领取则视为自动放弃当月领取资格；<br/>
|
|
3.如您在权益充值未到账期间退订产品，将会导致权益充值失败。<br/>
|
|
[退订方式]：<br/>
|
|
进入支付宝APP---右下方“我的”---右上方的齿轮进入设置页面---点击“支付设置”---点击“免密支付/自动扣款”---选择“惠点联合会员”---点击“关闭服务”即可完成退订。<br/>
|
|
[联系我们]：<br/>
|
|
致电客服热线：13258821507，客服在线时间：9:00-18:00。
|
|
<!-- 致电客服热线：4008723215，客服在线时间：9:00-18:00。 -->
|
|
|
|
</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,
|
|
scrollArr:[
|
|
'151****2290已领取优酷视频会员',
|
|
'135****7952已领取爱奇艺会员',
|
|
'132****1506已领取腾讯视频会员',
|
|
'189****7756已领取芒果TV会员',
|
|
'180****6543已领取哔哩哔哩会员',
|
|
'181****2234已领取网易云音乐会员',
|
|
'134****8775已领取饿了么会员',
|
|
'132****1355已领取喜马拉雅听书会员',
|
|
'189****2293已领取百度网盘会员',
|
|
'153****9412已领取知乎盐选会员',
|
|
'172****5644已领取优酷视频会员',
|
|
'185****7885已领取爱奇艺会员',
|
|
'199****9877已领取腾讯视频会员',
|
|
'175****7655已领取芒果TV会员',
|
|
'156****3455已领取哔哩哔哩会员',
|
|
'145****1135已领取网易云音乐会员',
|
|
'175****2231已领取饿了么会员',
|
|
'137****9122已领取喜马拉雅听书会员',
|
|
'177****4277已领取百度网盘会员',
|
|
'189****7952已领取知乎盐选会员',
|
|
],
|
|
|
|
}
|
|
},
|
|
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")
|
|
},
|
|
|
|
// 手机号居底
|
|
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: #e53c51;
|
|
padding-bottom: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
|
|
|
|
.top-img {
|
|
background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230810154952.jpg');
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
// height: 360px;
|
|
height: 6.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: 20s 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 25px;
|
|
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: 0.5rem;
|
|
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.4rem;
|
|
border-radius: 20px;
|
|
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.2rem;
|
|
position: relative;
|
|
width: 5.2rem;
|
|
// height: 1rem;
|
|
// animation: btnScaleAnim 1s infinite;
|
|
@keyframes btnScaleAnim {
|
|
0%{
|
|
transform: scale(0.9);
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.price {
|
|
// font-weight: bold;
|
|
// margin-top: 0.25rem;
|
|
text-align: center;
|
|
color: rgba(0,0,0,0.9);
|
|
font-size: 0.22rem;
|
|
}
|
|
|
|
.tips {
|
|
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.22rem;
|
|
margin-bottom: -0.2rem;
|
|
}
|
|
|
|
.privacy-box {
|
|
color: rgba(0,0,0,0.9);
|
|
|
|
margin-top: 0.2rem;
|
|
// margin-bottom: 0.2rem;
|
|
width: 100%;
|
|
z-index: 1;
|
|
// line-height: 0.25rem;
|
|
text-align: center;
|
|
// color: #fff6f3;
|
|
font-size: 0.22rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.selectBox {
|
|
margin-right: 0.1rem;
|
|
|
|
width: 0.26rem;
|
|
height: 0.26rem;
|
|
}
|
|
.cls_sp_procotol_2 {
|
|
// margin-left: 0.1rem;
|
|
// color: #fe7d4a;
|
|
// font-weight: bold;
|
|
// text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.rule-box {
|
|
margin-top: 0.7rem;
|
|
position: relative;
|
|
width: 87%;
|
|
// height: 12rem;
|
|
background-color: #fdf9e3;
|
|
border-radius: 10px;
|
|
padding: 30px 18px;
|
|
box-sizing: border-box;
|
|
.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: 30px;
|
|
line-height: 15px;
|
|
font-size: 0.26rem;
|
|
line-height: 0.46rem;
|
|
// color: #FFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|