medical-mall/components/home/HomeServiceContent.uvue

<template>
	<view class="service-content">
		<view class="hero-card">
			<view>
				<text class="hero-title">居家服务</text>
				<text class="hero-desc">围绕护理、康复、陪诊、助餐和健康管理，先把用户最常用的入口集中到首页。</text>
			</view>
			<view class="hero-badge">
				<text class="hero-badge-text">医养到家</text>
			</view>
		</view>

		<scroll-view class="service-filter-scroll" scroll-x="true" :show-scrollbar="false">
			<view class="service-filter-row">
				<view
					v-for="item in categories"
					:key="item.id"
					:class="['service-filter-item', activeCategory == item.id ? 'service-filter-item-active' : '']"
					@click="emit('change-category', item.id)"
				>
					<text :class="['service-filter-text', activeCategory == item.id ? 'service-filter-text-active' : '']">{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>

		<view class="service-grid">
			<view
				v-for="item in filteredEntries"
				:key="item.id"
				class="service-entry-card"
				@click="emit('select-entry', item)"
			>
				<view :class="['entry-icon-wrap', item.tone]">
					<text class="entry-icon">{{ item.icon }}</text>
				</view>
				<text class="entry-title">{{ item.title }}</text>
				<text class="entry-desc">{{ item.desc }}</text>
				<text class="entry-link">{{ item.linkText }}</text>
			</view>
		</view>

		<view class="process-card">
			<text class="process-title">服务流程</text>
			<view class="process-row">
				<view v-for="(item, index) in processList" :key="item + '-' + index" class="process-item">
					<view class="process-dot"></view>
					<text class="process-text">{{ item }}</text>
				</view>
			</view>
		</view>

		<view class="tips-card">
			<text class="tips-title">服务提醒</text>
			<text class="tips-text">当前首页先开放用户可直接触达的服务入口，评估、派单、执行等环节会在进入服务单后继续展示。</text>
		</view>
	</view>
</template>

<script setup lang="uts">
import { computed } from 'vue'

type ServiceCategoryItem = {
	id: string
	name: string
}

type ServiceEntryItem = {
	id: string
	title: string
	desc: string
	icon: string
	tone: string
	category: string
	linkText: string
	route: string
}

const props = defineProps({
	activeCategory: {
		type: String,
		default: 'all'
	},
	categories: {
		type: Array<ServiceCategoryItem>,
		default: [] as Array<ServiceCategoryItem>
	},
	entries: {
		type: Array<ServiceEntryItem>,
		default: [] as Array<ServiceEntryItem>
	}
})

const emit = defineEmits<{
	(e: 'change-category', categoryId: string): void
	(e: 'select-entry', entry: ServiceEntryItem): void
}>()

const processList = ['申请', '评估', '方案', '派单', '上门', '验收', '结算']

const filteredEntries = computed((): Array<ServiceEntryItem> => {
	if (props.activeCategory == 'all') {
		return props.entries
	}
	const result: Array<ServiceEntryItem> = []
	for (let i = 0; i < props.entries.length; i++) {
		if (props.entries[i].category == props.activeCategory) {
			result.push(props.entries[i])
		}
	}
	return result
})
</script>

<style scoped>
.service-content {
	padding: 16rpx 20rpx 0;
	box-sizing: border-box;
}

.hero-card,
.process-card,
.tips-card {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 24rpx;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
	margin-bottom: 16rpx;
}

.hero-card {
	background: linear-gradient(135deg, #edf8ff 0%, #f3fff7 100%);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

.hero-title,
.process-title,
.tips-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #16324f;
}

.hero-desc,
.tips-text {
	margin-top: 12rpx;
	font-size: 24rpx;
	line-height: 36rpx;
	color: #5f6f6a;
}

.hero-badge {
	padding: 12rpx 18rpx;
	border-radius: 999rpx;
	background: #e2231a;
}

.hero-badge-text {
	font-size: 22rpx;
	font-weight: 700;
	color: #ffffff;
}

.service-filter-scroll {
	height: 60rpx;
	white-space: nowrap;
}

.service-filter-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-right: 20rpx;
}

.service-filter-item {
	padding: 12rpx 22rpx;
	border-radius: 999rpx;
	background: #ffffff;
	margin-right: 18rpx;
}

.service-filter-item-active {
	background: #ffecec;
}

.service-filter-text {
	font-size: 24rpx;
	color: #4b5563;
}

.service-filter-text-active {
	color: #e2231a;
	font-weight: 700;
}

.service-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 4rpx;
}

.service-entry-card {
	width: 49%;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 24rpx 20rpx;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	margin-bottom: 16rpx;
	display: flex;
	flex-direction: column;
}

.entry-icon-wrap {
	width: 72rpx;
	height: 72rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.entry-icon-wrap.blue {
	background: #e8f4ff;
}

.entry-icon-wrap.green {
	background: #e8f7ef;
}

.entry-icon-wrap.orange {
	background: #fff4e5;
}

.entry-icon-wrap.red {
	background: #ffecec;
}

.entry-icon {
	font-size: 34rpx;
}

.entry-title {
	margin-top: 8rpx;
	font-size: 28rpx;
	font-weight: 700;
	color: #16324f;
	line-height: 1.3;
}

.entry-desc {
	margin-top: 10rpx;
	font-size: 23rpx;
	line-height: 34rpx;
	color: #6b7280;
	min-height: 68rpx;
}

.entry-link {
	margin-top: 12rpx;
	font-size: 22rpx;
	color: #e2231a;
	font-weight: 700;
}

.process-row {
	margin-top: 18rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.process-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10rpx 14rpx;
	border-radius: 999rpx;
	background: #f5f8fb;
	margin-right: 18rpx;
	margin-bottom: 18rpx;
}

.process-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 6rpx;
	background: #09c39d;
	margin-right: 8rpx;
}

.process-text {
	font-size: 22rpx;
	color: #4b5563;
}
</style>