refactor pages struct
This commit is contained in:
Timi
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>
|
||||
Reference in New Issue
Block a user