243 lines
8.4 KiB
Vue
243 lines
8.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<image class="member-back" v-if="tabType == 'month'" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/04/monthMember_back.png" mode="aspectFill"></image>
|
||
<image class="member-back" v-else-if="tabType == 'season'" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/04/member_back.png" mode="aspectFill"></image>
|
||
<image class="member-back" v-else src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/04/yearMember_back.png" mode="aspectFill"></image>
|
||
<view class="tab">
|
||
<view class="tab-item monthColor" :class="{active : tabType == 'month'}" @click="typeClick('month')">月卡会员</view>
|
||
<view class="tab-item seasonColor" :class="{active : tabType == 'season'}" @click="typeClick('season')">季卡会员</view>
|
||
<view class="tab-item yearColor" :class="{active : tabType == 'year'}" @click="typeClick('year')">年卡会员</view>
|
||
</view>
|
||
<view class="rights">
|
||
<view class="member-cont">
|
||
<block v-if="tabType == 'month'">
|
||
<image class="member-title" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/04/monthMember_title.png" mode="widthFix"></image>
|
||
</block>
|
||
<block v-else-if="tabType == 'season'">
|
||
<image class="member-title" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/04/quarterMember_title.png" mode="widthFix"></image>
|
||
<!-- <image v-if="couponPrice" class="member-error" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_cost.png" mode="widthFix"></image> -->
|
||
</block>
|
||
<block v-else>
|
||
<image class="member-title" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/04/yearMember_title.png" mode="widthFix"></image>
|
||
<!-- <image class="member-error" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/yearMember_cost.png" mode="widthFix"></image> -->
|
||
</block>
|
||
</view>
|
||
<view class="member-btn">
|
||
<image class="member-btn-img" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_Btn.png" mode="widthFix"></image>
|
||
<view class="member-btn-text" v-if="can.open" @click="$Router.push({name: 'memberOpen', params:{identity_id: newId}})">点击开通会员</view>
|
||
<block v-else>
|
||
<view class="member-btn-text" v-if="can.renew" @click="$Router.push({name: 'memberOpen', params:{identity_id: newId}})">
|
||
立即续费
|
||
</view>
|
||
<view class="member-btn-text active" v-else>
|
||
{{buttonText}}
|
||
</view>
|
||
</block>
|
||
|
||
<!-- <view class="member-btn-tips" v-if="tabType == 'season'">
|
||
<block v-if="couponPrice">
|
||
<image src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_choose.png" mode="aspectFill"></image>
|
||
您有一张抵值券可抵（￥8640元）
|
||
</block>
|
||
</view>
|
||
<view class="member-btn-tips" v-else>
|
||
<image src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_choose.png" mode="aspectFill"></image>
|
||
开通年度会员享受5.25折
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { identitySee } from '@/apis/interfaces/member'
|
||
import { userIndex } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
identities : '', //身份信息
|
||
userData : '', //用户信息
|
||
tabType : 'month', //会员标签
|
||
can : '', //操作按钮
|
||
buttonText : '', //按钮名字
|
||
notRules : '', //权益
|
||
couponPrice : '' ,//抵值券
|
||
newId : '' //会员id
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取用户信息
|
||
this.userInfo();
|
||
|
||
// 获取身份前置
|
||
this.identityInfo();
|
||
},
|
||
methods: {
|
||
// 用户信息
|
||
userInfo() {
|
||
userIndex().then(res => {
|
||
this.userData = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 身份前置
|
||
identityInfo(){
|
||
// 3为季卡,4为年卡
|
||
let identityId = ''
|
||
if(this.tabType == 'month') {
|
||
identityId = 2
|
||
}else if(this.tabType == 'season') {
|
||
identityId = 3
|
||
} else {
|
||
identityId = 4
|
||
}
|
||
identitySee(identityId).then(res => {
|
||
this.identities = res
|
||
this.notRules = res.not_rules
|
||
this.can = res.can
|
||
this.buttonText = res.buttonText
|
||
this.newId = res.identity_id
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 切换身份
|
||
typeClick(e) {
|
||
this.tabType = e
|
||
// 获取身份前置
|
||
this.identityInfo();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tab {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
height: 90rpx;
|
||
font-weight: 600;
|
||
// .monthColor {
|
||
// background-color: #e27216;
|
||
// border-bottom: 2rpx solid #e27216;
|
||
// }
|
||
// .seasonColor {
|
||
// background-color: #a92021;
|
||
// border-bottom: 2rpx solid #bd3335;
|
||
// }
|
||
// .yearColor {
|
||
// background-color: #2b0a58;
|
||
// border-bottom: 2rpx solid #402663;
|
||
// }
|
||
.tab-item {
|
||
height: 90rpx;
|
||
flex: 2;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
color: #efb480;
|
||
position: relative;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: calc(50% - 40rpx);
|
||
bottom: 0;
|
||
width: 80rpx;
|
||
height: 6rpx;
|
||
background-color: #efb480;
|
||
border-radius: $radius;
|
||
display: none;
|
||
}
|
||
&.active::after {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.member-back {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
text-align: center;
|
||
}
|
||
.rights {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
.member-cont {
|
||
padding: 140rpx $padding $padding;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: calc(70vh + 120rpx);
|
||
.member-title {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
.member-error {
|
||
width: 40%;
|
||
margin-top: -30rpx;
|
||
}
|
||
}
|
||
.member-btn {
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: calc(30vh + 80rpx);;
|
||
left: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
.member-btn-img {
|
||
width: 100%;
|
||
}
|
||
.member-btn-text {
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index: 200;
|
||
color: #fff;
|
||
bottom: 42rpx;
|
||
color: #a21a1e;
|
||
left: 0;
|
||
font-size: $title-size + 6;
|
||
&.active {
|
||
color: #000;
|
||
}
|
||
}
|
||
.member-btn-tips {
|
||
position: absolute;
|
||
text-align: center;
|
||
width: 100%;
|
||
z-index: 2;
|
||
color: #fff;
|
||
color: #f1c39a;
|
||
font-size: $title-size-sm;
|
||
bottom: -40rpx;
|
||
line-height: 34rpx;
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
vertical-align: -4rpx;
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|