gaoYuJournal/miniprogram/pages/main/travel-editor/index.wxml

<!--pages/main/travel-editor/index.wxml-->
<t-navbar title="{{mode === 'create' ? '新建旅行' : '编辑旅行'}}">
	<text slot="left" bindtap="cancel">取消</text>
</t-navbar>

<scroll-view class="container" type="custom" scroll-y show-scrollbar="{{false}}">
	<view class="content">
		<view wx:if="{{isLoading}}" class="loading">
			<t-loading theme="dots" size="40rpx" />
			<text class="loading-text">加载中...</text>
		</view>
		<block wx:else>
			<t-cell-group class="section">
				<t-input
					class="input"
					placeholder="请输入旅行标题"
					model:value="{{title}}"
					maxlength="50"
					borderless
				>
					<text slot="label">标题</text>
				</t-input>
				<t-textarea
					class="textarea"
					placeholder="添加详细说明（选填）"
					model:value="{{content}}"
					maxlength="500"
					indicator
				>
					<text slot="label">内容</text>
				</t-textarea>
			</t-cell-group>
			<t-cell-group class="section">
				<t-cell class="travel-at" title="出行时间">
					<view slot="right-icon" class="travel-at-content">
						<picker wx:if="{{!travelAtUndecided}}" class="picker" mode="date" model:value="{{date}}">
							<view slot="content" class="slot">
								<t-icon name="calendar" size="20px" class="icon" />
								<text>{{date}}</text>
							</view>
						</picker>
						<view wx:else class="slot" bindtap="selectTravelAt">
							<text class="undecided-text">未定</text>
						</view>
						<t-icon
							wx:if="{{!travelAtUndecided}}"
							name="close-circle-filled"
							size="20px"
							class="clear-icon"
							bindtap="clearTravelAt"
						/>
					</view>
				</t-cell>
				<t-cell title="旅行天数" t-class="days-cell">
					<view slot="right-icon" class="days-content">
						<t-stepper
							wx:if="{{!daysUndecided}}"
							theme="filled"
							model:value="{{days}}"
							size="medium"
							min="{{1}}"
							max="{{999}}"
							t-class="stepper"
						/>
						<view wx:else class="slot" bindtap="selectDays">
							<text class="undecided-text">未定</text>
						</view>
						<t-icon
							wx:if="{{!daysUndecided}}"
							name="close-circle-filled"
							size="20px"
							class="clear-icon"
							bindtap="clearDays"
						/>
					</view>
				</t-cell>
				<t-cell title="交通方式">
					<view slot="right-icon">
						<picker
							class="picker"
							mode="selector"
							range="{{transportationTypes}}"
							range-key="label"
							value="{{transportationTypeIndex}}"
							bindchange="onChangeTransportationType"
						>
							<view class="slot">
								<text>{{transportationTypes[transportationTypeIndex].label}}</text>
								<t-icon name="chevron-right" size="20px" class="icon" />
							</view>
						</picker>
					</view>
				</t-cell>
				<t-cell title="状态">
					<view slot="right-icon">
						<picker
							class="picker"
							mode="selector"
							range="{{statuses}}"
							range-key="label"
							value="{{statusIndex}}"
							bindchange="onChangeStatus"
						>
							<view class="slot">
								<text>{{statuses[statusIndex].label}}</text>
								<t-icon name="chevron-right" size="20px" class="icon" />
							</view>
						</picker>
					</view>
				</t-cell>
			</t-cell-group>
			<view wx:if="{{mode === 'create'}}" class="submit-section">
				<t-button
					theme="primary"
					size="large"
					block
					bind:tap="submit"
					disabled="{{isSaving}}"
				>
					创建旅行
				</t-button>
			</view>
			<view wx:else class="submit-section horizontal">
				<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"
					t-class="save-btn"
					bind:tap="submit"
					disabled="{{isSaving}}"
				>
					保存修改
				</t-button>
			</view>
		</block>
	</view>
</scroll-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>