feature: edit room detail

src/pages/store/room-detail.vue

@@ -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>

src/pages/store/room-manage.vue

@@ -92,9 +92,10 @@ const RoomManage = {
    * 点击编辑房间图片
    */
   handleEditImage: (room: any, event: any) => {
-    event.stopPropagation()
+    // event.stopPropagation()
     // TODO: 实现编辑房间图片功能
     console.log('编辑房间图片:', room.id)
+    router.navigateTo(`/pages/store/room-detail?id=${room.id}`)
   },
 
   /**