81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<view class="vip-card">
|
||
|
|
<view style="flex: 1">
|
||
|
|
<view class="vip-title-row">
|
||
|
|
<image class="vip-icon" src="https://api.ccttiot.com/Vector-1746435740006.png" mode="aspectFit" />
|
||
|
|
<text class="vip-status">{{VipLevel.getName(mch.vipLevel)}}</text>
|
||
|
|
</view>
|
||
|
|
<text class="vip-desc" v-if="mch.vipLevel === VipLevel.VIP0">解锁会员获得更多权益</text>
|
||
|
|
<view class="vip-desc" v-if="[VipLevel.VIP1, VipLevel.VIP2].includes(mch.vipLevel)">普通会员有效期至 {{mch.vip1Time | dv}}</view>
|
||
|
|
<view class="vip-desc" v-if="mch.vipLevel === VipLevel.VIP2">高级会员有效期至 {{mch.vip2Time | dv}}</view>
|
||
|
|
</view>
|
||
|
|
<button class="vip-btn" size="mini" v-if="mch.vipLevel === VipLevel.VIP0" @click="onOpenVip">立即开通</button>
|
||
|
|
<button class="vip-btn" size="mini" v-else @click="onOpenVip">立即续费</button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { VipLevel } from '@/utils/enums'
|
||
|
|
export default {
|
||
|
|
name: 'VipCard',
|
||
|
|
props: {
|
||
|
|
mch: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
VipLevel
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onOpenVip() {
|
||
|
|
this.$tab.navigateTo('/pages/vip/buy')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.vip-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background: linear-gradient(90deg, #F1E5CC 0%, #F3D8C0 39.42%, #F5F0EA 100%);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin: 0 32rpx 32rpx 32rpx;
|
||
|
|
padding: 24rpx 48rpx;
|
||
|
|
position: relative;
|
||
|
|
.vip-title-row {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 24rpx;
|
||
|
|
flex: 1;
|
||
|
|
.vip-icon {
|
||
|
|
width: 32rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
margin-right: 12rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.vip-status {
|
||
|
|
color: #000;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.vip-desc {
|
||
|
|
position: relative;
|
||
|
|
color: #888;
|
||
|
|
font-size: 24rpx;
|
||
|
|
white-space: pre-line;
|
||
|
|
}
|
||
|
|
.vip-btn {
|
||
|
|
background: #fff;
|
||
|
|
color: #6a8cff;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
line-height: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|