SmartParks_uniapp/pages/sys/workbench/meet/createMeet.vue

<template>
  <view class="container">
    <!-- 日期导航 -->
    <view class="date-nav">
      <scroll-view scroll-x class="date-scroll">
        <view
            v-for="(item, index) in dateList"
            :key="index"
            class="date-item"
            :class="currentDate === item.date ? 'active' : ''"
            @click="selectDate(item.date)"
        >
          <text class="week-day">{{ item.weekDay }}</text>
          <text class="date-text" v-if="!item.isToday">{{ item.date }}</text>
          <text class="today-text" v-else>今天</text>
        </view>
      </scroll-view>
    </view>

    <!-- 选择时段 -->
    <text class="section-title">选择时段</text>
    <view class="time-tabs">
      <view class="time-tab" :class="timeTab === 'morning' ? 'active' : 'inactive'" @click="changeTimeTab('morning')">
        <image src="/static/ic_meet_02.png" class="time-icon"/>
        上午
      </view>
      <view class="time-tab" :class="timeTab === 'afternoon' ? 'active' : 'inactive'"
            @click="changeTimeTab('afternoon')">
        <image src="/static/ic_meet_03.png" class="time-icon"/>
        下午
      </view>
    </view>

    <!-- 会议人数 -->
    <text class="section-title">会议人数</text>
    <input type="number" v-model="formData.peopleNum" placeholder="请输入会议人数" class="input-field"/>

    <!-- 会议主题 -->
    <text class="section-title">会议主题</text>
    <input type="text" v-model="formData.theme" placeholder="请输入会议名称" class="input-field"/>

    <!-- 会议时间 -->
    <text class="section-title">会议时间</text>
    <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="showMeetingRoomPicker">
      <text>{{ formData.meetingRoom || '请选择会议室' }}</text>
      <image class="arrow-icon" src="/static/ic_right_arrow_g.png"/>
    </view>

    <!-- 添加会议室选择弹窗 -->
    <uni-popup ref="meetingRoomPopup" type="bottom" :mask-click="false">
      <view class="meeting-room-popup">
        <view class="popup-header">
          <text class="popup-title">选择会议室</text>
          <text class="popup-close" @click="hideMeetingRoomPicker">×</text>
        </view>
        <scroll-view class="room-list" scroll-y>
          <view
              v-for="(room, index) in meetingRooms"
              :key="index"
              class="room-item">
            <view class="room-icon"></view>
            <view class="room-info">
              <text class="room-name">{{ room.name }}</text>
              <text class="room-detail">{{ room.capacity }} {{ room.facility }}</text>
            </view>
            <text class="room-price">¥{{ room.price }}</text>
            <!-- 使用两张图片组合的选择框 -->
            <view class="custom-checkbox" @click="selectMeetingRoom(index)">
              <!-- 深蓝色边框背景（对应第2张图） -->
              <image
                  class="checkbox-border"
                  src="/static/ic_checkbox_border.png"
                  mode="aspectFill"
              />
              <!-- 选中状态显示对勾（对应第1张图） -->
              <image
                  v-if="meetingRoomIndex === index"
                  class="check-icon"
                  src="/static/ic_check_mark.png"
              />
            </view>
          </view>
        </scroll-view>
        <button class="confirm-btn" @click="confirmMeetingRoom">确认选择</button>
      </view>
    </uni-popup>

    <!-- 增值服务 -->
    <text class="section-title">增值服务</text>
    <view class="select-field" @click="toggleServiceExpand">
      <text>会议物品</text>
      <image class="arrow-icon"
             :src="serviceExpanded ? '/static/ic_down_arrow_g.png' : '/static/ic_right_arrow_g.png'"/>
    </view>

    <!-- 展开的服务内容 -->
    <view class="service-content" v-if="serviceExpanded">
      <view class="service-category" v-for="(category, catIndex) in services" :key="catIndex">
        <text class="category-title">{{ category.name }}</text>
        <view class="service-items">
          <view class="service-item" v-for="(item, itemIndex) in category.items" :key="itemIndex">
            <view class="service-info">
              <text class="service-name">{{ item.name }}</text>
              <text class="service-price">¥{{ item.price }}/{{ item.unit }}</text>
            </view>
            <view class="quantity-control">
              <view class="quantity-btn minus" @tap="adjustQuantity(catIndex, itemIndex, -1)">-</view>
              <input type="number" v-model="item.quantity" disabled class="quantity-input"/>
              <view class="quantity-btn plus" @tap="adjustQuantity(catIndex, itemIndex, 1)">+</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 新增增值服务备注栏 -->
      <view class="service-remark">
        <textarea v-model="formData.remark" placeholder="请输入增值服务备注信息（选填）" style="width: 100%"
                  maxlength="120"> </textarea>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <view class="price-display">
        <text class="price-symbol">¥</text>
        <text class="price-amount">{{ totalPrice }}</text>
      </view>
      <button class="submit-btn" @tap="submitForm">发起会议</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '',
      dateList: [],
      timeTab: 'afternoon',
      formData: {
        time: '',
        peopleNum: '',
        meetingRoom: '',
        theme: '',
        checkIn: false,
        remark: ''
      },
      // 新增服务展开状态
      serviceExpanded: false,
      meetingRoomIndex: 0,
      meetingTime: '2025-07-07 14:00-18:00',
      meetingRooms: [
        {name: '3栋1号会议室 (3078)', capacity: '可容纳20人', facility: '带电视', price: 29},
        {name: '3栋2号会议室 (5124)', capacity: '可容纳50人', facility: '带投影仪', price: 49},
        {name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
        {name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
        {name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
        {name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
        {name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
        {name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99},
        {name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99}
      ],
      services: [
        {
          name: '茶水',
          items: [
            {id: 1, name: '清茶', price: 5, unit: '杯', quantity: 0},
            {id: 2, name: '碧螺春', price: 8, unit: '杯', quantity: 0},
            {id: 3, name: '红茶', price: 10, unit: '杯', quantity: 0},
            {id: 4, name: '怡宝矿泉水', price: 2, unit: '瓶', quantity: 0}
          ]
        },
        {
          name: '会议物品',
          items: [
            {id: 5, name: '纸巾', price: 1, unit: '包', quantity: 0},
            {id: 6, name: '一次性毛巾', price: 3, unit: '个', quantity: 0},
            {id: 7, name: '湿巾', price: 2, unit: '包', quantity: 0},
            {id: 8, name: '文件袋', price: 5, unit: '个', quantity: 0}
          ]
        },
        {
          name: '其他物品',
          items: [
            {id: 9, name: '话筒', price: 10, unit: '个', quantity: 0},
            {id: 10, name: '音乐', price: 20, unit: '场', quantity: 0},
            {id: 11, name: '假花', price: 15, unit: '束', quantity: 0}
          ]
        }
      ],
      totalPrice: 0
    };
  },
  created() {
    this.initDateList();
    this.calculateTotalPrice();
  },
  methods: {
    // 新增切换服务展开状态方法
    toggleServiceExpand() {
      this.serviceExpanded = !this.serviceExpanded;
    },
    initDateList() {
      const today = new Date();
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

      for (let i = 0; i < 14; i++) {
        const date = new Date();
        date.setDate(today.getDate() + i);

        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const weekDay = weekDays[date.getDay()];
        const dateStr = `${month}-${day}`;

        this.dateList.push({
          date: dateStr,
          weekDay: weekDay,
          isToday: i === 0
        });
      }

      this.currentDate = this.dateList[0].date;
    },

    selectDate(date) {
      this.currentDate = date;
    },

    changeTimeTab(tab) {
      this.timeTab = tab;
    },


    showMeetingRoomPicker() {
      this.$refs.meetingRoomPopup.open();
    },
    hideMeetingRoomPicker() {
      this.$refs.meetingRoomPopup.close();
    },
    selectMeetingRoom(index) {
      this.meetingRoomIndex = index;
    },
    confirmMeetingRoom() {
      const selectedRoom = this.meetingRooms[this.meetingRoomIndex];
      this.formData.meetingRoom = `${selectedRoom.name} (¥${selectedRoom.price})`;
      this.calculateTotalPrice();
      this.hideMeetingRoomPicker();
    },
    adjustQuantity(catIndex, itemIndex, delta) {
      const item = this.services[catIndex].items[itemIndex];
      const newQuantity = item.quantity + delta;
      if (newQuantity >= 0) {
        item.quantity = newQuantity;
        this.calculateTotalPrice();
      }
    },

    calculateTotalPrice() {
      let total = 0;

      // 会议室费用
      if (this.meetingRoomIndex >= 0) {
        total += this.meetingRooms[this.meetingRoomIndex].price;
      }

      // 增值服务费用
      this.services.forEach(category => {
        category.items.forEach(item => {
          total += item.price * item.quantity;
        });
      });

      this.totalPrice = total;
    },

    submitForm() {
      if (!this.formData.peopleNum || !this.formData.meetingRoom) {
        uni.showToast({
          title: '请完善必填信息',
          icon: 'none'
        });
        return;
      }

      uni.showLoading({title: '提交中...'});
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '预约成功',
          success: () => {
            // 跳转支付页面
          }
        });
      }, 1000);
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx 30rpx 120rpx;
}

