209 lines
6.2 KiB
Plaintext
209 lines
6.2 KiB
Plaintext
<!--pages/main/travel-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="detail-container">
|
|
<!-- 加载状态 -->
|
|
<t-loading wx:if="{{isLoading}}" theme="dots" size="40rpx" />
|
|
|
|
<!-- 详情内容 -->
|
|
<view wx:if="{{!isLoading && travel}}" class="content">
|
|
<!-- 状态标签 -->
|
|
<view class="status-section">
|
|
<t-tag
|
|
size="large"
|
|
theme="{{travel.status === 'PLANNING' ? 'default' : travel.status === 'ONGOING' ? 'warning' : 'success'}}"
|
|
variant="light"
|
|
icon="{{statusIcons[travel.status]}}"
|
|
>
|
|
{{statusLabels[travel.status]}}
|
|
</t-tag>
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="title-section">
|
|
<text class="title">{{travel.title || '未命名旅行'}}</text>
|
|
</view>
|
|
|
|
<!-- 基本信息 -->
|
|
<view class="info-card">
|
|
<view class="card-title">
|
|
<t-icon name="info-circle" size="20px" class="icon" />
|
|
<text class="text">基本信息</text>
|
|
</view>
|
|
|
|
<view class="info-list">
|
|
<view class="info-item">
|
|
<view class="label">
|
|
<t-icon name="time" size="18px" class="icon" />
|
|
<text class="text">出行时间</text>
|
|
</view>
|
|
<view class="value">{{travel.travelDate}} {{travel.travelTime}}</view>
|
|
</view>
|
|
|
|
<view wx:if="{{travel.days}}" class="info-item">
|
|
<view class="label">
|
|
<t-icon name="calendar" size="18px" class="icon" />
|
|
<text class="text">旅行天数</text>
|
|
</view>
|
|
<view class="value">{{travel.days}} 天</view>
|
|
</view>
|
|
|
|
<view wx:if="{{travel.transportationType}}" class="info-item">
|
|
<view class="label">
|
|
<t-icon name="{{travel.transportationType === 'PLANE' ? 'flight-takeoff' : travel.transportationType === 'TRAIN' ? 'map-route' : travel.transportationType === 'SELF_DRIVING' ? 'control-platform' : 'location'}}" size="18px" class="icon" />
|
|
<text class="text">交通方式</text>
|
|
</view>
|
|
<view class="value">{{transportLabels[travel.transportationType]}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 旅行内容 -->
|
|
<view wx:if="{{travel.content}}" class="content-card">
|
|
<view class="card-title">
|
|
<t-icon name="edit" size="20px" class="icon" />
|
|
<text class="text">详细说明</text>
|
|
</view>
|
|
<view class="content-text">{{travel.content}}</view>
|
|
</view>
|
|
|
|
<!-- 地点列表 -->
|
|
<view class="locations-card">
|
|
<view class="card-title">
|
|
<view class="title-left">
|
|
<t-icon name="location" size="20px" class="icon" />
|
|
<text class="text">地点列表</text>
|
|
</view>
|
|
<view class="title-right">
|
|
<view class="icon-btn" catch:tap="toMap">
|
|
<t-icon name="map" size="20px" color="#5E7CE0" />
|
|
</view>
|
|
<view class="icon-btn" catch:tap="toAddLocation">
|
|
<t-icon name="add" size="20px" color="#5E7CE0" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载中 -->
|
|
<view wx:if="{{isLoadingLocations}}" class="loading-container">
|
|
<t-loading theme="dots" size="40rpx" />
|
|
</view>
|
|
|
|
<!-- 地点列表 -->
|
|
<view wx:elif="{{locations.length > 0}}" class="locations-list">
|
|
<view
|
|
wx:for="{{locations}}"
|
|
wx:key="id"
|
|
class="location-item"
|
|
bind:tap="toEditLocation"
|
|
data-id="{{item.id}}"
|
|
>
|
|
<view class="location-icon">
|
|
<t-icon name="{{locationTypeIcons[item.type]}}" size="24px" color="#5E7CE0" />
|
|
</view>
|
|
<view class="location-content">
|
|
<view class="location-header">
|
|
<text class="location-title">{{item.title || '未命名地点'}}</text>
|
|
<t-tag size="small" variant="light">{{locationTypeLabels[item.type]}}</t-tag>
|
|
</view>
|
|
<view wx:if="{{item.description}}" class="location-description">{{item.description}}</view>
|
|
<view class="location-info">
|
|
<view wx:if="{{item.location}}" class="info-item">
|
|
<t-icon name="location" size="14px" />
|
|
<text>{{item.location}}</text>
|
|
</view>
|
|
<view wx:if="{{item.amount}}" class="info-item">
|
|
<t-icon name="money-circle" size="14px" />
|
|
<text>¥{{item.amount}}</text>
|
|
</view>
|
|
<view wx:if="{{item.requireIdCard}}" class="info-item">
|
|
<t-icon name="user" size="14px" />
|
|
<text>需要身份证</text>
|
|
</view>
|
|
<view wx:if="{{item.score}}" class="info-item">
|
|
<t-icon name="star" size="14px" />
|
|
<text>必要度 {{item.score}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="location-arrow">
|
|
<t-icon name="chevron-right" size="20px" color="#DCDCDC" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view wx:else class="empty-state">
|
|
<t-icon name="location" size="48px" color="#DCDCDC" />
|
|
<text class="empty-text">暂无地点信息</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间信息 -->
|
|
<view class="time-card">
|
|
<view class="time-item">
|
|
<text class="label">创建时间</text>
|
|
<text class="value">{{travel.createdAtFormatted || ''}}</text>
|
|
</view>
|
|
<view wx:if="{{travel.updatedAt && travel.updatedAt !== travel.createdAt}}" class="time-item">
|
|
<text class="label">更新时间</text>
|
|
<text class="value">{{travel.updatedAtFormatted || ''}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="action-section">
|
|
<t-button
|
|
theme="danger"
|
|
variant="outline"
|
|
size="large"
|
|
icon="delete"
|
|
t-class="delete-btn"
|
|
bind:tap="deleteTravel"
|
|
>
|
|
删除
|
|
</t-button>
|
|
<t-button
|
|
theme="primary"
|
|
size="large"
|
|
icon="edit"
|
|
t-class="edit-btn"
|
|
bind:tap="toEdit"
|
|
>
|
|
编辑旅行计划
|
|
</t-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 删除确认对话框 -->
|
|
<t-dialog
|
|
visible="{{deleteDialogVisible}}"
|
|
title="删除旅行计划"
|
|
confirm-btn="删除"
|
|
cancel-btn="取消"
|
|
bind:confirm="confirmDelete"
|
|
bind:cancel="cancelDelete"
|
|
>
|
|
<view class="delete-dialog-content">
|
|
<view class="delete-warning">
|
|
<t-icon name="error-circle" size="48rpx" color="#E34D59" />
|
|
<text class="warning-text">删除后无法恢复，请谨慎操作！</text>
|
|
</view>
|
|
<view class="delete-confirm">
|
|
<text class="confirm-label">请输入"确认删除"以继续：</text>
|
|
<t-input
|
|
placeholder="请输入确认删除"
|
|
model:value="{{deleteConfirmText}}"
|
|
borderless="{{false}}"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</t-dialog>
|