update style

This commit is contained in:
Timi
2025-12-17 16:16:10 +08:00
parent 423775c255
commit 369cfe2bf2
40 changed files with 375 additions and 507 deletions

View File

@ -30,17 +30,18 @@
line-height: 64rpx;
}
.location {
&.location {
.title {
width: 2em;
.note {
color: var(--theme-text-primary);
}
}
.picker .slot {
gap: 16rpx;
display: flex;
align-items: center;
.value {
.title {
width: 2em;
}
}
}
&.media {
@ -127,103 +128,36 @@
}
}
}
}
.media-section {
margin-top: 48rpx;
padding: 32rpx;
background: var(--theme-bg-card);
&.upload {
gap: 16rpx;
display: flex;
padding: 24rpx 32rpx;
margin-top: 24rpx;
align-items: center;
border-radius: 12rpx;
background: var(--theme-bg-card);
.section-title {
color: var(--theme-text-primary);
margin-bottom: 24rpx;
font-size: 32rpx;
font-weight: bold;
.text {
color: var(--theme-text-secondary);
font-size: 28rpx;
}
}
.media-grid {
&.action {
gap: 24rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
.media-item {
width: 100%;
height: 200rpx;
overflow: hidden;
position: relative;
border-radius: 12rpx;
.media-img {
width: 100%;
height: 100%;
}
.video-badge {
top: 50%;
left: 50%;
display: flex;
position: absolute;
transform: translate(-50%, -50%);
align-items: center;
justify-content: center;
}
.media-delete {
top: 8rpx;
right: 8rpx;
width: 48rpx;
height: 48rpx;
display: flex;
position: absolute;
background: rgba(0, 0, 0, .5);
align-items: center;
border-radius: 50%;
justify-content: center;
}
display: flex;
padding: 24rpx 16rpx 48rpx 16rpx;
.delete-btn {
flex: .6;
}
.media-add {
width: 100%;
height: 200rpx;
display: flex;
align-items: center;
border-radius: 12rpx;
justify-content: center;
background: var(--theme-bg-page);
border: 2rpx dashed var(--theme-border);
.submit-btn {
flex: 1;
}
}
}
.upload-info {
gap: 16rpx;
display: flex;
padding: 24rpx 32rpx;
margin-top: 24rpx;
align-items: center;
border-radius: 12rpx;
background: var(--theme-bg-card);
.upload-text {
color: var(--theme-text-secondary);
font-size: 28rpx;
}
}
.submit-section {
gap: 24rpx;
display: flex;
padding: 24rpx 16rpx 48rpx 16rpx;
margin-top: 64rpx;
.delete-btn {
flex: .6;
}
.submit-btn {
flex: 1;
}
}
}
}

View File

@ -10,9 +10,9 @@ import { MediaItem, MediaItemType } from "../../../types/UI";
interface TravelLocationEditorData {
/** 模式create 或 edit */
mode: "create" | "edit";
/** 行地点 ID编辑模式 */
/** 行地点 ID编辑模式 */
id?: number;
/** 关联的行计划 ID */
/** 关联的行计划 ID */
travelId: number;
/** 地点类型 */
type: TravelLocationType;
@ -32,12 +32,6 @@ interface TravelLocationEditorData {
requireIdCard: boolean;
/** 是否需要预约 */
requireAppointment: boolean;
/** 首次出行时间戳 */
firstTraveledAt: number;
/** 上次出行时间戳 */
lastTraveledAt: number;
/** 出行次数 */
travelCount: number;
/** 评分 */
score: number;
/** 重要程度 */
@ -55,11 +49,11 @@ interface TravelLocationEditorData {
/** 上传进度信息 */
uploadInfo: string;
/** 地点类型选项 */
locationTypes: { label: string; value: TravelLocationType }[];
locationTypes: string[];
/** 地点类型值数组 */
locationTypeValues: TravelLocationType[];
/** 地点类型选中索引 */
locationTypeIndex: number;
/** 地点类型选择器可见性 */
locationTypePickerVisible: boolean;
/** 删除对话框可见性 */
deleteDialogVisible: boolean;
/** 删除确认文本 */
@ -82,9 +76,6 @@ Page({
amount: 0,
requireIdCard: false,
requireAppointment: false,
firstTraveledAt: 0,
lastTraveledAt: 0,
travelCount: 0,
score: 3,
importance: 1,
mediaList: [],
@ -96,16 +87,17 @@ Page({
mediaItemTypeEnum: {
...MediaItemType
},
locationTypes: [
{ label: "景点", value: TravelLocationType.ATTRACTION },
{ label: "酒店", value: TravelLocationType.HOTEL },
{ label: "餐厅", value: TravelLocationType.RESTAURANT },
{ label: "交通站点", value: TravelLocationType.TRANSPORT },
{ label: "购物", value: TravelLocationType.SHOPPING },
{ label: "其他", value: TravelLocationType.OTHER }
locationTypes: ["美食", "酒店", "交通", "景点", "购物", "玩乐", "生活"],
locationTypeValues: [
TravelLocationType.FOOD,
TravelLocationType.HOTEL,
TravelLocationType.TRANSPORT,
TravelLocationType.ATTRACTION,
TravelLocationType.SHOPPING,
TravelLocationType.PLAY,
TravelLocationType.LIFE
],
locationTypeIndex: 0,
locationTypePickerVisible: false,
deleteDialogVisible: false,
deleteConfirmText: ""
},
@ -115,7 +107,7 @@ Page({
const travelId = options.travelId ? parseInt(options.travelId) : 0;
if (!travelId) {
wx.showToast({
title: "缺少行计划 ID",
title: "缺少行计划 ID",
icon: "error"
});
setTimeout(() => {
@ -155,8 +147,8 @@ Page({
// 计算地点类型索引
const type = location.type || TravelLocationType.ATTRACTION;
const locationTypeIndex = this.data.locationTypes.findIndex(
item => item.value === type
const locationTypeIndex = this.data.locationTypeValues.findIndex(
item => item === type
);
const items = location.items || [];
@ -186,9 +178,6 @@ Page({
amount: location.amount || 0,
requireIdCard: location.requireIdCard || false,
requireAppointment: location.requireAppointment || false,
firstTraveledAt: location.firstTraveledAt || 0,
lastTraveledAt: location.lastTraveledAt || 0,
travelCount: location.travelCount || 0,
score: location.score !== undefined ? location.score : 3,
importance: location.importance !== undefined ? location.importance : 1,
mediaList,
@ -212,30 +201,10 @@ Page({
const index = e.detail.value;
this.setData({
locationTypeIndex: index,
type: this.data.locationTypes[index].value
type: this.data.locationTypeValues[index]
});
},
/** 显示地点类型选择器 */
showLocationTypePicker() {
this.setData({ locationTypePickerVisible: true });
},
/** Picker 确认 */
onPickerConfirm(e: any) {
const index = e.detail.value;
this.setData({
locationTypeIndex: index,
type: this.data.locationTypes[index].value,
locationTypePickerVisible: false
});
},
/** Picker 取消 */
onPickerCancel() {
this.setData({ locationTypePickerVisible: false });
},
/** 改变是否需要身份证 */
onChangeRequireIdCard(e: any) {
this.setData({ requireIdCard: e.detail.value });
@ -355,7 +324,7 @@ Page({
// 创建模式:只有 mediaList
const sources = (this.data.mediaList as WechatMediaItem[]).map(item => ({
url: item.path,
type: MediaItemType[item.type].toLowerCase()
type: item.type!.toLowerCase()
}));
const total = sources.length;
@ -371,11 +340,11 @@ Page({
// 编辑模式mediaList + newMediaList
const sources = (this.data.mediaList as MediaItem[]).map(item => ({
url: item.sourceURL,
type: MediaItemType[item.type].toLowerCase()
type: item.type.toLowerCase()
}));
const newSources = this.data.newMediaList.map(item => ({
url: item.path,
type: MediaItemType[item.type].toLowerCase()
type: item.type!.toLowerCase()
}));
const allSources = [...sources, ...newSources];
const itemIndex = isNewMedia ? this.data.mediaList.length + index : index;
@ -514,9 +483,6 @@ Page({
amount: this.data.amount,
requireIdCard: this.data.requireIdCard,
requireAppointment: this.data.requireAppointment,
firstTraveledAt: this.data.firstTraveledAt,
lastTraveledAt: this.data.lastTraveledAt,
travelCount: this.data.travelCount,
score: this.data.score,
importance: this.data.importance,
tempFileIds
@ -573,9 +539,6 @@ Page({
amount: this.data.amount,
requireIdCard: this.data.requireIdCard,
requireAppointment: this.data.requireAppointment,
firstTraveledAt: this.data.firstTraveledAt,
lastTraveledAt: this.data.lastTraveledAt,
travelCount: this.data.travelCount,
score: this.data.score,
importance: this.data.importance,
attachmentIds,

View File

@ -10,14 +10,16 @@
<text class="text">加载中...</text>
</view>
<block wx:else>
<t-cell-group class="section">
<t-cell-group class="section location">
<view slot="title" class="title">位置信息</view>
<t-cell title="地点类型" arrow bind:click="showLocationTypePicker">
<view slot="note" class="black">{{locationTypes[locationTypeIndex].label}}</view>
</t-cell>
<t-cell class="location" required arrow bind:click="chooseLocation">
<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="black">{{location}}</view>
<view slot="note" class="note">{{location}}</view>
</t-cell>
</t-cell-group>
<t-cell-group class="section">
@ -46,6 +48,7 @@
placeholder="0"
label="费用"
suffix="元"
type="digit"
align="right"
/>
<t-cell title="需要身份证">
@ -207,16 +210,16 @@
</view>
<!-- 上传进度提示 -->
<view wx:if="{{isUploading}}" class="upload-info">
<view wx:if="{{isUploading}}" class="section upload">
<t-loading theme="circular" size="32rpx" />
<text class="upload-text">{{uploadInfo}}</text>
<text class="text">{{uploadInfo}}</text>
</view>
<!-- 按钮 -->
<view class="submit-section">
<view class="section action">
<t-button
wx:if="{{mode === 'edit'}}"
class="delete-btn"
class="delete"
theme="danger"
variant="outline"
size="large"
@ -226,7 +229,7 @@
删除
</t-button>
<t-button
class="submit-btn"
class="submit"
theme="primary"
size="large"
bind:tap="submit"
@ -240,18 +243,6 @@
</view>
</scroll-view>
<!-- 地点类型选择器 -->
<t-picker
visible="{{locationTypePickerVisible}}"
value="{{locationTypeIndex}}"
cancelBtn="取消"
confirmBtn="确认"
bind:confirm="onPickerConfirm"
bind:cancel="onPickerCancel"
>
<t-picker-item options="{{locationTypes}}" />
</t-picker>
<!-- 删除确认对话框 -->
<t-dialog
visible="{{deleteDialogVisible}}"