101 lines
2.2 KiB
Vue
101 lines
2.2 KiB
Vue
<template>
|
|
<view
|
|
class="item-wrapper relative mt-[32rpx]"
|
|
:style="`--start-color: ${startColor}; --end-color: ${endColor}`"
|
|
@click="toAssessmentPage"
|
|
>
|
|
<view
|
|
class="flag text-[22rpx] text-center absolute top-0 right-0"
|
|
:class="{ free: item.isFree }"
|
|
>
|
|
{{ isFree ? '免费' : 'VIP' }}
|
|
</view>
|
|
<view class="flex items-stretch gap-[30rpx] justify-between">
|
|
<view class="flex flex-col gap-[29rpx] mt-[16rpx]">
|
|
<view class="text-[#333] text-[40rpx] font-semibold">{{ item.name }}</view>
|
|
<view class="text-[24rpx] text-[#999] line-clamp-3">
|
|
{{ item.summary }}
|
|
</view>
|
|
</view>
|
|
|
|
<image
|
|
:src="item.minImg"
|
|
mode="scaleToFill"
|
|
class="w-[240rpx] h-[240rpx] min-w-[240rpx] min-h-[240rpx]"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useUserStore } from '@/store/user'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const props = defineProps({
|
|
isFree: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
item: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
startColor: {
|
|
type: String,
|
|
default: '#e5f2fa',
|
|
},
|
|
endColor: {
|
|
type: String,
|
|
default: '#dae8fa',
|
|
},
|
|
})
|
|
|
|
const toAssessmentPage = () => {
|
|
if (!userStore.userInfo.openid) {
|
|
uni.navigateTo({
|
|
url: '/login-sub/index',
|
|
})
|
|
return
|
|
}
|
|
if (props.item.isFree) {
|
|
uni.navigateTo({
|
|
url: `/pages-sub/evaluation/assessmentPage?id=${props.item.id}&name=${props.item.name}`,
|
|
})
|
|
} else if (userStore.userInfo.estimatedAchievement.isVIP) {
|
|
uni.navigateTo({
|
|
url: `/pages-sub/evaluation/assessmentPage?id=${props.item.id}&name=${props.item.name}`,
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '请先开通VIP',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.item-wrapper {
|
|
background: linear-gradient(90deg, var(--start-color) 0%, var(--end-color) 100%);
|
|
border-radius: 18rpx;
|
|
padding: 32rpx;
|
|
|
|
.flag {
|
|
width: 64rpx;
|
|
height: 32rpx;
|
|
|
|
border-radius: 0rpx 16rpx 0rpx 16rpx;
|
|
}
|
|
.free {
|
|
background: linear-gradient(51deg, #00c3fc 0%, #00acf7 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.vip {
|
|
background: linear-gradient(229deg, #fab55e 0%, #ffeec3 100%);
|
|
color: #663800;
|
|
}
|
|
}
|
|
</style>
|