/* 日期导航 */
.date-nav {
  background: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;

  .date-scroll {
    white-space: nowrap;
  }

  .date-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 20rpx;
    margin: 0 10rpx;
    border-radius: 8rpx;

    &.active {
      background: #e8f4ff;

      .week-day, .today-text, .date-text {
        color: #4a90e2;
      }
    }

    .week-day {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 5rpx;
    }

    .date-text, .today-text {
      font-size: 32rpx;
      color: #333;
    }

    .today-text {
      color: #4a90e2;
    }
  }
}

.section-title {
  display: block;
  font-size: 32rpx;
  color: #000;
  font-weight: 500;
  margin: 30rpx 0 20rpx;
}

.time-tabs {
  display: flex;
  margin-bottom: 30rpx;

  .time-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160rpx;
    height: 70rpx;
    border-radius: 10rpx;
    margin-right: 30rpx;
    font-size: 28rpx;

    &.active {
      background: #2E93FF;
      color: #fff;
    }

    &.inactive {
      background: #EBF5FF;
      color: #808080;
    }

    .time-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }
  }
}

.input-field, .select-field {
  height: 80rpx;
  background: #F7F7F7;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .arrow-icon {
    width: 20rpx;
    height: 20rpx;
  }
}

.service-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;

  .category-title {
    display: block;
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .service-info {
      flex: 1;

      .service-name {
        font-size: 28rpx;
        color: #333;
      }

      .service-price {
        font-size: 24rpx;
        color: #2E93FF;
        margin-left: 20rpx;
      }
    }

    .quantity-control {
      display: flex;
      align-items: center;

      .quantity-btn {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        color: #666;

        &.minus {
          border: 1rpx solid #ddd;
        }

        &.plus {
          background: #2E93FF;
          color: #fff;
        }
      }

      .quantity-input {
        width: 80rpx;
        height: 50rpx;
        text-align: center;
        margin: 0 10rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
      }
    }
  }
}

