465 lines
12 KiB
Vue
465 lines
12 KiB
Vue
<template>
|
|
<view class="member-card-box">
|
|
<navigation-bar-vue title="会员中心" style="width: 100%;" background-color="#262626"
|
|
title-color="#FFFFFF"></navigation-bar-vue>
|
|
<view class="main-body">
|
|
<!-- 会员卡展示区 -->
|
|
<view class="vip-box">
|
|
<view class="dl-menu-box">
|
|
<view v-for="(item,index) in memberCardList" @click="itemClick(index)" class="dl-menu"
|
|
:class="index==chooseCardIndex?'dl-menu click':'dl-menu'">
|
|
<!-- 这里的图标要换成动态配置的 -->
|
|
<image src="@/static/mine/huang.png" mode="aspectFit"></image>
|
|
{{item.cardName}}
|
|
</view>
|
|
</view>
|
|
<!-- 会员卡详情 -->
|
|
<view class="card-detail-box">
|
|
<view class="price-box">
|
|
<view
|
|
:class="['price-item',choosePriceIndex==index?'choose':'',1==index?'margin-left-right':'']"
|
|
v-for="(item,index) in memberCardList[chooseCardIndex].priceList"
|
|
@click="changePriceIndex(index)">
|
|
<image v-if="item.isHot" class="hot-img" src="@/static/mine/hot.png" mode="aspectFit">
|
|
</image>
|
|
<view class="text1">{{item.title}}</view>
|
|
<view class="text2"><text>¥</text>{{item.price}}</view>
|
|
<view class="text3">折合{{item.dayPrice}}元/天</view>
|
|
</view>
|
|
</view>
|
|
<!-- 购买 -->
|
|
<view class="buy-button">立即开通</view>
|
|
<!-- 协议 -->
|
|
<view class="xieyi-box">
|
|
开通即代表您已阅读并同意<text
|
|
@click="handleUserAgrement(globalConfig.appInfo.agreements[2])">《{{globalConfig.appInfo.agreements[2].title}}》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 权益展示区 -->
|
|
<view class="rights-box">
|
|
<view class="rights-item title">
|
|
<view class="title-left">会员权益</view>
|
|
<view class="value-item" v-for="(item,index) in cardList">{{item.name}}</view>
|
|
</view>
|
|
<view class="rights-item item-bg" v-for="(item,index) in rightsList">
|
|
<view class="title-left">{{item.name}}</view>
|
|
<view :class="[i==cardList.length-1?'value-item yellow-bg':'value-item']"
|
|
v-for="(card,i) in cardList">
|
|
<view v-if="'02'==item.rightsType">
|
|
<!-- 数量限制 -->
|
|
<text v-if="0==item.cardRights[card.id]">无限</text>
|
|
<text v-else>{{item.cardRights[card.id]}}条</text>
|
|
</view>
|
|
<view v-else-if="'01'==item.rightsType">
|
|
<!-- 是否支持 -->
|
|
<text v-if="0==item.cardRights[card.id]">-</text>
|
|
<view v-else>
|
|
<uni-icons v-if="i==cardList.length-1" color="#3A3A38" type="checkmarkempty"
|
|
size="18"></uni-icons>
|
|
<uni-icons v-else color="#E8CEAD" type="checkmarkempty" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rights-item item-bg" v-for="(item,index) in rightsList">
|
|
<view class="title-left">{{item.name}}</view>
|
|
<view :class="[i==cardList.length-1?'value-item yellow-bg':'value-item']"
|
|
v-for="(card,i) in cardList">
|
|
<view v-if="'02'==item.rightsType">
|
|
<!-- 数量限制 -->
|
|
<text v-if="0==item.cardRights[card.id]">无限</text>
|
|
<text v-else>{{item.cardRights[card.id]}}条</text>
|
|
</view>
|
|
<view v-else-if="'01'==item.rightsType">
|
|
<!-- 是否支持 -->
|
|
<text v-if="0==item.cardRights[card.id]">-</text>
|
|
<view v-else>
|
|
<uni-icons v-if="i==cardList.length-1" color="#3A3A38" type="checkmarkempty"
|
|
size="18"></uni-icons>
|
|
<uni-icons v-else color="#E8CEAD" type="checkmarkempty" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rights-item item-bg" v-for="(item,index) in rightsList">
|
|
<view class="title-left">{{item.name}}</view>
|
|
<view :class="[i==cardList.length-1?'value-item yellow-bg':'value-item']"
|
|
v-for="(card,i) in cardList">
|
|
<view v-if="'02'==item.rightsType">
|
|
<!-- 数量限制 -->
|
|
<text v-if="0==item.cardRights[card.id]">无限</text>
|
|
<text v-else>{{item.cardRights[card.id]}}条</text>
|
|
</view>
|
|
<view v-else-if="'01'==item.rightsType">
|
|
<!-- 是否支持 -->
|
|
<text v-if="0==item.cardRights[card.id]">-</text>
|
|
<view v-else>
|
|
<uni-icons v-if="i==cardList.length-1" color="#3A3A38" type="checkmarkempty"
|
|
size="18"></uni-icons>
|
|
<uni-icons v-else color="#E8CEAD" type="checkmarkempty" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rights-item item-bg" v-for="(item,index) in rightsList">
|
|
<view class="title-left">{{item.name}}</view>
|
|
<view :class="[i==cardList.length-1?'value-item yellow-bg':'value-item']"
|
|
v-for="(card,i) in cardList">
|
|
<view v-if="'02'==item.rightsType">
|
|
<!-- 数量限制 -->
|
|
<text v-if="0==item.cardRights[card.id]">无限</text>
|
|
<text v-else>{{item.cardRights[card.id]}}条</text>
|
|
</view>
|
|
<view v-else-if="'01'==item.rightsType">
|
|
<!-- 是否支持 -->
|
|
<text v-if="0==item.cardRights[card.id]">-</text>
|
|
<view v-else>
|
|
<uni-icons v-if="i==cardList.length-1" color="#3A3A38" type="checkmarkempty"
|
|
size="18"></uni-icons>
|
|
<uni-icons v-else color="#E8CEAD" type="checkmarkempty" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rights-item item-bg">
|
|
<view class="title-left">每日报名上限</view>
|
|
<view class="value-item">20条</view>
|
|
<view class="value-item">无限</view>
|
|
<view class="value-item yellow-bg">无限</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
|
|
|
export default {
|
|
components: {
|
|
navigationBarVue
|
|
},
|
|
data() {
|
|
return {
|
|
globalConfig: getApp().globalData.config,
|
|
ifAgree: 0,
|
|
//当前选中的会员卡下标
|
|
chooseCardIndex: 0,
|
|
//当前选中的会员卡付款下标
|
|
choosePriceIndex: 0,
|
|
// 会员卡数组
|
|
memberCardList: [{
|
|
id: "1",
|
|
cardName: "箐英会员",
|
|
image: "",
|
|
priceList: [{
|
|
title: "年付会员",
|
|
price: 228,
|
|
dayPrice: 0.82,
|
|
isHot: true
|
|
}, {
|
|
title: "季付会员",
|
|
price: 78,
|
|
dayPrice: 0.82,
|
|
isHot: false
|
|
}, {
|
|
title: "月付会员",
|
|
price: 28,
|
|
dayPrice: 0.82,
|
|
isHot: false
|
|
}]
|
|
}, {
|
|
id: "2",
|
|
cardName: "钻石会员",
|
|
image: "",
|
|
priceList: [{
|
|
title: "年付会员",
|
|
price: 1228,
|
|
dayPrice: 0.82,
|
|
isHot: true
|
|
}, {
|
|
title: "季付会员",
|
|
price: 178,
|
|
dayPrice: 0.82,
|
|
isHot: false
|
|
}, {
|
|
title: "月付会员",
|
|
price: 128,
|
|
dayPrice: 0.82,
|
|
isHot: false
|
|
}]
|
|
}],
|
|
//权益对比的数组
|
|
cardList: [{
|
|
id: '1',
|
|
name: '非会员'
|
|
}, {
|
|
id: '2',
|
|
name: '箐英'
|
|
}, {
|
|
id: '3',
|
|
name: '钻石'
|
|
}],
|
|
rightsList: [{
|
|
name: "每日解锁通告上限",
|
|
// 权益类型 01-是否支持 | 02-数量限制
|
|
rightsType: '02',
|
|
cardRights: {
|
|
"1": 20,
|
|
"2": 0,
|
|
"3": 0
|
|
}
|
|
}, {
|
|
name: "高奖励&最新通告",
|
|
// 权益类型 01-是否支持 | 02-数量限制
|
|
rightsType: '01',
|
|
cardRights: {
|
|
"1": 0,
|
|
"2": 1,
|
|
"3": 1
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 菜单点击
|
|
* @param {Object} index
|
|
*/
|
|
itemClick(index) {
|
|
this.chooseCardIndex = index
|
|
this.choosePriceIndex = 0
|
|
},
|
|
/**
|
|
* 切换选中的会员卡付款类型
|
|
* @param {Object} index
|
|
*/
|
|
changePriceIndex(index) {
|
|
this.choosePriceIndex = index
|
|
},
|
|
/**
|
|
* 阅读会员协议
|
|
*/
|
|
// 查看相关协议
|
|
handleUserAgrement(site) {
|
|
this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.member-card-box {
|
|
width: 100%;
|
|
padding-top: calc(90rpx + var(--status-bar-height));
|
|
color: #363636;
|
|
font-size: 29rpx;
|
|
background-color: #262626;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.main-body {
|
|
width: 100%;
|
|
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 90rpx);
|
|
overflow-y: scroll;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.vip-box {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding-bottom: 20rpx;
|
|
|
|
.dl-menu-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
color: #888888;
|
|
padding-top: 20rpx;
|
|
|
|
.dl-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
margin: 0 20rpx;
|
|
padding-bottom: 15rpx;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
|
|
.click {
|
|
color: white;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid white;
|
|
}
|
|
}
|
|
|
|
.card-detail-box {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
padding: 40rpx 20rpx 30rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
border: 1rpx solid #96948C;
|
|
background-color: #1A1A1A;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.price-box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.price-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 33%;
|
|
padding: 30rpx 20rpx;
|
|
color: #FAE4C8;
|
|
background-color: #302D29;
|
|
border-radius: 25rpx;
|
|
padding: 30rpx 20rpx;
|
|
position: relative;
|
|
|
|
.hot-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 0;
|
|
}
|
|
|
|
.text1 {
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.text2 {
|
|
margin: 15rpx;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
|
|
text {
|
|
font-size: 20rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.text3 {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.margin-left-right {
|
|
margin: 0 25rpx;
|
|
}
|
|
|
|
.choose {
|
|
color: #603B25 !important;
|
|
background-image: linear-gradient(to bottom, #F8DFC0, #EFCBA0);
|
|
}
|
|
}
|
|
|
|
.buy-button {
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
color: #010000;
|
|
background-image: linear-gradient(to right, #F8DFC0, #EFCBA0);
|
|
margin-top: 40rpx;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.xieyi-box {
|
|
width: 100%;
|
|
font-size: 20rpx;
|
|
color: #707070;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20rpx;
|
|
|
|
text {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.rights-box {
|
|
width: 100%;
|
|
padding: 0 20rpx 30rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
border: 1rpx solid #96948C;
|
|
background-color: #363636;
|
|
color: #E8CEAD;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.rights-item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.title-left {
|
|
width: 260rpx;
|
|
padding: 20rpx 0 20rpx 20rpx;
|
|
}
|
|
|
|
.value-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item-bg {
|
|
font-size: 24rpx;
|
|
background-color: #42403E;
|
|
border-radius: 15rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.yellow-bg {
|
|
background-color: #F3D2A6;
|
|
border-radius: 0 15rpx 15rpx 0;
|
|
color: #3A3A38;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |