<script>
|
import textBox from "@/components/textBox/index.vue";
|
|
|
export default {
|
components: {
|
textBox
|
},
|
|
async created() {
|
const _this = this;
|
await uni.request({
|
// url: _this.$webHost+'/api/v2/auth/ygxLogin?phone='+_this.$util.getUserInfo().phone+'&appId='+'47be9559-6b1b-42dd-84ed-25d028065013',
|
url: _this.$webHost + '/api/v2/auth/iosShopUnionLogin?phone=' + _this.$util.getUserInfo().phone + '&configureToDomain=10',
|
success: function (res) {
|
_this.ygxLogin = res.data.data;
|
uni.setStorageSync('ygxLogin',_this.ygxLogin)
|
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;
|
if(_this.memberPeriodConfigInfo['totalBenefitsAmount']) {
|
_this.memberPeriodConfigInfo['totalBenefitsAmount'] = _this.memberPeriodConfigInfo['totalBenefitsAmount'].toFixed(2);
|
}
|
uni.setStorageSync('memberPeriodConfigInfo',_this.memberPeriodConfigInfo)
|
_this.showTextBox = true;
|
_this.$nextTick(() => {
|
_this.$refs.textBox && _this.$refs.textBox.open()
|
})
|
}
|
})
|
}
|
})
|
|
let mk = setInterval(()=>{
|
_this.text -=1;
|
if(!_this.text){
|
clearInterval( mk)
|
}
|
},1000)
|
_this.time= setTimeout(()=>{
|
_this.protocolChecked = [1];
|
_this.tm = true;
|
},3000)
|
|
},
|
|
data() {
|
return {
|
ygxLogin:{},
|
protocolChecked: [0],
|
showTextBox: false,
|
isAgree: false,
|
tm: null,
|
time:null,
|
text:3,
|
memberPeriodConfigInfo: {
|
totalBenefitsAmount: "",
|
installmentPeriods: "",
|
}
|
}
|
},
|
methods: {
|
goHome(){
|
uni.reLaunch({
|
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-color: #0B166D;z-index: 0;">
|
<view style="background: url('/static/img/qyBg.png') no-repeat top center; background-size: 100%;z-index: 3;">
|
<view style="height: 50rpx;"></view>
|
<view class="head" style="position: relative">
|
<view style="display: flex;justify-content: start;align-items:center;position: absolute;left: 0;top: 65rpx;padding-left: 30rpx;z-index: 9;color: #FFFFFF;width: 690rpx;">
|
<view @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4">
|
<uv-icon name="home" color="#ffffff" size="28"></uv-icon>
|
</view>
|
<view class="mm" style="text-align: center;flex: 1;">会员权益</view>
|
</view>
|
<!-- <view style="text-align: center;font-weight: bold;font-size: 36rpx;position: relative;">
|
<view class="mm" style="text-align: center">会员权益说明</view>
|
</view> -->
|
</view>
|
|
<view style="background: url('/static/img/qyBg2.png') no-repeat top center; background-size: 100%;width: 690rpx;height: 728rpx;margin-left: 30rpx;margin-top: 160rpx;">
|
<!-- <view style="margin-bottom:20rpx;font-size: 44rpx;font-weight: bold;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">尊享会员年卡</view>
|
<view style="font-size: 28rpx;">
|
<p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">年卡金额：{{ memberPeriodConfigInfo.totalBenefitsAmount }}元</p>
|
<p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">扣款期数：{{ memberPeriodConfigInfo.installmentPeriods }}期(先享后付，免息)</p>
|
<p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">有效期：365天</p>
|
</view> -->
|
<view style="margin-left: 90rpx;font-size: 36rpx;font-weight: bold;background: linear-gradient(to right,#FCF2F1, #F7C984);-webkit-background-clip: text;background-clip: text;color: transparent;padding-top: 60rpx;">商城会员权益尊享卡</view>
|
<view style="font-size: 28rpx;margin-left: 90rpx;margin-top: 10rpx;">
|
<p style="background: linear-gradient(to right,#FFEEE7, #F7C984);-webkit-background-clip: text;background-clip: text;color: transparent;">尊享卡会员费：{{ memberPeriodConfigInfo.totalBenefitsAmount }}元/年</p>
|
</view>
|
<view style="display: flex;gap: 15rpx;padding-top: 100rpx;margin-left: 60rpx;">
|
<view style="width: 25%;display: flex;flex-direction: column;">
|
<image style="width: 88rpx;height: 88rpx;" src="/static/img/qy1.png" mode="aspectFit"></image>
|
<text style="font-size: 24rpx;color: #331C03;margin-top: 15rpx;">精选商品</text>
|
</view>
|
<view style="width: 25%;display: flex;flex-direction: column;">
|
<image style="width: 88rpx;height: 88rpx;" src="/static/img/qy2.png" mode="aspectFit"></image>
|
<text style="font-size: 24rpx;color: #331C03;margin-top: 15rpx;">购物9折</text>
|
</view>
|
<view style="width: 25%;display: flex;flex-direction: column;">
|
<image style="width: 88rpx;height: 88rpx;" src="/static/img/qy3.png" mode="aspectFit"></image>
|
<text style="font-size: 24rpx;color: #331C03;margin-top: 15rpx;">专属客服</text>
|
</view>
|
<view style="width: 25%;display: flex;flex-direction: column;">
|
<image style="width: 88rpx;height: 88rpx;" src="/static/img/qy4.png" mode="aspectFit"></image>
|
<text style="font-size: 24rpx;color: #331C03;margin-top: 15rpx;">海量权益</text>
|
</view>
|
</view>
|
<view style="width: 600rpx;margin: 0 auto;margin-top: 40rpx;">
|
<button
|
style="height: 100rpx;padding: 10rpx 0;color: #fff;border-radius: 50rpx;font-size: 34rpx;flex: 1;"
|
@click="submit"
|
:class="tm &&protocolChecked.length?'activityBut':'disabledBut'"
|
>同意并开通<text v-if="!tm">（{{text}}秒）</text></button>
|
<view @click="goHome" style="width: 600rpx;margin: 0 auto;padding: 10rpx 0;font-size: 34rpx;text-align: center;margin-top: 10rpx;">暂不开通</view>
|
</view>
|
<view style="font-size: 24rpx;color: #666666;display: flex;align-items: center;margin: 40rpx auto;height: 50rpx;justify-content: center;">
|
<uv-checkbox-group activeColor="#fff" @change='isAgree=!isAgree' style="">
|
<uv-checkbox :checked="isAgree ? true : false" iconColor="#143EBF" iconSize="25" size="25" :name="1" shape="circle">
|
<text style="color: #20110E;">我已阅读并同意</text>
|
</uv-checkbox>
|
</uv-checkbox-group>
|
<text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">{{memberPeriodConfigInfo.protocolName}}</text>
|
</view>
|
</view>
|
|
<view class="content" style="overflow-y: scroll;padding: 30rpx;padding-bottom: 140rpx;">
|
|
<view class="tips" style="background-color: #39499E;border-radius: 50rpx;margin-top: 20rpx;padding: 30rpx;color: #CFD5F5;font-size: 28rpx;">
|
<view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;margin-bottom: 30rpx;">
|
<image style="width: 111rpx;height: 8rpx;" src="/static/img/nion1.png"></image>
|
<view style="font-size: 36rpx;color: #CFD5F5;margin: 0 20rpx;">会员权益说明</view>
|
<image style="width: 111rpx;height: 8rpx;" src="/static/img/nion.png"></image>
|
</view>
|
<view style="margin-bottom: 20rpx;display: flex;">
|
<view style="font-weight:500;width: 40rpx;height: 40rpx;background-color: #CFD5F5;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #39499E;margin-right: 20rpx;">
|
1.
|
</view>
|
<view style="font-size: 28rpx;">
|
澜品优选会员年卡是本商城为会员特别打造的专属服务。成为会员后，您可享受各类商品折扣、促销优惠、生活权益及专属特权，并根据会员等级获赠相应超值礼品，体验我们为您准备的尊享会员服务。
|
</view>
|
</view>
|
<view style="margin-bottom: 20rpx;display: flex;">
|
<view style="font-weight:500;width: 40rpx;height: 40rpx;background-color: #CFD5F5;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color:#39499E;margin-right: 20rpx;">
|
2.
|
</view>
|
<view style="font-size: 28rpx;">
|
保险权益赠送：澜品优选会员年卡用户有机会获赠涵盖重疾险、意外险、事故险等的综合保障服务。尚未享受持牌机构服务的会员，亦有机会获取此项权益，具体详情请查阅会员中心相关说明。
|
</view>
|
</view>
|
<view style="margin-bottom: 20rpx;display: flex;">
|
<view style="font-weight:500;width: 40rpx;height: 40rpx;background-color: #CFD5F5;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #39499E;margin-right: 20rpx;">
|
3.
|
</view>
|
<view style="font-size: 28rpx;">
|
会员服务一经开通即表示知晓并同意以上内容，自愿加入澜品优选会员年卡会员，并同意平台及平台权益合作方在账单日收入会员费，可在个人中心查看订单详情。
|
</view>
|
</view>
|
<view style="margin-bottom: 20rpx;display: flex;">
|
<view style="font-weight:500;width: 40rpx;height: 40rpx;background-color: #CFD5F5;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #39499E;margin-right: 20rpx;">
|
4.
|
</view>
|
<view style="font-size: 28rpx;">
|
会员服务到期前，非商城原因不支持中途取消或退款，用户可以选择续订或取消续费。
|
</view>
|
</view>
|
<view style="margin-bottom: 20rpx;display: flex;">
|
<view style="font-weight:500;width: 40rpx;height: 40rpx;background-color: #CFD5F5;border-radius: 50%;text-align: center;line-height: 40rpx;flex-shrink: 0;flex-grow: 0;font-size: 28rpx;color: #39499E;margin-right: 20rpx;">
|
5.
|
</view>
|
<view style="font-size: 28rpx;">
|
平台有权根据实际情况优化调整礼品内容和会员权益，最终解释权归澜品优选所有。
|
</view>
|
</view>
|
</view>
|
|
<!-- <view style="margin-top: 30rpx;" class="back">-->
|
<!-- <view style="flex: 1">-->
|
<!-- <view class="tips" style="font-size: 36rpx;font-weight: bold;color: #794007;margin-bottom: 20rpx;">专享特权</view>-->
|
<!-- <view class="tips" style="font-size: 26rpx;color: #794007;margin-bottom: 20rpx;line-height: 44rpx;">星享购会员年卡会员 {{ memberPeriodConfigInfo.totalBenefitsAmount }}元/年</view>-->
|
<!-- <view class="tips" style="font-size: 26rpx;margin-bottom: 20rpx;color: #794007;line-height: 44rpx;">分期支付：先享后付（提供的实物商品为指定的价值888元的红酒一瓶），分{{ memberPeriodConfigInfo.installmentPeriods }}期支付包年会员服务、免息</view>-->
|
<!-- <view class="tips" style="font-size: 26rpx;margin-bottom: 3rpx;color: #794007;line-height: 44rpx;">购买成功后，可在个人中心查看分期订单详情</view>-->
|
|
<!-- </view>-->
|
<!-- <view style="display: flex;margin-top: 150rpx;">-->
|
<!-- <checkbox-group activeColor="#fff" @change='isAgree=!isAgree' style="height: 100px;">-->
|
<!-- <checkbox :checked="isAgree ? true : false" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">-->
|
<!-- </checkbox>-->
|
<!-- </checkbox-group>-->
|
<!-- </view>-->
|
<!-- </view>-->
|
<!-- <view class="tips" style="color: #666666;margin-top: 30rpx;font-size: 26rpx">点击按钮即表示知晓并同意以上内容，自愿加入本商城星享购会员年卡会员，并同意平台及平台权益合作方在账单日收入会员费</view>-->
|
<!-- <view style="font-size: 24rpx;color: #666666;display: flex;align-items: center;margin: 40rpx 0;height: 50rpx;justify-content: center;">
|
<checkbox-group activeColor="#fff" @change='isAgree=!isAgree' style="">
|
<checkbox :checked="isAgree ? true : false" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">
|
</checkbox>
|
</checkbox-group>
|
<text style="color: #20110E;">我已阅读并同意</text>
|
<text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">《会员权益服务协议-星享购》</text>
|
</view> -->
|
|
<!-- <view class="tips" style="color: #666666;margin-top: 24rpx;margin-bottom: 20rpx;font-size: 26rpx">*会员服务一经开通不支持取消、退款，会员服务到期前，用户可以选择续订或取消续费。</view>-->
|
<!-- <view style="position: fixed;bottom: 40rpx;left: 30rpx;width: 690rpx;display: flex;gap: 20rpx;z-index: 2;">
|
<button @click="goHome" style="width: 200rpx;height: 100rpx;padding: 10rpx 0;border-radius: 50rpx;font-size: 34rpx">暂不开通</button>
|
<button
|
style="height: 100rpx;padding: 10rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;flex: 1;"
|
|
@click="submit"
|
|
:class="tm &&protocolChecked.length?'activityBut':'disabledBut'"
|
>同意并开通<text v-if="!tm">（{{text}}秒）</text></button>
|
</view> -->
|
|
<!-- 专享会员生活权益 -->
|
<!-- <view>
|
<view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
|
<image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
|
<view style="font-size: 36rpx;color: #370606;margin: 0 20rpx;">专享会员生活权益</view>
|
<image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
|
</view>
|
<view class="life" style="background: url('/static/img/qsLife.png') no-repeat top center; background-size: 100%;width: 100%;height: 1506rpx;">
|
|
</view>
|
<view style="width: 690rpx;margin-top: 20rpx;text-align: center;">
|
<button @click="toHuiyuan" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">兑换生活权益</button>
|
<view style="color: #333;font-size: 24rpx;padding-top: 0rpx;padding-bottom: 10rpx;">以上权益仅为预览展示，实际以兑换页面为准</view>
|
</view>
|
<view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
|
<image style="width: 127rpx;height: 18rpx;" src="/static/img/nion1.png"></image>
|
<view style="font-size: 36rpx;margin: 0 20rpx;color: #370606;">专享会员实物权益</view>
|
<image style="width: 127rpx;height: 18rpx;" src="/static/img/nion.png"></image>
|
</view>
|
<view class="physical" style="background: url('/static/img/qsPhysical.png') no-repeat top center; background-size: 100%;width: 100%;height: 1580rpx;">
|
|
</view>
|
<view style="width: 690rpx;margin-top: 20rpx;text-align: center;">
|
<button @click="getTips" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">查询实物权益</button>
|
<view style="color: #333;font-size: 24rpx;padding-top: 0rpx;padding-bottom: 40rpx;">以上权益仅为预览展示，实际以商城发出为准</view>
|
</view>
|
</view> -->
|
|
<!-- <view style="text-align: center;display: flex;flex-direction: row;justify-content: center"><text @click="submit(false)" style="color: #666666;margin-bottom: 20rpx;font-size: 28rpx">不同意</text></view>-->
|
|
<!-- 专享会员生活权益 -->
|
<view style="padding: 0 30rpx; background-color: #FFFFFF;padding-top: 3rpx;border-radius: 50rpx;margin-top: 30rpx;">
|
<view class="content-title" style="text-align: center;margin-top: 50rpx;margin-bottom: 40rpx;">
|
<view style="font-size: 36rpx;color: #333333;margin: 0 20rpx;">
|
<span class="content-title-item">虚拟权益</span>
|
</view>
|
<view style="color: #666666;font-size: 24rpx;">专享权益以实际兑换页面为准</view>
|
</view>
|
<view class="life" style="background: url('/static/img/qsLife.png') no-repeat top center; background-size: 100%;width: 100%;height: 500rpx;">
|
|
</view>
|
<view class="life" style="background: url('/static/img/qsLife2.png') no-repeat top center; background-size: 100%;width: 100%;height: 700rpx;">
|
|
</view>
|
<view class="content-title" style="text-align: center;margin-top: 0rpx;margin-bottom: 40rpx;">
|
<view style="font-size: 36rpx;color: #333333;margin: 0 20rpx;">
|
<span class="content-title-item">实物权益</span>
|
</view>
|
<view style="color: #666666;font-size: 24rpx;">专享权益以商城实际发出商品为准</view>
|
</view>
|
<view class="physical" style="background: url('/static/img/qsPhysical.png') no-repeat top center; background-size: 100%;width: 100%;height: 982rpx;">
|
|
</view>
|
</view>
|
</view>
|
<textBox v-if="showTextBox" ref="textBox" :code="memberPeriodConfigInfo.protocolCode" :title="memberPeriodConfigInfo.protocolName"></textBox>
|
</view>
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
.uv-checkbox-group {
|
flex: none;
|
}
|
.activityBut{
|
//background: #EE2626;
|
background-image: linear-gradient(to right, #7885ED, #143EBF);
|
font-weight: 500;
|
}
|
.disabledBut{
|
background: #dddddd;
|
}
|
.head{
|
padding: 30rpx 30rpx 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;
|
}
|
|
}
|
.back{
|
|
// background-image: url("/static/img/ba.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 22rpx 30rpx;
|
display: flex;
|
flex-direction: row;
|
}
|
|
</style>
|
