ll

liukangdong

2024-12-06 86baa8ff948d2e79588e0dd7efa16f6b8ac3b157

 h5/pages/staff/meetingSub.vue

@@ -3,14 +3,14 @@
    <view class="heade_title">
      <image
        class="icon"
        src="../../static/staff/ar_left@2x.png"
        src="@/static/staff/ar_left@2x.png"
        @click="changeDate(-1)"
        mode="widthFix"
      ></image>
      <text class="date">{{ activeDateCum }}</text>
      <image
        class="icon"
        src="../../static/staff/ar_right@2x.png"
        src="@/static/staff/ar_right@2x.png"
        @click="changeDate(1)"
        mode="widthFix"
      ></image>
@@ -33,7 +33,11 @@
      <view
        @click="datetimeClick(item, i)"
        class="item"
        :class="{ disable: item.isUse, active: item.checked == '1' }"
        :class="{
          disable: item.isUse,
          active: item.checked == '1',
          hasSub: item.bookingTimeId,
        }"
        v-for="(item, i) in timeList"
        :key="i"
      >
@@ -53,9 +57,7 @@
            <view class="">{{ item.name }}</view>
          </view>
        </view>
        <view class="sub" @click="onSubmit"
          >确认预约</view
        >
        <view class="sub" :class="{disable: !selDatetime}" @click="onSubmit">确认预约</view>
      </view>
    </view>
    <!--  -->
@@ -67,18 +69,18 @@
    >
      <view class="detail_modal">
        <view class="title">会议室预约情况</view>
        <view class="h1">讨论xxxxx选型</view>
        <view class="h1">{{ activeInfo.meetingName }}</view>
        <view class="line">
          <view class="label">会议时间</view>
          <view class="value">00000</view>
          <view class="value" v-if="activeInfo.meetingDate">{{ activeInfo.meetingDate.slice(5) }} {{ activeInfo.meetingTime }}</view>
        </view>
        <view class="line">
          <view class="label">会议室</view>
          <view class="value">00000</view>
          <view class="value">{{ activeInfo.roomName }}</view>
        </view>
        <view class="line">
          <view class="label">预约人</view>
          <view class="value">00000</view>
          <view class="value">{{ activeInfo.bookingUserName }}</view>
        </view>
        <view class="btn" @click="isShowDetail = false">关闭</view>
      </view>
