preview travel location attach in list
This commit is contained in:
@ -66,6 +66,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.location {
|
.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 {
|
.note {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
|
|||||||
@ -3,8 +3,14 @@
|
|||||||
import Time from "../../../utils/Time";
|
import Time from "../../../utils/Time";
|
||||||
import { TravelApi } from "../../../api/TravelApi";
|
import { TravelApi } from "../../../api/TravelApi";
|
||||||
import { TravelLocationApi } from "../../../api/TravelLocationApi";
|
import { TravelLocationApi } from "../../../api/TravelLocationApi";
|
||||||
|
import config from "../../../config/index";
|
||||||
import { Travel, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TravelLocation, TravelLocationTypeLabel, TravelLocationTypeIcon, TransportationTypeIcon, TravelLocationType } from "../../../types/Travel";
|
import { Travel, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TravelLocation, TravelLocationTypeLabel, TravelLocationTypeIcon, TransportationTypeIcon, TravelLocationType } from "../../../types/Travel";
|
||||||
|
|
||||||
|
interface TravelLocationView extends TravelLocation {
|
||||||
|
/** 预览图 */
|
||||||
|
previewThumb?: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface TravelDetailData {
|
interface TravelDetailData {
|
||||||
/** 出行详情 */
|
/** 出行详情 */
|
||||||
travel: Travel | null;
|
travel: Travel | null;
|
||||||
@ -13,7 +19,7 @@ interface TravelDetailData {
|
|||||||
/** 是否正在加载 */
|
/** 是否正在加载 */
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
/** 地点列表 */
|
/** 地点列表 */
|
||||||
locations: TravelLocation[];
|
locations: TravelLocationView[];
|
||||||
/** 是否正在加载地点 */
|
/** 是否正在加载地点 */
|
||||||
isLoadingLocations: boolean;
|
isLoadingLocations: boolean;
|
||||||
/** 状态标签映射 */
|
/** 状态标签映射 */
|
||||||
@ -140,7 +146,14 @@ Page({
|
|||||||
equalsExample
|
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) {
|
} catch (error) {
|
||||||
console.error("获取地点列表失败:", error);
|
console.error("获取地点列表失败:", error);
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
@ -71,12 +71,17 @@
|
|||||||
class="location"
|
class="location"
|
||||||
wx:for="{{locations}}"
|
wx:for="{{locations}}"
|
||||||
wx:key="id"
|
wx:key="id"
|
||||||
left-icon="{{locationTypeIcons[item.type]}}"
|
|
||||||
title="{{item.title || '未命名地点'}}"
|
title="{{item.title || '未命名地点'}}"
|
||||||
bind:tap="toLocationDetail"
|
bind:tap="toLocationDetail"
|
||||||
data-id="{{item.id}}"
|
data-id="{{item.id}}"
|
||||||
arrow
|
arrow
|
||||||
>
|
>
|
||||||
|
<view slot="left-icon" class="thumb">
|
||||||
|
<image wx:if="{{item.previewThumb}}" class="thumb-img" src="{{item.previewThumb}}" mode="aspectFill" />
|
||||||
|
<view wx:else class="thumb-placeholder">
|
||||||
|
<t-icon name="{{locationTypeIcons[item.type]}}" size="28px" color="var(--theme-wx)" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view slot="note" class="note">{{locationTypeLabels[item.type]}}</view>
|
<view slot="note" class="note">{{locationTypeLabels[item.type]}}</view>
|
||||||
<view slot="description" class="description">
|
<view slot="description" class="description">
|
||||||
<view wx:if="{{item.requireIdCard}}" class="item">
|
<view wx:if="{{item.requireIdCard}}" class="item">
|
||||||
|
|||||||
Reference in New Issue
Block a user