feat:"完成页面接口的对接"

前端/pages/cases/detail.uvue

@@ -40,7 +40,7 @@
 			<view class="compare-section">
 				<before-after 
 					:beforeImage="caseDetail.beforeImages[0] || ''"
-					:afterImage="caseDetail.afterImages[0] || ''"
+					:afterImage="caseDetail.compareAfterImages[0] || ''"
 					:showTitle="true"
 				></before-after>
 			</view>
@@ -102,6 +102,7 @@
 
 <script setup lang="uts">
 	import { getCaseDetail } from '@/api/index.uts'
+	import { getServiceTypeName } from '@/utils/config.uts'
 	
 	// 案例详情类型
 	type CaseDetail = {
@@ -111,6 +112,8 @@
 		categoryName : string
 		beforeImages : string[]
 		afterImages : string[]
+		// 用于对比组件的专用后图（不使用 images 回退）
+		compareAfterImages : string[]
 		description : string
 		material : string
 		duration : string
@@ -131,6 +134,7 @@
 		categoryName: '',
 		beforeImages: [],
 		afterImages: [],
+		compareAfterImages: [],
 		description: '',
 		material: '',
 		duration: '',
@@ -147,38 +151,64 @@
 	const fetchCaseDetail = async () => {
 		try {
 			const res = await getCaseDetail(caseId.value)
-			const data = res.data as UTSJSONObject
+			if (res.code === 0 && res.data != null) {
+				// 处理成功的返回数据
+				const data = res.data as UTSJSONObject
+				
+				// 适配后端返回的字段
+				const images = data['images'] as string[] || []
+				const beforeImages = data['beforeImages'] as string[] || []
+				const afterImages = data['afterImages'] as string[] || []
+				const createdAt = data['createdAt'] as string || ''
+				
+				// 画廊展示：如果afterImages为空，使用images作为回退
+				const displayAfterImages = afterImages.length > 0 ? afterImages : images
+				// 对比组件（before-after）应只使用专用的 afterImages，不回退到 images
+				const compareAfterImages = afterImages.length > 0 ? afterImages : []
 			
-			caseDetail.value = {
-				id: data['id'] as string,
-				title: data['title'] as string,
-				category: data['category'] as string,
-				categoryName: data['categoryName'] as string,
-				beforeImages: data['beforeImages'] as string[],
-				afterImages: data['afterImages'] as string[],
-				description: data['description'] as string,
-				material: data['material'] as string,
-				duration: data['duration'] as string,
-				price: data['price'] as string,
-				views: data['views'] as number,
-				likes: data['likes'] as number,
-				createTime: data['createTime'] as string
-			} as CaseDetail
-			
-			// 更新标题
-			uni.setNavigationBarTitle({
-				title: caseDetail.value.title
+				caseDetail.value = {
+					id: String(data['id']),
+					title: data['title'] as string,
+					category: data['serviceType'] as string || '',
+					categoryName: getServiceTypeName(data['serviceType'] as string),
+					beforeImages: beforeImages,
+					afterImages: displayAfterImages,
+					compareAfterImages: compareAfterImages,
+					description: data['description'] as string,
+					material: data['materials'] as string || '优质材料',
+					duration: (data['duration'] as number || 0) + '天',
+					price: data['price'] != null ? '¥' + data['price'] : '面议',
+					views: data['views'] as number || 0,
+					likes: data['likes'] as number || 0,
+					createTime: createdAt.split('T')[0] || ''
+				} as CaseDetail
+				
+				// 更新标题
+				uni.setNavigationBarTitle({
+					title: caseDetail.value.title
+				})
+			} else {
+				uni.showToast({
+					title: res.message || '加载失败',
+					icon: 'none'
+				})
+			}
+		} catch (error) {
+			console.error('获取案例详情失败:', error)
+			uni.showToast({
+				title: '加载失败',
+				icon: 'none'
 			})
-		} catch (e) {
-			console.error('获取案例详情失败', e)
 		}
 	}
 	
 	// 预览图片
 	const previewImages = (index : number) => {
+		const urls = caseDetail.value.afterImages || []
+		const current = urls[index] || urls[0] || ''
 		uni.previewImage({
-			current: index,
-			urls: caseDetail.value.afterImages
+			current: current,
+			urls: urls
 		})
 	}