gaoYuJournal/miniprogram/pages/main/travel-location-detail/index.wxml

<!--pages/main/travel-location-detail/index.wxml-->
<view class="custom-navbar">
	<t-navbar title="地点详情" leftArrow bind:go-back="goBack">
		<view slot="right" class="edit-btn" bind:tap="toEdit">
			<t-icon name="edit" size="24px" />
		</view>
	</t-navbar>
</view>

<view class="travel-location-detail setting-bg">
	<t-loading wx:if="{{isLoading}}" theme="dots" size="40rpx" />
	<view wx:elif="{{errorMessage}}" class="status-card">
		<t-empty icon="error-circle" description="{{errorMessage}}">
			<t-button size="small" theme="primary" variant="outline" bind:tap="retryFetch">
				重新加载
			</t-button>
		</t-empty>
	</view>
	<view wx:elif="{{!location}}" class="status-card">
		<t-empty icon="location" description="暂无地点信息" />
	</view>
	<view wx:else class="content">
		<!-- 标题 -->
		<view class="section title">
			<text class="title-text">{{location.title || '未命名地点'}}</text>
		</view>
		<!-- 位置信息 -->
		<t-cell-group wx:if="{{location.lat !== undefined && location.lng !== undefined}}" class="section location">
			<view slot="title" class="title">位置信息</view>
			<t-cell
				left-icon="{{locationTypeIcons[location.type]}}"
				title="类型"
				note="{{locationTypeLabels[location.type]}}"
			/>
			<t-cell class="map">
				<map
					slot="description"
					class="instance"
					latitude="{{location.lat}}"
					longitude="{{location.lng}}"
					markers="{{mapMarkers}}"
					scale="15"
					show-location
				>
					<cover-view slot="callout">
						<cover-view class="marker" marker-id="0" style="--title-length: {{location.title.length}}">
							{{location.title || '地点'}}
						</cover-view>
					</cover-view>
				</map>
			</t-cell>
			<t-cell
				left-icon="location"
				title="{{location.location || '位置信息'}}"
				arrow
				bind:tap="navigate"
			/>
		</t-cell-group>
		<!-- 基础信息 -->
		<t-cell-group class="section info">
			<view slot="title" class="title">基础信息</view>
			<t-cell wx:if="{{location.amount !== undefined && location.amount !== null}}" left-icon="money" title="费用">
				<view slot="note">¥{{location.amount}}</view>
			</t-cell>
			<t-cell left-icon="verify" title="身份证">
				<view slot="note" class="{{location.requireIdCard ? 'red' : ''}}">
					{{location.requireIdCard ? '需要' : '无需'}}
				</view>
			</t-cell>
			<t-cell left-icon="calendar" title="预约">
				<view slot="note" class="{{location.requireAppointment ? 'red' : ''}}">
					{{location.requireAppointment ? '需要' : '无需'}}
				</view>
			</t-cell>
			<t-cell wx:if="{{location.score !== undefined && location.score !== null}}" left-icon="star" title="评分">
				<view slot="note">
					<t-rate value="{{location.score}}" count="{{5}}" size="20px" readonly />
				</view>
			</t-cell>
			<t-cell wx:if="{{location.importance !== undefined && location.importance !== null}}" left-icon="chart-bubble" title="重要程度">
				<view slot="note">
					<t-rate value="{{location.importance}}" count="{{5}}" size="20px" readonly />
				</view>
			</t-cell>
		</t-cell-group>
		<!-- 详细说明 -->
		<t-cell-group wx:if="{{location.description}}" class="section">
			<view slot="title" class="title">详细说明</view>
			<t-cell title="{{location.description}}" />
		</t-cell-group>
		<!-- 照片/视频 -->
		<t-cell-group wx:if="{{location.mediaItems && 0 < location.mediaItems.length}}" class="section media">
			<view slot="title" class="title">照片视频</view>
			<t-cell>
				<view slot="title" class="media-grid">
					<view
						wx:for="{{location.mediaItems}}"
						wx:key="attachmentId"
						class="media-item"
						bind:tap="preview"
						data-index="{{index}}"
					>
						<image
							wx:if="{{item.type === mediaItemTypeEnum.IMAGE}}"
							src="{{item.thumbURL}}"
							class="thumbnail"
							mode="aspectFill"
						></image>
						<view wx:if="{{item.type === mediaItemTypeEnum.VIDEO}}" class="video-container">
							<image src="{{item.thumbURL}}" class="thumbnail" mode="aspectFill"></image>
							<t-icon class="play-icon" name="play-circle-filled" size="48px" />
						</view>
					</view>
				</view>
			</t-cell>
		</t-cell-group>
		<view class="section navigate">
			<t-button theme="primary" size="large" icon="rocket" block bind:tap="navigate">
				出发导航
			</t-button>
		</view>
		<!-- 操作按钮 -->
		<view class="section action">
			<t-button
				theme="danger"
				variant="outline"
				size="large"
				icon="delete"
				t-class="delete"
				bind:tap="deleteLocation"
			>
				删除
			</t-button>
			<t-button theme="primary" size="large" icon="edit" t-class="edit" bind:tap="toEdit">
				编辑地点
			</t-button>
		</view>
	</view>
</view>

<t-dialog
	visible="{{deleteDialogVisible}}"
	title="删除地点"
	confirm-btn="{{ {content: '删除', variant: 'text', theme: 'danger'} }}"
	cancel-btn="取消"
	bind:confirm="confirmDelete"
	bind:cancel="cancelDelete"
>
	<view slot="content" class="delete-dialog">
		<view class="tips">
			<text>此地点的图片和视频也会同步删除，删除后无法恢复，请输入 "</text>
			<text style="color: var(--theme-error)">确认删除</text>
			<text>" 以继续</text>
		</view>
		<t-input placeholder="请输入：确认删除" model:value="{{deleteConfirmText}}" />
	</view>
</t-dialog>