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.
538 lines
18 KiB
538 lines
18 KiB
<template>
|
|
<div class="recieveVip-wrap">
|
|
<!-- <div class="top-img"></div> -->
|
|
|
|
<!-- 权益列表 -->
|
|
<div class="vip-box">
|
|
<div class="get-title">请选择您要领取的权益：</div>
|
|
<div class="sub-title">爆款会员月卡</div>
|
|
|
|
<div class="vip-list">
|
|
<div class="vip-item" v-for="(item, index) in vipList" :key="index" v-if="index < 10" @click="selectVip(index)">
|
|
<div class="vip-icon" :class="curVipIndex == index? 'active' : ''"
|
|
:style=" `background: url(${item.icon}) no-repeat;background-size: 100% 100%;`"></div>
|
|
<!-- <div class="vip-name">{{ item.name }}</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="sub-title">美团外卖5元券</div>
|
|
<div class="mt-list">
|
|
<div class="mt-item" v-for="(item, index) in vipList" :key="index" v-if="index == 10" @click="selectVip(index)">
|
|
<div class="mt-icon" :class="curVipIndex == 10? 'active' : ''"
|
|
:style=" `background: url(${item.icon}) no-repeat;background-size: 100% 100%;`"></div>
|
|
<!-- <div class="vip-name">{{ item.name }}</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 手机号输入框 -->
|
|
<div class="mid-box" >
|
|
<div class="cls_div_phone_input">
|
|
<input class="cls_input_phone" v-model="mobile" type="text" maxlength="11" placeholder="请输入您的手机号">
|
|
<img class="phone-icon" src="https://img.bnyer.cn/vip/hotAIphone.png" alt="">
|
|
</div>
|
|
<img class="cls_img_btn" @click="clickMainButton()" src="https://image.ireadwo.cn/resources/yq-mtwm-20djj/btn-get.png">
|
|
</div>
|
|
<!-- 资费 -->
|
|
<!-- <div class="price">业务资费：19.9元 / 月</div> -->
|
|
<!-- 规则 -->
|
|
<div class="rule-box">
|
|
<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/>
|
|
致电客服热线：13258821507，客服在线时间：9:00-18:00。
|
|
</div>
|
|
</div>
|
|
<div class="confirm-wrap" v-if="showPop">
|
|
<div class="confirm-box">
|
|
<div class="close-button" @click="isShowPop()">×</div>
|
|
<div class="confirm-title">确认领取<br/>【{{ vipList[curVipIndex].name}}】吗？<br/><br/>
|
|
领取手机号：{{ mobile }}</div>
|
|
<div class="icon" :style=" `background: url(${vipList[curVipIndex].icon}) no-repeat;background-size: 100% 100%;`"></div>
|
|
<div class="confirm-button" @click="receiveRights()">确认</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Indicator, Toast } from "mint-ui";
|
|
export default {
|
|
data() {
|
|
return{
|
|
curVipIndex: 0,
|
|
mobile: '',
|
|
showPop: false,
|
|
canClick: true,
|
|
|
|
vipList: [
|
|
{
|
|
name: '优酷黄金会员',
|
|
icon: 'https://img.bnyer.cn/vip/youku.png',
|
|
vipKey: '10000281'
|
|
},
|
|
{
|
|
name: '爱奇艺黄金会员',
|
|
icon: 'https://img.bnyer.cn/vip/aiqiyi.png',
|
|
vipKey: '10000260'
|
|
},
|
|
{
|
|
name: '腾讯视频VIP会员',
|
|
icon: 'https://img.bnyer.cn/vip/tcenttv.png',
|
|
vipKey: '10000224'
|
|
},
|
|
{
|
|
name: '芒果TV全屏会员',
|
|
icon: 'https://img.bnyer.cn/vip/mangotv.png',
|
|
vipKey: '10000271'
|
|
},
|
|
{
|
|
name: '哔哩哔哩大会员',
|
|
icon: 'https://img.bnyer.cn/vip/bili.png',
|
|
vipKey: '10000257'
|
|
},
|
|
|
|
{
|
|
name: '网易云音乐黑胶VIP',
|
|
icon: 'https://img.bnyer.cn/vip/wangyiyun.png',
|
|
vipKey: '10000298'
|
|
},
|
|
{
|
|
name: '饿了么超级会员',
|
|
icon: 'https://img.bnyer.cn/vip/eleme.png',
|
|
vipKey: '10000377'
|
|
},
|
|
{
|
|
name: '搜狐视频会员月卡',
|
|
icon: 'https://img.bnyer.cn/vip/ximalaya.png',
|
|
vipKey: '10000253'
|
|
},
|
|
|
|
{
|
|
name: '知乎盐选会员月卡',
|
|
icon: 'https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230804224645.png',
|
|
vipKey: '10000440'
|
|
},
|
|
|
|
{
|
|
name: '百度网盘普通会员',
|
|
icon: 'https://img.bnyer.cn/vip/baidu.png',
|
|
vipKey: '10000437'
|
|
},
|
|
{
|
|
name: '美团外卖5元券',
|
|
icon: ' https://p1.meituan.net/travelcube/7264ce9c25de2e464e3acd996fe8ad362803.png',
|
|
vipKey: '10000153'
|
|
},
|
|
|
|
|
|
]
|
|
}
|
|
},
|
|
created(){
|
|
document.documentElement.scrollTop = 0;
|
|
document.title = "联合会员";
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
methods: {
|
|
selectVip(index) {
|
|
this.curVipIndex = index
|
|
console.log(index);
|
|
},
|
|
isShowPop() {
|
|
this.showPop = !this.showPop
|
|
},
|
|
clickMainButton() {
|
|
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
|
|
}
|
|
this.isShowPop()
|
|
},
|
|
|
|
// 领取权益
|
|
receiveRights(){
|
|
|
|
Indicator.open('领取中...')
|
|
|
|
// 查询余额
|
|
|
|
let parms = {
|
|
chargeAccountNumber: this.mobile,
|
|
skuId: this.vipList[this.curVipIndex].vipKey,
|
|
chargeAccountType:10
|
|
}
|
|
|
|
this.axios({
|
|
method: "post",
|
|
url: `https://interface.bnyer.cn/yunmei/directBuy`,
|
|
// url: `http://192.168.2.64:8086/yunmei/directBuy`,
|
|
data: parms
|
|
}).then((rsp) => {
|
|
|
|
console.log(rsp);
|
|
if(rsp.code == 0) {
|
|
|
|
|
|
if(rsp.res.code == '000000'){
|
|
Indicator.close();
|
|
this.isShowPop()
|
|
this.mobile = ''
|
|
this.curVipIndex = 0
|
|
|
|
Toast({
|
|
message: "领取成功，充值过程存在一定延时，请稍后前往对应APP查看~",
|
|
})
|
|
|
|
|
|
} else if(rsp.res.code == '10024' || rsp.res.code == '10026'){
|
|
Indicator.close();
|
|
this.isShowPop()
|
|
this.mobile = ''
|
|
this.curVipIndex = 0
|
|
Toast({
|
|
message: "您暂无领取资格",
|
|
})
|
|
} else if(rsp.res.code == '10025'){
|
|
Indicator.close();
|
|
this.isShowPop()
|
|
this.mobile = ''
|
|
this.curVipIndex = 0
|
|
Toast({
|
|
message: "您当月已领取过权益，请下月再来~",
|
|
})
|
|
} else {
|
|
Indicator.close();
|
|
this.isShowPop()
|
|
this.mobile = ''
|
|
this.curVipIndex = 0
|
|
Toast({
|
|
message: "网络异常，请稍后再试~",
|
|
})
|
|
}
|
|
}else {
|
|
Indicator.close();
|
|
this.isShowPop()
|
|
this.mobile = ''
|
|
this.curVipIndex = 0
|
|
Toast({
|
|
message: "网络异常，请稍后再试~",
|
|
});
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch((err)=>{
|
|
Indicator.close();
|
|
this.isShowPop()
|
|
this.mobile = ''
|
|
this.curVipIndex = 0
|
|
Toast({
|
|
message: "系统错误，请联系客服~",
|
|
});
|
|
})
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.recieveVip-wrap {
|
|
width: 100%;
|
|
height: auto;
|
|
position: absolute;
|
|
background-color: #fc7e2a;
|
|
padding-bottom: 1rem;
|
|
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_20230901115742.png');
|
|
background-size: 100% 13.35rem;
|
|
background-repeat: no-repeat;
|
|
// .top-img {
|
|
// width: 100%;
|
|
// height: 13.35rem;
|
|
// position: absolute;
|
|
// top: 0rem;
|
|
// left: 0rem;
|
|
// background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230901115742.png');
|
|
// background-size: 100% 100%;
|
|
// background-repeat: no-repeat;
|
|
// border-bottom: 5px solid rgb(255, 102, 0);
|
|
|
|
// }
|
|
|
|
.fixed {
|
|
position: fixed !important;
|
|
bottom: 0rem !important;
|
|
left: 0;
|
|
right: 0;
|
|
// z-index: 100;
|
|
transform: scale(0.8);
|
|
margin-top: 0rem !important;
|
|
}
|
|
|
|
.confirm-wrap {
|
|
// z-index: 100;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba($color: #000000, $alpha: 0.7);
|
|
}
|
|
.confirm-box {
|
|
position: absolute;
|
|
width: 80%;
|
|
height: 7rem;
|
|
border: 3px solid #f37151;
|
|
background-color: rgb(244, 234, 222);
|
|
border-radius: 10px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 20px 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.close-button {
|
|
font-size: 35px;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: -8px;
|
|
color: #a73a1e;
|
|
}
|
|
.confirm-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #a73a1e;
|
|
text-align: center;
|
|
}
|
|
.icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
// background-color: #fb986e;
|
|
border-radius: 8px;
|
|
}
|
|
.confirm-button {
|
|
background: linear-gradient(#fb986e, #d7502f);
|
|
width:4rem;
|
|
height: 1rem;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.vip-box {
|
|
margin-top: 3.1rem;
|
|
width: 90%;
|
|
height: auto;
|
|
background-color: rgb(252, 242, 228);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
.get-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.sub-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
.vip-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
// align-items: center;
|
|
.active {
|
|
border: 5px solid #dc5100;
|
|
}
|
|
.vip-item {
|
|
width: 18%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
.vip-icon {
|
|
// border-radius: 5px;
|
|
width: 100%;
|
|
height: 1.11rem;
|
|
background-color: #fff;
|
|
margin-bottom: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
.vip-name {
|
|
width: 100%;
|
|
text-align: center;
|
|
white-space: wrap;
|
|
font-size: 10px;
|
|
line-height: 12px;
|
|
}
|
|
}
|
|
}
|
|
.mt-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
// align-items: center;
|
|
.active {
|
|
border: 5px solid #dc5100;
|
|
}
|
|
.mt-item {
|
|
width: 18%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
.mt-icon {
|
|
// border-radius: 5px;
|
|
width: 100%;
|
|
height: 1.11rem;
|
|
background-color: #fff;
|
|
margin-bottom: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
.vip-name {
|
|
width: 100%;
|
|
text-align: center;
|
|
white-space: wrap;
|
|
font-size: 10px;
|
|
line-height: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mid-box {
|
|
// z-index: 100;
|
|
left: 0rem;
|
|
right: 0rem;
|
|
position: relative;
|
|
margin-top: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.cls_div_phone_input {
|
|
height: 1rem;
|
|
width: 7rem;
|
|
position: relative;
|
|
.phone-icon {
|
|
width: 0.6rem;
|
|
position: absolute;
|
|
top: 0.27rem;
|
|
left: 0.8rem;
|
|
// z-index: 1;
|
|
}
|
|
.cls_input_phone {
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
height: 1.1rem;
|
|
width: 5rem;
|
|
border-radius: 50px;
|
|
padding-left: 1.5rem;
|
|
font-size: 0.4rem;
|
|
background-color: white;
|
|
border: none;
|
|
}
|
|
}
|
|
.cls_img_btn {
|
|
margin-top: 0.4rem;
|
|
position: relative;
|
|
width: 5.2rem;
|
|
// height: 1.6rem;
|
|
// animation: btnScaleAnim 1s infinite;
|
|
@keyframes btnScaleAnim {
|
|
0%{
|
|
transform: scale(0.9);
|
|
}
|
|
50% {
|
|
transform: scale(0.95);
|
|
}
|
|
100% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.price {
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
}
|
|
.rule-box {
|
|
margin-top: 0.3rem;
|
|
position: relative;
|
|
width: 100%;
|
|
// height: 12rem;
|
|
// background-color: #f37151;
|
|
border-radius: 5px;
|
|
padding: 12px 30px;
|
|
box-sizing: border-box;
|
|
// border-top: 5px solid rgb(255, 102, 0);
|
|
.rule-icon {
|
|
margin-top: 0.6rem;
|
|
|
|
text-align: center;
|
|
font-size: 0.32rem;
|
|
color: #FFF;
|
|
// background-image: url('https://img.bnyer.cn/vip/rule-icon.png');
|
|
// background-size: 100% 100%;
|
|
// width: 1.7rem;
|
|
// height: 0.6rem;
|
|
}
|
|
|
|
.rule-content {
|
|
margin-top: 10px;
|
|
// line-height: 15px;
|
|
font-size: 0.22rem;
|
|
color: #FFF;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|