539 lines
12 KiB
Vue
539 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" @click="toOrder()">立即开通</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.cardName}}</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>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||
import {
|
||
baseCardList,
|
||
rightList
|
||
} from '@/api/business/base.js'
|
||
import {
|
||
saveOrder
|
||
} from '@/api/business/member.js'
|
||
import {
|
||
getToken
|
||
} from '@/utils/auth'
|
||
import {
|
||
getCodeUrl,
|
||
getWebAccessTokenAndOpenid,
|
||
gzhLogin
|
||
} from '@/api/wxApi'
|
||
export default {
|
||
components: {
|
||
navigationBarVue
|
||
},
|
||
data() {
|
||
return {
|
||
globalConfig: getApp().globalData.config,
|
||
ifAgree: 0,
|
||
//当前选中的会员卡下标
|
||
chooseCardIndex: 0,
|
||
//当前选中的会员卡付款下标
|
||
choosePriceIndex: 0,
|
||
//用户类型
|
||
userType: '02',
|
||
// 会员卡数组
|
||
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',
|
||
cardName: '非会员'
|
||
}, {
|
||
id: '2',
|
||
cardName: '箐英'
|
||
}, {
|
||
id: '3',
|
||
cardName: '钻石'
|
||
}],
|
||
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
|
||
}
|
||
}]
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
|
||
this.initData(options.userType);
|
||
|
||
//获取url中的search
|
||
let search = location.search.slice(1);
|
||
|
||
let arr = search.split("&");
|
||
let result = {};
|
||
arr.forEach(function(item) {
|
||
let itemArr = item.split('=');
|
||
result[itemArr[0]] = itemArr[1];
|
||
})
|
||
|
||
if (result.code) {
|
||
getWebAccessTokenAndOpenid(result.code).then(res => {
|
||
|
||
gzhLogin(res)
|
||
})
|
||
} else {
|
||
this.toLogin(options.userType)
|
||
}
|
||
|
||
|
||
},
|
||
methods: {
|
||
toLogin(userType) {
|
||
/*#ifdef APP-PLUS*/
|
||
// App端特有的逻辑
|
||
console.log('Running on App-Plus');
|
||
/*#endif*/
|
||
|
||
/*#ifdef H5*/
|
||
// 在浏览器端（H5）执行的逻辑
|
||
if (!getToken()) {
|
||
//未登录状态
|
||
getCodeUrl(userType).then(res => {
|
||
window.location.href = res.codeUrl;
|
||
})
|
||
}
|
||
/*#endif*/
|
||
|
||
/*#ifdef MP-WEIXIN*/
|
||
// 微信小程序端执行的逻辑
|
||
console.log('Running on WeChat Mini Program');
|
||
/*#endif*/
|
||
|
||
},
|
||
/**初始化*/
|
||
initData(userType) {
|
||
if (getToken()) {
|
||
this.userType = userType
|
||
this.getCardList(userType);
|
||
this.getRightsList(userType);
|
||
}
|
||
|
||
},
|
||
|
||
/**获取会员卡列表*/
|
||
getCardList(userType) {
|
||
baseCardList({
|
||
userType: userType
|
||
}).then(res => {
|
||
this.memberCardList = res.data
|
||
}).catch((e) => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
duration: 2000,
|
||
title: e
|
||
});
|
||
})
|
||
},
|
||
/**权益列表*/
|
||
getRightsList(userType) {
|
||
rightList({
|
||
userType: userType
|
||
}).then(res => {
|
||
this.cardList = res.data.cardList
|
||
this.rightsList = res.data.rightsList
|
||
console.log(this.cardList, 'cardList')
|
||
console.log(this.rightsList, 'rightsList')
|
||
}).catch((e) => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
duration: 2000,
|
||
title: e
|
||
});
|
||
})
|
||
},
|
||
/**
|
||
* 菜单点击
|
||
* @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}`)
|
||
},
|
||
/**生成订单*/
|
||
toOrder() {
|
||
let data = {
|
||
userType: this.userType,
|
||
orderType: '01',
|
||
goodsId: this.memberCardList[this.chooseCardIndex].id,
|
||
goodsNum: 1,
|
||
goodsPrice: this.memberCardList[this.chooseCardIndex].priceList[this.choosePriceIndex].price,
|
||
}
|
||
if (this.memberCardList[this.chooseCardIndex].priceList[this.choosePriceIndex].title === '年付会员') {
|
||
data.goodsCycle = '03'
|
||
}
|
||
if (this.memberCardList[this.chooseCardIndex].priceList[this.choosePriceIndex].title === '季付会员') {
|
||
data.goodsCycle = '02'
|
||
}
|
||
if (this.memberCardList[this.chooseCardIndex].priceList[this.choosePriceIndex].title === '月付会员') {
|
||
data.goodsCycle = '01'
|
||
}
|
||
saveOrder(data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
duration: 2000,
|
||
title: '保存成功'
|
||
});
|
||
uni.navigateBack()
|
||
}
|
||
}).catch((e) => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
duration: 2000,
|
||
title: e
|
||
});
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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> |