<script>
|
|
|
export default {
|
|
async created() {
|
const _this = this;
|
await uni.request({
|
url: _this.$webHost+'/api/v2/auth/qxgIosUnionLogin?phone='+_this.$util.getUserInfo().phone,
|
success: function (res) {
|
_this.qxgLogin = res.data.data;
|
uni.setStorageSync('qxgLogin',_this.qxgLogin)
|
uni.request({
|
url: _this.$webHost+'/api/v2/buryingPoint/record',
|
method:'PUT',
|
data:{
|
businessType:4,
|
appId:res.data.data.appId,
|
customerId:res.data.data.customerId,
|
}
|
})
|
|
|
uni.request({
|
url: _this.$webHost+'/api/v2/pay/memberPeriodConfigInfo',
|
data:{
|
appId:res.data.data.appId,
|
customerId:res.data.data.customerId,
|
orderNo:res.data.data.orderNo,
|
},
|
success:function (info){
|
_this.memberPeriodConfigInfo = info.data.data;
|
uni.setStorageSync('memberPeriodConfigInfo',_this.memberPeriodConfigInfo)
|
}
|
})
|
}
|
})
|
|
let mk = setInterval(()=>{
|
this.text -=1;
|
if(!this.text){
|
clearInterval( mk)
|
}
|
},1000)
|
this.time= setTimeout(()=>{
|
this.protocolChecked = [1];
|
this.tm = true;
|
this.isAgree = true;
|
},10000)
|
|
},
|
|
data() {
|
return {
|
qxgLogin:{},
|
protocolChecked: [0],
|
isAgree: false,
|
tm: null,
|
time:null,
|
text:10,
|
memberPeriodConfigInfo: {
|
totalBenefitsAmount: "",
|
installmentPeriods: "",
|
}
|
}
|
},
|
methods: {
|
goHome(){
|
uni.switchTab({
|
url: '/pages/index/index'
|
});
|
},
|
toWeb(){
|
uni.navigateTo({
|
url: '/pages/web/index'
|
})
|
},
|
|
link(url) {
|
uni.navigateTo({
|
url
|
})
|
},
|
|
|
submit(){
|
|
|
const _this = this;
|
if(!this.isAgree) {
|
uni.showToast({
|
title: '请阅读并同意协议',
|
icon: 'none'
|
})
|
return;
|
}
|
uni.navigateTo({
|
url: '/pages/quanyi/add'
|
})
|
|
|
|
|
|
}
|
},
|
watch:{
|
protocolChecked(val) {
|
this.tm = true;
|
if(this.time){
|
clearTimeout(this.time)
|
}
|
}
|
}
|
|
}
|
</script>
|
|
<template>
|
<view style="background-image: url('/static/imgs/QYBACKA.png');background-repeat: no-repeat;background-size: 100% 100%;background-color: #FFF4FA;">
|
|
<view class="head" style="position: relative">
|
<view style="display: flex;justify-content: flex-start;z-index: 9">
|
<view @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height: '20rpx',lineHeight: '80rpx'}" ></view>
|
</view>
|
|
<view style="margin-left: 20rpx;display: flex;justify-content: space-between;">
|
|
<view>
|
<view style="margin-top: 60rpx;"><image src="/static/imgs/SMTTA.png" style="width: 378rpx;height: 88rpx;"></image></view>
|
|
<view style="margin-top: 10rpx;">
|
<image src="/static/imgs/QQXGLK.png" style="width: 178rpx;height: 54rpx;"></image>
|
</view>
|
</view>
|
<view>
|
<image src="/static/imgs/VIPSOA.png" style="width: 272rpx;height: 272rpx;"></image>
|
</view>
|
</view>
|
|
</view>
|
<view class="content" style="overflow-y: scroll;padding: 30rpx;padding-top: 0;margin-top: -30rpx;">
|
<view class="tips" style="font-size: 28rpx;padding: 28rpx 32rpx;background-image: url('/static/imgs/TIPSBACK.png');background-repeat: no-repeat;background-size: 100% 100%;padding-bottom: 32rpx;">
|
<view style="font-size: 28rpx;color: #333333">① {{memberPeriodConfigInfo.showTitle}}商城会员年卡是本商城为会员特别打造的专属服务。成为会员后，您可享受各类商品折扣、促销优惠、生活权益及专属特权，并根据会员等级获赠相应超值礼品，体验我们为您准备的尊享会员服务。</view>
|
<view style="font-size: 28rpx;color: #333333">② 保险权益赠送：{{memberPeriodConfigInfo.showTitle}}商城会员年卡用户有机会获赠涵盖重疾险、意外险、事故险等的综合保障服务。尚未享受持牌机构服务的会员，亦有机会获取此项权益，具体详情请查阅会员中心相关说明。</view>
|
<view style="font-size: 28rpx;color: #333333">③ 平台保留根据实际情况新增或优化会员权益内容的权利。</view>
|
</view>
|
|
|
<view class="QXFJH" style="background-image: url('/static/imgs/QXFJH.png');background-size: 100% 100%;text-align: center;background-repeat: no-repeat;padding: 28rpx 0;margin-top: 18rpx;margin-bottom: 16rpx;color: #333333;line-height: 48rpx;">
|
<view style="font-weight: 600;">{{memberPeriodConfigInfo.showTitle}}商城会员专享特权</view>
|
|
<view>年卡费用：{{memberPeriodConfigInfo.totalBenefitsAmount }}元/年</view>
|
<view>支付期数：{{memberPeriodConfigInfo.installmentPeriods }}期</view>
|
<!-- <view>支付期数：{{memberPeriodConfigInfo.installmentPeriods }}期（每期{{memberPeriodConfigInfo.totalBenefitsAmount / memberPeriodConfigInfo.installmentPeriods}}元）</view>-->
|
|
|
</view>
|
|
<view style="font-size: 22rpx;padding: 36rpx 32rpx 24rpx 32rpx;background-image: url('/static/imgs/CLOSAN.png');background-repeat: no-repeat;background-size: 100% 100%;margin-bottom: 32rpx;">
|
<view style="font-size: 24rpx;margin-bottom: 30rpx;color: #333333">会员先享后付，包年会员服务、免息，购买成功后可在个人中心查看订单详情。会员服务开通成功不支持取消、退款。</view>
|
<view style="font-size: 24rpx;color: #333333">点击按钮即表示知晓并同意以上内容，自愿加入本商城年卡会员，且同意平台及平台权益合作方在账单日收入会员费。</view>
|
</view>
|
|
|
|
|
<view style="display: flex;gap: 20rpx;">
|
<button
|
style="height: 100rpx;color: #666666;border-radius: 24rpx;font-size: 34rpx;line-height: 100rpx;width: 170rpx;background-color: unset;"
|
@click="goHome"
|
>暂不开通</button>
|
<button
|
style="height: 100rpx;color: white;border-radius: 24rpx;font-size: 34rpx;line-height: 100rpx;flex: 1;"
|
:disabled="!tm"
|
@click="submit"
|
|
:class="tm &&protocolChecked.length?'activityBut':'disabledBut'"
|
>同意并开通<text v-if="!tm">({{text}}秒)</text></button>
|
</view>
|
<view style="display: flex;margin-top: 20rpx;display: flex;font-weight: 600;">
|
<uv-checkbox-group activeColor="#FF1472" @change='isAgree=!isAgree' >
|
<uv-checkbox :checked="isAgree ? true : false" activeColor="#FF1472" iconSize="14" size="16" :name="1" shape="circle">
|
</uv-checkbox>
|
<view style="font-size: 24rpx;color: #8B8D96">我已阅读并同意<text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">{{ memberPeriodConfigInfo.protocolName }}</text></view>
|
</uv-checkbox-group>
|
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
.activityBut{
|
background: #FF1472;
|
font-weight: 600;
|
}
|
.disabledBut{
|
background: #666666;
|
font-weight: 600;
|
}
|
.disabledBut{
|
background: #999 !important;
|
}
|
.head{
|
padding: 30rpx 10rpx 0 30rpx;
|
|
font-size: 32rpx;
|
color: #252938;
|
.title{
|
display: flex;
|
flex-direction: row;
|
text-align: center;
|
color: #252938;
|
font-size: 32rpx;
|
font-weight: bold;
|
.num{
|
color: #4766FE;
|
display: contents;
|
}
|
}
|
.tips{
|
color: #666666;
|
font-size: 26rpx;
|
margin-bottom: 115rpx;
|
}
|
|
}
|
|
.content{
|
.pt40{
|
padding-top: 40rpx;
|
}
|
.mr{
|
margin-right: 20rpx;
|
}
|
.tips{
|
position: relative;
|
&::after{
|
content: '';
|
display: block;
|
position: absolute;
|
bottom: -38rpx;
|
right: 22rpx;
|
width: 14rpx;
|
height: 62rpx;
|
background: #FFD3DD;
|
border-radius: 78rpx 78rpx 78rpx 78rpx;
|
z-index: 2;
|
}
|
&::before{
|
content: '';
|
display: block;
|
position: absolute;
|
bottom: -38rpx;
|
width: 14rpx;
|
height: 62rpx;
|
background: #FFD3DD;
|
border-radius: 78rpx 78rpx 78rpx 78rpx;
|
z-index: 2;
|
}
|
}
|
}
|
.QXFJH{
|
position: relative;
|
&::after{
|
content: '';
|
display: block;
|
position: absolute;
|
bottom: -38rpx;
|
right: 22rpx;
|
width: 14rpx;
|
height: 62rpx;
|
background: #FFD3DD;
|
border-radius: 78rpx 78rpx 78rpx 78rpx;
|
z-index: 2;
|
}
|
&::before{
|
content: '';
|
display: block;
|
position: absolute;
|
bottom: -38rpx;
|
width: 14rpx;
|
height: 62rpx;
|
left: 32rpx;
|
background: #FFD3DD;
|
border-radius: 78rpx 78rpx 78rpx 78rpx;
|
z-index: 2;
|
}
|
}
|
.back{
|
|
background-image: url("/static/imgs/ba.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 22rpx 30rpx;
|
display: flex;
|
flex-direction: row;
|
}
|
|
</style>
|
