fix travel style
This commit is contained in:
Timi
@ -30,6 +30,31 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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-stepper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -58,35 +83,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.delete-dialog-content {
|
||||
gap: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.delete-dialog {
|
||||
padding: 16rpx 0;
|
||||
|
||||
.delete-warning {
|
||||
gap: 16rpx;
|
||||
display: flex;
|
||||
padding: 24rpx;
|
||||
align-items: center;
|
||||
border-radius: 12rpx;
|
||||
flex-direction: column;
|
||||
background: #FFF4F4;
|
||||
|
||||
.warning-text {
|
||||
color: #E34D59;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-confirm {
|
||||
gap: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.confirm-label {
|
||||
color: var(--theme-text-primary);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.tips {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,8 +17,12 @@ interface TravelEditorData {
|
||||
date: string;
|
||||
/** 出行时间 */
|
||||
time: string;
|
||||
/** 出行时间是否未定 */
|
||||
travelAtUndecided: boolean;
|
||||
/** 天数 */
|
||||
days: number;
|
||||
/** 天数是否未定 */
|
||||
daysUndecided: boolean;
|
||||
/** 交通类型 */
|
||||
transportationType: TransportationType;
|
||||
/** 状态 */
|
||||
@ -49,9 +53,11 @@ Page({
|
||||
content: "",
|
||||
date: "2025-06-28",
|
||||
time: "16:00",
|
||||
travelAtUndecided: true,
|
||||
days: 1,
|
||||
transportationType: TransportationType.PLANE,
|
||||
transportationTypeIndex: 0,
|
||||
daysUndecided: true,
|
||||
transportationType: TransportationType.SELF_DRIVING,
|
||||
transportationTypeIndex: 4,
|
||||
status: TravelStatus.PLANNING,
|
||||
statusIndex: 0,
|
||||
isLoading: false,
|
||||
@ -108,13 +114,19 @@ Page({
|
||||
// 格式化数据
|
||||
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.PLANE;
|
||||
const transportationType = travel.transportationType || TransportationType.SELF_DRIVING;
|
||||
const transportationTypeIndex = this.data.transportationTypes.findIndex(
|
||||
item => item.value === transportationType
|
||||
);
|
||||
@ -128,9 +140,11 @@ Page({
|
||||
content: travel.content || "",
|
||||
date,
|
||||
time,
|
||||
days: travel.days || 1,
|
||||
travelAtUndecided,
|
||||
days,
|
||||
daysUndecided,
|
||||
transportationType,
|
||||
transportationTypeIndex: transportationTypeIndex >= 0 ? transportationTypeIndex : 0,
|
||||
transportationTypeIndex: transportationTypeIndex >= 0 ? transportationTypeIndex : 4,
|
||||
status,
|
||||
statusIndex: statusIndex >= 0 ? statusIndex : 0,
|
||||
isLoading: false
|
||||
@ -163,13 +177,42 @@ Page({
|
||||
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() {
|
||||
if (this.data.mode === "create") {
|
||||
wx.navigateBack();
|
||||
} else {
|
||||
wx.navigateBack();
|
||||
}
|
||||
wx.navigateBack();
|
||||
},
|
||||
/** 提交/保存 */
|
||||
submit() {
|
||||
@ -195,8 +238,10 @@ Page({
|
||||
await TravelApi.create({
|
||||
title: this.data.title.trim(),
|
||||
content: this.data.content.trim(),
|
||||
travelAt: new Date(`${this.data.date}T${this.data.time}:00`).getTime(),
|
||||
days: this.data.days,
|
||||
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
|
||||
});
|
||||
@ -219,8 +264,10 @@ Page({
|
||||
id: this.data.id!,
|
||||
title: this.data.title.trim(),
|
||||
content: this.data.content.trim(),
|
||||
travelAt: new Date(`${this.data.date}T${this.data.time}:00`).getTime(),
|
||||
days: this.data.days,
|
||||
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
|
||||
});
|
||||
|
||||
@ -32,18 +32,29 @@
|
||||
</t-cell-group>
|
||||
<t-cell-group class="section">
|
||||
<t-cell class="travel-at" title="出行时间">
|
||||
<view slot="right-icon">
|
||||
<picker class="picker" mode="date" model:value="{{date}}">
|
||||
<view slot="right-icon" class="travel-at-content">
|
||||
<picker wx:if="{{!travelAtUndecided}}" class="picker" mode="date" model:value="{{date}}">
|
||||
<view slot="content" class="slot">
|
||||
<t-icon name="calendar" size="20px" class="icon" />
|
||||
<text>{{date}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view wx:else class="slot" bindtap="selectTravelAt">
|
||||
<text class="undecided-text">未定</text>
|
||||
</view>
|
||||
<t-icon
|
||||
wx:if="{{!travelAtUndecided}}"
|
||||
name="close-circle-filled"
|
||||
size="20px"
|
||||
class="clear-icon"
|
||||
bindtap="clearTravelAt"
|
||||
/>
|
||||
</view>
|
||||
</t-cell>
|
||||
<t-cell title="旅行天数" t-class="days-cell">
|
||||
<view slot="right-icon" class="days-stepper">
|
||||
<view slot="right-icon" class="days-content">
|
||||
<t-stepper
|
||||
wx:if="{{!daysUndecided}}"
|
||||
theme="filled"
|
||||
model:value="{{days}}"
|
||||
size="medium"
|
||||
@ -51,6 +62,16 @@
|
||||
max="{{999}}"
|
||||
t-class="stepper"
|
||||
/>
|
||||
<view wx:else class="slot" bindtap="selectDays">
|
||||
<text class="undecided-text">未定</text>
|
||||
</view>
|
||||
<t-icon
|
||||
wx:if="{{!daysUndecided}}"
|
||||
name="close-circle-filled"
|
||||
size="20px"
|
||||
class="clear-icon"
|
||||
bindtap="clearDays"
|
||||
/>
|
||||
</view>
|
||||
</t-cell>
|
||||
<t-cell title="交通方式">
|
||||
@ -128,23 +149,17 @@
|
||||
<t-dialog
|
||||
visible="{{deleteDialogVisible}}"
|
||||
title="删除旅行计划"
|
||||
confirm-btn="删除"
|
||||
confirm-btn="{{ {content: '删除', variant: 'text', theme: 'danger'} }}"
|
||||
cancel-btn="取消"
|
||||
bind:confirm="confirmDelete"
|
||||
bind:cancel="cancelDelete"
|
||||
>
|
||||
<view class="delete-dialog-content">
|
||||
<view class="delete-warning">
|
||||
<t-icon name="error-circle" size="48rpx" color="#E34D59" />
|
||||
<text class="warning-text">删除后无法恢复，请谨慎操作！</text>
|
||||
</view>
|
||||
<view class="delete-confirm">
|
||||
<text class="confirm-label">请输入"确认删除"以继续：</text>
|
||||
<t-input
|
||||
placeholder="请输入确认删除"
|
||||
model:value="{{deleteConfirmText}}"
|
||||
borderless="{{false}}"
|
||||
/>
|
||||
<view slot="content" class="delete-dialog">
|
||||
<view class="tips">
|
||||
<text>此计划的地点、图片和视频也会同步删除，删除后无法恢复，请输入 "</text>
|
||||
<text style="color: var(--theme-error)">确认删除</text>
|
||||
<text>" 以继续</text>
|
||||
</view>
|
||||
<t-input placeholder="请输入：确认删除" model:value="{{deleteConfirmText}}" />
|
||||
</view>
|
||||
</t-dialog>
|
||||
|
||||
Reference in New Issue
Block a user