fix travel style
This commit is contained in:
Timi
165
miniprogram/pages/main/travel-location-detail/index.wxml
Normal file
165
miniprogram/pages/main/travel-location-detail/index.wxml
Normal file
@ -0,0 +1,165 @@
|
||||
<!--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 status">
|
||||
<t-tag size="large" theme="primary" variant="light" icon="{{locationTypeIcons[location.type]}}">
|
||||
{{locationTypeLabels[location.type]}}
|
||||
</t-tag>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<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 class="map">
|
||||
<map
|
||||
slot="description"
|
||||
class="mini-map"
|
||||
latitude="{{location.lat}}"
|
||||
longitude="{{location.lng}}"
|
||||
markers="{{mapMarkers}}"
|
||||
scale="15"
|
||||
show-location
|
||||
></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 ? 'warning' : ''}}">
|
||||
{{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 class="section">
|
||||
<view slot="title" class="title">出行记录</view>
|
||||
<t-cell left-icon="flag" title="首次出行">
|
||||
<view slot="note">{{location.firstTravelTime || '未记录'}}</view>
|
||||
</t-cell>
|
||||
<t-cell left-icon="calendar-1" title="最近出行">
|
||||
<view slot="note">{{location.lastTravelTime || '未记录'}}</view>
|
||||
</t-cell>
|
||||
<t-cell left-icon="chart" title="累计次数">
|
||||
<view slot="note">{{location.travelCount || 0}} 次</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 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>
|
||||
Reference in New Issue
Block a user