refactor pages struct
This commit is contained in:
Timi
@ -4,10 +4,12 @@
|
||||
"t-tag": "tdesign-miniprogram/tag/tag",
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-empty": "tdesign-miniprogram/empty/empty",
|
||||
"t-input": "tdesign-miniprogram/input/input",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog",
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
|
||||
},
|
||||
"styleIsolation": "shared",
|
||||
"enablePullDownRefresh": true
|
||||
"styleIsolation": "shared"
|
||||
}
|
||||
149
miniprogram/pages/main/travel/detail/index.less
Normal file
149
miniprogram/pages/main/travel/detail/index.less
Normal file
@ -0,0 +1,149 @@
|
||||
// pages/main/travel/detail/index.less
|
||||
|
||||
.travel-detail {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
background: var(--theme-bg-page);
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
padding-top: 48rpx;
|
||||
flex-direction: column;
|
||||
|
||||
.section {
|
||||
margin-top: 32rpx;
|
||||
|
||||
> .title {
|
||||
color: var(--theme-text-secondary);
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
|
||||
&.status {
|
||||
display: flex;
|
||||
margin-top: 24rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.title {
|
||||
color: var(--theme-text-primary);
|
||||
padding: 24rpx;
|
||||
font-size: 40rpx;
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
background: var(--theme-bg-card);
|
||||
box-shadow: 0 2px 12px var(--theme-shadow-light);
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&.locations {
|
||||
|
||||
.header {
|
||||
padding: 16rpx 32rpx;
|
||||
|
||||
.left-actions {
|
||||
gap: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.type-picker {
|
||||
|
||||
.picker-button {
|
||||
gap: 8rpx;
|
||||
color: var(--theme-wx);
|
||||
border: 1px solid var(--theme-wx);
|
||||
display: flex;
|
||||
padding: 14rpx 24rpx 14rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
background: var(--theme-bg-card);
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
.thumb {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border: 1px solid var(--theme-border-light);
|
||||
overflow: hidden;
|
||||
background: var(--theme-bg-page);
|
||||
flex-shrink: 0;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.thumb-placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
background: var(--theme-bg-page);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.description {
|
||||
column-gap: 24rpx;
|
||||
color: var(--theme-text-secondary);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
gap: 12rpx;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
padding: 2rpx 4rpx;
|
||||
align-items: center;
|
||||
background: var(--theme-bg-page);
|
||||
|
||||
.stars {
|
||||
gap: 8rpx;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.action {
|
||||
gap: 24rpx;
|
||||
display: flex;
|
||||
padding: 24rpx 16rpx 128rpx 16rpx;
|
||||
|
||||
.edit {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.delete {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-dialog {
|
||||
padding: 16rpx 0;
|
||||
|
||||
.tips {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
271
miniprogram/pages/main/travel/detail/index.ts
Normal file
271
miniprogram/pages/main/travel/detail/index.ts
Normal file
@ -0,0 +1,271 @@
|
||||
// pages/main/travel/detail/index.ts
|
||||
|
||||
import Time from "../../../../utils/Time";
|
||||
import { TravelApi } from "../../../../api/TravelApi";
|
||||
import { TravelLocationApi } from "../../../../api/TravelLocationApi";
|
||||
import config from "../../../../config/index";
|
||||
import { Travel, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TravelLocation, TravelLocationTypeLabel, TravelLocationTypeIcon, TransportationTypeIcon, TravelLocationType } from "../../../../types/Travel";
|
||||
|
||||
interface TravelLocationView extends TravelLocation {
|
||||
/** 预览图 */
|
||||
previewThumb?: string;
|
||||
}
|
||||
|
||||
interface TravelDetailData {
|
||||
/** 出行详情 */
|
||||
travel: Travel | null;
|
||||
/** 出行 ID */
|
||||
travelId: string;
|
||||
/** 是否正在加载 */
|
||||
isLoading: boolean;
|
||||
/** 地点列表 */
|
||||
locations: TravelLocationView[];
|
||||
/** 是否正在加载地点 */
|
||||
isLoadingLocations: boolean;
|
||||
/** 状态标签映射 */
|
||||
statusLabels: typeof TravelStatusLabel;
|
||||
/** 状态图标映射 */
|
||||
statusIcons: typeof TravelStatusIcon;
|
||||
/** 交通类型标签映射 */
|
||||
transportLabels: typeof TransportationTypeLabel;
|
||||
/** 交通类型图标映射 */
|
||||
transportIcons: typeof TransportationTypeIcon;
|
||||
/** 地点类型标签映射 */
|
||||
locationTypeLabels: typeof TravelLocationTypeLabel;
|
||||
/** 地点类型图标映射 */
|
||||
locationTypeIcons: typeof TravelLocationTypeIcon;
|
||||
/** 地点类型选项 */
|
||||
locationTypes: string[];
|
||||
/** 选中的地点类型索引 */
|
||||
selectedLocationTypeIndex: number;
|
||||
/** 删除对话框可见性 */
|
||||
deleteDialogVisible: boolean;
|
||||
/** 删除确认文本 */
|
||||
deleteConfirmText: string;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <TravelDetailData>{
|
||||
travel: null,
|
||||
travelId: "",
|
||||
isLoading: true,
|
||||
locations: [],
|
||||
isLoadingLocations: false,
|
||||
statusLabels: TravelStatusLabel,
|
||||
statusIcons: TravelStatusIcon,
|
||||
transportLabels: TransportationTypeLabel,
|
||||
transportIcons: TransportationTypeIcon,
|
||||
locationTypeLabels: TravelLocationTypeLabel,
|
||||
locationTypeIcons: TravelLocationTypeIcon,
|
||||
locationTypes: ["全部", ...Object.values(TravelLocationTypeLabel)],
|
||||
selectedLocationTypeIndex: 0,
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
const { id } = options;
|
||||
if (id) {
|
||||
this.setData({ travelId: id });
|
||||
this.fetchDetail(id);
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: "参数错误",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时刷新地点列表（从编辑页返回时）
|
||||
if (this.data.travelId && !this.data.isLoading) {
|
||||
this.fetchLocations(this.data.travelId);
|
||||
}
|
||||
},
|
||||
|
||||
/** 获取出行详情 */
|
||||
async fetchDetail(id: string) {
|
||||
this.setData({ isLoading: true });
|
||||
|
||||
try {
|
||||
const travel = await TravelApi.getDetail(id);
|
||||
|
||||
// 格式化数据
|
||||
if (travel.travelAt) {
|
||||
travel.travelDate = Time.toDate(travel.travelAt);
|
||||
travel.travelTime = Time.toTime(travel.travelAt);
|
||||
}
|
||||
this.setData({ travel });
|
||||
|
||||
// 获取地点列表
|
||||
this.fetchLocations(id);
|
||||
} catch (error) {
|
||||
console.error("获取出行详情失败:", error);
|
||||
wx.showToast({
|
||||
title: "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
} finally {
|
||||
this.setData({ isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
/** 获取地点列表 */
|
||||
async fetchLocations(travelId: string) {
|
||||
this.setData({ isLoadingLocations: true });
|
||||
|
||||
try {
|
||||
const { selectedLocationTypeIndex, locationTypes } = this.data;
|
||||
|
||||
// 构建查询条件
|
||||
const equalsExample: { [key: string]: number | string } = {
|
||||
travelId: Number(travelId)
|
||||
};
|
||||
|
||||
// 添加类型过滤（索引 0 表示"全部"）
|
||||
if (0 < selectedLocationTypeIndex) {
|
||||
const selectedTypeLabel = locationTypes[selectedLocationTypeIndex];
|
||||
const selectedType = Object.keys(TravelLocationTypeLabel).find(
|
||||
key => TravelLocationTypeLabel[key as TravelLocationType] === selectedTypeLabel
|
||||
) as TravelLocationType | undefined;
|
||||
|
||||
if (selectedType) {
|
||||
equalsExample.type = selectedType;
|
||||
}
|
||||
}
|
||||
|
||||
const result = await TravelLocationApi.getList({
|
||||
index: 0,
|
||||
size: 999,
|
||||
equalsExample
|
||||
});
|
||||
|
||||
const locations = result.list.map((location) => {
|
||||
const previewItem = location.items && 0 < location.items.length ? location.items[0] : undefined;
|
||||
return {
|
||||
...location,
|
||||
previewThumb: previewItem ? `${config.url}/attachment/read/${previewItem.mongoId}` : undefined
|
||||
};
|
||||
});
|
||||
this.setData({ locations });
|
||||
} catch (error) {
|
||||
console.error("获取地点列表失败:", error);
|
||||
} finally {
|
||||
this.setData({ isLoadingLocations: false });
|
||||
}
|
||||
},
|
||||
|
||||
/** 地点类型改变 */
|
||||
onLocationTypeChange(e: WechatMiniprogram.PickerChange) {
|
||||
const index = Number(e.detail.value);
|
||||
this.setData({ selectedLocationTypeIndex: index });
|
||||
// 重新从接口获取过滤后的数据
|
||||
this.fetchLocations(this.data.travelId);
|
||||
},
|
||||
|
||||
/** 编辑出行 */
|
||||
toEdit() {
|
||||
const { travel } = this.data;
|
||||
if (travel && travel.id) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/main/travel/editor/index?id=${travel.id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 新增地点 */
|
||||
toAddLocation() {
|
||||
const { travel } = this.data;
|
||||
if (travel && travel.id) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/main/travel/location-editor/index?travelId=${travel.id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 查看地点详情 */
|
||||
toLocationDetail(e: WechatMiniprogram.BaseEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
const { travel } = this.data;
|
||||
if (id && travel && travel.id) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/main/travel/location-detail/index?id=${id}&travelId=${travel.id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 跳转地图 */
|
||||
toMap() {
|
||||
const { travel } = this.data;
|
||||
if (travel && travel.id) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/main/travel/location-map/index?travelId=${travel.id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 删除出行 */
|
||||
deleteTravel() {
|
||||
this.setData({
|
||||
deleteDialogVisible: true,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消删除 */
|
||||
cancelDelete() {
|
||||
this.setData({
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 确认删除 */
|
||||
confirmDelete() {
|
||||
const inputText = this.data.deleteConfirmText.trim();
|
||||
if (inputText !== "确认删除") {
|
||||
wx.showToast({
|
||||
title: "输入不匹配",
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
deleteDialogVisible: false
|
||||
});
|
||||
this.executeDelete();
|
||||
},
|
||||
|
||||
/** 执行删除 */
|
||||
async executeDelete() {
|
||||
if (!this.data.travel || !this.data.travel.id) return;
|
||||
|
||||
wx.showLoading({ title: "删除中...", mask: true });
|
||||
|
||||
try {
|
||||
await TravelApi.delete(this.data.travel.id);
|
||||
wx.showToast({
|
||||
title: "删除成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
// 错误已由 Network 类处理
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
/** 返回 */
|
||||
goBack() {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
159
miniprogram/pages/main/travel/detail/index.wxml
Normal file
159
miniprogram/pages/main/travel/detail/index.wxml
Normal file
@ -0,0 +1,159 @@
|
||||
<!--pages/main/travel/detail/index.wxml-->
|
||||
<view class="custom-navbar">
|
||||
<t-navbar title="出行详情" leftArrow placeholder 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-detail setting-bg">
|
||||
<!-- 加载状态 -->
|
||||
<t-loading wx:if="{{isLoading}}" theme="dots" size="40rpx" />
|
||||
<!-- 详情内容 -->
|
||||
<view wx:if="{{!isLoading && travel}}" class="content">
|
||||
<!-- 状态标签 -->
|
||||
<view class="section status">
|
||||
<t-tag
|
||||
size="large"
|
||||
theme="{{travel.status === 'PLANNING' ? 'default' : travel.status === 'ONGOING' ? 'warning' : 'success'}}"
|
||||
variant="outline"
|
||||
icon="{{statusIcons[travel.status]}}"
|
||||
>
|
||||
{{statusLabels[travel.status]}}
|
||||
</t-tag>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="section title">{{travel.title || '未命名出行'}}</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>
|
||||
</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>
|
||||
</t-cell>
|
||||
<t-cell left-icon="{{transportIcons[travel.transportationType]}}" title="交通方式">
|
||||
<view slot="note">{{transportLabels[travel.transportationType]}}</view>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<!-- 出行内容 -->
|
||||
<t-cell-group wx:if="{{travel.content}}" 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 class="header">
|
||||
<view slot="left-icon" class="left-actions">
|
||||
<t-button theme="primary" icon="map" size="small" bind:tap="toMap">地图浏览</t-button>
|
||||
<picker class="type-picker" mode="selector" range="{{locationTypes}}" value="{{selectedLocationTypeIndex}}" bind:change="onLocationTypeChange">
|
||||
<view class="picker-button">
|
||||
<text>{{locationTypes[selectedLocationTypeIndex]}}</text>
|
||||
<t-icon class="icon" name="chevron-down" size="16px" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<t-icon slot="right-icon" name="add" size="20px" color="var(--theme-wx)" bind:tap="toAddLocation" />
|
||||
</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"
|
||||
title="{{item.title || '未命名地点'}}"
|
||||
bind:tap="toLocationDetail"
|
||||
data-id="{{item.id}}"
|
||||
arrow
|
||||
>
|
||||
<view slot="left-icon" class="thumb">
|
||||
<image wx:if="{{item.previewThumb}}" class="thumb-img" src="{{item.previewThumb}}" mode="aspectFill" />
|
||||
<view wx:else class="thumb-placeholder">
|
||||
<t-icon name="{{locationTypeIcons[item.type]}}" size="28px" color="var(--theme-wx)" />
|
||||
</view>
|
||||
</view>
|
||||
<view slot="note" class="note">{{locationTypeLabels[item.type]}}</view>
|
||||
<view slot="description" class="description">
|
||||
<view wx:if="{{item.requireIdCard}}" class="item">
|
||||
<t-icon name="user" size="14px" />
|
||||
<text>需要身份证</text>
|
||||
</view>
|
||||
<view wx:if="{{item.requireAppointment}}" class="item">
|
||||
<t-icon name="user" size="14px" />
|
||||
<text>需要预约</text>
|
||||
</view>
|
||||
<view wx:if="{{item.amount}}" class="item">
|
||||
<t-icon name="money" size="14px" />
|
||||
<text>¥{{item.amount}}</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>
|
||||
</t-cell>
|
||||
</block>
|
||||
<t-cell wx:else class="empty-state" description="暂无地点信息" />
|
||||
</t-cell-group>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="section action">
|
||||
<t-button
|
||||
theme="danger"
|
||||
variant="outline"
|
||||
size="large"
|
||||
icon="delete"
|
||||
t-class="delete"
|
||||
bind:tap="deleteTravel"
|
||||
>
|
||||
删除
|
||||
</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>
|
||||
17
miniprogram/pages/main/travel/editor/index.json
Normal file
17
miniprogram/pages/main/travel/editor/index.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "tdesign-miniprogram/image/image",
|
||||
"t-input": "tdesign-miniprogram/input/input",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog",
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading",
|
||||
"t-stepper": "tdesign-miniprogram/stepper/stepper",
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
|
||||
},
|
||||
"styleIsolation": "shared"
|
||||
}
|
||||
112
miniprogram/pages/main/travel/editor/index.less
Normal file
112
miniprogram/pages/main/travel/editor/index.less
Normal file
@ -0,0 +1,112 @@
|
||||
// pages/main/travel/editor/index.less
|
||||
|
||||
.travel-editor {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
|
||||
.content {
|
||||
padding-bottom: 64rpx;
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
padding: 128rpx 0;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.loading-text {
|
||||
color: var(--theme-text-secondary);
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 48rpx;
|
||||
|
||||
> .title {
|
||||
color: var(--theme-text-secondary);
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
|
||||
.picker .slot {
|
||||
gap: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.note {
|
||||
color: var(--theme-text-primary);
|
||||
}
|
||||
|
||||
.travel-at-content,
|
||||
.days-content {
|
||||
gap: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.clear-icon {
|
||||
color: var(--theme-text-tertiary);
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
.undecided-text {
|
||||
color: var(--theme-text-tertiary);
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
|
||||
&.decided {
|
||||
--td-cell-vertical-padding: 24rpx;
|
||||
|
||||
.t-cell__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
gap: 24rpx;
|
||||
display: flex;
|
||||
padding: 24rpx 16rpx 48rpx 16rpx;
|
||||
margin-top: 64rpx;
|
||||
flex-direction: column;
|
||||
|
||||
&.horizontal {
|
||||
flex-direction: row;
|
||||
|
||||
.save-btn {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-dialog {
|
||||
padding: 16rpx 0;
|
||||
|
||||
.tips {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
337
miniprogram/pages/main/travel/editor/index.ts
Normal file
337
miniprogram/pages/main/travel/editor/index.ts
Normal file
@ -0,0 +1,337 @@
|
||||
// pages/main/travel/editor/index.ts
|
||||
|
||||
import Time from "../../../../utils/Time";
|
||||
import { TravelApi } from "../../../../api/TravelApi";
|
||||
import { TravelStatus, TransportationType } from "../../../../types/Travel";
|
||||
|
||||
interface TravelEditorData {
|
||||
/** 模式：create 或 edit */
|
||||
mode: "create" | "edit";
|
||||
/** 出行 ID（编辑模式） */
|
||||
id?: number;
|
||||
/** 标题 */
|
||||
title: string;
|
||||
/** 内容 */
|
||||
content: string;
|
||||
/** 出行日期 */
|
||||
date: string;
|
||||
/** 出行时间 */
|
||||
time: string;
|
||||
/** 出行时间是否未定 */
|
||||
travelAtUndecided: boolean;
|
||||
/** 天数 */
|
||||
days: number;
|
||||
/** 天数是否未定 */
|
||||
daysUndecided: boolean;
|
||||
/** 交通类型 */
|
||||
transportationType: TransportationType;
|
||||
/** 状态 */
|
||||
status: TravelStatus;
|
||||
/** 是否正在加载（编辑模式） */
|
||||
isLoading: boolean;
|
||||
/** 是否正在保存 */
|
||||
isSaving: boolean;
|
||||
/** 交通类型选项 */
|
||||
transportationTypes: { label: string; value: TransportationType }[];
|
||||
/** 交通类型选中索引 */
|
||||
transportationTypeIndex: number;
|
||||
/** 状态选项 */
|
||||
statuses: { label: string; value: TravelStatus }[];
|
||||
/** 状态选中索引 */
|
||||
statusIndex: number;
|
||||
/** 删除对话框可见性 */
|
||||
deleteDialogVisible: boolean;
|
||||
/** 删除确认文本 */
|
||||
deleteConfirmText: string;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <TravelEditorData>{
|
||||
mode: "create",
|
||||
id: undefined,
|
||||
title: "",
|
||||
content: "",
|
||||
date: "2025-06-28",
|
||||
time: "16:00",
|
||||
travelAtUndecided: true,
|
||||
days: 1,
|
||||
daysUndecided: true,
|
||||
transportationType: TransportationType.SELF_DRIVING,
|
||||
transportationTypeIndex: 4,
|
||||
status: TravelStatus.PLANNING,
|
||||
statusIndex: 0,
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
transportationTypes: [
|
||||
{ label: "飞机", value: TransportationType.PLANE },
|
||||
{ label: "火车", value: TransportationType.TRAIN },
|
||||
{ label: "汽车", value: TransportationType.CAR },
|
||||
{ label: "轮船", value: TransportationType.SHIP },
|
||||
{ label: "自驾", value: TransportationType.SELF_DRIVING },
|
||||
{ label: "其他", value: TransportationType.OTHER }
|
||||
],
|
||||
statuses: [
|
||||
{ label: "计划中", value: TravelStatus.PLANNING },
|
||||
{ label: "进行中", value: TravelStatus.ONGOING },
|
||||
{ label: "已完成", value: TravelStatus.COMPLETED }
|
||||
],
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
},
|
||||
onLoad(options: any) {
|
||||
// 判断模式：有 ID 是编辑，无 ID 是创建
|
||||
const id = options.id ? parseInt(options.id) : undefined;
|
||||
|
||||
if (id) {
|
||||
// 编辑模式
|
||||
this.setData({
|
||||
mode: "edit",
|
||||
id,
|
||||
isLoading: true
|
||||
});
|
||||
this.loadTravelDetail(id);
|
||||
} else {
|
||||
// 创建模式
|
||||
this.setData({
|
||||
mode: "create",
|
||||
isLoading: false
|
||||
});
|
||||
|
||||
// 设置当前时间
|
||||
const unixTime = new Date().getTime();
|
||||
this.setData({
|
||||
date: Time.toDate(unixTime),
|
||||
time: Time.toTime(unixTime)
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 加载出行详情（编辑模式） */
|
||||
async loadTravelDetail(id: number) {
|
||||
wx.showLoading({ title: "加载中...", mask: true });
|
||||
try {
|
||||
const travel = await TravelApi.getDetail(id);
|
||||
|
||||
// 格式化数据
|
||||
let date = "";
|
||||
let time = "";
|
||||
let travelAtUndecided = true;
|
||||
if (travel.travelAt) {
|
||||
date = Time.toDate(travel.travelAt);
|
||||
time = Time.toTime(travel.travelAt);
|
||||
travelAtUndecided = false;
|
||||
}
|
||||
|
||||
// 判断天数是否未定
|
||||
const daysUndecided = !travel.days;
|
||||
const days = travel.days || 1;
|
||||
|
||||
// 计算交通类型索引
|
||||
const transportationType = travel.transportationType || TransportationType.SELF_DRIVING;
|
||||
const transportationTypeIndex = this.data.transportationTypes.findIndex(
|
||||
item => item.value === transportationType
|
||||
);
|
||||
|
||||
// 计算状态索引
|
||||
const status = travel.status || TravelStatus.PLANNING;
|
||||
const statusIndex = this.data.statuses.findIndex(item => item.value === status);
|
||||
|
||||
this.setData({
|
||||
title: travel.title || "",
|
||||
content: travel.content || "",
|
||||
date,
|
||||
time,
|
||||
travelAtUndecided,
|
||||
days,
|
||||
daysUndecided,
|
||||
transportationType,
|
||||
transportationTypeIndex: transportationTypeIndex >= 0 ? transportationTypeIndex : 4,
|
||||
status,
|
||||
statusIndex: statusIndex >= 0 ? statusIndex : 0,
|
||||
isLoading: false
|
||||
});
|
||||
} catch (error) {
|
||||
wx.showToast({
|
||||
title: "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
},
|
||||
/** 改变交通类型 */
|
||||
onChangeTransportationType(e: any) {
|
||||
const index = e.detail.value;
|
||||
this.setData({
|
||||
transportationTypeIndex: index,
|
||||
transportationType: this.data.transportationTypes[index].value
|
||||
});
|
||||
},
|
||||
/** 改变状态 */
|
||||
onChangeStatus(e: any) {
|
||||
const index = e.detail.value;
|
||||
this.setData({
|
||||
statusIndex: index,
|
||||
status: this.data.statuses[index].value
|
||||
});
|
||||
},
|
||||
/** 切换出行时间未定状态 */
|
||||
toggleTravelAtUndecided(e: any) {
|
||||
this.setData({ travelAtUndecided: e.detail.value });
|
||||
},
|
||||
/** 切换天数未定状态 */
|
||||
toggleDaysUndecided(e: any) {
|
||||
this.setData({ daysUndecided: e.detail.value });
|
||||
},
|
||||
/** 清除出行时间 */
|
||||
clearTravelAt() {
|
||||
this.setData({ travelAtUndecided: true });
|
||||
},
|
||||
/** 清除天数 */
|
||||
clearDays() {
|
||||
this.setData({ daysUndecided: true });
|
||||
},
|
||||
/** 点击未定文字选择时间 */
|
||||
selectTravelAt() {
|
||||
// 设置为已定状态，会自动显示选择器
|
||||
const unixTime = new Date().getTime();
|
||||
this.setData({
|
||||
travelAtUndecided: false,
|
||||
date: Time.toDate(unixTime),
|
||||
time: Time.toTime(unixTime)
|
||||
});
|
||||
},
|
||||
/** 点击未定文字选择天数 */
|
||||
selectDays() {
|
||||
this.setData({
|
||||
daysUndecided: false,
|
||||
days: 1
|
||||
});
|
||||
},
|
||||
/** 取消 */
|
||||
cancel() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
/** 提交/保存 */
|
||||
submit() {
|
||||
// 验证必填字段
|
||||
if (!this.data.title.trim()) {
|
||||
wx.showToast({
|
||||
title: "请输入标题",
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.data.mode === "create") {
|
||||
this.createTravel();
|
||||
} else {
|
||||
this.updateTravel();
|
||||
}
|
||||
},
|
||||
/** 创建出行 */
|
||||
async createTravel() {
|
||||
this.setData({ isSaving: true });
|
||||
|
||||
try {
|
||||
await TravelApi.create({
|
||||
title: this.data.title.trim(),
|
||||
content: this.data.content.trim(),
|
||||
travelAt: this.data.travelAtUndecided ? null : Time.now(),
|
||||
days: this.data.daysUndecided ? null : this.data.days,
|
||||
transportationType: this.data.transportationType,
|
||||
status: this.data.status
|
||||
});
|
||||
wx.showToast({
|
||||
title: "创建成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
this.setData({ isSaving: false });
|
||||
}
|
||||
},
|
||||
/** 更新出行 */
|
||||
async updateTravel() {
|
||||
this.setData({ isSaving: true });
|
||||
try {
|
||||
await TravelApi.update({
|
||||
id: this.data.id!,
|
||||
title: this.data.title.trim(),
|
||||
content: this.data.content.trim(),
|
||||
travelAt: this.data.travelAtUndecided
|
||||
? null
|
||||
: new Date(`${this.data.date}T${this.data.time}:00`).getTime(),
|
||||
days: this.data.daysUndecided ? null : this.data.days,
|
||||
transportationType: this.data.transportationType,
|
||||
status: this.data.status
|
||||
});
|
||||
|
||||
wx.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
this.setData({ isSaving: false });
|
||||
}
|
||||
},
|
||||
/** 删除出行 */
|
||||
deleteTravel() {
|
||||
this.setData({
|
||||
deleteDialogVisible: true,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消删除 */
|
||||
cancelDelete() {
|
||||
this.setData({
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 确认删除 */
|
||||
confirmDelete() {
|
||||
const inputText = this.data.deleteConfirmText.trim();
|
||||
if (inputText !== "确认删除") {
|
||||
wx.showToast({
|
||||
title: "输入不匹配",
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
deleteDialogVisible: false
|
||||
});
|
||||
this.executeDelete();
|
||||
},
|
||||
|
||||
/** 执行删除 */
|
||||
async executeDelete() {
|
||||
if (!this.data.id) return;
|
||||
|
||||
wx.showLoading({ title: "删除中...", mask: true });
|
||||
|
||||
try {
|
||||
await TravelApi.delete(this.data.id);
|
||||
wx.showToast({
|
||||
title: "删除成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack({ delta: 2 });
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
// 错误已由 Network 类处理
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
154
miniprogram/pages/main/travel/editor/index.wxml
Normal file
154
miniprogram/pages/main/travel/editor/index.wxml
Normal file
@ -0,0 +1,154 @@
|
||||
<!--pages/main/travel/editor/index.wxml-->
|
||||
<t-navbar title="{{mode === 'create' ? '新建出行' : '编辑出行'}}" placeholder>
|
||||
<text slot="left" bindtap="cancel">取消</text>
|
||||
</t-navbar>
|
||||
|
||||
<scroll-view class="travel-editor setting-bg" 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">
|
||||
<view slot="title" class="title">基本信息</view>
|
||||
<t-input
|
||||
class="input"
|
||||
placeholder="请输入出行标题"
|
||||
model:value="{{title}}"
|
||||
maxlength="50"
|
||||
>
|
||||
<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">
|
||||
<view slot="title" class="title">详细信息</view>
|
||||
<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="出行天数" class="days {{daysUndecided ? 'undecided' : 'decided'}}">
|
||||
<view slot="right-icon" class="days-content">
|
||||
<t-stepper
|
||||
wx:if="{{!daysUndecided}}"
|
||||
theme="filled"
|
||||
model:value="{{days}}"
|
||||
size="large"
|
||||
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>
|
||||
<picker
|
||||
mode="selector"
|
||||
range="{{transportationTypes}}"
|
||||
range-key="label"
|
||||
value="{{transportationTypeIndex}}"
|
||||
bindchange="onChangeTransportationType"
|
||||
>
|
||||
<t-cell title="交通方式" arrow>
|
||||
<view slot="note" class="note">{{transportationTypes[transportationTypeIndex].label}}</view>
|
||||
</t-cell>
|
||||
</picker>
|
||||
<picker
|
||||
mode="selector"
|
||||
range="{{statuses}}"
|
||||
range-key="label"
|
||||
value="{{statusIndex}}"
|
||||
bindchange="onChangeStatus"
|
||||
>
|
||||
<t-cell title="状态" arrow>
|
||||
<view slot="note" class="note">{{statuses[statusIndex].label}}</view>
|
||||
</t-cell>
|
||||
</picker>
|
||||
</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>
|
||||
@ -1,118 +0,0 @@
|
||||
// pages/main/travel/index.less
|
||||
|
||||
.filter-menu {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
background: var(--theme-bg-overlay);
|
||||
|
||||
.content {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
background: var(--theme-bg-menu);
|
||||
box-shadow: 0 0 12px var(--theme-shadow-medium);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.travels {
|
||||
width: 100vw;
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
|
||||
.travel {
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px var(--theme-shadow-light);
|
||||
transition: all .3s;
|
||||
background: var(--theme-bg-card);
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(.98);
|
||||
box-shadow: 0 2px 8px var(--theme-shadow-light);
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 24rpx;
|
||||
border-bottom: 1px solid var(--theme-border-light);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 24rpx;
|
||||
|
||||
.title {
|
||||
color: var(--theme-text-primary);
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 28rpx;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.meta {
|
||||
gap: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
gap: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.finished {
|
||||
color: var(--theme-text-secondary);
|
||||
padding: 32rpx 0;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fab {
|
||||
right: 32rpx;
|
||||
width: 112rpx;
|
||||
bottom: 120rpx;
|
||||
height: 112rpx;
|
||||
display: flex;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
background: var(--theme-wx);
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, .4);
|
||||
transition: all .3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(.9);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, .3);
|
||||
}
|
||||
}
|
||||
@ -1,176 +0,0 @@
|
||||
// pages/main/travel/index.ts
|
||||
|
||||
import Time from "../../../utils/Time";
|
||||
import { TravelApi } from "../../../api/TravelApi";
|
||||
import { Travel, TravelPage, TravelStatus, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TransportationTypeIcon } from "../../../types/Travel";
|
||||
|
||||
interface TravelData {
|
||||
/** 分页参数 */
|
||||
page: TravelPage;
|
||||
/** 出行列表 */
|
||||
list: Travel[];
|
||||
/** 当前筛选状态 */
|
||||
currentStatus: TravelStatus | "ALL";
|
||||
/** 是否正在加载 */
|
||||
isFetching: boolean;
|
||||
/** 是否已加载完成 */
|
||||
isFinished: boolean;
|
||||
/** 是否显示筛选菜单 */
|
||||
isShowFilterMenu: boolean;
|
||||
/** 菜单位置 */
|
||||
menuTop: number;
|
||||
menuLeft: number;
|
||||
/** 状态标签映射 */
|
||||
statusLabels: typeof TravelStatusLabel;
|
||||
/** 状态图标映射 */
|
||||
statusIcons: typeof TravelStatusIcon;
|
||||
/** 交通类型标签映射 */
|
||||
transportLabels: typeof TransportationTypeLabel;
|
||||
/** 交通类型图标映射 */
|
||||
transportIcons: typeof TransportationTypeIcon;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <TravelData>{
|
||||
page: {
|
||||
index: 0,
|
||||
size: 10
|
||||
},
|
||||
list: [],
|
||||
currentStatus: "ALL",
|
||||
isFetching: false,
|
||||
isFinished: false,
|
||||
isShowFilterMenu: false,
|
||||
menuTop: 0,
|
||||
menuLeft: 0,
|
||||
statusLabels: TravelStatusLabel,
|
||||
statusIcons: TravelStatusIcon,
|
||||
transportLabels: TransportationTypeLabel,
|
||||
transportIcons: TransportationTypeIcon
|
||||
},
|
||||
onLoad() {
|
||||
this.resetAndFetch();
|
||||
},
|
||||
onShow() {
|
||||
// 页面显示时刷新数据（从编辑页返回时）
|
||||
if (0 < this.data.list.length) {
|
||||
this.resetAndFetch();
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
this.setData({
|
||||
isShowFilterMenu: false
|
||||
});
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.resetAndFetch();
|
||||
wx.stopPullDownRefresh();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.fetch();
|
||||
},
|
||||
/** 重置并获取数据 */
|
||||
resetAndFetch() {
|
||||
this.setData({
|
||||
page: {
|
||||
index: 0,
|
||||
size: 10,
|
||||
equalsExample: this.data.currentStatus === "ALL" ? undefined : {
|
||||
status: this.data.currentStatus as TravelStatus
|
||||
}
|
||||
},
|
||||
list: [],
|
||||
isFetching: false,
|
||||
isFinished: false
|
||||
});
|
||||
this.fetch();
|
||||
},
|
||||
/** 获取出行列表 */
|
||||
async fetch() {
|
||||
if (this.data.isFetching || this.data.isFinished) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({ isFetching: true });
|
||||
|
||||
try {
|
||||
const pageResult = await TravelApi.getList(this.data.page);
|
||||
const list = pageResult.list || [];
|
||||
|
||||
if (list.length === 0) {
|
||||
this.setData({ isFinished: true });
|
||||
return;
|
||||
}
|
||||
|
||||
// 格式化数据
|
||||
list.forEach(travel => {
|
||||
if (travel.travelAt) {
|
||||
travel.travelDate = Time.toDate(travel.travelAt);
|
||||
travel.travelTime = Time.toTime(travel.travelAt);
|
||||
}
|
||||
});
|
||||
|
||||
this.setData({
|
||||
page: {
|
||||
...this.data.page,
|
||||
index: this.data.page.index + 1
|
||||
},
|
||||
list: this.data.list.concat(list),
|
||||
isFinished: list.length < this.data.page.size
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("获取出行列表失败:", error);
|
||||
} finally {
|
||||
this.setData({ isFetching: false });
|
||||
}
|
||||
},
|
||||
/** 切换筛选菜单 */
|
||||
toggleFilterMenu() {
|
||||
if (!this.data.isShowFilterMenu) {
|
||||
// 打开菜单时计算位置
|
||||
const query = wx.createSelectorQuery();
|
||||
query.select(".filter-btn").boundingClientRect();
|
||||
query.exec((res) => {
|
||||
if (res[0]) {
|
||||
const { top, left, height } = res[0];
|
||||
this.setData({
|
||||
isShowFilterMenu: true,
|
||||
menuTop: top + height + 16,
|
||||
menuLeft: left
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 关闭菜单
|
||||
this.setData({
|
||||
isShowFilterMenu: false
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 阻止事件冒泡 */
|
||||
stopPropagation() {
|
||||
// 空函数，仅用于阻止事件冒泡
|
||||
},
|
||||
/** 筛选状态 */
|
||||
filterByStatus(e: WechatMiniprogram.BaseEvent) {
|
||||
const status = e.currentTarget.dataset.status as TravelStatus | "ALL";
|
||||
this.setData({
|
||||
currentStatus: status,
|
||||
isShowFilterMenu: false
|
||||
});
|
||||
this.resetAndFetch();
|
||||
},
|
||||
/** 新建出行 */
|
||||
toCreate() {
|
||||
wx.navigateTo({
|
||||
url: "/pages/main/travel-editor/index"
|
||||
});
|
||||
},
|
||||
/** 查看详情 */
|
||||
toDetail(e: WechatMiniprogram.BaseEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/main/travel-detail/index?id=${id}`
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -1,101 +0,0 @@
|
||||
<!--pages/main/travel/index.wxml-->
|
||||
<view class="custom-navbar">
|
||||
<t-navbar title="出行计划">
|
||||
<view slot="left" class="filter-btn" bind:tap="toggleFilterMenu">
|
||||
<t-icon name="filter" size="24px" />
|
||||
</view>
|
||||
</t-navbar>
|
||||
</view>
|
||||
|
||||
<!-- 筛选菜单 -->
|
||||
<view wx:if="{{isShowFilterMenu}}" class="filter-menu" catchtap="toggleFilterMenu">
|
||||
<t-cell-group
|
||||
class="content"
|
||||
theme="card"
|
||||
style="top: {{menuTop}}px; left: {{menuLeft}}px;"
|
||||
catchtap="stopPropagation"
|
||||
>
|
||||
<t-cell
|
||||
title="全部"
|
||||
leftIcon="bulletpoint"
|
||||
bind:tap="filterByStatus"
|
||||
data-status="ALL"
|
||||
rightIcon="{{currentStatus === 'ALL' ? 'check' : ''}}"
|
||||
/>
|
||||
<t-cell
|
||||
title="计划中"
|
||||
leftIcon="calendar"
|
||||
bind:tap="filterByStatus"
|
||||
data-status="PLANNING"
|
||||
rightIcon="{{currentStatus === 'PLANNING' ? 'check' : ''}}"
|
||||
/>
|
||||
<t-cell
|
||||
title="进行中"
|
||||
leftIcon="play-circle"
|
||||
bind:tap="filterByStatus"
|
||||
data-status="ONGOING"
|
||||
rightIcon="{{currentStatus === 'ONGOING' ? 'check' : ''}}"
|
||||
/>
|
||||
<t-cell
|
||||
title="已完成"
|
||||
leftIcon="check-circle"
|
||||
bind:tap="filterByStatus"
|
||||
data-status="COMPLETED"
|
||||
rightIcon="{{currentStatus === 'COMPLETED' ? 'check' : ''}}"
|
||||
/>
|
||||
</t-cell-group>
|
||||
</view>
|
||||
|
||||
<!-- 出行列表 -->
|
||||
<view class="travels">
|
||||
<!-- 空状态 -->
|
||||
<t-empty
|
||||
wx:if="{{!isFetching && list.length === 0}}"
|
||||
icon="travel"
|
||||
description="暂无出行计划"
|
||||
/>
|
||||
<!-- 列表内容 -->
|
||||
<view
|
||||
wx:for="{{list}}"
|
||||
wx:for-item="travel"
|
||||
wx:for-index="travelIndex"
|
||||
wx:key="id"
|
||||
class="travel"
|
||||
bind:tap="toDetail"
|
||||
data-id="{{travel.id}}"
|
||||
>
|
||||
<view class="header">
|
||||
<t-tag
|
||||
theme="{{travel.status === 'PLANNING' ? 'default' : travel.status === 'ONGOING' ? 'warning' : 'success'}}"
|
||||
variant="light"
|
||||
icon="{{statusIcons[travel.status]}}"
|
||||
>
|
||||
{{statusLabels[travel.status]}}
|
||||
</t-tag>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="title">{{travel.title || '未命名出行'}}</view>
|
||||
<view wx:if="{{travel.content}}" class="content">{{travel.content}}</view>
|
||||
<view class="meta">
|
||||
<view wx:if="{{travel.travelDate}}" class="item">
|
||||
<t-icon name="time" size="16px" class="icon" />
|
||||
<text class="text">{{travel.travelDate}}</text>
|
||||
</view>
|
||||
<view wx:if="{{travel.days}}" class="item">
|
||||
<t-icon name="calendar" size="16px" class="icon" />
|
||||
<text class="text">{{travel.days}} 天</text>
|
||||
</view>
|
||||
<view wx:if="{{travel.transportationType}}" class="item">
|
||||
<t-icon name="{{transportIcons[travel.transportationType]}}" size="16px" class="icon" />
|
||||
<text class="text">{{transportLabels[travel.transportationType]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 加载完成提示 -->
|
||||
<view wx:if="{{isFinished && 0 < list.length}}" class="finished">没有更多了</view>
|
||||
</view>
|
||||
<!-- 新建按钮 -->
|
||||
<view class="fab" bind:tap="toCreate">
|
||||
<t-icon name="add" size="24px" color="#fff" />
|
||||
</view>
|
||||
16
miniprogram/pages/main/travel/location-detail/index.json
Normal file
16
miniprogram/pages/main/travel/location-detail/index.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-rate": "tdesign-miniprogram/rate/rate",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-input": "tdesign-miniprogram/input/input",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-empty": "tdesign-miniprogram/empty/empty",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog",
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
|
||||
},
|
||||
"styleIsolation": "shared"
|
||||
}
|
||||
150
miniprogram/pages/main/travel/location-detail/index.less
Normal file
150
miniprogram/pages/main/travel/location-detail/index.less
Normal file
@ -0,0 +1,150 @@
|
||||
// pages/main/travel/location-detail/index.less
|
||||
.travel-location-detail {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
.status-card {
|
||||
padding: 64rpx 24rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
padding-top: 48rpx;
|
||||
flex-direction: column;
|
||||
padding-bottom: 128rpx;
|
||||
|
||||
.section {
|
||||
margin-top: 32rpx;
|
||||
|
||||
> .title {
|
||||
color: var(--theme-text-secondary);
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
|
||||
&.title {
|
||||
color: var(--theme-text-primary);
|
||||
padding: 24rpx;
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
background: var(--theme-bg-card);
|
||||
box-shadow: 0 2px 12px var(--theme-shadow-light);
|
||||
|
||||
.title-text {
|
||||
color: var(--theme-text-primary);
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--theme-text-secondary);
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.location {
|
||||
|
||||
.t-cell__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.map {
|
||||
padding: 0;
|
||||
|
||||
.instance {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
|
||||
.marker {
|
||||
width: calc(var(--title-length) * 28rpx);
|
||||
color: var(--theme-text-primary);
|
||||
padding: 8rpx;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
background: var(--theme-bg-card);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
|
||||
white-space: nowrap;
|
||||
border-radius: 8rpx;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.media {
|
||||
|
||||
.media-grid {
|
||||
gap: 16rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
.media-item {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: rgba(255, 255, 255, .9);
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.navigate {
|
||||
padding: 0 16rpx;
|
||||
margin-top: 90rpx;
|
||||
}
|
||||
|
||||
&.action {
|
||||
gap: 24rpx;
|
||||
display: flex;
|
||||
padding: 0 16rpx;
|
||||
|
||||
.edit {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.delete {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-dialog {
|
||||
padding: 16rpx 0;
|
||||
|
||||
.tips {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
273
miniprogram/pages/main/travel/location-detail/index.ts
Normal file
273
miniprogram/pages/main/travel/location-detail/index.ts
Normal file
@ -0,0 +1,273 @@
|
||||
// pages/main/travel/location-detail/index.ts
|
||||
|
||||
import config from "../../../../config/index";
|
||||
import { TravelLocationApi } from "../../../../api/TravelLocationApi";
|
||||
import { TravelLocation, TravelLocationTypeIcon, TravelLocationTypeLabel } from "../../../../types/Travel";
|
||||
import { MediaAttachType, PreviewImageMetadata } from "../../../../types/Attachment";
|
||||
import { MapMarker, MediaItem, MediaItemType } from "../../../../types/UI";
|
||||
import Toolkit from "../../../../utils/Toolkit";
|
||||
|
||||
interface TravelLocationView extends TravelLocation {
|
||||
/** 媒体列表 */
|
||||
mediaItems?: MediaItem[];
|
||||
}
|
||||
|
||||
interface TravelLocationDetailData {
|
||||
/** 地点详情 */
|
||||
location: TravelLocationView | null;
|
||||
/** 地点 ID */
|
||||
locationId: string;
|
||||
/** 出行 ID */
|
||||
travelId: string;
|
||||
/** 是否正在加载 */
|
||||
isLoading: boolean;
|
||||
/** 错误信息 */
|
||||
errorMessage: string;
|
||||
/** 地点类型标签映射 */
|
||||
locationTypeLabels: typeof TravelLocationTypeLabel;
|
||||
/** 地点类型图标映射 */
|
||||
locationTypeIcons: typeof TravelLocationTypeIcon;
|
||||
/** 媒体类型枚举 */
|
||||
mediaItemTypeEnum: typeof MediaItemType;
|
||||
/** 地图标记 */
|
||||
mapMarkers: MapMarker[];
|
||||
/** 删除对话框可见性 */
|
||||
deleteDialogVisible: boolean;
|
||||
/** 删除确认文本 */
|
||||
deleteConfirmText: string;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <TravelLocationDetailData>{
|
||||
location: null,
|
||||
locationId: "",
|
||||
travelId: "",
|
||||
isLoading: true,
|
||||
errorMessage: "",
|
||||
locationTypeLabels: TravelLocationTypeLabel,
|
||||
locationTypeIcons: TravelLocationTypeIcon,
|
||||
mediaItemTypeEnum: {
|
||||
...MediaItemType
|
||||
},
|
||||
mapMarkers: [],
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
const { id, travelId } = options;
|
||||
if (id) {
|
||||
this.setData({
|
||||
locationId: id,
|
||||
travelId: travelId || ""
|
||||
});
|
||||
this.fetchDetail(id);
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: "参数错误",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时刷新数据（从编辑页返回时）
|
||||
if (this.data.locationId && !this.data.isLoading && this.data.location) {
|
||||
this.fetchDetail(this.data.locationId);
|
||||
}
|
||||
},
|
||||
|
||||
/** 获取地点详情 */
|
||||
async fetchDetail(id: string) {
|
||||
this.setData({
|
||||
isLoading: true,
|
||||
errorMessage: ""
|
||||
});
|
||||
|
||||
try {
|
||||
const location = await TravelLocationApi.getDetail(id);
|
||||
|
||||
const thumbItems = (location.items || []).filter((item) => item.attachType === MediaAttachType.THUMB);
|
||||
const mediaItems: MediaItem[] = [];
|
||||
|
||||
thumbItems.forEach((thumbItem) => {
|
||||
try {
|
||||
const metadata = (typeof thumbItem.metadata === "string" ? JSON.parse(thumbItem.metadata) : thumbItem.metadata) as PreviewImageMetadata;
|
||||
const thumbURL = `${config.url}/attachment/read/${thumbItem.mongoId}`;
|
||||
const sourceURL = `${config.url}/attachment/read/${metadata.sourceMongoId}`;
|
||||
const isVideo = metadata.sourceMimeType?.startsWith("video/");
|
||||
mediaItems.push({
|
||||
type: isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE,
|
||||
thumbURL,
|
||||
sourceURL,
|
||||
size: thumbItem.size || 0,
|
||||
attachmentId: thumbItem.id!
|
||||
});
|
||||
} catch (parseError) {
|
||||
console.warn("解析附件元数据失败", parseError);
|
||||
}
|
||||
});
|
||||
|
||||
// 构建地图标记
|
||||
const mapMarkers: MapMarker[] = [];
|
||||
if (location.lat !== undefined && location.lng !== undefined) {
|
||||
mapMarkers.push({
|
||||
id: 0,
|
||||
latitude: location.lat,
|
||||
longitude: location.lng,
|
||||
width: 24,
|
||||
height: 30,
|
||||
customCallout: {
|
||||
anchorY: -2,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
}
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
location: {
|
||||
...location,
|
||||
mediaItems
|
||||
},
|
||||
travelId: location.travelId ? String(location.travelId) : this.data.travelId,
|
||||
mapMarkers
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("获取地点详情失败:", error);
|
||||
this.setData({
|
||||
errorMessage: "加载失败，请稍后重试"
|
||||
});
|
||||
wx.showToast({
|
||||
title: "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
} finally {
|
||||
this.setData({ isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
/** 重新加载 */
|
||||
retryFetch() {
|
||||
if (this.data.locationId) {
|
||||
this.fetchDetail(this.data.locationId);
|
||||
}
|
||||
},
|
||||
|
||||
/** 编辑地点 */
|
||||
toEdit() {
|
||||
const { location, travelId } = this.data;
|
||||
if (location && location.id) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/main/travel/location-editor/index?id=${location.id}&travelId=${travelId || location.travelId || ""}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 出发（打开地图导航） */
|
||||
navigate() {
|
||||
const { location } = this.data;
|
||||
if (location && location.lat !== undefined && location.lng !== undefined) {
|
||||
wx.openLocation({
|
||||
latitude: location.lat,
|
||||
longitude: location.lng,
|
||||
name: location.title || "目的地",
|
||||
address: location.location || "",
|
||||
scale: 15
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: "位置信息不完整",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 预览媒体 */
|
||||
preview(e: WechatMiniprogram.BaseEvent) {
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const { location } = this.data;
|
||||
|
||||
if (!location || !location.mediaItems) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sources = location.mediaItems.map(item => ({
|
||||
url: item.sourceURL,
|
||||
type: item.type
|
||||
}));
|
||||
|
||||
const total = sources.length;
|
||||
const startIndex = Math.max(0, index - 25);
|
||||
const endIndex = Math.min(total, startIndex + 50);
|
||||
const newCurrentIndex = index - startIndex;
|
||||
|
||||
wx.previewMedia({
|
||||
current: newCurrentIndex,
|
||||
sources: sources.slice(startIndex, endIndex) as WechatMiniprogram.MediaSource[]
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除地点 */
|
||||
deleteLocation() {
|
||||
this.setData({
|
||||
deleteDialogVisible: true,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消删除 */
|
||||
cancelDelete() {
|
||||
this.setData({
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 确认删除 */
|
||||
confirmDelete() {
|
||||
const inputText = this.data.deleteConfirmText.trim();
|
||||
if (inputText !== "确认删除") {
|
||||
wx.showToast({
|
||||
title: "输入不匹配",
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
deleteDialogVisible: false
|
||||
});
|
||||
this.executeDelete();
|
||||
},
|
||||
|
||||
/** 执行删除 */
|
||||
async executeDelete() {
|
||||
if (!this.data.location || !this.data.location.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
wx.showLoading({ title: "删除中...", mask: true });
|
||||
|
||||
try {
|
||||
await TravelLocationApi.delete(this.data.location.id);
|
||||
wx.showToast({
|
||||
title: "删除成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
// 错误已由 Network 类处理
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
/** 返回 */
|
||||
async goBack() {
|
||||
Toolkit.async(() => wx.navigateBack()); // 微信 BUG，需要延时
|
||||
}
|
||||
});
|
||||
157
miniprogram/pages/main/travel/location-detail/index.wxml
Normal file
157
miniprogram/pages/main/travel/location-detail/index.wxml
Normal file
@ -0,0 +1,157 @@
|
||||
<!--pages/main/travel/location-detail/index.wxml-->
|
||||
<view class="custom-navbar">
|
||||
<t-navbar title="地点详情" leftArrow placeholder 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 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
|
||||
left-icon="{{locationTypeIcons[location.type]}}"
|
||||
title="类型"
|
||||
note="{{locationTypeLabels[location.type]}}"
|
||||
/>
|
||||
<t-cell class="map">
|
||||
<map
|
||||
slot="description"
|
||||
class="instance"
|
||||
latitude="{{location.lat}}"
|
||||
longitude="{{location.lng}}"
|
||||
markers="{{mapMarkers}}"
|
||||
scale="15"
|
||||
show-location
|
||||
>
|
||||
<cover-view slot="callout">
|
||||
<cover-view class="marker" marker-id="0" style="--title-length: {{location.title.length}}">
|
||||
{{location.title || '地点'}}
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</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 ? 'red' : ''}}">
|
||||
{{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 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 slot="title" 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>
|
||||
17
miniprogram/pages/main/travel/location-editor/index.json
Normal file
17
miniprogram/pages/main/travel/location-editor/index.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-rate": "tdesign-miniprogram/rate/rate",
|
||||
"t-input": "tdesign-miniprogram/input/input",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog",
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading",
|
||||
"t-stepper": "tdesign-miniprogram/stepper/stepper",
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
|
||||
},
|
||||
"styleIsolation": "shared"
|
||||
}
|
||||
201
miniprogram/pages/main/travel/location-editor/index.less
Normal file
201
miniprogram/pages/main/travel/location-editor/index.less
Normal file
@ -0,0 +1,201 @@
|
||||
// pages/main/travel/location-editor/index.less
|
||||
|
||||
.travel-location-editor {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
|
||||
.content {
|
||||
padding-bottom: 64rpx;
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
padding: 128rpx 0;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.text {
|
||||
color: var(--theme-text-secondary);
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 48rpx;
|
||||
|
||||
.rate-cell {
|
||||
|
||||
&.decided {
|
||||
|
||||
.rate {
|
||||
display: block;
|
||||
gap: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.undecided {
|
||||
|
||||
.rate {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
color: var(--theme-text-secondary);
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
|
||||
&.location {
|
||||
|
||||
.note {
|
||||
color: var(--theme-text-primary);
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
.title {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.media {
|
||||
|
||||
.gallery {
|
||||
gap: 10rpx;
|
||||
padding: 0 6rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
.item {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--theme-bg-card);
|
||||
box-shadow: 1px 1px 6px var(--theme-shadow-light);
|
||||
border-radius: 2rpx;
|
||||
|
||||
&.add {
|
||||
color: var(--theme-wx);
|
||||
margin: 0;
|
||||
font-size: 80rpx;
|
||||
background: transparent;
|
||||
|
||||
&::after {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
|
||||
|
||||
.play-icon {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: rgba(255, 255, 255, .8);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
font-size: 128rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
text-shadow: 4rpx 4rpx 0 rgba(0, 0, 0, .5);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
font-size: 45rpx;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
color: var(--theme-wx);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
font-size: 45rpx;
|
||||
text-shadow: 4rpx 4rpx 0 rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.upload {
|
||||
gap: 16rpx;
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-top: 24rpx;
|
||||
align-items: center;
|
||||
border-radius: 12rpx;
|
||||
background: var(--theme-bg-card);
|
||||
|
||||
.text {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.action {
|
||||
gap: 24rpx;
|
||||
display: flex;
|
||||
padding: 24rpx 16rpx 48rpx 16rpx;
|
||||
|
||||
.delete {
|
||||
flex: .6;
|
||||
}
|
||||
|
||||
.submit {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-dialog {
|
||||
padding: 16rpx 0;
|
||||
|
||||
.tips {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
605
miniprogram/pages/main/travel/location-editor/index.ts
Normal file
605
miniprogram/pages/main/travel/location-editor/index.ts
Normal file
@ -0,0 +1,605 @@
|
||||
// pages/main/travel/location-editor/index.ts
|
||||
|
||||
import { Network, WechatMediaItem } from "../../../../utils/Network";
|
||||
import { TravelLocationApi } from "../../../../api/TravelLocationApi";
|
||||
import { TravelLocationType, TravelLocationTypeLabel } from "../../../../types/Travel";
|
||||
import { MediaAttachType, PreviewImageMetadata } from "../../../../types/Attachment";
|
||||
import config from "../../../../config/index";
|
||||
import { MediaItem, MediaItemType } from "../../../../types/UI";
|
||||
|
||||
interface TravelLocationEditorData {
|
||||
/** 模式：create 或 edit */
|
||||
mode: "create" | "edit";
|
||||
/** 出行地点 ID（编辑模式） */
|
||||
id?: number;
|
||||
/** 关联的出行计划 ID */
|
||||
travelId: number;
|
||||
/** 地点类型 */
|
||||
type: TravelLocationType;
|
||||
/** 标题 */
|
||||
title: string;
|
||||
/** 说明 */
|
||||
description: string;
|
||||
/** 位置描述 */
|
||||
location: string;
|
||||
/** 纬度 */
|
||||
lat: number;
|
||||
/** 经度 */
|
||||
lng: number;
|
||||
/** 费用 */
|
||||
amount: number;
|
||||
/** 是否需要身份证 */
|
||||
requireIdCard: boolean;
|
||||
/** 是否需要预约 */
|
||||
requireAppointment: boolean;
|
||||
/** 评分 */
|
||||
score: number;
|
||||
/** 评分是否未定 */
|
||||
scoreUndecided: boolean;
|
||||
/** 重要程度 */
|
||||
importance: number;
|
||||
/** 重要程度是否未定 */
|
||||
importanceUndecided: boolean;
|
||||
/** 媒体列表（创建和编辑模式使用） */
|
||||
mediaList: (MediaItem | WechatMediaItem)[];
|
||||
/** 新媒体列表（编辑模式使用） */
|
||||
newMediaList: WechatMediaItem[];
|
||||
/** 是否正在加载（编辑模式） */
|
||||
isLoading: boolean;
|
||||
/** 是否正在保存 */
|
||||
isSaving: boolean;
|
||||
/** 是否正在上传 */
|
||||
isUploading: boolean;
|
||||
/** 上传进度信息 */
|
||||
uploadInfo: string;
|
||||
/** 地点类型选项 */
|
||||
locationTypes: string[];
|
||||
/** 地点类型值数组 */
|
||||
locationTypeValues: TravelLocationType[];
|
||||
/** 地点类型选中索引 */
|
||||
locationTypeIndex: number;
|
||||
/** 删除对话框可见性 */
|
||||
deleteDialogVisible: boolean;
|
||||
/** 删除确认文本 */
|
||||
deleteConfirmText: string;
|
||||
/** 媒体类型枚举 */
|
||||
mediaItemTypeEnum: any;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <TravelLocationEditorData>{
|
||||
mode: "create",
|
||||
id: undefined,
|
||||
travelId: 0,
|
||||
type: TravelLocationType.FOOD,
|
||||
title: "",
|
||||
description: "",
|
||||
location: "",
|
||||
lat: 0,
|
||||
lng: 0,
|
||||
amount: 0,
|
||||
requireIdCard: false,
|
||||
requireAppointment: false,
|
||||
score: 3,
|
||||
scoreUndecided: true,
|
||||
importance: 1,
|
||||
importanceUndecided: true,
|
||||
mediaList: [],
|
||||
newMediaList: [],
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
isUploading: false,
|
||||
uploadInfo: "",
|
||||
mediaItemTypeEnum: {
|
||||
...MediaItemType
|
||||
},
|
||||
locationTypes: Object.values(TravelLocationTypeLabel),
|
||||
locationTypeValues: [
|
||||
TravelLocationType.FOOD,
|
||||
TravelLocationType.HOTEL,
|
||||
TravelLocationType.TRANSPORT,
|
||||
TravelLocationType.ATTRACTION,
|
||||
TravelLocationType.SHOPPING,
|
||||
TravelLocationType.PLAY,
|
||||
TravelLocationType.LIFE
|
||||
],
|
||||
locationTypeIndex: 0,
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
// 获取 travelId（必填）
|
||||
const travelId = options.travelId ? parseInt(options.travelId) : 0;
|
||||
if (!travelId) {
|
||||
wx.showToast({
|
||||
title: "缺少出行计划 ID",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
return;
|
||||
}
|
||||
|
||||
// 判断模式：有 ID 是编辑，无 ID 是创建
|
||||
const id = options.id ? parseInt(options.id) : undefined;
|
||||
|
||||
if (id) {
|
||||
// 编辑模式
|
||||
this.setData({
|
||||
mode: "edit",
|
||||
id,
|
||||
travelId,
|
||||
isLoading: true
|
||||
});
|
||||
this.loadLocationDetail(id);
|
||||
} else {
|
||||
// 创建模式
|
||||
this.setData({
|
||||
mode: "create",
|
||||
travelId,
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 加载地点详情（编辑模式） */
|
||||
async loadLocationDetail(id: number) {
|
||||
wx.showLoading({ title: "加载中...", mask: true });
|
||||
|
||||
try {
|
||||
const location = await TravelLocationApi.getDetail(id);
|
||||
|
||||
// 计算地点类型索引
|
||||
const type = location.type || TravelLocationType.ATTRACTION;
|
||||
const locationTypeIndex = this.data.locationTypeValues.findIndex(
|
||||
item => item === type
|
||||
);
|
||||
|
||||
const items = location.items || [];
|
||||
const thumbItems = items.filter((item) => item.attachType === MediaAttachType.THUMB);
|
||||
|
||||
const mediaList: MediaItem[] = thumbItems.map((thumbItem) => {
|
||||
const metadata = (typeof thumbItem.metadata === "string" ? JSON.parse(thumbItem.metadata) : thumbItem.metadata) as PreviewImageMetadata;
|
||||
const thumbURL = `${config.url}/attachment/read/${thumbItem.mongoId}`;
|
||||
const sourceURL = `${config.url}/attachment/read/${metadata.sourceMongoId}`;
|
||||
const isVideo = metadata.sourceMimeType?.startsWith("video/");
|
||||
return {
|
||||
type: isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE,
|
||||
thumbURL,
|
||||
sourceURL,
|
||||
size: thumbItem.size || 0,
|
||||
attachmentId: thumbItem.id
|
||||
} as MediaItem;
|
||||
});
|
||||
|
||||
// 判断评分是否未定
|
||||
const scoreUndecided = location.score === null || location.score === undefined;
|
||||
const score = location.score !== null && location.score !== undefined ? location.score : 3;
|
||||
|
||||
// 判断重要程度是否未定
|
||||
const importanceUndecided = location.importance === null || location.importance === undefined;
|
||||
const importance = location.importance !== null && location.importance !== undefined ? location.importance : 1;
|
||||
|
||||
this.setData({
|
||||
type,
|
||||
locationTypeIndex: locationTypeIndex >= 0 ? locationTypeIndex : 0,
|
||||
title: location.title || "",
|
||||
description: location.description || "",
|
||||
location: location.location || "",
|
||||
lat: location.lat || 0,
|
||||
lng: location.lng || 0,
|
||||
amount: location.amount || 0,
|
||||
requireIdCard: location.requireIdCard || false,
|
||||
requireAppointment: location.requireAppointment || false,
|
||||
score,
|
||||
scoreUndecided,
|
||||
importance,
|
||||
importanceUndecided,
|
||||
mediaList,
|
||||
isLoading: false
|
||||
});
|
||||
} catch (error) {
|
||||
wx.showToast({
|
||||
title: "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
/** 改变地点类型 */
|
||||
onChangeLocationType(e: any) {
|
||||
const index = e.detail.value;
|
||||
this.setData({
|
||||
locationTypeIndex: index,
|
||||
type: this.data.locationTypeValues[index]
|
||||
});
|
||||
},
|
||||
|
||||
/** 改变是否需要身份证 */
|
||||
onChangeRequireIdCard(e: any) {
|
||||
this.setData({ requireIdCard: e.detail.value });
|
||||
},
|
||||
|
||||
/** 改变是否需要预约 */
|
||||
onChangeRequireAppointment(e: any) {
|
||||
this.setData({ requireAppointment: e.detail.value });
|
||||
},
|
||||
|
||||
/** 改变评分 */
|
||||
onChangeScore(e: any) {
|
||||
this.setData({ score: e.detail.value });
|
||||
},
|
||||
|
||||
/** 改变重要程度 */
|
||||
onChangeImportance(e: any) {
|
||||
this.setData({ importance: e.detail.value });
|
||||
},
|
||||
|
||||
/** 清除评分 */
|
||||
clearScore() {
|
||||
this.setData({ scoreUndecided: true });
|
||||
},
|
||||
|
||||
/** 清除重要程度 */
|
||||
clearImportance() {
|
||||
this.setData({ importanceUndecided: true });
|
||||
},
|
||||
|
||||
/** 点击未定文字选择评分 */
|
||||
selectScore() {
|
||||
this.setData({
|
||||
scoreUndecided: false,
|
||||
score: 3
|
||||
});
|
||||
},
|
||||
|
||||
/** 点击未定文字选择重要程度 */
|
||||
selectImportance() {
|
||||
this.setData({
|
||||
importanceUndecided: false,
|
||||
importance: 1
|
||||
});
|
||||
},
|
||||
|
||||
/** 选择位置 */
|
||||
chooseLocation() {
|
||||
wx.chooseLocation({
|
||||
success: (res) => {
|
||||
const locationName = res.name || res.address;
|
||||
const updateData: any = {
|
||||
location: locationName,
|
||||
lat: res.latitude,
|
||||
lng: res.longitude
|
||||
};
|
||||
|
||||
// 如果标题为空，使用选择的地点名称作为标题
|
||||
if (!this.data.title.trim()) {
|
||||
updateData.title = res.name || locationName;
|
||||
}
|
||||
|
||||
this.setData(updateData);
|
||||
},
|
||||
fail: (err) => {
|
||||
if (err.errMsg.includes("auth deny")) {
|
||||
wx.showToast({
|
||||
title: "请授权位置权限",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 添加媒体 */
|
||||
addMedia() {
|
||||
const that = this;
|
||||
wx.chooseMedia({
|
||||
mediaType: ["mix"],
|
||||
sourceType: ["album", "camera"],
|
||||
camera: "back",
|
||||
success(res) {
|
||||
wx.showLoading({
|
||||
title: "加载中..",
|
||||
mask: true
|
||||
});
|
||||
const tempFiles = res.tempFiles;
|
||||
const newMedia = tempFiles.map(item => {
|
||||
return {
|
||||
type: (<any>MediaItemType)[item.fileType.toUpperCase()],
|
||||
path: item.tempFilePath,
|
||||
thumbPath: item.thumbTempFilePath,
|
||||
size: item.size,
|
||||
duration: item.duration,
|
||||
raw: item
|
||||
} as WechatMediaItem;
|
||||
});
|
||||
if (that.data.mode === "create") {
|
||||
that.setData({
|
||||
mediaList: [...that.data.mediaList, ...newMedia]
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
newMediaList: [...that.data.newMediaList, ...newMedia]
|
||||
});
|
||||
}
|
||||
wx.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除媒体（创建模式） */
|
||||
deleteMedia(e: any) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
const mediaList = this.data.mediaList;
|
||||
mediaList.splice(index, 1);
|
||||
this.setData({ mediaList });
|
||||
},
|
||||
|
||||
/** 删除新媒体（编辑模式） */
|
||||
deleteNewMedia(e: any) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
const newMediaList = this.data.newMediaList;
|
||||
newMediaList.splice(index, 1);
|
||||
this.setData({ newMediaList });
|
||||
},
|
||||
|
||||
/** 删除已有媒体（编辑模式） */
|
||||
deleteExistingMedia(e: any) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
const existingMedia = this.data.mediaList;
|
||||
existingMedia.splice(index, 1);
|
||||
this.setData({ existingMedia });
|
||||
},
|
||||
|
||||
/** 预览媒体 */
|
||||
preview(e: WechatMiniprogram.BaseEvent) {
|
||||
const isNewMedia = e.currentTarget.dataset.newMedia;
|
||||
const index = e.currentTarget.dataset.index;
|
||||
|
||||
if (this.data.mode === "create") {
|
||||
// 创建模式：只有 mediaList
|
||||
const sources = (this.data.mediaList as WechatMediaItem[]).map(item => ({
|
||||
url: item.path,
|
||||
type: item.type!.toLowerCase()
|
||||
}));
|
||||
|
||||
const total = sources.length;
|
||||
const startIndex = Math.max(0, index - 25);
|
||||
const endIndex = Math.min(total, startIndex + 50);
|
||||
const newCurrentIndex = index - startIndex;
|
||||
|
||||
wx.previewMedia({
|
||||
current: newCurrentIndex,
|
||||
sources: sources.slice(startIndex, endIndex) as WechatMiniprogram.MediaSource[]
|
||||
});
|
||||
} else {
|
||||
// 编辑模式：mediaList + newMediaList
|
||||
const sources = (this.data.mediaList as MediaItem[]).map(item => ({
|
||||
url: item.sourceURL,
|
||||
type: item.type.toLowerCase()
|
||||
}));
|
||||
const newSources = this.data.newMediaList.map(item => ({
|
||||
url: item.path,
|
||||
type: item.type!.toLowerCase()
|
||||
}));
|
||||
const allSources = [...sources, ...newSources];
|
||||
const itemIndex = isNewMedia ? this.data.mediaList.length + index : index;
|
||||
const total = allSources.length;
|
||||
|
||||
const startIndex = Math.max(0, itemIndex - 25);
|
||||
const endIndex = Math.min(total, startIndex + 50);
|
||||
const newCurrentIndex = itemIndex - startIndex;
|
||||
|
||||
wx.previewMedia({
|
||||
current: newCurrentIndex,
|
||||
sources: allSources.slice(startIndex, endIndex) as WechatMiniprogram.MediaSource[]
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 取消 */
|
||||
cancel() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
/** 删除地点 */
|
||||
deleteLocation() {
|
||||
this.setData({
|
||||
deleteDialogVisible: true,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消删除 */
|
||||
cancelDelete() {
|
||||
this.setData({
|
||||
deleteDialogVisible: false,
|
||||
deleteConfirmText: ""
|
||||
});
|
||||
},
|
||||
|
||||
/** 确认删除 */
|
||||
confirmDelete() {
|
||||
const inputText = this.data.deleteConfirmText.trim();
|
||||
if (inputText !== "确认删除") {
|
||||
wx.showToast({
|
||||
title: "输入不匹配",
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
deleteDialogVisible: false
|
||||
});
|
||||
this.executeDelete();
|
||||
},
|
||||
|
||||
/** 执行删除 */
|
||||
async executeDelete() {
|
||||
if (!this.data.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
wx.showLoading({ title: "删除中...", mask: true });
|
||||
|
||||
try {
|
||||
await TravelLocationApi.delete(this.data.id);
|
||||
wx.showToast({
|
||||
title: "删除成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
// 错误已由 Network 类处理
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
/** 提交/保存 */
|
||||
submit() {
|
||||
// 验证必填字段
|
||||
if (!this.data.title.trim()) {
|
||||
wx.showToast({
|
||||
title: "请输入标题",
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.data.location || !this.data.lat || !this.data.lng) {
|
||||
wx.showToast({
|
||||
title: "请选择位置",
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.data.mode === "create") {
|
||||
this.createLocation();
|
||||
} else {
|
||||
this.updateLocation();
|
||||
}
|
||||
},
|
||||
|
||||
/** 创建地点 */
|
||||
async createLocation() {
|
||||
this.setData({ isSaving: true });
|
||||
|
||||
try {
|
||||
// 上传媒体文件
|
||||
this.setData({
|
||||
isUploading: true,
|
||||
uploadInfo: "正在上传 0%"
|
||||
});
|
||||
const tempFileIds = await Network.uploadFiles({
|
||||
mediaList: this.data.mediaList as WechatMediaItem[],
|
||||
onProgress: ({ percent }) => {
|
||||
this.setData({
|
||||
uploadInfo: `正在上传 ${percent}%`
|
||||
});
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
isUploading: false,
|
||||
uploadInfo: ""
|
||||
});
|
||||
|
||||
// 创建地点
|
||||
await TravelLocationApi.create({
|
||||
travelId: this.data.travelId,
|
||||
type: this.data.type,
|
||||
title: this.data.title.trim(),
|
||||
description: this.data.description.trim(),
|
||||
location: this.data.location,
|
||||
lat: this.data.lat,
|
||||
lng: this.data.lng,
|
||||
amount: this.data.amount,
|
||||
requireIdCard: this.data.requireIdCard,
|
||||
requireAppointment: this.data.requireAppointment,
|
||||
score: this.data.scoreUndecided ? null : this.data.score,
|
||||
importance: this.data.importanceUndecided ? null : this.data.importance,
|
||||
tempFileIds
|
||||
});
|
||||
wx.showToast({
|
||||
title: "创建成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
isSaving: false,
|
||||
isUploading: false,
|
||||
uploadInfo: ""
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 更新地点 */
|
||||
async updateLocation() {
|
||||
this.setData({ isSaving: true });
|
||||
try {
|
||||
// 保留的附件 ID 列表
|
||||
const attachmentIds = (this.data.mediaList as MediaItem[]).map(item => item.attachmentId);
|
||||
// 上传新媒体文件
|
||||
this.setData({
|
||||
isUploading: true,
|
||||
uploadInfo: "正在上传 0%"
|
||||
});
|
||||
const tempFileIds = await Network.uploadFiles({
|
||||
mediaList: this.data.newMediaList,
|
||||
onProgress: ({ percent }) => {
|
||||
this.setData({
|
||||
uploadInfo: `正在上传 ${percent}%`
|
||||
});
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
isUploading: false,
|
||||
uploadInfo: ""
|
||||
});
|
||||
// 更新地点
|
||||
await TravelLocationApi.update({
|
||||
id: this.data.id!,
|
||||
travelId: this.data.travelId,
|
||||
type: this.data.type,
|
||||
title: this.data.title.trim(),
|
||||
description: this.data.description.trim(),
|
||||
location: this.data.location,
|
||||
lat: this.data.lat,
|
||||
lng: this.data.lng,
|
||||
amount: this.data.amount,
|
||||
requireIdCard: this.data.requireIdCard,
|
||||
requireAppointment: this.data.requireAppointment,
|
||||
score: this.data.scoreUndecided ? null : this.data.score,
|
||||
importance: this.data.importanceUndecided ? null : this.data.importance,
|
||||
attachmentIds,
|
||||
tempFileIds
|
||||
});
|
||||
wx.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
isSaving: false,
|
||||
isUploading: false,
|
||||
uploadInfo: ""
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
288
miniprogram/pages/main/travel/location-editor/index.wxml
Normal file
288
miniprogram/pages/main/travel/location-editor/index.wxml
Normal file
@ -0,0 +1,288 @@
|
||||
<!--pages/main/travel/location-editor/index.wxml-->
|
||||
<t-navbar title="{{mode === 'create' ? '添加地点' : '编辑地点'}}" placeholder>
|
||||
<text slot="left" bindtap="cancel">取消</text>
|
||||
</t-navbar>
|
||||
|
||||
<scroll-view class="travel-location-editor setting-bg" 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 location">
|
||||
<view slot="title" class="title">位置信息</view>
|
||||
<picker mode="selector" range="{{locationTypes}}" value="{{locationTypeIndex}}" bindchange="onChangeLocationType">
|
||||
<t-cell title="地点类型" arrow>
|
||||
<view slot="note" class="note">{{locationTypes[locationTypeIndex]}}</view>
|
||||
</t-cell>
|
||||
</picker>
|
||||
<t-cell class="value" required arrow bind:click="chooseLocation">
|
||||
<view slot="title" class="title">位置</view>
|
||||
<view slot="note" class="note">{{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="元"
|
||||
type="digit"
|
||||
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="重要程度" class="rate-cell importance {{importanceUndecided ? 'undecided' : 'decided'}}">
|
||||
<view slot="note">
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{importance}}"
|
||||
count="{{5}}"
|
||||
size="20px"
|
||||
bind:change="onChangeImportance"
|
||||
/>
|
||||
<t-icon
|
||||
name="close-circle-filled"
|
||||
size="20px"
|
||||
class="clear-icon"
|
||||
bindtap="clearImportance"
|
||||
/>
|
||||
</view>
|
||||
<view class="text" bindtap="selectImportance">
|
||||
未定
|
||||
</view>
|
||||
</view>
|
||||
</t-cell>
|
||||
<t-cell title="评分" class="rate-cell score {{scoreUndecided ? 'undecided' : 'decided'}}">
|
||||
<view slot="note">
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{score}}"
|
||||
count="{{5}}"
|
||||
size="20px"
|
||||
bind:change="onChangeScore"
|
||||
/>
|
||||
<t-icon
|
||||
name="close-circle-filled"
|
||||
size="20px"
|
||||
class="clear-icon"
|
||||
bindtap="clearScore"
|
||||
/>
|
||||
</view>
|
||||
<view class="text" bindtap="selectScore">
|
||||
未定
|
||||
</view>
|
||||
</view>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group class="section media">
|
||||
<view slot="title" class="title">图片视频</view>
|
||||
<t-cell>
|
||||
<view slot="title" 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>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
|
||||
<!-- 上传进度提示 -->
|
||||
<view wx:if="{{isUploading}}" class="section upload">
|
||||
<t-loading theme="circular" size="32rpx" />
|
||||
<text class="text">{{uploadInfo}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view class="section action">
|
||||
<t-button
|
||||
wx:if="{{mode === 'edit'}}"
|
||||
class="delete"
|
||||
theme="danger"
|
||||
variant="outline"
|
||||
size="large"
|
||||
bind:tap="deleteLocation"
|
||||
disabled="{{isSaving || isUploading}}"
|
||||
>
|
||||
删除
|
||||
</t-button>
|
||||
<t-button
|
||||
class="submit"
|
||||
theme="primary"
|
||||
size="large"
|
||||
bind:tap="submit"
|
||||
loading="{{isSaving}}"
|
||||
disabled="{{isSaving || isUploading}}"
|
||||
>
|
||||
{{mode === 'create' ? '创建地点' : '保存修改'}}
|
||||
</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>
|
||||
8
miniprogram/pages/main/travel/location-map/index.json
Normal file
8
miniprogram/pages/main/travel/location-map/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"travel-location-popup": "/components/travel-location-popup/index"
|
||||
},
|
||||
"styleIsolation": "shared"
|
||||
}
|
||||
64
miniprogram/pages/main/travel/location-map/index.less
Normal file
64
miniprogram/pages/main/travel/location-map/index.less
Normal file
@ -0,0 +1,64 @@
|
||||
/* pages/main/travel/location-map/index.less */
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.marker {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
background: var(--theme-bg-card);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
|
||||
border-radius: 6rpx;
|
||||
flex-direction: column;
|
||||
|
||||
.location {
|
||||
display: flex;
|
||||
padding: 8rpx 16rpx 8rpx 8rpx;
|
||||
align-items: center;
|
||||
|
||||
.type {
|
||||
color: #fff;
|
||||
padding: 4rpx 12rpx 6rpx 12rpx;
|
||||
font-size: 28rpx;
|
||||
flex-shrink: 0;
|
||||
background: var(--theme-wx, #07c160);
|
||||
margin-right: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
width: calc(var(--title-length) * 28rpx);
|
||||
color: var(--theme-text-primary, #333);
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.loading-text {
|
||||
color: var(--theme-text-secondary, #666);
|
||||
padding: 24rpx 48rpx;
|
||||
background: var(--theme-bg-card, #fff);
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
183
miniprogram/pages/main/travel/location-map/index.ts
Normal file
183
miniprogram/pages/main/travel/location-map/index.ts
Normal file
@ -0,0 +1,183 @@
|
||||
// pages/main/travel/location-map/index.ts
|
||||
|
||||
import { TravelLocationApi } from "../../../../api/TravelLocationApi";
|
||||
import { TravelLocation, TravelLocationTypeLabel } from "../../../../types/Travel";
|
||||
import Toolkit from "../../../../utils/Toolkit";
|
||||
|
||||
interface MapMarker {
|
||||
id: number;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
width: number;
|
||||
height: number;
|
||||
customCallout: {
|
||||
anchorY: number;
|
||||
anchorX: number;
|
||||
display: string;
|
||||
};
|
||||
/** 该位置的所有地点 */
|
||||
locations: TravelLocation[];
|
||||
}
|
||||
|
||||
interface TravelMapData {
|
||||
travelId: number;
|
||||
centerLat: number;
|
||||
centerLng: number;
|
||||
scale: number;
|
||||
markers: MapMarker[];
|
||||
locations: TravelLocation[];
|
||||
includePoints: Array<{ latitude: number; longitude: number }>;
|
||||
isLoading: boolean;
|
||||
detailVisible: boolean;
|
||||
detailIds: number[];
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <TravelMapData>{
|
||||
travelId: 0,
|
||||
centerLat: 39.908823,
|
||||
centerLng: 116.397470,
|
||||
scale: 13,
|
||||
markers: [],
|
||||
locations: [],
|
||||
includePoints: [],
|
||||
isLoading: true,
|
||||
detailVisible: false,
|
||||
detailIds: []
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
const travelId = options.travelId ? parseInt(options.travelId) : 0;
|
||||
if (travelId) {
|
||||
this.setData({ travelId });
|
||||
this.loadLocations(travelId);
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: "参数错误",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
/** 加载所有地点 */
|
||||
async loadLocations(travelId: number) {
|
||||
this.setData({ isLoading: true });
|
||||
|
||||
try {
|
||||
const result = await TravelLocationApi.getList({
|
||||
index: 0,
|
||||
size: 100,
|
||||
equalsExample: {
|
||||
travelId
|
||||
}
|
||||
});
|
||||
|
||||
// 过滤有位置信息的地点
|
||||
const locations = result.list.filter(loc => loc.lat && loc.lng);
|
||||
|
||||
if (locations.length === 0) {
|
||||
wx.showToast({
|
||||
title: "暂无位置记录",
|
||||
icon: "none"
|
||||
});
|
||||
this.setData({ isLoading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
// 为每个地点添加类型标签
|
||||
locations.forEach(location => {
|
||||
(location as any).typeLabel = location.type ? TravelLocationTypeLabel[location.type] : "";
|
||||
});
|
||||
|
||||
// 按位置分组，处理重叠地点
|
||||
const locationMap = new Map<string, TravelLocation[]>();
|
||||
locations.forEach(location => {
|
||||
const key = `${location.lat},${location.lng}`;
|
||||
if (!locationMap.has(key)) {
|
||||
locationMap.set(key, []);
|
||||
}
|
||||
locationMap.get(key)!.push(location);
|
||||
});
|
||||
|
||||
// 生成地图标记（每个唯一位置一个标记）
|
||||
const markers: MapMarker[] = Array.from(locationMap.values()).map((locs, index) => ({
|
||||
id: index,
|
||||
latitude: locs[0].lat!,
|
||||
longitude: locs[0].lng!,
|
||||
width: 24,
|
||||
height: 30,
|
||||
customCallout: {
|
||||
anchorY: -2,
|
||||
// 随机错位避免近距离重叠
|
||||
anchorX: Toolkit.random(-10, 10),
|
||||
display: "ALWAYS"
|
||||
},
|
||||
locations: locs
|
||||
}));
|
||||
|
||||
// 计算中心点（所有标记的平均位置）
|
||||
const centerLat = locations.reduce((sum, l) => sum + l.lat!, 0) / locations.length;
|
||||
const centerLng = locations.reduce((sum, l) => sum + l.lng!, 0) / locations.length;
|
||||
|
||||
// 缩放视野以包含所有标记点
|
||||
const includePoints = locations.map((l) => ({
|
||||
latitude: l.lat!,
|
||||
longitude: l.lng!
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
locations,
|
||||
markers,
|
||||
centerLat,
|
||||
centerLng,
|
||||
includePoints,
|
||||
isLoading: false
|
||||
});
|
||||
} catch (err: any) {
|
||||
wx.showToast({
|
||||
title: "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
this.setData({ isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
/** 标记点击事件 */
|
||||
onMarkerTap(e: any) {
|
||||
const markerId = e.detail.markerId || e.markerId;
|
||||
this.loadLocationDetail(markerId);
|
||||
},
|
||||
|
||||
/** 气泡点击事件 */
|
||||
onCalloutTap(e: any) {
|
||||
const markerId = e.detail.markerId || e.markerId;
|
||||
this.loadLocationDetail(markerId);
|
||||
},
|
||||
|
||||
/** 加载位置详情 */
|
||||
loadLocationDetail(markerId: number) {
|
||||
const marker = this.data.markers[markerId];
|
||||
if (!marker || !marker.locations || marker.locations.length === 0) {
|
||||
return;
|
||||
}
|
||||
// 获取该标记点的所有地点 ID
|
||||
const locationIds = marker.locations.map(loc => loc.id!).filter(id => id);
|
||||
if (locationIds.length === 0) {
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
detailVisible: true,
|
||||
detailIds: locationIds
|
||||
});
|
||||
},
|
||||
|
||||
/** 关闭详情 */
|
||||
closeDetail() {
|
||||
this.setData({
|
||||
detailVisible: false
|
||||
});
|
||||
}
|
||||
});
|
||||
41
miniprogram/pages/main/travel/location-map/index.wxml
Normal file
41
miniprogram/pages/main/travel/location-map/index.wxml
Normal file
@ -0,0 +1,41 @@
|
||||
<!--pages/main/travel/location-map/index.wxml-->
|
||||
<t-navbar title="地点地图" left-arrow placeholder />
|
||||
<view class="container">
|
||||
<map
|
||||
id="travel-location-map"
|
||||
class="map"
|
||||
latitude="{{centerLat}}"
|
||||
longitude="{{centerLng}}"
|
||||
scale="{{scale}}"
|
||||
markers="{{markers}}"
|
||||
include-points="{{includePoints}}"
|
||||
bindmarkertap="onMarkerTap"
|
||||
bindcallouttap="onCalloutTap"
|
||||
>
|
||||
<cover-view slot="callout">
|
||||
<cover-view
|
||||
class="marker"
|
||||
wx:for="{{markers}}"
|
||||
wx:key="id"
|
||||
wx:for-item="marker"
|
||||
wx:for-index="markerIndex"
|
||||
marker-id="{{markerIndex}}"
|
||||
>
|
||||
<cover-view
|
||||
class="location"
|
||||
wx:for="{{marker.locations}}"
|
||||
wx:key="id"
|
||||
wx:for-item="location"
|
||||
style="{{'--title-length: ' + location.title.length}}"
|
||||
>
|
||||
<cover-view wx:if="{{location.typeLabel}}" class="type">{{location.typeLabel}}</cover-view>
|
||||
<cover-view class="title">{{location.title || '未命名地点'}}</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</map>
|
||||
<view wx:if="{{isLoading}}" class="loading">
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
<travel-location-popup visible="{{detailVisible}}" ids="{{detailIds}}" bind:close="closeDetail" />
|
||||
</view>
|
||||
Reference in New Issue
Block a user