feat:"完成页面接口的对接"
This commit is contained in:
@@ -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
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
<script setup lang="uts">
|
||||
import { getCaseList } from '@/api/index.uts'
|
||||
import { SOFA_CATEGORIES, PAGE_SIZE } from '@/utils/config.uts'
|
||||
import { SOFA_CATEGORIES, PAGE_SIZE, getServiceTypeName } from '@/utils/config.uts'
|
||||
|
||||
// 分类类型
|
||||
type CategoryItem = {
|
||||
@@ -111,6 +111,7 @@
|
||||
page.value = 1
|
||||
caseList.value = []
|
||||
noMore.value = false
|
||||
console.log(111)
|
||||
fetchCaseList()
|
||||
}
|
||||
|
||||
@@ -121,43 +122,56 @@
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
category: currentCategory.value,
|
||||
serviceType: currentCategory.value != 'all' ? currentCategory.value : undefined,
|
||||
page: page.value,
|
||||
pageSize: PAGE_SIZE
|
||||
limit: PAGE_SIZE,
|
||||
status: 'published'
|
||||
} as UTSJSONObject
|
||||
|
||||
const res = await getCaseList(params)
|
||||
const data = res.data as UTSJSONObject
|
||||
// 适应后端返回格式：{ items: [], total: 0, page: 1, limit: 10 }
|
||||
const list = data['items'] as UTSJSONObject[] || []
|
||||
total.value = data['total'] as number || 0
|
||||
|
||||
const newList = list.map((item) : CaseItem => {
|
||||
return {
|
||||
id: item['id'] as string,
|
||||
title: item['title'] as string,
|
||||
category: item['category'] as string,
|
||||
categoryName: item['categoryName'] as string,
|
||||
coverImage: item['coverImage'] as string,
|
||||
material: item['material'] as string,
|
||||
duration: item['duration'] as string,
|
||||
price: item['price'] as string,
|
||||
views: item['views'] as number,
|
||||
likes: item['likes'] as number
|
||||
} as CaseItem
|
||||
})
|
||||
|
||||
if (page.value == 1) {
|
||||
caseList.value = newList
|
||||
} else {
|
||||
caseList.value = [...caseList.value, ...newList]
|
||||
}
|
||||
|
||||
if (caseList.value.length >= total.value) {
|
||||
noMore.value = true
|
||||
if (res.code == 0 && res.data != null) {
|
||||
const data = res.data as UTSJSONObject
|
||||
// 适应后端返回格式：{ list: [], total: 0, page: 1, pageSize: 10 }
|
||||
const list = data['list'] as UTSJSONObject[] || []
|
||||
total.value = data['total'] as number || 0
|
||||
|
||||
const newList = list.map((item) : CaseItem => {
|
||||
// 优先使用images，其次afterImages，最后beforeImages
|
||||
const images = item['images'] as string[] || []
|
||||
const afterImages = item['afterImages'] as string[] || []
|
||||
const beforeImages = item['beforeImages'] as string[] || []
|
||||
const coverImage = images.length > 0 ? images[0] : (afterImages.length > 0 ? afterImages[0] : (beforeImages.length > 0 ? beforeImages[0] : ''))
|
||||
|
||||
return {
|
||||
id: String(item['id']),
|
||||
title: item['title'] as string,
|
||||
category: item['serviceType'] as string,
|
||||
categoryName: getServiceTypeName(item['serviceType'] as string),
|
||||
coverImage: coverImage,
|
||||
material: item['materials'] as string || '暂无',
|
||||
duration: (item['duration'] as number || 0) + '天',
|
||||
price: item['price'] != null ? '¥' + item['price'] : '面议',
|
||||
views: item['views'] as number || 0,
|
||||
likes: item['likes'] as number || 0
|
||||
} as CaseItem
|
||||
})
|
||||
|
||||
if (page.value == 1) {
|
||||
caseList.value = newList
|
||||
} else {
|
||||
caseList.value = [...caseList.value, ...newList]
|
||||
}
|
||||
|
||||
if (caseList.value.length >= total.value) {
|
||||
noMore.value = true
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取案例列表失败', e)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user