265 lines
6.3 KiB
Vue
265 lines
6.3 KiB
Vue
<template>
|
|
<div
|
|
class="bg w-full h-1229px"
|
|
:style="{ backgroundImage: `url('${current.bg}')` }"
|
|
>
|
|
<div class="text-39px font-bold pt-20px ml-110px text-[#19191A]">
|
|
{{ data.name }}
|
|
</div>
|
|
<div class="ml-78px mt-54px">
|
|
<span class="text-[#E73434] text-157px font-bold">{{
|
|
currentAttr.price
|
|
}}</span>
|
|
<span class="text-[#19191A] ml-28px text-39px font-bold">元</span>
|
|
</div>
|
|
<div class="px-50px">
|
|
<div class="mt-18px flex items-center justify-between">
|
|
<div
|
|
v-if="currentAttr.discount"
|
|
class="bg-[#E73434] text-white text-28px font-bold rounded-4px px-18px h-43px flex items-center"
|
|
>
|
|
{{ currentAttr.discount }}
|
|
</div>
|
|
<div v-else></div>
|
|
<div class="text-28px font-bold text-white line-through">
|
|
原价 {{ currentAttr.origin_price }} 元
|
|
</div>
|
|
</div>
|
|
<div class="mt-20px">
|
|
<van-dropdown-menu class="cu-select" :overlay="true">
|
|
<van-dropdown-item v-model="value" :options="options" />
|
|
</van-dropdown-menu>
|
|
</div>
|
|
<div
|
|
class="mt-40px text-35px text-[#886E43] font-bold"
|
|
:style="{ color: current.color }"
|
|
>
|
|
权益内容
|
|
</div>
|
|
<van-divider class="!my-20px border-[#FFF4E0]" />
|
|
<div class="flex justify-between items-center text-31px text-[#232323]">
|
|
<div>字数上限</div>
|
|
<div>{{ formatNumber(data.equity.words) }}</div>
|
|
</div>
|
|
<div v-if="data.equity.article>0" class="flex justify-between items-center text-31px text-[#232323] mt-10px">
|
|
<div>阅读文章</div>
|
|
<div>{{ data.equity.article=='unlimit' ?'无限制':`${data.equity.article}篇` }}</div>
|
|
</div>
|
|
<van-divider class="!my-20px border-[#FFF4E0]" />
|
|
<div
|
|
class="text-[#886E43] text-35px font-bold"
|
|
:style="{ color: current.color }"
|
|
>
|
|
更多权益
|
|
</div>
|
|
<div
|
|
:style="{ backgroundColor: current.color + 20 }"
|
|
|
|
class="mt-20px bg-[#C1B9AF] py-16px px-20px text-[#695F56] h-370px leading-42px text-28px overflow-hidden overflow-y-auto"
|
|
>
|
|
<div v-html="data.description_html"></div>
|
|
</div>
|
|
<div
|
|
class="grid gap-x-5 mt-40px"
|
|
:class="[data.is_subscribe ? 'grid-cols-2' : 'grid-cols-1']"
|
|
>
|
|
<van-button
|
|
@click="handleSubscribe(0)"
|
|
type="primary"
|
|
:style="{ background: `${current.color} !important` }"
|
|
class="bg-[#786B56] !h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
|
|
>订阅</van-button
|
|
>
|
|
<van-button
|
|
@click="handleSubscribe(1)"
|
|
type="primary"
|
|
v-if="data.is_subscribe"
|
|
:style="{ background: `${current.color} !important` }"
|
|
class="bg-[#786B56] !h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
|
|
>连续订阅</van-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { computed, ref, toRaw } from 'vue'
|
|
import v1 from '@/assets/images/vip_card-01.png'
|
|
import v2 from '@/assets/images/vip_card-02.png'
|
|
import v3 from '@/assets/images/vip_card-03.png'
|
|
import v4 from '@/assets/images/vip_card-04.png'
|
|
|
|
const emit = defineEmits(['subscribe'])
|
|
|
|
const list = [
|
|
{
|
|
name: '试用版',
|
|
bg: v1,
|
|
color: '#786B56',
|
|
},
|
|
{
|
|
name: '普惠版',
|
|
bg: v2,
|
|
color: '#886E43',
|
|
},
|
|
{
|
|
name: '高级版',
|
|
bg: v3,
|
|
color: '#886E43',
|
|
},
|
|
{
|
|
name: '高阶版',
|
|
bg: v3,
|
|
color: '#886E43',
|
|
},
|
|
{
|
|
name: '专业版',
|
|
bg: v4,
|
|
color: '#A14739',
|
|
},
|
|
]
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
})
|
|
|
|
const value = ref('')
|
|
|
|
const current = computed(() => {
|
|
return list.find((item) => item.name == props.data.name) ?? {}
|
|
})
|
|
|
|
const moreEquity = computed(() => {
|
|
let text = ''
|
|
if (props.data.equity.pdf) {
|
|
text += '上传pdf文件、'
|
|
}
|
|
if (props.data.equity.online) {
|
|
text += `在线人数 ${props.data.equity.online}、`
|
|
}
|
|
if (props.data.equity.article) {
|
|
text += `阅读文章数 ${props.data.equity.article}、`
|
|
}
|
|
return text.replace(/、+$/, '')
|
|
})
|
|
|
|
const options = computed(() => {
|
|
const arr = props.data.attrs.map((item, i) => {
|
|
return {
|
|
...item,
|
|
text: item.name,
|
|
value: i,
|
|
}
|
|
})
|
|
if (value.value == '' && arr.length > 0) {
|
|
value.value = arr[0].value
|
|
}
|
|
return arr
|
|
})
|
|
|
|
const currentAttr = computed(() => {
|
|
return options.value.find((item) => item.value == value.value) ?? {}
|
|
})
|
|
|
|
const handleSubscribe = (e) => {
|
|
emit(
|
|
'subscribe',
|
|
{
|
|
data: toRaw(props.data),
|
|
value: value.value,
|
|
isSerial: e,
|
|
},
|
|
e == 1
|
|
)
|
|
}
|
|
|
|
function formatNumber(num, digits = 0) {
|
|
if (num < 10000) {
|
|
return num.toString()
|
|
} else {
|
|
return (num / 10000).toFixed(digits) + '万'
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.bg {
|
|
// background: url('@/assets/images/vip_card-01.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
::v-deep(.cu-select) {
|
|
.ant-select-selector {
|
|
background-color: #a7957e !important;
|
|
border-color: #a7957e;
|
|
color: white;
|
|
}
|
|
.ant-select-arrow {
|
|
color: white;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.cu-select-popup {
|
|
&.ant-select-dropdown
|
|
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
|
background-color: #847663;
|
|
}
|
|
&.ant-select-dropdown
|
|
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
|
|
background-color: #847663;
|
|
}
|
|
&.ant-select-dropdown .ant-select-item {
|
|
color: white;
|
|
}
|
|
}
|
|
.cu-select{
|
|
.van-haptics-feedback:active{
|
|
opacity: 1;
|
|
}
|
|
.van-dropdown-menu__title{
|
|
|
|
}
|
|
.van-cell{
|
|
background-color: #847663;
|
|
color: white;
|
|
.van-badge__wrapper{
|
|
&::before{
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
.van-dropdown-menu__bar{
|
|
height: 79px;
|
|
}
|
|
.van-dropdown-item {
|
|
width: 541px !important;
|
|
left: 101px !important;
|
|
}
|
|
.van-dropdown-menu__item{
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
background-color: #847663;
|
|
color: white;
|
|
.van-ellipsis{
|
|
color: white;
|
|
}
|
|
|
|
}
|
|
.van-dropdown-menu__title--active{
|
|
color: white;
|
|
}
|
|
.van-dropdown-menu__title{
|
|
width: calc(100% - 30px);
|
|
padding:0 30px;
|
|
}
|
|
.van-overlay{
|
|
background: transparent;
|
|
}
|
|
}
|
|
</style>
|