酒店订房优化

src/views/content/hotelBooking/index.vue

@@ -197,6 +197,37 @@
               <el-form-item label="房间" :prop="'rooms.' + ri + '.roomName'" :rules="rules.roomName" label-width="80px">
                 <el-input v-model="room.roomName" placeholder="请输入房间名称" style="width: 260px" />
               </el-form-item>
+              <el-form-item label="款式名" label-width="80px">
+                <el-input v-model="room.styleName" placeholder="APP房型列表蓝色标签，如：高级景观房" style="width: 260px" />
+              </el-form-item>
+              <el-form-item label="封面图" label-width="80px">
+                <div class="image-upload-container">
+                  <div class="upload-buttons-row">
+                    <el-upload
+                      action="#"
+                      :auto-upload="false"
+                      :on-change="(file) => handleCoverFileChange(file, room)"
+                      accept="image/*"
+                      :show-file-list="false"
+                    >
+                      <el-button type="primary" size="small">{{ room.coverImage ? '替换封面图' : '上传封面图' }}</el-button>
+                    </el-upload>
+                  </div>
+                  <div class="form-tip">仅一张，APP房型列表左侧缩略图；不传则APP用房间图片第一张兜底</div>
+                  <div v-if="room.coverImage" class="content-image-item" style="width: 160px">
+                    <el-image
+                      :src="room.coverImage"
+                      style="width: 100%; height: 100px"
+                      fit="cover"
+                      :preview-src-list="[room.coverImage]"
+                      :preview-teleported="true"
+                    />
+                    <div class="content-image-actions">
+                      <el-button type="danger" size="small" circle icon="Delete" @click="room.coverImage = ''" />
+                    </div>
+                  </div>
+                </div>
+              </el-form-item>
               <el-form-item label="房间介绍" label-width="80px">
                 <el-input
                   v-model="room.roomIntro"
@@ -312,7 +343,7 @@ const MAX_IMAGES = 5;
 
 // 时段：只含当天，剩余间数创建后可二次修改
 const createPeriod = () => ({ id: null, startDate: null, endDate: null, remainingCount: null });
-const createRoom = () => ({ id: null, roomName: '', roomIntro: '', roomImages: [], periods: [createPeriod()] });
+const createRoom = () => ({ id: null, roomName: '', styleName: '', coverImage: '', roomIntro: '', roomImages: [], periods: [createPeriod()] });
 
 // 空白时段行/空白房型块：保存时过滤掉，不提交给后端
 function isPeriodEmpty(p) {
@@ -455,6 +486,8 @@ async function handleUpdate(row) {
       rooms: (data.roomList || []).map((room) => ({
         id: room.id,
         roomName: room.roomName || '',
+        styleName: room.styleName || '',
+        coverImage: room.coverImage || '',
         roomIntro: room.roomIntro || '',
         roomImages: (room.imageList || []).map((img) => img.imageUrl),
         periods: (room.periodList || []).map((p) => ({
@@ -606,6 +639,19 @@ async function handleRoomFileChange(file, room) {
   }
 }
 
+// 房型封面图：仅一张，重新上传直接替换旧图
+async function handleCoverFileChange(file, room) {
+  try {
+    const url = await uploadFileToUrl(file.raw);
+    if (url) {
+      room.coverImage = url;
+      ElMessage.success('封面图上传成功');
+    }
+  } catch (err) {
+    console.error('上传失败:', err);
+  }
+}
+
 function moveImageUp(arr, index) {
   [arr[index - 1], arr[index]] = [arr[index], arr[index - 1]];
 }