修改商详情页UI

pages/mall/consumer/home-service/service-detail.uvue

@@ -21,9 +21,14 @@
 					<text v-for="tag in summaryGuaranteeTags" :key="tag.id" class="summary-tag">{{ tag.label }}</text>
 				</view>
 				<view class="summary-price-row">
-					<text class="summary-price-prefix">¥</text>
-					<text class="summary-price">{{ minPriceText }}</text>
-					<text class="summary-price-unit">起</text>
+					<view class="summary-price-main">
+						<text class="summary-price-prefix">¥</text>
+						<text class="summary-price">{{ minPriceText }}</text>
+						<text class="summary-price-unit">起</text>
+					</view>
+					<view class="summary-favorite-btn" @click="toggleServiceFavorite">
+						<text class="summary-favorite-btn-text">{{ isFavorite ? '已收藏' : '收藏服务' }}</text>
+					</view>
 				</view>
 			</view>
 
@@ -303,6 +308,7 @@ import { createHomeServiceApplication, fetchHomeServiceCatalog, fetchHomeService
 import { shouldUseCareTaskPath } from '@/services/serviceOrderService.uts'
 import { HomeServiceApplicationDraftType, HomeServiceCatalogType, HomeServicePackageType, HomeServiceSelectedAddressType } from '@/types/home-service.uts'
 import { getCurrentUser, getCurrentUserId } from '@/utils/store.uts'
+import { supabaseService } from '@/utils/supabaseService.uts'
 import { goToLogin } from '@/utils/utils.uts'
 import {
 	HomeServiceAgencyType,
@@ -382,6 +388,7 @@ const serviceValidity = ref('预约后 30 天内可服务')
 const serviceSuitableFor = ref('行动不便、术后恢复、慢病随访老人')
 const serviceImageText = ref('照护')
 const serviceExcludeText = ref('高风险处置、住院陪护、急诊陪诊')
+const isFavorite = ref(false)
 
 const bookingDays = ref<Array<BookingDayOptionType>>([])
 const bookingSlots = ref<Array<BookingTimeSlotType>>([])
@@ -782,6 +789,7 @@ async function loadData() {
 	}
 	if (matchedService == null) {
 		setUnavailableServiceState()
+		await syncFavoriteState()
 		return
 	}
 	serviceTitle.value = matchedService.name
@@ -796,11 +804,34 @@ async function loadData() {
 	servicePackages.value = mapServicePackages(packages)
 	if (servicePackages.value.length == 0) {
 		setUnavailableServiceState()
+		await syncFavoriteState()
 		return
 	}
 	const firstPackage = servicePackages.value[0]
 	servicePrice.value = firstPackage.price
 	serviceDuration.value = firstPackage.duration
+	await syncFavoriteState()
+}
+
+async function syncFavoriteState(): Promise<void> {
+	const userId = getCurrentUserId()
+	if (userId == '') {
+		isFavorite.value = false
+		return
+	}
+	isFavorite.value = await supabaseService.checkFavorite(serviceId.value, 'service')
+}
+
+async function toggleServiceFavorite(): Promise<void> {
+	if (!(await ensureLogin())) {
+		return
+	}
+	const nextState = await supabaseService.toggleFavorite(serviceId.value, 'service')
+	isFavorite.value = nextState
+	uni.showToast({
+		title: nextState ? '已收藏服务' : '已取消收藏',
+		icon: nextState ? 'success' : 'none'
+	})
 }
 
 async function ensureLogin(): Promise<boolean> {
@@ -1105,6 +1136,7 @@ function refreshBookingSlots(): void {
 
 onShow(() => {
 	loadCachedSelectedAddress()
+	syncFavoriteState()
 	const now = new Date()
 	const day = selectedDay.value
 	if (day != null) {
@@ -1358,6 +1390,12 @@ onUnload(() => {
 
 .summary-price-row {
 	margin-top: 12rpx;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+
+.summary-price-main {
+	flex-direction: row;
 	align-items: flex-end;
 }
 
@@ -1377,6 +1415,26 @@ onUnload(() => {
 	margin-bottom: 6rpx;
 }
 
+.summary-favorite-btn {
+	min-width: 132rpx;
+	height: 56rpx;
+	padding: 0 22rpx;
+	border-radius: 999rpx;
+	background: #fff3ee;
+	border-width: 1rpx;
+	border-style: solid;
+	border-color: #ffd0c2;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+}
+
+.summary-favorite-btn-text {
+	font-size: 22rpx;
+	color: #d85b34;
+	font-weight: 600;
+}
+
 .form-item {
 	margin-bottom: 24rpx;
 }