diff --git a/miniprogram/pages/main/travel-detail/index.less b/miniprogram/pages/main/travel-detail/index.less index 2f4473d..bf40106 100644 --- a/miniprogram/pages/main/travel-detail/index.less +++ b/miniprogram/pages/main/travel-detail/index.less @@ -66,6 +66,31 @@ } .location { + .thumb { + width: 96rpx; + height: 96rpx; + border: 1px solid var(--theme-border-light); + overflow: hidden; + background: var(--theme-bg-page); + flex-shrink: 0; + border-radius: 16rpx; + } + + .thumb-img { + width: 100%; + height: 100%; + } + + .thumb-placeholder { + color: var(--theme-text-secondary); + width: 100%; + height: 100%; + display: flex; + font-size: 24rpx; + background: var(--theme-bg-page); + align-items: center; + justify-content: center; + } .note { width: 2em; diff --git a/miniprogram/pages/main/travel-detail/index.ts b/miniprogram/pages/main/travel-detail/index.ts index ce705d5..5f37916 100644 --- a/miniprogram/pages/main/travel-detail/index.ts +++ b/miniprogram/pages/main/travel-detail/index.ts @@ -3,8 +3,14 @@ import Time from "../../../utils/Time"; import { TravelApi } from "../../../api/TravelApi"; import { TravelLocationApi } from "../../../api/TravelLocationApi"; +import config from "../../../config/index"; import { Travel, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TravelLocation, TravelLocationTypeLabel, TravelLocationTypeIcon, TransportationTypeIcon, TravelLocationType } from "../../../types/Travel"; +interface TravelLocationView extends TravelLocation { + /** 预览图 */ + previewThumb?: string; +} + interface TravelDetailData { /** 出行详情 */ travel: Travel | null; @@ -13,7 +19,7 @@ interface TravelDetailData { /** 是否正在加载 */ isLoading: boolean; /** 地点列表 */ - locations: TravelLocation[]; + locations: TravelLocationView[]; /** 是否正在加载地点 */ isLoadingLocations: boolean; /** 状态标签映射 */ @@ -140,7 +146,14 @@ Page({ equalsExample }); - this.setData({ locations: result.list }); + const locations = result.list.map((location) => { + const previewItem = location.items && 0 < location.items.length ? location.items[0] : undefined; + return { + ...location, + previewThumb: previewItem ? `${config.url}/attachment/read/${previewItem.mongoId}` : undefined + }; + }); + this.setData({ locations }); } catch (error) { console.error("获取地点列表失败:", error); } finally { diff --git a/miniprogram/pages/main/travel-detail/index.wxml b/miniprogram/pages/main/travel-detail/index.wxml index dabbc14..f284434 100644 --- a/miniprogram/pages/main/travel-detail/index.wxml +++ b/miniprogram/pages/main/travel-detail/index.wxml @@ -71,12 +71,17 @@ class="location" wx:for="{{locations}}" wx:key="id" - left-icon="{{locationTypeIcons[item.type]}}" title="{{item.title || '未命名地点'}}" bind:tap="toLocationDetail" data-id="{{item.id}}" arrow > + + + + + + {{locationTypeLabels[item.type]}}