对接接口
This commit is contained in:
wangxiaowei
@ -5,261 +5,6 @@
|
||||
}
|
||||
}</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toast } from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
|
||||
// tab
|
||||
const tab = ref<number>(0)
|
||||
|
||||
// 上传文件
|
||||
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
|
||||
|
||||
// 表单
|
||||
const form = reactive({
|
||||
roomName: '',
|
||||
tags: [] as string[],
|
||||
video: null as any,
|
||||
images: [] as string[],
|
||||
hourlyPrice: '',
|
||||
minBookingTime: '',
|
||||
inventory: '',
|
||||
packageIntro: '',
|
||||
otherNotes: '',
|
||||
userCount: '',
|
||||
refundPolicy: '',
|
||||
})
|
||||
|
||||
// 标签相关
|
||||
const showTagSelectPopup = ref(false)
|
||||
const showCreateTagPopup = ref(false)
|
||||
const newTagName = ref('')
|
||||
const isTagManageMode = ref(false) // 是否处于管理模式
|
||||
const selectedTags = ref<string[]>([]) // 临时选中的标签，点击确认后才回填到表单
|
||||
// Mock 已有标签列表
|
||||
const availableTags = ref([
|
||||
'全息投影',
|
||||
'环境优雅',
|
||||
'幽静雅致',
|
||||
'禅意悠然',
|
||||
'雅室禅意浓',
|
||||
'古朴韵悠长',
|
||||
])
|
||||
|
||||
const StoreManage = {
|
||||
/**
|
||||
* 切换tab
|
||||
*/
|
||||
handleChangeTab: (e: any) => {
|
||||
tab.value = e.name
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加标签 - 显示选择标签弹窗
|
||||
*/
|
||||
handleAddTag: () => {
|
||||
// 初始化临时选中的标签为当前表单中的标签
|
||||
selectedTags.value = [...form.tags]
|
||||
showTagSelectPopup.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭选择标签弹窗
|
||||
*/
|
||||
handleCloseTagSelect: () => {
|
||||
showTagSelectPopup.value = false
|
||||
isTagManageMode.value = false // 关闭时重置管理模式
|
||||
selectedTags.value = [] // 清空临时选中的标签
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择标签（临时选择，不直接修改表单）
|
||||
*/
|
||||
handleSelectTag: (tag: string) => {
|
||||
if (isTagManageMode.value) {
|
||||
// 管理模式时，点击标签不进行选择操作
|
||||
return
|
||||
}
|
||||
if (selectedTags.value.includes(tag)) {
|
||||
// 如果已选择，则取消选择
|
||||
const index = selectedTags.value.indexOf(tag)
|
||||
selectedTags.value.splice(index, 1)
|
||||
}
|
||||
else {
|
||||
// 如果未选择，则添加
|
||||
if (selectedTags.value.length >= 2) {
|
||||
toast.info('最多只能选择2个标签')
|
||||
return
|
||||
}
|
||||
selectedTags.value.push(tag)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 从选择列表删除标签
|
||||
*/
|
||||
handleRemoveTagFromList: (tag: string, event: any) => {
|
||||
event.stopPropagation()
|
||||
const index = availableTags.value.indexOf(tag)
|
||||
if (index > -1) {
|
||||
availableTags.value.splice(index, 1)
|
||||
}
|
||||
// 如果该标签已被选中，也从临时选中列表中移除
|
||||
const selectedIndex = selectedTags.value.indexOf(tag)
|
||||
if (selectedIndex > -1) {
|
||||
selectedTags.value.splice(selectedIndex, 1)
|
||||
}
|
||||
// 如果该标签在表单中，也从表单中移除
|
||||
const formIndex = form.tags.indexOf(tag)
|
||||
if (formIndex > -1) {
|
||||
form.tags.splice(formIndex, 1)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认选择标签
|
||||
*/
|
||||
handleConfirmTags: () => {
|
||||
form.tags = [...selectedTags.value]
|
||||
showTagSelectPopup.value = false
|
||||
isTagManageMode.value = false
|
||||
selectedTags.value = []
|
||||
},
|
||||
|
||||
/**
|
||||
* 进入管理模式
|
||||
*/
|
||||
handleEnterManagement: () => {
|
||||
isTagManageMode.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出管理模式
|
||||
*/
|
||||
handleExitManagement: () => {
|
||||
isTagManageMode.value = false
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示新建标签弹窗
|
||||
*/
|
||||
handleShowCreateTag: () => {
|
||||
showTagSelectPopup.value = false
|
||||
showCreateTagPopup.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭新建标签弹窗
|
||||
*/
|
||||
handleCloseCreateTag: () => {
|
||||
showCreateTagPopup.value = false
|
||||
newTagName.value = ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 完成新建标签
|
||||
*/
|
||||
handleCompleteCreateTag: () => {
|
||||
const tagName = newTagName.value.trim()
|
||||
if (!tagName) {
|
||||
toast.info('请输入标签名称')
|
||||
return
|
||||
}
|
||||
if (tagName.length > 5) {
|
||||
toast.info('标签不能超过5个字')
|
||||
return
|
||||
}
|
||||
if (availableTags.value.includes(tagName)) {
|
||||
toast.info('该标签已存在')
|
||||
return
|
||||
}
|
||||
// 添加到可用标签列表
|
||||
availableTags.value.push(tagName)
|
||||
// 如果当前临时选中的标签少于2个，自动选中新创建的标签
|
||||
if (selectedTags.value.length < 2) {
|
||||
selectedTags.value.push(tagName)
|
||||
}
|
||||
// 关闭弹窗，重新打开选择标签弹窗
|
||||
showCreateTagPopup.value = false
|
||||
newTagName.value = ''
|
||||
showTagSelectPopup.value = true
|
||||
toast.info('标签创建成功')
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除标签
|
||||
*/
|
||||
handleRemoveTag: (index: number) => {
|
||||
form.tags.splice(index, 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传视频
|
||||
*/
|
||||
handleUploadVideo: (event: any) => {
|
||||
if (event.fileList && event.fileList.length > 0) {
|
||||
form.video = event.fileList[0]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除视频
|
||||
*/
|
||||
handleRemoveVideo: () => {
|
||||
form.video = null
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传图片
|
||||
*/
|
||||
handleUploadImage: (event: any) => {
|
||||
if (event.fileList && event.fileList.length > 0) {
|
||||
const newImages = event.fileList.map((file: any) => file.url || file.tempFilePath)
|
||||
form.images.push(...newImages)
|
||||
// 限制最多9张
|
||||
if (form.images.length > 9) {
|
||||
form.images = form.images.slice(0, 9)
|
||||
toast.info('最多只能上传9张图片')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除图片
|
||||
*/
|
||||
handleRemoveImage: (index: number) => {
|
||||
form.images.splice(index, 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
handleSave: () => {
|
||||
// TODO: 实现保存功能
|
||||
console.log('保存表单:', form)
|
||||
toast.info('保存成功')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击更多选项
|
||||
*/
|
||||
handleMore: () => {
|
||||
// TODO: 实现更多选项功能
|
||||
console.log('更多选项')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击目标图标
|
||||
*/
|
||||
handleTarget: () => {
|
||||
// TODO: 实现目标功能
|
||||
console.log('目标功能')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="pb-180rpx">
|
||||
<view>
|
||||
@ -287,7 +32,7 @@ const StoreManage = {
|
||||
</view>
|
||||
|
||||
<!-- 包间名称 -->
|
||||
<view class="mt-28rpx">
|
||||
<view class="mt-28rpx add-textarea">
|
||||
<view class="mb-20rpx flex items-center">
|
||||
<view class="mr-10rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||
包间名称
|
||||
@ -621,7 +366,7 @@ const StoreManage = {
|
||||
<!-- 确认按钮 -->
|
||||
<view
|
||||
class="mt-40rpx h-90rpx rounded-8rpx bg-[#4C9F44] text-center text-30rpx text-[#fff] leading-90rpx"
|
||||
:class="{ 'opacity-0 pointer-events-none': isTagManageMode }"
|
||||
:class="isTagManageMode ? 'opacity-0 pointer-events-none' : ''"
|
||||
@click="StoreManage.handleConfirmTags">
|
||||
确认
|
||||
</view>
|
||||
@ -661,6 +406,263 @@ const StoreManage = {
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toast } from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
|
||||
// tab
|
||||
const tab = ref<number>(0)
|
||||
|
||||
// 上传文件
|
||||
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
|
||||
|
||||
// 表单
|
||||
const form = reactive({
|
||||
roomName: '',
|
||||
tags: [] as string[],
|
||||
video: null as any,
|
||||
images: [] as string[],
|
||||
hourlyPrice: '',
|
||||
minBookingTime: '',
|
||||
inventory: '',
|
||||
packageIntro: '',
|
||||
otherNotes: '',
|
||||
userCount: '',
|
||||
refundPolicy: '',
|
||||
})
|
||||
|
||||
// 标签相关
|
||||
const showTagSelectPopup = ref(false)
|
||||
const showCreateTagPopup = ref(false)
|
||||
const newTagName = ref('')
|
||||
const isTagManageMode = ref(false) // 是否处于管理模式
|
||||
const selectedTags = ref<string[]>([]) // 临时选中的标签，点击确认后才回填到表单
|
||||
// Mock 已有标签列表
|
||||
const availableTags = ref([
|
||||
'全息投影',
|
||||
'环境优雅',
|
||||
'幽静雅致',
|
||||
'禅意悠然',
|
||||
'雅室禅意浓',
|
||||
'古朴韵悠长',
|
||||
])
|
||||
|
||||
const StoreManage = {
|
||||
/**
|
||||
* 切换tab
|
||||
*/
|
||||
handleChangeTab: (e: any) => {
|
||||
tab.value = e.name
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加标签 - 显示选择标签弹窗
|
||||
*/
|
||||
handleAddTag: () => {
|
||||
// 初始化临时选中的标签为当前表单中的标签
|
||||
selectedTags.value = [...form.tags]
|
||||
showTagSelectPopup.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭选择标签弹窗
|
||||
*/
|
||||
handleCloseTagSelect: () => {
|
||||
showTagSelectPopup.value = false
|
||||
isTagManageMode.value = false // 关闭时重置管理模式
|
||||
selectedTags.value = [] // 清空临时选中的标签
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择标签（临时选择，不直接修改表单）
|
||||
*/
|
||||
handleSelectTag: (tag: string) => {
|
||||
if (isTagManageMode.value) {
|
||||
// 管理模式时，点击标签不进行选择操作
|
||||
return
|
||||
}
|
||||
if (selectedTags.value.includes(tag)) {
|
||||
// 如果已选择，则取消选择
|
||||
const index = selectedTags.value.indexOf(tag)
|
||||
selectedTags.value.splice(index, 1)
|
||||
}
|
||||
else {
|
||||
// 如果未选择，则添加
|
||||
if (selectedTags.value.length >= 2) {
|
||||
toast.info('最多只能选择2个标签')
|
||||
return
|
||||
}
|
||||
selectedTags.value.push(tag)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 从选择列表删除标签
|
||||
*/
|
||||
handleRemoveTagFromList: (tag: string, event: any) => {
|
||||
event.stopPropagation()
|
||||
const index = availableTags.value.indexOf(tag)
|
||||
if (index > -1) {
|
||||
availableTags.value.splice(index, 1)
|
||||
}
|
||||
// 如果该标签已被选中，也从临时选中列表中移除
|
||||
const selectedIndex = selectedTags.value.indexOf(tag)
|
||||
if (selectedIndex > -1) {
|
||||
selectedTags.value.splice(selectedIndex, 1)
|
||||
}
|
||||
// 如果该标签在表单中，也从表单中移除
|
||||
const formIndex = form.tags.indexOf(tag)
|
||||
if (formIndex > -1) {
|
||||
form.tags.splice(formIndex, 1)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认选择标签
|
||||
*/
|
||||
handleConfirmTags: () => {
|
||||
form.tags = [...selectedTags.value]
|
||||
showTagSelectPopup.value = false
|
||||
isTagManageMode.value = false
|
||||
selectedTags.value = []
|
||||
},
|
||||
|
||||
/**
|
||||
* 进入管理模式
|
||||
*/
|
||||
handleEnterManagement: () => {
|
||||
isTagManageMode.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出管理模式
|
||||
*/
|
||||
handleExitManagement: () => {
|
||||
isTagManageMode.value = false
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示新建标签弹窗
|
||||
*/
|
||||
handleShowCreateTag: () => {
|
||||
showTagSelectPopup.value = false
|
||||
showCreateTagPopup.value = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭新建标签弹窗
|
||||
*/
|
||||
handleCloseCreateTag: () => {
|
||||
showCreateTagPopup.value = false
|
||||
newTagName.value = ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 完成新建标签
|
||||
*/
|
||||
handleCompleteCreateTag: () => {
|
||||
const tagName = newTagName.value.trim()
|
||||
if (!tagName) {
|
||||
toast.info('请输入标签名称')
|
||||
return
|
||||
}
|
||||
if (tagName.length > 5) {
|
||||
toast.info('标签不能超过5个字')
|
||||
return
|
||||
}
|
||||
if (availableTags.value.includes(tagName)) {
|
||||
toast.info('该标签已存在')
|
||||
return
|
||||
}
|
||||
// 添加到可用标签列表
|
||||
availableTags.value.push(tagName)
|
||||
// 如果当前临时选中的标签少于2个，自动选中新创建的标签
|
||||
if (selectedTags.value.length < 2) {
|
||||
selectedTags.value.push(tagName)
|
||||
}
|
||||
// 关闭弹窗，重新打开选择标签弹窗
|
||||
showCreateTagPopup.value = false
|
||||
newTagName.value = ''
|
||||
showTagSelectPopup.value = true
|
||||
toast.info('标签创建成功')
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除标签
|
||||
*/
|
||||
handleRemoveTag: (index: number) => {
|
||||
form.tags.splice(index, 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传视频
|
||||
*/
|
||||
handleUploadVideo: (event: any) => {
|
||||
if (event.fileList && event.fileList.length > 0) {
|
||||
form.video = event.fileList[0]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除视频
|
||||
*/
|
||||
handleRemoveVideo: () => {
|
||||
form.video = null
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传图片
|
||||
*/
|
||||
handleUploadImage: (event: any) => {
|
||||
if (event.fileList && event.fileList.length > 0) {
|
||||
const newImages = event.fileList.map((file: any) => file.url || file.tempFilePath)
|
||||
form.images.push(...newImages)
|
||||
// 限制最多9张
|
||||
if (form.images.length > 9) {
|
||||
form.images = form.images.slice(0, 9)
|
||||
toast.info('最多只能上传9张图片')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除图片
|
||||
*/
|
||||
handleRemoveImage: (index: number) => {
|
||||
form.images.splice(index, 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
handleSave: () => {
|
||||
// TODO: 实现保存功能
|
||||
console.log('保存表单:', form)
|
||||
toast.info('保存成功')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击更多选项
|
||||
*/
|
||||
handleMore: () => {
|
||||
// TODO: 实现更多选项功能
|
||||
console.log('更多选项')
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击目标图标
|
||||
*/
|
||||
handleTarget: () => {
|
||||
// TODO: 实现目标功能
|
||||
console.log('目标功能')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f6f7f8;
|
||||
@ -676,9 +678,8 @@ page {
|
||||
|
||||
.add-textarea {
|
||||
:deep() {
|
||||
|
||||
.wd-textarea__value,
|
||||
.wd-textarea__count {
|
||||
.wd-input__value,
|
||||
.wd-input__count {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user