feature: edit room detail
This commit is contained in:
kaijierepo
777
src/pages/store/room-detail.vue
Normal file
777
src/pages/store/room-detail.vue
Normal file
@ -0,0 +1,777 @@
|
|||||||
|
<route lang="jsonc" type="page">
|
||||||
|
{
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
<navbar title="修改包间信息" custom-class="!bg-[#fff]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="store-tabs">
|
||||||
|
<wd-tabs v-model="tab" @change="StoreManage.handleChangeTab">
|
||||||
|
<wd-tab title="基础信息" />
|
||||||
|
<wd-tab title="规格与价格" />
|
||||||
|
<wd-tab title="套餐详情" />
|
||||||
|
<wd-tab title="购买须知" />
|
||||||
|
</wd-tabs>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="h-64rpx bg-[#FFF6EB] px-30rpx text-26rpx text-[#111827] font-400 leading-64rpx">
|
||||||
|
带"<text class="text-[#ED2D2D]">*</text>"的为必填项
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mt-20rpx bg-white p-30rpx">
|
||||||
|
<!-- 基础信息 -->
|
||||||
|
<view v-if="tab === 0">
|
||||||
|
<view class="text-34rpx text-[#303133] font-bold leading-48rpx">
|
||||||
|
基本信息
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 包间名称 -->
|
||||||
|
<view class="mt-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center">
|
||||||
|
<view class="mr-10rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
包间名称
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-input
|
||||||
|
v-model="form.roomName"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入包间名称"
|
||||||
|
:maxlength="10"
|
||||||
|
show-word-limit
|
||||||
|
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 包间标签 -->
|
||||||
|
<view class="mt-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center justify-between">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="mr-10rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
包间标签
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-24rpx text-[#9CA3AF] font-400 leading-34rpx">
|
||||||
|
可选择1~2个标签,每个标签不超过5个字
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex flex-wrap items-center gap-16rpx">
|
||||||
|
<view
|
||||||
|
v-for="(tag, index) in form.tags"
|
||||||
|
:key="index"
|
||||||
|
class="flex items-center rounded-20rpx bg-[#F6F7F8] px-20rpx py-8rpx"
|
||||||
|
>
|
||||||
|
<view class="mr-8rpx text-26rpx text-[#303133] leading-36rpx">
|
||||||
|
{{ tag }}
|
||||||
|
</view>
|
||||||
|
<wd-icon name="close" size="14px" color="#909399" @click="StoreManage.handleRemoveTag(index)" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="form.tags.length < 2"
|
||||||
|
class="flex items-center border-2rpx border-[#E5E5E5] rounded-20rpx border-dashed px-20rpx py-8rpx"
|
||||||
|
@click="StoreManage.handleAddTag"
|
||||||
|
>
|
||||||
|
<wd-icon name="add" size="16px" color="#909399" class="mr-8rpx" />
|
||||||
|
<view class="text-26rpx text-[#909399] leading-36rpx">
|
||||||
|
添加标签
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 团购视频 -->
|
||||||
|
<view class="mt-28rpx">
|
||||||
|
<view class="mb-28rpx flex items-center">
|
||||||
|
<view class="mr-10rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
团购视频
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="form.video" class="relative h-184rpx w-184rpx overflow-hidden rounded-16rpx">
|
||||||
|
<wd-img width="100%" height="100%" :src="form.video.thumb" mode="aspectFill" />
|
||||||
|
<view class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<wd-icon name="play" size="48rpx" color="#fff" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="absolute right-8rpx top-8rpx h-32rpx w-32rpx flex items-center justify-center rounded-full bg-black bg-opacity-50"
|
||||||
|
@click="StoreManage.handleRemoveVideo"
|
||||||
|
>
|
||||||
|
<wd-icon name="close" size="14px" color="#fff" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-upload
|
||||||
|
v-else
|
||||||
|
:file-list="[]"
|
||||||
|
:limit="1"
|
||||||
|
image-mode="scaleToFill"
|
||||||
|
accept="video"
|
||||||
|
:action="action"
|
||||||
|
@change="StoreManage.handleUploadVideo"
|
||||||
|
>
|
||||||
|
<view class="h-184rpx w-184rpx flex flex-col items-center justify-center border-2rpx border-[#E5E5E5] rounded-16rpx border-dashed">
|
||||||
|
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_video.png`" mode="aspectFill" />
|
||||||
|
<view class="mt-12rpx text-26rpx text-[#303133] font-400 leading-36rpx">
|
||||||
|
添加视频
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-upload>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 团购图片 -->
|
||||||
|
<view class="mt-28rpx">
|
||||||
|
<view class="mb-28rpx flex items-center justify-between">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="mr-10rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
团购图片
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-26rpx text-[#9CA3AF] font-400 leading-36rpx">
|
||||||
|
可添加3~9张图片
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex flex-wrap items-center gap-16rpx">
|
||||||
|
<view
|
||||||
|
v-for="(image, index) in form.images"
|
||||||
|
:key="index"
|
||||||
|
class="relative h-184rpx w-184rpx overflow-hidden rounded-16rpx"
|
||||||
|
>
|
||||||
|
<wd-img width="100%" height="100%" :src="image" mode="aspectFill" />
|
||||||
|
<view
|
||||||
|
class="absolute right-8rpx top-8rpx h-32rpx w-32rpx flex items-center justify-center rounded-full bg-black bg-opacity-50"
|
||||||
|
@click="StoreManage.handleRemoveImage(index)"
|
||||||
|
>
|
||||||
|
<wd-icon name="close" size="14px" color="#fff" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-upload
|
||||||
|
v-if="form.images.length < 9"
|
||||||
|
:file-list="[]"
|
||||||
|
:limit="9 - form.images.length"
|
||||||
|
image-mode="scaleToFill"
|
||||||
|
accept="image"
|
||||||
|
:action="action"
|
||||||
|
@change="StoreManage.handleUploadImage"
|
||||||
|
>
|
||||||
|
<view class="h-184rpx w-184rpx flex flex-col items-center justify-center border-2rpx border-[#E5E5E5] rounded-16rpx border-dashed">
|
||||||
|
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
|
||||||
|
<view class="mt-12rpx text-26rpx text-[#303133] font-400 leading-36rpx">
|
||||||
|
添加图片
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-upload>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 规格与价格 -->
|
||||||
|
<view v-if="tab === 1">
|
||||||
|
<view class="mb-30rpx text-34rpx text-[#303133] font-bold leading-48rpx">
|
||||||
|
规格与价格
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 小时优惠价 -->
|
||||||
|
<view class="mb-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center">
|
||||||
|
<view class="mr-10rpx text-30rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
小时优惠价
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-input
|
||||||
|
v-model="form.hourlyPrice"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入小时优惠价"
|
||||||
|
type="digit"
|
||||||
|
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<view class="mr-8rpx text-28rpx text-[#303133]">
|
||||||
|
¥
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-input>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 起订时间 -->
|
||||||
|
<view class="mb-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center justify-between">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="mr-10rpx text-30rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
起订时间
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-24rpx text-[#9CA3AF] font-400 leading-34rpx">
|
||||||
|
范围1~5
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-input
|
||||||
|
v-model="form.minBookingTime"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入起订时间"
|
||||||
|
type="number"
|
||||||
|
:max="5"
|
||||||
|
:min="1"
|
||||||
|
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"
|
||||||
|
/>
|
||||||
|
<view class="ml-16rpx text-28rpx text-[#303133]">
|
||||||
|
小时
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 库存 -->
|
||||||
|
<view class="mb-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center justify-between">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="mr-10rpx text-30rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
库存
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-24rpx text-[#9CA3AF] font-400 leading-34rpx">
|
||||||
|
输入范围1-999
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-input
|
||||||
|
v-model="form.inventory"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入库存"
|
||||||
|
type="number"
|
||||||
|
:max="999"
|
||||||
|
:min="1"
|
||||||
|
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 套餐详情 -->
|
||||||
|
<view v-if="tab === 2">
|
||||||
|
<view class="mb-30rpx text-34rpx text-[#303133] font-bold leading-48rpx">
|
||||||
|
套餐详情
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 套餐介绍 -->
|
||||||
|
<view class="add-textarea mb-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center justify-between">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="mr-10rpx text-30rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
套餐介绍
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-24rpx text-[#9CA3AF] font-400 leading-34rpx">
|
||||||
|
每条内容之间需要换行输入
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-textarea
|
||||||
|
v-model="form.packageIntro"
|
||||||
|
custom-class="!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx"
|
||||||
|
custom-textarea-class="!bg-[#F8F9FA]"
|
||||||
|
placeholder="请输入套餐介绍，每条内容换行输入"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 其他说明 -->
|
||||||
|
<view class="add-textarea mt-30rpx">
|
||||||
|
<view class="mb-20rpx flex items-center">
|
||||||
|
<view class="mr-10rpx text-30rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
其他说明
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-textarea
|
||||||
|
v-model="form.otherNotes"
|
||||||
|
custom-class="!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx"
|
||||||
|
custom-textarea-class="!bg-[#F8F9FA]"
|
||||||
|
placeholder="请输入其他说明"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 购买须知 -->
|
||||||
|
<view v-if="tab === 3">
|
||||||
|
<view class="mb-30rpx text-34rpx text-[#303133] font-bold leading-48rpx">
|
||||||
|
购买须知
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 使用人数 -->
|
||||||
|
<view class="mb-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center">
|
||||||
|
<view class="mr-10rpx text-30rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
使用人数
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-input
|
||||||
|
v-model="form.userCount"
|
||||||
|
no-border
|
||||||
|
placeholder="建议4~6人使用"
|
||||||
|
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 退改说明 -->
|
||||||
|
<view class="add-textarea mt-28rpx">
|
||||||
|
<view class="mb-20rpx flex items-center">
|
||||||
|
<view class="mr-10rpx text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
退改说明
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-textarea
|
||||||
|
v-model="form.refundPolicy"
|
||||||
|
custom-class="!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx"
|
||||||
|
custom-textarea-class="!bg-[#F8F9FA]"
|
||||||
|
placeholder="请输入退改说明"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部保存按钮 -->
|
||||||
|
<view class="fixed bottom-0 left-0 right-0 h-152rpx bg-white">
|
||||||
|
<view class="mt-34rpx flex items-center justify-center">
|
||||||
|
<wd-button
|
||||||
|
custom-class="!text-32rpx !w-630rpx !h-90rpx !bg-[#4C9F44] !rounded-8rpx !text-[#fff]"
|
||||||
|
@click="StoreManage.handleSave"
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选择标签弹窗 -->
|
||||||
|
<wd-popup
|
||||||
|
v-model="showTagSelectPopup"
|
||||||
|
lock-scroll
|
||||||
|
custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
|
||||||
|
position="bottom"
|
||||||
|
@close="StoreManage.handleCloseTagSelect"
|
||||||
|
>
|
||||||
|
<view class="relative bg-white px-30rpx pb-56rpx pt-50rpx">
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
|
<view class="absolute right-30rpx top-18rpx" @click="StoreManage.handleCloseTagSelect">
|
||||||
|
<wd-icon name="close" size="20px" color="#C0C4CC" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="mb-40rpx text-center text-36rpx text-[#121212] leading-50rpx">
|
||||||
|
选择标签
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 我的标签标题和管理/退出管理 -->
|
||||||
|
<view class="mb-20rpx flex items-center justify-between">
|
||||||
|
<view class="text-32rpx text-[#303133] font-bold leading-44rpx">
|
||||||
|
我的标签
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="text-28rpx text-[#4C9F44] leading-40rpx"
|
||||||
|
@click="isTagManageMode ? StoreManage.handleExitManagement() : StoreManage.handleEnterManagement()"
|
||||||
|
>
|
||||||
|
{{ isTagManageMode ? '退出管理' : '管理' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 说明文字 -->
|
||||||
|
<view class="mb-28rpx text-24rpx text-[#9CA3AF] leading-34rpx">
|
||||||
|
可选择1~2个标签, 每个标签不超过5个字
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 标签列表 -->
|
||||||
|
<view class="flex flex-wrap gap-16rpx">
|
||||||
|
<view
|
||||||
|
v-for="tag in availableTags"
|
||||||
|
:key="tag"
|
||||||
|
class="flex items-center rounded-20rpx px-20rpx py-8rpx"
|
||||||
|
:class="selectedTags.includes(tag) ? 'bg-[#4C9F44]' : 'bg-[#F6F7F8]'"
|
||||||
|
@click="StoreManage.handleSelectTag(tag)"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="text-26rpx leading-36rpx"
|
||||||
|
:class="selectedTags.includes(tag) ? 'text-[#fff]' : 'text-[#303133]'"
|
||||||
|
:style="{ marginRight: isTagManageMode ? '8rpx' : '0' }"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</view>
|
||||||
|
<wd-icon
|
||||||
|
v-if="isTagManageMode"
|
||||||
|
name="close-circle-filled"
|
||||||
|
size="14px"
|
||||||
|
:color="selectedTags.includes(tag) ? '#fff' : '#909399'"
|
||||||
|
@click.stop="StoreManage.handleRemoveTagFromList(tag, $event)"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<!-- 新建标签按钮 -->
|
||||||
|
<view
|
||||||
|
v-if="!isTagManageMode"
|
||||||
|
class="flex items-center border-2rpx border-[#E5E5E5] rounded-20rpx border-dashed px-20rpx py-8rpx"
|
||||||
|
@click="StoreManage.handleShowCreateTag"
|
||||||
|
>
|
||||||
|
<wd-icon name="add" size="16px" color="#909399" class="mr-8rpx" />
|
||||||
|
<view class="text-26rpx text-[#909399] leading-36rpx">
|
||||||
|
新建标签
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 确认按钮 -->
|
||||||
|
<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 }"
|
||||||
|
@click="StoreManage.handleConfirmTags"
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
|
||||||
|
<!-- 新建标签弹窗 -->
|
||||||
|
<wd-popup
|
||||||
|
v-model="showCreateTagPopup"
|
||||||
|
lock-scroll
|
||||||
|
custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
|
||||||
|
position="bottom"
|
||||||
|
@close="StoreManage.handleCloseCreateTag"
|
||||||
|
>
|
||||||
|
<view class="relative bg-white px-30rpx pb-78rpx pt-50rpx">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<view class="mb-40rpx flex items-center justify-between">
|
||||||
|
<view class="flex items-center" @click="StoreManage.handleCloseCreateTag">
|
||||||
|
<wd-icon name="arrow-left" size="20px" color="#303133" />
|
||||||
|
</view>
|
||||||
|
<view class="text-center text-36rpx text-[#121212] leading-50rpx">
|
||||||
|
新建标签
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center" @click="StoreManage.handleCloseCreateTag">
|
||||||
|
<wd-icon name="close" size="20px" color="#C0C4CC" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 输入框 -->
|
||||||
|
<view class="mb-40rpx">
|
||||||
|
<wd-input
|
||||||
|
v-model="newTagName"
|
||||||
|
no-border
|
||||||
|
placeholder="标签名称"
|
||||||
|
:maxlength="5"
|
||||||
|
custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 完成按钮 -->
|
||||||
|
<view
|
||||||
|
class="h-90rpx rounded-8rpx bg-[#4C9F44] text-center text-30rpx text-[#fff] leading-90rpx"
|
||||||
|
@click="StoreManage.handleCompleteCreateTag"
|
||||||
|
>
|
||||||
|
完成
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background: #f6f7f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-tabs {
|
||||||
|
:deep() {
|
||||||
|
.wd-tabs__line {
|
||||||
|
background-color: #4c9f44 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-textarea {
|
||||||
|
:deep() {
|
||||||
|
.wd-textarea__value,
|
||||||
|
.wd-textarea__count {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -92,9 +92,10 @@ const RoomManage = {
|
|||||||
* 点击编辑房间图片
|
* 点击编辑房间图片
|
||||||
*/
|
*/
|
||||||
handleEditImage: (room: any, event: any) => {
|
handleEditImage: (room: any, event: any) => {
|
||||||
event.stopPropagation()
|
// event.stopPropagation()
|
||||||
// TODO: 实现编辑房间图片功能
|
// TODO: 实现编辑房间图片功能
|
||||||
console.log('编辑房间图片:', room.id)
|
console.log('编辑房间图片:', room.id)
|
||||||
|
router.navigateTo(`/pages/store/room-detail?id=${room.id}`)
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user