<script>
|
// import {isBuy, niankas, preOrder} from "@/api/api";
|
// import {orderCreate} from "@/api/order";
|
// import xianlianghaojjuab from "@/pages/quanshou/components/xianlianghaojjuab.vue";
|
// import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue";
|
import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue";
|
// import list from "@/pages/quanshou/components/list.vue";
|
// import heijing from "@/pages/quanshou/components/heijing.vue";
|
// import agreement from "@/pages/users/login/components/agreement/index.vue";
|
import {mapGetters} from "vuex";
|
export default {
|
name: "index",
|
components: {
|
// xianlianghaojjuab,
|
// tehuichongzhi,
|
lanyaerji,
|
// list,
|
// heijing,
|
// agreement
|
},
|
data() {
|
return {
|
active: 0,
|
ls:[],
|
checked: false,
|
tips:'',
|
// active: 0,
|
VIP: 2, // 1黄金 2铂金 3黑金
|
lst:[],
|
vipConfig: {
|
1: {
|
bg: "/static/img/quanshou/TBBG1.png",
|
box: "/static/img/quanshou/VIPBOX1.png",
|
title: "/static/img/quanshou/VIPTXT1.png",
|
level: "/static/img/quanshou/VIPLVL1.png",
|
textClass: "vip1-text",
|
progressBg: "#BBA767",
|
growText: " 88800/100000",
|
benefitText: "297.00"
|
},
|
2: {
|
bg: "/static/img/quanshou/TBBG2.png",
|
box: "/static/img/quanshou/VIPBOX2.png",
|
title: "/static/img/quanshou/VIPTXT2.png",
|
level: "/static/img/quanshou/VIPLVL2.png",
|
textClass: "vip2-text",
|
progressBg: "#8094A6",
|
growText: " 88800/100000",
|
benefitText: "594.00"
|
},
|
3: {
|
bg: "/static/img/quanshou/TBBG3.png",
|
box: "/static/img/quanshou/VIPBOX3.png",
|
title: "/static/img/quanshou/VIPTXT3.png",
|
level: "/static/img/quanshou/VIPLVL3.png",
|
textClass: "vip3-text",
|
progressBg: "#7B776E",
|
growText: " 88800/100000",
|
benefitText: "891.00"
|
}
|
},
|
total: 0,
|
};
|
},
|
computed: {
|
// ...mapGetters(['isLogin']),
|
currentVip() {
|
return this.vipConfig[this.VIP] || this.vipConfig[1];
|
}
|
},
|
onShow() {
|
// if(!this.isLogin){
|
// niankas().then(res=>{
|
// this.ls = res.data
|
// })
|
// return;
|
// }
|
// isBuy(uni.getStorageSync('phone')).then(res=>{
|
// if(!res.data && res.code===200){
|
// niankas().then(res=>{
|
// this.ls = res.data
|
// })
|
// }
|
// })
|
|
|
},
|
|
|
methods: {
|
userAgree() {
|
this.$refs.agreement.open()
|
},
|
goumaiba(){
|
const _this = this;
|
console.log(_this.checked);
|
if(!_this.checked){
|
return uni.showToast( {
|
icon: 'none',
|
title: '请先阅读并同意《会员服务协议》',
|
duration: 2000
|
})
|
}
|
|
const orderDetails =
|
{
|
"attrValueId": _this.ls[0].attrValueId,
|
"productId": _this.ls[0].productId,
|
"productNum": _this.ls[0].productNum,
|
}
|
preOrder({
|
"preOrderType": "buyNow",
|
"orderDetails":[orderDetails]
|
}).then(res=>{
|
if(res.code == 200){
|
// /pages/goods/order_payment/index?orderNo=PT160175859249666679688&payPrice=115.01
|
|
const pro = {
|
"addressId": 1,
|
"orderMerchantRequestList": [
|
{
|
"shippingType": 1,
|
"merId": 3,
|
"remark": "",
|
"userCouponId": 0
|
}
|
],
|
"isUseIntegral": false,
|
"preOrderNo": res.data.orderNo,
|
"platUserCouponId": 0
|
}
|
|
orderCreate( pro).then(rp=>{
|
uni.navigateTo({
|
url: '/pages/goods/order_payment/index?orderNo='+rp.data.orderNo+'&payPrice='+rp.data.payPrice
|
})
|
})
|
|
|
|
|
}
|
}).catch( res=>{
|
uni.showToast( {
|
icon: 'none',
|
title: res,
|
duration: 2000
|
})
|
})
|
}
|
},
|
}
|
</script>
|
|
<template>
|
<view style="background: white;background-image: url('/static/img/BNM.png');background-repeat: no-repeat;background-size: 100% 420rpx;background-color: #F4F4F4">
|
|
<view style="padding-top: 30rpx;">
|
|
|
<view style="background-image: url('/static/img/A0.png');background-repeat: no-repeat;background-size: 100% 100%;height: 230rpx;padding: 0 30rpx;display: flex;justify-content: space-between;position: relative;margin-left: 17rpx;margin-right: 17rpx;">
|
<view style="font-weight: 400;font-size: 24rpx;color: #FBFFE0;padding-left: 10rpx;position: absolute;bottom: 60rpx;"></view>
|
</view>
|
|
|
<view style="text-align: center;margin-top: 40rpx;">
|
<image style="width: 127rpx;height: 18rpx;margin-right: 20rpx;" src="@/static/img/nion1.png"></image>
|
<text style="font-size: 36rpx;color: #333333;font-weight: 600;">会员尊享特权</text>
|
<image style="width: 127rpx;height: 18rpx;margin-left: 20rpx;" src="@/static/img/nion.png"></image>
|
</view>
|
<view style="margin-top: 20rpx;display: flex;font-weight: 600;justify-content: space-around">
|
<view>
|
<image style="height: 88rpx;width: 88rpx;" src="@/static/img/GG1.png"></image>
|
<view style="font-size: 24rpx;color: #333333;font-weight: 600;">甄选好物</view>
|
</view>
|
<view>
|
<image style="height: 88rpx;width: 88rpx;" src="@/static/img/GG2.png"></image>
|
<view style="font-size: 24rpx;color: #333333;font-weight: 600;">优选权益</view>
|
</view>
|
<view>
|
<image style="height: 88rpx;width: 88rpx;" src="@/static/img/GG3.png"></image>
|
<view style="font-size: 24rpx;color: #333333;font-weight: 600;">专享价格</view>
|
</view>
|
</view>
|
<!-- 会员购买 + 权益部分 -->
|
<view class="content-wrap">
|
<view class="card-wrap">
|
<view class="card-item" v-for="i in lst">
|
<view class="card-title">{{numbs(i.period)}}期会员</view>
|
<view class="card-price">
|
<text>¥</text>
|
<text class="card-num">{{ i.amount }}</text>
|
<text>/{{i.dateType}}</text>
|
</view>
|
<view class="card-date">{{ i.buyDate }}</view>
|
<view class="has-buy">{{ i.isBuy?'已扣款' : '待扣款' }}</view>
|
</view>
|
</view>
|
|
<view class="tab-wrap">
|
<text @click="active=0" :class="active==0?'active':''">实物权益</text>
|
<!-- <text @click="active=1" :class="active==1?'active':''">虚拟权益</text>-->
|
</view>
|
|
<view class="note" style="margin-bottom: 20rpx;text-align: center;color: #666666" v-if="active==0">
|
<!-- 提供的实物商品为指定的价值888元的红酒一瓶-->
|
为会员提供的实物商品以平台发出商品为准
|
</view>
|
|
<lanyaerji v-if="active==0" />
|
|
<template v-else>
|
<xianlianghaojjuab v-show="VIP==1" />
|
<tehuichongzhi v-show="VIP==1" style="margin-top: 50rpx;" />
|
<list clssD="kk" v-show="VIP==2" style="margin-top: 10rpx;" />
|
<heijing v-show="VIP==3" style="margin-top: 10rpx;" />
|
</template>
|
</view>
|
|
|
|
|
|
|
</view>
|
<!-- <agreement ref="agreement"></agreement> -->
|
</view>
|
</template>
|
|
<style scoped lang="scss" >
|
.li{
|
height: 314rpx;padding: 40rpx 20rpx;text-align: center;border-radius: 24rpx;border: 4rpx solid #EEEEEE;
|
background: white;
|
position: relative;
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
/* 顶部 VIP 样式 */
|
.vip-bg {
|
background-size: 100%;
|
background-repeat: no-repeat;
|
padding-top: 60rpx;
|
padding-bottom: 150rpx;
|
}
|
.vip-box {
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
height: 280rpx;
|
margin: 0 30rpx;
|
padding: 35rpx;
|
position: relative;
|
}
|
.gradient-text {
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
font-weight: 600;
|
}
|
.big-text {
|
margin-top: 20rpx;
|
font-size: 28rpx;
|
}
|
.small-text {
|
margin-top: 20rpx;
|
font-size: 24rpx;
|
}
|
.vip1-text {
|
background: linear-gradient(90deg, #754200, #ff9900);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.vip2-text {
|
background: linear-gradient(90deg, #425268, #8094A6);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.vip3-text {
|
background: linear-gradient(90deg, #ECD4C6, #C79372);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.progress-bar {
|
height: 16rpx;
|
border-radius: 20rpx;
|
width: 100%;
|
margin-top: 24rpx;
|
position: relative;
|
}
|
.progress-inner {
|
position: absolute;
|
background: #fff;
|
border-radius: 6rpx;
|
left: 0;
|
top: 0;
|
width: 50%;
|
height: 16rpx;
|
}
|
|
/* 内容区 */
|
.content-wrap {
|
padding: 30rpx;
|
background: #F4F4F4;
|
// border-radius: 24rpx 24rpx 0 0;
|
position: relative;
|
// top: -100rpx;
|
}
|
.card-wrap {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 40rpx;
|
}
|
.card-item {
|
background: #fff;
|
border-radius: 24rpx;
|
padding-top: 60rpx;
|
text-align: center;
|
padding-bottom: 48rpx;
|
width: calc(33% - 14rpx);
|
position: relative;
|
}
|
.card-title {
|
font-size: 32rpx;
|
font-weight: 600;
|
margin-bottom: 34rpx;
|
}
|
.card-price {
|
color: #333;
|
font-size: 28rpx;
|
font-weight: 600;
|
}
|
.card-num {
|
font-size: 48rpx;
|
font-weight: bold;
|
margin: 0 8rpx;
|
}
|
.card-date {
|
font-size: 20rpx;
|
color: #666;
|
margin-top: 18rpx;
|
}
|
.has-buy {
|
background: #FF922C;
|
border-radius: 0 24rpx 0 24rpx;
|
height: 42rpx;
|
width: 92rpx;
|
font-size: 24rpx;
|
color: #fff;
|
position: absolute;
|
top: 0;
|
right: 0;
|
line-height: 42rpx;
|
}
|
|
/* tab */
|
.tab-wrap {
|
display: flex;
|
justify-content: space-evenly;
|
margin-bottom: 50rpx;
|
}
|
.tab-wrap text {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #666;
|
}
|
.active {
|
color: #333 !important;
|
position: relative;
|
&::after {
|
content: "";
|
display: block;
|
width: 50rpx;
|
height: 8rpx;
|
background: linear-gradient(271deg, #FFE4A1 0%, #FFC57A 51%, #FFE1B9 100%);
|
border-radius: 32rpx;
|
position: absolute;
|
bottom: -20rpx;
|
left: calc(50% - 25rpx);
|
}
|
}
|
|
/* 按钮 */
|
.exchange-btn {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #FFD39A;
|
padding: 26rpx;
|
background: linear-gradient(271deg, #2A1601 0%, #3B2106 51%);
|
border-radius: 200rpx;
|
}
|
.note {
|
font-size: 24rpx;
|
color: #999;
|
margin-top: 20rpx;
|
}
|
|
::v-deep .li-bg{
|
background: linear-gradient(138deg, #FFE4A1 0%, #FFC57A 68%, #FFE1B9 100%);
|
.ttis{
|
color: #8B3D00;
|
}
|
}
|
</style>
|