.remark-input {
  width: 100%;
  height: 200rpx;
  background: #F7F7F7;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  margin-bottom: 30rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

  .price-display {
    display: flex;
    align-items: baseline;

    .price-symbol {
      font-size: 28rpx;
      color: #ff6b00;
      margin-right: 5rpx;
    }

    .price-amount {
      font-size: 36rpx;
      color: #ff6b00;
      font-weight: bold;
    }
  }

  .submit-btn {
    width: 400rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #2E93FF;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
  }
}

/* 服务内容区域样式 */
.service-content {
  background: #F7F7F7;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;

  .service-category {
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .category-title {
      display: block;
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 20rpx;
    }

    .service-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .service-info {
        flex: 1;

        .service-name {
          font-size: 28rpx;
          color: #333;
        }

        .service-price {
          font-size: 24rpx;
          color: #2E93FF;
          margin-left: 20rpx;
        }
      }

      .quantity-control {
        display: flex;
        align-items: center;

        .quantity-btn {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36rpx;
          color: #666;

          &.minus {
            border: 1rpx solid #ddd;
          }

          &.plus {
            background: #2E93FF;
            color: #fff;
          }
        }

        .quantity-input {
          width: 80rpx;
          height: 50rpx;
          text-align: center;
          margin: 0 10rpx;
          background: #f5f5f5;
          border-radius: 8rpx;
        }
      }
    }
  }
}

/* 新增增值服务备注样式 */
.service-remark {
  margin-top: 30rpx;
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  height: 180rpx;
}


/* 时间选择器修改样式 */
.custom-picker-wrapper ::v-deep .uni-date-x {
  background-color: #F7F7F7 !important; /* 修改背景色 */
}

.custom-picker-wrapper ::v-deep .uni-date-editor--x {
  background-color: #F7F7F7 !important; /* 修改背景色 */
}

.meeting-room-popup {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  max-height: 70vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 48rpx;
  color: #999;
  padding: 0 20rpx;
}

.room-list {
  max-height: 50vh;
  margin-bottom: 20rpx;
}

.room-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  position: relative;
}

.room-icon {
  width: 40rpx;
  height: 40rpx;
  background: #8A2BE2;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.room-info {
  flex: 1;
}

.room-name {
  font-size: 32rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.room-detail {
  font-size: 26rpx;
  color: #999;
}

.room-price {
  font-size: 32rpx;
  color: #FF6B00;
  margin: 0 40rpx 0 20rpx;
}

.room-selected {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: 0;
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: #2E93FF;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 20rpx;
}


.custom-checkbox {
  width: 36rpx;
  height: 36rpx;
  position: relative;
  margin-left: 20rpx;
}

.checkbox-border {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.check-icon {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* 会议室项悬停效果 */
.room-item:active {
  background-color: #f5f5f5;
}
</style>