update style
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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}}"
|
||||
|
||||
Reference in New Issue
Block a user