Files
gaoYuJournal/miniprogram/pages/main/travel-location-editor/index.wxml
2025-12-16 16:57:49 +08:00

273 lines
7.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--pages/main/travel-location-editor/index.wxml-->
<t-navbar title="{{mode === 'create' ? '添加地点' : '编辑地点'}}">
<text slot="left" bindtap="cancel">取消</text>
</t-navbar>
<scroll-view class="travel-location-editor" type="custom" scroll-y show-scrollbar="{{false}}">
<view class="content">
<view wx:if="{{isLoading}}" class="loading">
<t-loading theme="dots" size="40rpx" />
<text class="text">加载中...</text>
</view>
<block wx:else>
<t-cell-group class="section">
<view slot="title" class="title">位置信息</view>
<t-cell title="地点类型" arrow bind:click="showLocationTypePicker">
<view slot="note" class="black">{{locationTypes[locationTypeIndex].label}}</view>
</t-cell>
<t-cell class="location" required arrow bind:click="chooseLocation">
<view slot="title" class="title">位置</view>
<view slot="note" class="black">{{location}}</view>
</t-cell>
</t-cell-group>
<t-cell-group class="section">
<view slot="title" class="title">基本信息</view>
<t-input
class="input"
placeholder="请输入地点名称"
model:value="{{title}}"
label="标题"
maxlength="50"
/>
<t-textarea
class="textarea"
placeholder="添加地点说明(选填)"
model:value="{{description}}"
maxlength="500"
indicator
>
<text slot="label">说明</text>
</t-textarea>
</t-cell-group>
<t-cell-group class="section">
<view slot="title" class="title">详细信息</view>
<t-input
model:value="{{amount}}"
placeholder="0"
label="费用"
suffix="元"
align="right"
/>
<t-cell title="需要身份证">
<view slot="right-icon">
<switch checked="{{requireIdCard}}" bindchange="onChangeRequireIdCard" />
</view>
</t-cell>
<t-cell title="需要预约">
<view slot="right-icon">
<switch checked="{{requireAppointment}}" bindchange="onChangeRequireAppointment" />
</view>
</t-cell>
<t-cell title="重要程度">
<view slot="right-icon">
<t-rate
value="{{importance}}"
count="{{5}}"
size="24px"
bind:change="onChangeImportance"
/>
</view>
</t-cell>
<t-cell title="评分">
<view slot="right-icon">
<t-rate
value="{{score}}"
count="{{5}}"
size="24px"
bind:change="onChangeScore"
/>
</view>
</t-cell>
</t-cell-group>
<view class="section media">
<view class="gallery">
<!-- 创建模式mediaList 显示新选择的媒体 -->
<block wx:if="{{mode === 'create'}}">
<block wx:for="{{mediaList}}" wx:key="index">
<view class="item">
<!-- 图片 -->
<image
wx:if="{{item.type === mediaItemTypeEnum.IMAGE}}"
src="{{item.path}}"
class="thumbnail"
mode="aspectFill"
bindtap="preview"
data-index="{{index}}"
data-new-media="{{true}}"
></image>
<!-- 视频 -->
<view wx:if="{{item.type === mediaItemTypeEnum.VIDEO}}" class="video-container">
<image
src="{{item.thumbPath}}"
class="thumbnail"
mode="aspectFill"
bindtap="preview"
data-index="{{index}}"
data-new-media="{{true}}"
></image>
<t-icon class="play-icon" name="play" />
</view>
<!-- 删除 -->
<t-icon
class="delete"
name="close"
bindtap="deleteMedia"
data-index="{{index}}"
data-new-media="{{true}}"
/>
</view>
</block>
</block>
<!-- 编辑模式mediaList 显示现有附件newMediaList 显示新添加的附件 -->
<block wx:else>
<!-- 现有附件 -->
<block wx:for="{{mediaList}}" wx:key="attachmentId">
<view class="item">
<!-- 图片 -->
<image
wx:if="{{item.type === mediaItemTypeEnum.IMAGE}}"
src="{{item.thumbURL}}"
class="thumbnail"
mode="aspectFill"
bindtap="preview"
data-index="{{index}}"
data-new-media="{{false}}"
></image>
<!-- 视频 -->
<view wx:if="{{item.type === mediaItemTypeEnum.VIDEO}}" class="video-container">
<image
src="{{item.thumbURL}}"
class="thumbnail"
mode="aspectFill"
bindtap="preview"
data-index="{{index}}"
data-new-media="{{false}}"
></image>
<t-icon class="play-icon" name="play" />
</view>
<!-- 删除 -->
<t-icon
class="delete"
name="close"
bindtap="deleteMedia"
data-index="{{index}}"
data-new-media="{{false}}"
/>
</view>
</block>
<!-- 新选择附件 -->
<block wx:for="{{newMediaList}}" wx:key="index">
<view class="item new-item">
<!-- 图片 -->
<image
wx:if="{{item.type === mediaItemTypeEnum.IMAGE}}"
src="{{item.path}}"
class="thumbnail"
mode="aspectFill"
bindtap="preview"
data-index="{{index}}"
data-new-media="{{true}}"
></image>
<!-- 视频 -->
<view wx:if="{{item.type === mediaItemTypeEnum.VIDEO}}" class="video-container">
<image
src="{{item.thumbPath}}"
class="thumbnail"
mode="aspectFill"
bindtap="preview"
data-index="{{index}}"
data-new-media="{{true}}"
></image>
<t-icon class="play-icon" name="play" />
</view>
<!-- 新增标识 -->
<t-icon class="new-badge" name="add" />
<!-- 删除 -->
<t-icon
class="delete"
name="close"
bindtap="deleteNewMedia"
data-index="{{index}}"
data-new-media="{{true}}"
/>
</view>
</block>
</block>
<!-- 添加按钮 -->
<t-button
class="item add"
theme="primary"
plain="true"
disabled="{{isSaving}}"
bind:tap="addMedia"
>
<t-icon name="add" />
</t-button>
</view>
</view>
<!-- 上传进度提示 -->
<view wx:if="{{isUploading}}" class="upload-info">
<t-loading theme="circular" size="32rpx" />
<text class="upload-text">{{uploadInfo}}</text>
</view>
<!-- 按钮 -->
<view class="submit-section">
<t-button
wx:if="{{mode === 'edit'}}"
class="delete-btn"
theme="danger"
variant="outline"
size="large"
bind:tap="deleteLocation"
disabled="{{isSaving || isUploading}}"
>
删除
</t-button>
<t-button
class="submit-btn"
theme="primary"
size="large"
bind:tap="submit"
loading="{{isSaving}}"
disabled="{{isSaving || isUploading}}"
>
{{mode === 'create' ? '创建地点' : '保存修改'}}
</t-button>
</view>
</block>
</view>
</scroll-view>
<!-- 地点类型选择器 -->
<t-picker
visible="{{locationTypePickerVisible}}"
value="{{locationTypeIndex}}"
cancelBtn="取消"
confirmBtn="确认"
bind:confirm="onPickerConfirm"
bind:cancel="onPickerCancel"
>
<t-picker-item options="{{locationTypes}}" />
</t-picker>
<!-- 删除确认对话框 -->
<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>