@@ -91,7 +93,7 @@
import {
  roomsListPost,
  getRoomUseTime,
   meetingDetail
  meetingDetail
} from '@/api'
export default {
  data() {
@@ -99,13 +101,14 @@
      activeRoom: {
        yudingDate: ''
      },
         selDatetime: '',
      selDatetime: '',
      isShowDetail: false,
      activeInfo: {},
      meetingList: [],
      timeList: [],

      colorOptions: [
        { color: '#279baa', name: '已选择' },
        { color: this.$store.state.primaryColor, name: '已选择' },
        { color: '#F7F7F7', name: '可预约' },
        { color: '#cccccc', name: '不可预约' },
      ]
@@ -127,9 +130,12 @@
    roomClick(item) {
      this.$set(this.activeRoom, 'roomId', item.id)
      this.$set(this.activeRoom, 'roomName', item.name)
      this.$set(this.activeRoom, 'limitNum', item.limitNum)
      this.getRoomTime()
    },
      onSubmit() {
         const { activeRoom } = this
    onSubmit() {
      const { activeRoom, selDatetime } = this
      if(!selDatetime) return
      const selTimeList = this.timeList.filter(i => i.checked == '1')
      if (selTimeList.length == -1) {
        return uni.showToast({
@@ -137,13 +143,21 @@
          icon: 'none'
        })
      }
         const obj = {
            startTime: selTimeList[0].startTime,
            endTime: selTimeList[selTimeList.length - 1].endTime,
         }
         uni.navigateTo({
            url: `/pages/staff/meetingSubOrder?yudingDate=${activeRoom.yudingDate}&roomName=${activeRoom.roomName}&roomId=${activeRoom.roomId}&startTime=${obj.startTime}&endTime=${obj.endTime}`
         })
      const obj = {
        startTime: selTimeList[0].startTime,
        endTime: selTimeList[selTimeList.length - 1].endTime,
        bookingTimeList: selTimeList.map(i => i.id).join(','),
        yudingDate: activeRoom.yudingDate,
        roomName: activeRoom.roomName,
        limitNum: activeRoom.limitNum,
        roomId: activeRoom.roomId,
      }
      setTimeout(() => {
        this.$eventBus.$emit('meetingSub', obj)
      }, 500)
      uni.navigateTo({
        url: `/pages/staff/meetingSubOrder`
      })
      // this.$jump('/pages/staff/vehicle/apply')
    },
    getRoomList() {
@@ -152,6 +166,7 @@
        if (this.meetingList.length > 0) {
          this.$set(this.activeRoom, 'roomId', this.meetingList[0].id)
          this.$set(this.activeRoom, 'roomName', this.meetingList[0].name)
          this.$set(this.activeRoom, 'limitNum', this.meetingList[0].limitNum)
          this.getRoomTime()
        }
      })
@@ -169,11 +184,11 @@
      })
    },
    datetimeClick(item, index) {
      if (item.bookingTimeId) {
        this.getDetail(item.bookingTimeId)
        return
      }
      if (item.isUse == '1') return
         if(item.isChoose){
            this.getDetail(item.id)
            return
         }
      const { timeList } = this
      const selTimeList = timeList.filter(i => i.checked == '1')
      if (selTimeList.length === 0) {
@@ -222,15 +237,20 @@
    },
    changeDate(num) {
      const yudingDate = this.activeRoom.yudingDate
      if (num < 0 && yudingDate === dayjs().format('YYYY-MM-DD')) return
      let fn = num > 0 ? 'add' : 'subtract'
      this.yudingDate = dayjs(yudingDate)[fn](1, 'days').format('YYYY-MM-DD')
      this.activeRoom.yudingDate = dayjs(yudingDate)[fn](1, 'days').format('YYYY-MM-DD')
      console.log('yudingDate', this.activeRoom.yudingDate)
      this.getRoomList()
    },
      getDetail(id) {
         meetingDetail({
            id
         })
      },
    getDetail(id) {
      meetingDetail({
        id
      }).then(res => {
        this.activeInfo = res.data
        this.isShowDetail = true
      })
    },
  }
}
</script>
@@ -240,12 +260,12 @@
  padding: 40rpx 30rpx;
  .title {
    text-align: center;
    font-weight: 500;
    font-weight: 600;
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }
  .h1 {
    font-weight: 500;
    font-weight: 600;
    font-size: 32rpx;
    margin-bottom: 30rpx;
  }
@@ -268,7 +288,7 @@
    text-align: center;
    background: $uni-color-primary;
    border-radius: 44rpx;
    font-weight: 500;
    font-weight: 600;
    font-size: 32rpx;
    color: #ffffff;
  }
@@ -278,8 +298,8 @@
  width: 100%;
  left: 0;
  bottom: 0;
   background-color: #fff;
  padding: 20rpx 30rpx 84rpx;
  background-color: #fff;
  padding: 20rpx 30rpx 52rpx;
  box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
  .sel_time {
    color: $uni-color-primary;
@@ -313,12 +333,14 @@
      font-size: 30rpx;
      color: #ffffff;
    }
    .disable {
      background-color: #cccccc;
    }
  }
}
.time_list {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  padding: 30rpx 30rpx 240rpx;
  flex-wrap: wrap;
  .item {
    width: 220rpx;
@@ -329,14 +351,22 @@
    border-radius: 4rpx;
    margin-bottom: 24rpx;
    font-size: 30rpx;
    margin-right: 15rpx;
    &:nth-of-type(3n){
      margin-right: 0;
    }
  }
  .active {
    background-color: $uni-color-primary;
    color: #fff;
  }
  .disable {
    background-color: #cccccc;
    color: #999999;
    background: #F7F7F7;
    color: #CCCCCC;
  }
  .hasSub{
    color: #fff;
    background: #CCCCCC;
  }
}
.meeting_list {
@@ -375,6 +405,8 @@
  display: flex;
  justify-content: center;
  align-items: center;
   height: 100rpx;
   padding-top: 10rpx;
  .date {
    margin: 0 24rpx;
    font-weight: 600;