会员
This commit is contained in:
Vinjor
parent
d5070e970f
commit
26245f1099
2
App.vue
2
App.vue
@ -32,5 +32,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/static/scss/index.scss'
|
||||
@import '@/static/scss/index.scss';
|
||||
</style>
|
||||
@ -18,7 +18,10 @@ module.exports = {
|
||||
{
|
||||
title: "用户服务协议",
|
||||
code: "privacy_agreement"
|
||||
}
|
||||
}, {
|
||||
title: "会员协议",
|
||||
code: "member_agreement"
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
<view class="vip-box">
|
||||
<view class="dl-menu-box">
|
||||
<view v-for="(item,index) in memberCardList" @click="itemClick(index)" class="dl-menu"
|
||||
:class="item.id==chooseCardId?'dl-menu click':'dl-menu'">
|
||||
:class="index==chooseCardIndex?'dl-menu click':'dl-menu'">
|
||||
<!-- 这里的图标要换成动态配置的 -->
|
||||
<image src="@/static/mine/huang.png" mode="aspectFit"></image>
|
||||
{{item.cardName}}
|
||||
@ -15,12 +15,24 @@
|
||||
<!-- 会员卡详情 -->
|
||||
<view class="card-detail-box">
|
||||
<view class="price-box">
|
||||
<view class="price-item">
|
||||
<view>年付会员</view>
|
||||
<view><text>¥</text>228</view>
|
||||
<view>折合0.82</view>
|
||||
<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>
|
||||
<!-- 权益展示区 -->
|
||||
@ -62,31 +74,60 @@
|
||||
|
||||
<script>
|
||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
navigationBarVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//当前选中的会员卡ID
|
||||
globalConfig: getApp().globalData.config,
|
||||
ifAgree: 0,
|
||||
//当前选中的会员卡下标
|
||||
chooseCardIndex: 0,
|
||||
//当前选中的会员卡付款下标
|
||||
choosePriceIndex: 0,
|
||||
// 会员卡数组
|
||||
memberCardList: [{
|
||||
id: "1",
|
||||
cardName: "箐英会员",
|
||||
image: "",
|
||||
monthPrice: 28,
|
||||
quarterPrice: 78,
|
||||
yearPrice: 228,
|
||||
dayPrice: 0.82
|
||||
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: "",
|
||||
monthPrice: 28,
|
||||
quarterPrice: 78,
|
||||
yearPrice: 228,
|
||||
dayPrice: 0.82
|
||||
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: [{
|
||||
@ -127,6 +168,21 @@
|
||||
*/
|
||||
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}`)
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -195,7 +251,7 @@
|
||||
.card-detail-box {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
padding: 30rpx 20rpx 30rpx 20rpx;
|
||||
padding: 40rpx 20rpx 30rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #96948C;
|
||||
background-color: #1A1A1A;
|
||||
@ -203,7 +259,95 @@
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user