‘’

liukangdong

2024-05-31 9e47e0ece28c6145638aecca5bdf86857c049cf9

 h5/pages/staff/meetingSub.vue

@@ -1,254 +1,387 @@
<template>
   <view class="main_app">
      <view class="heade_title">
         <image class="icon" 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" @click="changeDate(1)" mode="widthFix"></image>
      </view>
      <!--  -->
      <view class="meeting_list">
         <view class="item" :class="{active: i === 0}" v-for="item,i in meetingList" :key="i">
            <view class="name">{{ item.name }}</view>
            <view class="line"></view>
         </view>
      </view>
      <!--  -->
      <view class="time_list">
         <view class="item" v-for="item,i in timeList" :key="i">{{ item.time }}</view>
      </view>
      <!--  -->
      <view class="main_footer">
         <view class="df_ac">
            <view>已选择：</view>
            <view class="sel_time">xxxxxx</view>
         </view>
         <view class="btns">
            <view class="left">
               <view class="item" v-for="item in colorOptions" :key="item.name">
                  <view class="box" :style="{ background: item.color }"></view>
                  <view class="">{{ item.name }}</view>
               </view>
            </view>
            <view class="sub" @click="$jump('/pages/staff/meetingSubOrder')">确认预约</view>
         </view>
      </view>
      <!--  -->
      <u-popup :show="isShowDetail" :round="12" mode="bottom" @close="isShowDetail = false">
         <view class="detail_modal">
            <view class="title">会议室预约情况</view>
            <view class="h1">讨论xxxxx选型</view>
            <view class="line">
               <view class="label">会议时间</view>
               <view class="value">00000</view>
            </view>
            <view class="line">
               <view class="label">会议室</view>
               <view class="value">00000</view>
            </view>
            <view class="line">
               <view class="label">预约人</view>
               <view class="value">00000</view>
            </view>
            <view class="btn" @click="isShowDetail = false">关闭</view>
         </view>
      </u-popup>
   </view>
  <view class="main_app">
    <view class="heade_title">
      <image
        class="icon"
        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"
        @click="changeDate(1)"
        mode="widthFix"
      ></image>
    </view>
    <!--  -->
    <view class="meeting_list">
      <view
        @click="roomClick(item)"
        class="item"
        :class="{ active: activeRoom.roomId === item.id }"
        v-for="(item, i) in meetingList"
        :key="i"
      >
        <view class="name">{{ item.name }}</view>
        <view class="line"></view>
      </view>
    </view>
    <!--  -->
    <view class="time_list">
      <view
        @click="datetimeClick(item, i)"
        class="item"
        :class="{ disable: item.isUse, active: item.checked == '1' }"
        v-for="(item, i) in timeList"
        :key="i"
      >
        {{ item.startTime }}-{{ item.endTime }}
      </view>
    </view>
    <!--  -->
    <view class="main_footer">
      <view class="df_ac">
        <view>已选择：</view>
        <view class="sel_time">{{ selDatetime }}</view>
      </view>
      <view class="btns">
        <view class="left">
          <view class="item" v-for="item in colorOptions" :key="item.name">
            <view class="box" :style="{ background: item.color }"></view>
            <view class="">{{ item.name }}</view>
          </view>
        </view>
        <view class="sub" @click="onSubmit"
          >确认预约</view
        >
      </view>
    </view>
    <!--  -->
    <u-popup
      :show="isShowDetail"
      :round="12"
      mode="bottom"
      @close="isShowDetail = false"
    >
      <view class="detail_modal">
        <view class="title">会议室预约情况</view>
        <view class="h1">讨论xxxxx选型</view>
        <view class="line">
          <view class="label">会议时间</view>
          <view class="value">00000</view>
        </view>
        <view class="line">
          <view class="label">会议室</view>
          <view class="value">00000</view>
        </view>
        <view class="line">
          <view class="label">预约人</view>
          <view class="value">00000</view>
        </view>
        <view class="btn" @click="isShowDetail = false">关闭</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
   import dayjs from 'dayjs'
   export default {
      data() {
         return {
            activeDate: '',
            isShowDetail: false,
            meetingList: [
               { name: '201会议室' },
               { name: '201会议室' },
               { name: '201会议室' },
               { name: '201会议室' },
            ],
            timeList: [
               { time: '08:30-09:00' },
               { time: '08:30-09:00' },
               { time: '08:30-09:00' },
               { time: '08:30-09:00' },
            ],
				
            colorOptions: [
               { color: '#279BAA', name: '已选择' },
               { color: '#F7F7F7', name: '可预约' },
               { color: '#cccccc', name: '不可预约' },
            ]
				
         };
      },
      computed: {
         activeDateCum(){
            const { activeDate } = this
            let weeks = ['周日', '周一','周二','周三','周四','周五','周六']
            return dayjs(activeDate).format('YYYY年M月D日') + ' ' + weeks[dayjs(activeDate).day()]
import dayjs from 'dayjs'
import {
  roomsListPost,
  getRoomUseTime,
   meetingDetail
} from '@/api'
export default {
  data() {
    return {
      activeRoom: {
        yudingDate: ''
      },
         selDatetime: '',
      isShowDetail: false,
      meetingList: [],
      timeList: [],

      colorOptions: [
        { color: '#279BAA', name: '已选择' },
        { color: '#F7F7F7', name: '可预约' },
        { color: '#cccccc', name: '不可预约' },
      ]

    }
  },
  computed: {
    activeDateCum() {
      const yudingDate = this.activeRoom.yudingDate
      let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      return dayjs(yudingDate).format('YYYY年M月D日') + ' ' + weeks[dayjs(yudingDate).day()]
    }
  },
  onLoad() {
    this.activeRoom.yudingDate = dayjs().format('YYYY-MM-DD')
    this.getRoomList()
  },
  methods: {
    roomClick(item) {
      this.$set(this.activeRoom, 'roomId', item.id)
      this.$set(this.activeRoom, 'roomName', item.name)
    },
      onSubmit() {
         const { activeRoom } = this
      const selTimeList = this.timeList.filter(i => i.checked == '1')
      if (selTimeList.length == -1) {
        return uni.showToast({
          title: '请先选择会议时段',
          icon: 'none'
        })
      }
         const obj = {
            startTime: selTimeList[0].startTime,
            endTime: selTimeList[selTimeList.length - 1].endTime,
         }
      },
      created() {
         this.activeDate = dayjs().format('YYYY-MM-DD')
      },
      methods: {
         changeDate(num){
            const { activeDate } = this
            let fn = num > 0 ? 'add' : 'subtract'
            this.activeDate = dayjs(activeDate)[fn](1, 'days').format('YYYY-MM-DD')
         uni.navigateTo({
            url: `/pages/staff/meetingSubOrder?yudingDate=${activeRoom.yudingDate}&roomName=${activeRoom.roomName}&roomId=${activeRoom.roomId}&startTime=${obj.startTime}&endTime=${obj.endTime}`
         })
      // this.$jump('/pages/staff/vehicle/apply')
    },
    getRoomList() {
      roomsListPost({}).then(res => {
        this.meetingList = res.data || []
        if (this.meetingList.length > 0) {
          this.$set(this.activeRoom, 'roomId', this.meetingList[0].id)
          this.$set(this.activeRoom, 'roomName', this.meetingList[0].name)
          this.getRoomTime()
        }
      })
    },
    getRoomTime() {
      const { activeRoom } = this
      getRoomUseTime({
        ...activeRoom
      }).then(res => {
        this.timeList = res.data || []
        this.timeList.forEach((i, j) => {
          i.checked = '0',
            i.index = j
        })
      })
    },
    datetimeClick(item, index) {
      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) {
        this.timeList.forEach((ite, i) => {
          if (i === index) {
            ite.checked = '1'
            this.$forceUpdate()
          }
        })
      } else {
        const findIndex = selTimeList.findIndex(i => i.index === index)
        console.log('findIndex', findIndex)
        if (findIndex === -1) {
          const startNum = index - selTimeList[0].index
          const endNum = index - selTimeList[selTimeList.length - 1].index
          if (startNum == 1 || startNum == -1 || endNum == 1 || endNum == -1) {
            console.log('相邻')
            item.checked = true
            this.$forceUpdate()
          } else {
            return uni.showToast({
              title: '请选择相邻的时间段',
              icon: 'none'
            })
          }
        } else {
          if (index === selTimeList[0].index || index === selTimeList[selTimeList.length - 1].index) {
            item.checked = false
            this.$forceUpdate()
          } else {
            return uni.showToast({
              title: '请先取消最外层的时间段',
              icon: 'none'
            })
          }

        }
      }
      const selTimeLists = this.timeList.filter(i => i.checked == '1')
      // console.log('selTimeList', selTimeList);
      if (selTimeLists.length === 0) {
        this.selDatetime = ''
      } else {
        this.selDatetime = this.activeRoom.roomName + ' | ' + selTimeLists[0].startTime + '-' + selTimeLists[selTimeLists.length - 1].endTime
      }
    },
    changeDate(num) {
      const yudingDate = this.activeRoom.yudingDate
      let fn = num > 0 ? 'add' : 'subtract'
      this.yudingDate = dayjs(yudingDate)[fn](1, 'days').format('YYYY-MM-DD')
      this.getRoomList()
    },
      getDetail(id) {
         meetingDetail({
            id
         })
      },
  }
}
</script>

<style lang="scss">
   .detail_modal{
      padding: 40rpx 30rpx;
      .title{
         text-align: center;
         font-weight: 500;
         font-size: 32rpx;
         margin-bottom: 40rpx;
      }
      .h1{
         font-weight: 500;
         font-size: 32rpx;
         margin-bottom: 30rpx;
      }
      .line{
         display: flex;
         margin-bottom: 20rpx;
         .label{
            width: 140rpx;
            color: #888888;
         }
         .value{
            color: #333333;
         }
      }
      .btn{
         margin-top: 230rpx;
         width: 690rpx;
         height: 88rpx;
         line-height: 88rpx;
         text-align: center;
         background: #279BAA;
         border-radius: 44rpx;
         font-weight: 500;
         font-size: 32rpx;
         color: #FFFFFF;
      }
   }
   .main_footer{
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 20rpx 30rpx 84rpx;
      box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
      .sel_time{
         color: #279BAA;
      }
      .btns{
         margin-top: 10rpx;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .left{
            display: flex;
            .item{
               display: flex;
               align-items: center;
               margin-right: 20rpx;
               .box{
                  margin-right: 10rpx;
                  width: 32rpx;
                  height: 32rpx;
               }
            }
         }
         .sub{
            width: 184rpx;
            height: 72rpx;
            line-height: 72rpx;
            text-align: center;
            background: #279BAA;
            box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
            border-radius: 36rpx;
            font-size: 30rpx;
            color: #FFFFFF;
         }
      }
   }
   .time_list{
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      flex-wrap: wrap;
      .item{
         width: 220rpx;
         height: 80rpx;
         line-height: 80rpx;
         text-align: center;
         background: #F7F7F7;
         border-radius: 4rpx;
         margin-bottom: 24rpx;
         font-size: 30rpx;
      }
      .active{
         background-color: #279BAA;
         color: #fff;
      }
      .disable{
         background-color: #cccccc;
         color: #999999;
      }
   }
   .meeting_list{
      display: flex;
      padding-left: 30rpx;
      width: 720rpx;
      overflow-x: auto;
      border-bottom: 1rpx solid #E5E5E5;
      .item{
         flex-shrink: 0;
         margin-right: 60rpx;
         padding: 30rpx 0 0;
         .line{
            width: 60rpx;
            height: 4rpx;
            background-color: #fff;
            margin: 26rpx auto 0;
         }
      }
      .active{
         color: #279BAA;
         font-weight: 600;
         font-size: 30rpx;
         .line{
            width: 60rpx;
            height: 4rpx;
            background-color: #279BAA;
            margin: 26rpx auto 0;
         }
      }
   }
   .main_app{
      padding: 0;
   }
.heade_title{
   display: flex;
   justify-content: center;
   align-items: center;
   .date{
      margin: 0 24rpx;
      font-weight: 600;
      font-size: 32rpx;
   }
   .icon{
      width: 30rpx;
   }
.detail_modal {
  padding: 40rpx 30rpx;
  .title {
    text-align: center;
    font-weight: 500;
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }
  .h1 {
    font-weight: 500;
    font-size: 32rpx;
    margin-bottom: 30rpx;
  }
  .line {
    display: flex;
    margin-bottom: 20rpx;
    .label {
      width: 140rpx;
      color: #888888;
    }
    .value {
      color: #333333;
    }
  }
  .btn {
    margin-top: 230rpx;
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #279baa;
    border-radius: 44rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.main_footer {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
   background-color: #fff;
  padding: 20rpx 30rpx 84rpx;
  box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
  .sel_time {
    color: #279baa;
  }
  .btns {
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      .item {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        .box {
          margin-right: 10rpx;
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .sub {
      width: 184rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      background: #279baa;
      box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
      border-radius: 36rpx;
      font-size: 30rpx;
      color: #ffffff;
    }
  }
}
.time_list {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  flex-wrap: wrap;
  .item {
    width: 220rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #f7f7f7;
    border-radius: 4rpx;
    margin-bottom: 24rpx;
    font-size: 30rpx;
  }
  .active {
    background-color: #279baa;
    color: #fff;
  }
  .disable {
    background-color: #cccccc;
    color: #999999;
  }
}
.meeting_list {
  display: flex;
  padding-left: 30rpx;
  width: 720rpx;
  overflow-x: auto;
  border-bottom: 1rpx solid #e5e5e5;
  .item {
    flex-shrink: 0;
    margin-right: 60rpx;
    padding: 30rpx 0 0;
    .line {
      width: 60rpx;
      height: 4rpx;
      background-color: #fff;
      margin: 26rpx auto 0;
    }
  }
  .active {
    color: #279baa;
    font-weight: 600;
    font-size: 30rpx;
    .line {
      width: 60rpx;
      height: 4rpx;
      background-color: #279baa;
      margin: 26rpx auto 0;
    }
  }
}
.main_app {
  padding: 0;
}
.heade_title {
  display: flex;
  justify-content: center;
  align-items: center;
  .date {
    margin: 0 24rpx;
    font-weight: 600;
    font-size: 32rpx;
  }
  .icon {
    width: 30rpx;
  }
}
</style>