完善会议管理界面

pages/sys/workbench/meet/createMeet.vue

@@ -44,6 +44,50 @@
     <view class="custom-picker-wrapper">
       <uni-datetime-picker type="datetime" :hide-second="true" v-model="formData.time"/>
     </view>
+    <!-- 选择会议室类型 -->
+    <text class="section-title">会议室类型</text>
+    <view class="select-field" @click="showMeetingTypePicker">
+      <text>{{ formData.meetingType || '请选择会议室类型' }}</text>
+      <image class="arrow-icon" src="/static/ic_right_arrow_g.png"/>
+    </view>
+
+    <!-- 会议室类型选择弹窗 -->
+    <uni-popup ref="meetingTypePopup" type="bottom" :mask-click="false">
+      <view class="meeting-type-popup">
+        <view class="popup-header">
+          <text class="popup-title">选择会议室类型</text>
+          <text class="popup-close" @click="hideMeetingTypePicker">×</text>
+        </view>
+        <scroll-view class="type-list" scroll-y>
+          <view
+              v-for="(type, index) in meetingTypes"
+              :key="index"
+              class="type-item"
+              @click="selectMeetingType(index)">
+            <view class="type-icon">
+              <image :src="type.icon" class="type-icon-img"/>
+            </view>
+            <view class="type-info">
+              <text class="type-name">{{ type.name }}</text>
+            </view>
+            <!-- 使用相同的自定义选择框 -->
+            <view class="custom-checkbox">
+              <image
+                  class="checkbox-border"
+                  src="/static/ic_checkbox_border.png"
+                  mode="aspectFill"
+              />
+              <image
+                  v-if="meetingTypeIndex === index"
+                  class="check-icon"
+                  src="/static/ic_check_mark.png"
+              />
+            </view>
+          </view>
+        </scroll-view>
+        <button class="confirm-btn" @click="confirmMeetingType">确认选择</button>
+      </view>
+    </uni-popup>
 
     <!-- 选择会议室 -->
     <text class="section-title">选择会议室</text>
@@ -63,9 +107,10 @@
           <view
               v-for="(room, index) in meetingRooms"
               :key="index"
-              class="room-item">
+              class="room-item"
+             >
             <view class="room-icon"></view>
-            <view class="room-info">
+            <view class="room-info"  @click="goMeetDetail(index)">
               <text class="room-name">{{ room.name }}</text>
               <text class="room-detail">{{ room.capacity }} {{ room.facility }}</text>
             </view>
@@ -154,7 +199,40 @@ export default {
       // 新增服务展开状态
       serviceExpanded: false,
       meetingRoomIndex: 0,
+      meetingTypeIndex: 0,
       meetingTime: '2025-07-07 14:00-18:00',
+      meetingTypes: [
+        {
+          name: '小型会议室',
+          description: '适合4-8人小型会议',
+          icon: '/static/ic_meet_small.png'
+        },
+        {
+          name: '中型会议室',
+          description: '适合8-20人中型会议',
+          icon: '/static/ic_meet_medium.png'
+        },
+        {
+          name: '大型会议室',
+          description: '适合20-50人大型会议',
+          icon: '/static/ic_meet_large.png'
+        },
+        {
+          name: '多功能厅',
+          description: '适合50人以上大型活动',
+          icon: '/static/ic_meet_hall.png'
+        },
+        {
+          name: '视频会议室',
+          description: '配备专业视频会议设备',
+          icon: '/static/ic_meet_video.png'
+        },
+        {
+          name: '董事会议室',
+          description: '高端商务会议场所',
+          icon: '/static/ic_meet_board.png'
+        }
+      ],
       meetingRooms: [
         {name: '3栋1号会议室 (3078)', capacity: '可容纳20人', facility: '带电视', price: 29},
         {name: '3栋2号会议室 (5124)', capacity: '可容纳50人', facility: '带投影仪', price: 49},
@@ -261,7 +339,11 @@ export default {
         this.calculateTotalPrice();
       }
     },
-
+    goMeetDetail(){
+      uni.navigateTo({
+        url: `/pages/sys/workbench/meet/meetDetail`
+      });
+    },
     calculateTotalPrice() {
       let total = 0;
 
@@ -279,7 +361,21 @@ export default {
 
       this.totalPrice = total;
     },
-
+    // 新增会议室类型相关方法
+    showMeetingTypePicker() {
+      this.$refs.meetingTypePopup.open();
+    },
+    hideMeetingTypePicker() {
+      this.$refs.meetingTypePopup.close();
+    },
+    selectMeetingType(index) {
+      this.meetingTypeIndex = index;
+    },
+    confirmMeetingType() {
+      const selectedType = this.meetingTypes[this.meetingTypeIndex];
+      this.formData.meetingType = selectedType.name;
+      this.hideMeetingTypePicker();
+    },
     submitForm() {
       if (!this.formData.peopleNum || !this.formData.meetingRoom) {
         uni.showToast({
@@ -759,4 +855,53 @@ export default {
 .room-item:active {
   background-color: #f5f5f5;
 }
+
+/* 新增会议室类型弹窗样式 */
+.meeting-type-popup {
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 30rpx;
+  max-height: 70vh;
+}
+
+.type-list {
+  max-height: 50vh;
+  margin-bottom: 20rpx;
+}
+
+.type-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0;
+  border-bottom: 1rpx solid #eee;
+  position: relative;
+}
+
+.type-icon {
+  width: 80rpx;
+  height: 80rpx;
+  margin-right: 20rpx;
+
+  .type-icon-img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.type-info {
+  flex: 1;
+}
+
+.type-name {
+  font-size: 32rpx;
+  color: #333;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+/* 类型项悬停效果 */
+.type-item:active {
+  background-color: #f5f5f5;
+}
+
 </style>