pj_h5_cloud/src/pages/tabbar/integrated.vue

<template>
	<crud-layout bg="/static/page/blue-bg.png">
		<div class="integrated-title-card">
			<div class="integrated-title">综合服务</div>
		</div>
		<div class="service-container-card">
			<div class="service-container">
				<div class="service-grid">
					<div v-for="item in services" :key="item.name" class="service-item" @click="goPage(item)">
						<div class="service-icon-wrapper">
							<image :src="$fileUrl(item.icon)" class="service-icon"  @error="$fileRetry(item.icon)" />
							<view v-if="item.name === 'todo' && todoCount > 0" class="badge">{{ todoCount > 99 ? "99+" :
								todoCount }}</view>
						</div>
						<div class="service-label">{{ item.label }}</div>
					</div>
				</div>
			</div>
		</div>
		<view class="position-absolute bottom-20rpx left-0 right-0 second-text-26 text-center">
			<text>联系热线：</text>
			<text @click="doPhone('18367908152')">18367908152</text>
			&nbsp;
			<text @click="doPhone('15657370065')">15657370065</text>
		</view>
	</crud-layout>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app"
import { ref, onMounted } from "vue"

import integratedApi from "@/sheep/api/integrated"
import { INTEGRATED_ENTRIES } from "@/sheep/constant/integrated-entry"
import { hooks } from "@@/index"

const todoCount = ref(0)

const services = INTEGRATED_ENTRIES.map((e) => ({
	name: e.launchParam,
	label: e.text,
	icon: e.iconPath,
	url: e.pagePath,
}))

// 获取待办数量
async function fetchTodoCount() {
	try {
		const res = await integratedApi.getTodoList({ current: 1, size: 1 })
		const responseData = res as any
		if (responseData.code === 0 && responseData.data) {
			todoCount.value = responseData.data.total || 0
		}
	} catch (error) {
		console.error("获取待办数量失败:", error)
		todoCount.value = 0
	}
}

onLoad(() => {
	const app = getApp()
	app._initTabbar()
})

onMounted(() => {
	fetchTodoCount()
})

function goPage(item) {
	// 访客邀约功能正在开发中
	// if (item.name === "visitor") {
	// 	uni.showToast({
	// 		title: "访客邀约功能正在开发中",
	// 		icon: "none",
	// 		duration: 2000,
	// 	})
	// 	return
	// }

	if (item.url) {
		uni.navigateTo({ url: item.url })
	}
}

// 联系客服
const doPhone = (phone: string) => {
	hooks.useMakePhoneCall(phone)
}
</script>

<style scoped lang="less">
.integrated-title-card {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	margin: 32rpx 24rpx 0 24rpx;
	padding: 0 0 8rpx 0;
}

.integrated-title {
	font-size: 38rpx;
	font-weight: bold;
	color: #222;
	text-align: center;
	padding: 36rpx 0 24rpx 0;
	letter-spacing: 2rpx;
}

.service-container-card {
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	margin: 24rpx;
	padding-bottom: 32rpx;
}

.service-container {
	padding: 32rpx 0 0 0;
	background: transparent;
	border-radius: 16rpx;
}

.service-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 24rpx;
}

.service-item {
	width: 25%;
	margin-bottom: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.2s;
}

.service-item:hover {
	transform: translateY(-6rpx) scale(1.06);
	box-shadow: 0 2rpx 12rpx rgba(25, 118, 210, 0.08);
}

.service-icon-wrapper {
	position: relative;
	margin-bottom: 14rpx;
}

.service-icon {
	width: 92rpx;
	height: 92rpx;
	border-radius: 16rpx;
	background: #f5f7fa;
	box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.04);
	transition: box-shadow 0.2s;
}

.badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	background: #ff6b35;
	color: #fff;
	font-size: 20rpx;
	font-weight: bold;
	min-width: 32rpx;
	height: 32rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8rpx;
	box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.4);
	border: 2rpx solid #fff;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.service-label {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	letter-spacing: 1rpx;
}

body {
	background: #f5f6fa;
}
</style>