fs-uni-template/components/fs-card/fs-card.vue

<template>
	<view class="fs-card" :class="{ 'fs-card-full': full, 'fs-card-gutter': gutter }" @click="handleClick">
		<view class="fs-card-box" :class="{ 'fs-card-radius': radius, shadow }">
			<view class="fs-card-title" v-if="slots.title || title" :style="titleStyle">
				<slot name="title">{{ title }}</slot>
			</view>
			<view :class="{ 'fs-card-content': contentPadding }"><slot></slot></view>
			<view class="fs-card-ft" v-if="slots.footer"><slot name="footer"></slot></view>
		</view>
	</view>
</template>

<script>
/**
 * 卡片组件
 * @description 卡片组件
 * @property {String} title 标题
 * @property {Object} titleStyle 标题样式
 * @property {Boolean} full 是否通屏
 * @property {Boolean} gutter 是否有下边距
 * @property {Boolean} radius 是否圆角
 * @property {Boolean} shadow 是否带阴影
 * @property {String} link 跳转地址
 * @property {String} linkType 跳转类型
 */
export default {
	name: 'fs-card'
}
</script>

<script setup>
import { useSlots } from 'vue'
const props = defineProps({
	title: String,
	titleStyle: {
		type: Object,
		default() {
			return {}
		}
	},
	full: Boolean,
	gutter: Boolean,
	radius: {
		type: Boolean,
		default: true
	},
	shadow: {
		type: Boolean,
		default: false
	},
	contentPadding: Boolean,
	link: String,
	linkType: {
		type: String,
		default: 'navigateTo'
	}
})

const slots = useSlots()
const emits = defineEmits(['click'])

const handleClick = () => {
	if (props.link) {
		uni[props.linkType]({
			url: props.link
		})
	}
	emits('click')
}
</script>

<style lang="scss" scoped>
.fs-card {
	margin-left: var(--gutter);
	margin-right: var(--gutter);

	&-box {
		background-color: #fff;
		overflow: hidden;
	}
	&-radius {
		border-radius: var(--radius);
	}

	&-title {
		padding: 20rpx var(--gutter);
		border-bottom: 2rpx solid var(--border-color);
	}
	&-ft {
		padding: 20rpx var(--gutter);
		border-top: 2rpx solid var(--border-color);
	}
	&-content {
		padding: 20rpx var(--gutter);
	}

	&-full {
		margin-left: 0;
		margin-right: 0;
	}
	&-gutter {
		margin-bottom: var(--gutter-v);
	}
}
</style>