fix travel style
This commit is contained in:
Timi
@ -7,164 +7,105 @@
|
||||
</t-navbar>
|
||||
</view>
|
||||
|
||||
<view class="detail-container">
|
||||
<view class="travel-detail setting-bg">
|
||||
<!-- 加载状态 -->
|
||||
<t-loading wx:if="{{isLoading}}" theme="dots" size="40rpx" />
|
||||
|
||||
<!-- 详情内容 -->
|
||||
<view wx:if="{{!isLoading && travel}}" class="content">
|
||||
<!-- 状态标签 -->
|
||||
<view class="status-section">
|
||||
<view class="section status">
|
||||
<t-tag
|
||||
size="large"
|
||||
theme="{{travel.status === 'PLANNING' ? 'default' : travel.status === 'ONGOING' ? 'warning' : 'success'}}"
|
||||
variant="light"
|
||||
variant="outline"
|
||||
icon="{{statusIcons[travel.status]}}"
|
||||
>
|
||||
{{statusLabels[travel.status]}}
|
||||
</t-tag>
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class="title-section">
|
||||
<text class="title">{{travel.title || '未命名旅行'}}</text>
|
||||
</view>
|
||||
|
||||
<view class="section title">{{travel.title || '未命名旅行'}}</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>
|
||||
<t-cell-group class="section info">
|
||||
<view slot="title" class="title">基本信息</view>
|
||||
<t-cell left-icon="time" title="出行时间">
|
||||
<view slot="note">
|
||||
<text wx:if="{{travel.travelDate}}">{{travel.travelDate}} {{travel.travelTime}}</text>
|
||||
<text wx:else class="undecided-value">未定</text>
|
||||
</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>
|
||||
</t-cell>
|
||||
<t-cell left-icon="calendar" title="旅行天数">
|
||||
<view slot="note">
|
||||
<text wx:if="{{travel.days}}">{{travel.days}} 天</text>
|
||||
<text wx:else class="undecided-value">未定</text>
|
||||
</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>
|
||||
|
||||
</t-cell>
|
||||
<t-cell left-icon="{{travel.transportationType === 'PLANE' ? 'flight-takeoff' : travel.transportationType === 'TRAIN' ? 'map-route' : travel.transportationType === 'SELF_DRIVING' ? 'control-platform' : 'location'}}" title="交通方式">
|
||||
<view slot="note">{{transportLabels[travel.transportationType]}}</view>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<!-- 旅行内容 -->
|
||||
<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>
|
||||
<t-cell-group class="section">
|
||||
<view slot="title" class="title">详细说明</view>
|
||||
<t-cell title="{{travel.content}}" />
|
||||
</t-cell-group>
|
||||
<t-cell-group class="section locations">
|
||||
<view slot="title" class="title">地点列表</view>
|
||||
<t-cell>
|
||||
<view slot="right-icon" class="action">
|
||||
<t-icon name="map" size="20px" color="var(--theme-wx)" bind:tap="toMap" />
|
||||
<t-icon name="add" size="20px" color="var(--theme-wx)" bind:tap="toAddLocation" />
|
||||
</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
|
||||
</t-cell>
|
||||
<t-cell wx:if="{{isLoadingLocations}}" class="loading">
|
||||
<t-loading slot="title" theme="dots" size="40rpx" />
|
||||
</t-cell>
|
||||
<block wx:elif="{{0 < locations.length}}">
|
||||
<t-cell
|
||||
class="location"
|
||||
wx:for="{{locations}}"
|
||||
wx:key="id"
|
||||
class="location-item"
|
||||
bind:tap="toEditLocation"
|
||||
left-icon="{{locationTypeIcons[item.type]}}"
|
||||
title="{{item.title || '未命名地点'}}"
|
||||
bind:tap="toLocationDetail"
|
||||
data-id="{{item.id}}"
|
||||
arrow
|
||||
>
|
||||
<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 slot="note" class="note">{{locationTypeLabels[item.type]}}</view>
|
||||
<view slot="description" class="description">
|
||||
<view wx:if="{{item.amount}}" class="item">
|
||||
<t-icon name="money" size="14px" />
|
||||
<text>¥{{item.amount}}</text>
|
||||
</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 wx:if="{{item.requireIdCard}}" class="item">
|
||||
<t-icon name="user" size="14px" />
|
||||
<text>需要身份证</text>
|
||||
</view>
|
||||
<view wx:if="{{item.importance}}" class="item">
|
||||
<t-icon name="chart-bubble" size="14px" />
|
||||
<text>重要程度</text>
|
||||
<view class="stars orange">
|
||||
<t-icon
|
||||
wx:for="{{item.importance}}"
|
||||
wx:for-index="index"
|
||||
wx:key="index"
|
||||
name="star-filled"
|
||||
size="14px"
|
||||
/>
|
||||
</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>
|
||||
|
||||
</t-cell>
|
||||
</block>
|
||||
</t-cell-group>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-section">
|
||||
<view class="section action">
|
||||
<t-button
|
||||
theme="danger"
|
||||
variant="outline"
|
||||
size="large"
|
||||
icon="delete"
|
||||
t-class="delete-btn"
|
||||
t-class="delete"
|
||||
bind:tap="deleteTravel"
|
||||
>
|
||||
删除
|
||||
@ -173,7 +114,7 @@
|
||||
theme="primary"
|
||||
size="large"
|
||||
icon="edit"
|
||||
t-class="edit-btn"
|
||||
t-class="edit"
|
||||
bind:tap="toEdit"
|
||||
>
|
||||
编辑旅行计划
|
||||
@ -186,23 +127,17 @@
|
||||
<t-dialog
|
||||
visible="{{deleteDialogVisible}}"
|
||||
title="删除旅行计划"
|
||||
confirm-btn="删除"
|
||||
confirm-btn="{{ {content: '删除', variant: 'text', theme: 'danger'} }}"
|
||||
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 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