product_wx/pages/subPackages/resourceReservation_manage/detail.vue

<template>
  <div class="resourceDetail">
    <ul class="detailUl">
      <li class="detailLi">
        <span class="liName">当前企业</span>
        <span class="liInfo">{{ companyName }}</span>
      </li>
      <li class="detailLi">
        <span class="liName">位置</span>
        <span class="liInfo">{{ form.position }}</span>
      </li>
      <li class="detailLi">
        <span class="liName">容纳人数</span>
        <span class="liInfo">{{ form.seatNumber }}</span>
      </li>
      <li class="detailLi">
        <span class="liName">配套</span>
        <span class="liInfo">{{ form.matchGoods }}</span>
      </li>
      <li class="detailLi">
        <span class="liName">说明</span>
        <span class="liInfo">{{ form.remark }}</span>
      </li>
      <li class="detailLi" style="border-bottom: none">
          <span class="liName">
            <span class="callName">预约电话：</span>
            <span class="callNumber">{{ form.appointPhone }}</span>
          </span>
          <img src="https://www.idea-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon">
        </li>
      </ul>
      <div class="timeBox">
        <div>日期</div>
        <div style="margin-left: 110rpx">
          <span @click="showTime('startTime')">{{startTime}} </span>
          —
          <span @click="showTime('endTime')">{{ endTime }} </span>
        </div>
      </div>
      <div class="bottomTableBody">
        <div class="ModelBox">
          <div class="modelT">
            <div class="model model1"></div>
            空置
          </div>
          <div class="modelT">
            <div class="model model2"></div>
            已占用
          </div>
          <div class="modelT">
            <div class="model model3"></div>
            冻结中
          </div>
        </div>
        <div class="table_Xuan">
          <div class="firstColBox">
            <div class="tableHead">
              <div class="tableFirstCol" style="background: rgba(245, 247, 250, 1)">日期/时间段</div>
            </div>
            <div class="tableRow" v-for="item in timeList">
              <div class="tableFirstCol">{{item.date}}</div>
            </div>
          </div>
          <div class="colBox">
            <div class="tableHead">
              <div v-for="timeItem in timeList[0].time" class="tableCol" style="background: rgba(245, 247, 250, 1)">{{timeItem.timeInterval}}</div>
            </div>
            <div class="tableRow" v-for="item in timeList">
              <div v-for="timeItem in item.time" class="tableCol" :class="timeItem.type=='2'?'ppBg':timeItem.type=='3'?'orBg':''"></div>
            </div>
          </div>
        </div>
      </div>
      <button class="toYy" @tap="toAdd">去预约</button>
    <van-popup
        :show="timeShow"
        position="bottom"
        custom-style="height: 50%;"
    >
      <van-datetime-picker
          type="date"
          :value="currentDate"
          :formatter="formatter"
          @cancel="timeShow=false"
          @confirm="selectTime"
      />
    </van-popup>
    </div>
</template>

<script>
import {meetingRoomDetail, getUserLocalStorageInfo, roomTimeSoltDetail} from "@/js_sdk/http";
import dayjs from "dayjs";

export default {
  name: "detail",
  data() {
    return {
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      timeList: [
        // {date: '5/21', time: [{timeInterval: '9:00~12:00', type: 2}, {timeInterval: '13:00~18:00', type: 0},]},
        // {date: '5/22', time: [{timeInterval: '9:00~12:00', type: 0}, {timeInterval: '13:00~18:00', type: 3},]},

      ],
      form: {
        enterpriseId: getUserLocalStorageInfo().userId,
        companyName: getUserLocalStorageInfo().username,
      },
      id: '',
      timePickerType: '',
      time1Str:'',
      time2Str:'',
      regTime1Str:'',
      companyName: getUserLocalStorageInfo().username,
      timeShow:false,
      currentDate: new Date().getTime(),
      startTime: '开始时间',
      endTime: '结束时间'
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getById()
    let startTime = dayjs().format('YYYY-MM-DD')
    let endTime = dayjs().add(6, 'day').format('YYYY-MM-DD')
    this.startTime = startTime
    this.endTime = endTime
    this.roomTimeSoltSeach()
  },
  methods: {
    getById() {
      const data = {
        id: this.id
      }
      meetingRoomDetail(data).then(res => {
        if (res.code === 200) {
          this.form = res.data
        }
      })
    },
    showTime(e){
      this.timePickerType = e
      this.timeShow = true
    },

    // 时间戳转换方法
    timestampToDate(timestamp) {
      const date = new Date(timestamp); // 如果timestamp是字符串，确保它是整数：parseInt(timestamp)
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    roomTimeSoltSeach() {
      if (this.startTime !== '' && this.startTime !== null && this.startTime !== undefined &&
          this.endTime !== '' && this.endTime !== null && this.endTime !== undefined) {
        this.roomTimeSolt()
      } else {
        Toast('请选择时间区间')
      }
    },
    // 获取会议室时段开放状态
    roomTimeSolt() {
      const reqData = {
        id: this.id,
        startTime: this.startTime,
        endTime: this.endTime
      }
      roomTimeSoltDetail(reqData).then((res) => {
        this.timeList = []
        if (res.key == 200) {
          this.timeList = res.data
        }
      })
    },
    toAdd() {
      uni.navigateTo({
        url: '/pages/subPackages/resourceReservation_manage/add?meetingRoomId=' + this.id
      })
    },
    // 时间选择单位
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }else if (type === 'day') {
        return `${val}日`;
      }else if (type === 'hour') {
        return `${val}时`;
      }else if (type === 'minute') {
        return `${val}分`;
      }
      return val;
    },
    selectTime(e){
      const dateString = this.timestampToDate(e.detail);
      if(this.timePickerType === 'startTime'){
        this.time1Str = e.detail
        if (this.time2Str){
          if (this.time1Str > this.time2Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.startTime = dateString
          }
        }else{
          this.startTime = dateString
        }
      }else if(this.timePickerType === 'endTime'){
        this.time2Str = e.detail
        if (this.time1Str){
          if (this.time1Str > this.time2Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.endTime = dateString
          }
        }else{
          this.endTime = dateString
        }
      }
      this.timeShow = false
      this.roomTimeSoltSeach()
    },
  }
}
</script>

<style lang="scss">
.resourceDetail {
  padding-bottom: 48rpx;
  .detailUl {
    margin-top: 20rpx;
    background: white;
    padding: 24rpx 32rpx;

    .liName {
      font-size: 32rpx;
      color: rgba(51, 51, 51, 1);
      white-space: nowrap;

      .callNumber {
        color: rgba(24, 23, 42, 1);
        font-size: 36rpx;
        font-weight: 600;
      }

      .callName {
        color: rgba(102, 102, 102, 1);
        font-size: 28rpx;
      }
    }

    .phoneIcon {
      width: 64rpx;
      height: 64rpx;
    }

    .detailLi {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #E6E6E6;

      .liInfo {
        display: inline-block;
        text-align: right;
        max-width: 428rpx;
        color: rgba(102, 102, 102, 1);
        font-size: 32rpx;
        line-height: 38rpx;
        overflow: hidden;
        word-wrap: break-word;
      }
    }
  }

  .timeBox {
    background: white;
    padding: 32rpx;
    display: flex;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    margin: 24rpx 0;
  }

  .bottomTableBody {
    padding: 36rpx 24rpx;
    background: white;

    .ModelBox {
      display: flex;
      justify-content: center;
      font-size: 28rpx;

      .modelT {
        display: flex;
        margin: 0 30rpx;
        align-items: center;
      }

      .model {
        width: 28rpx;
        height: 28rpx;
        margin-right: 16rpx;
      }

      .model1 {
        border: 2rpx solid rgba(233, 233, 233, 1);
      }

      .model2 {
        background: rgba(142, 139, 228, 1);
      }

      .model3 {
        background: rgba(255, 182, 102, 1);
      }
    }

    .table_Xuan {
      position: relative;
      width: 702rpx;
      margin-top: 22rpx;
      display: flex;
      align-items: center;

      .firstColBox {
        display: flex;
        flex-direction: column;
      }

      .colBox {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-x: scroll;
        width: 512rpx;
      }

      .tableHead {
        display: flex;
        font-size: 28rpx;
      }

      .tableRow {
        display: flex;
      }

      .tableFirstCol {
        z-index: 1;
        min-width: 192rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: rgba(102, 102, 102, 1);
        border: 1px solid lightgray;
        background: white;
      }

      .tableCol {
        position: relative;
        z-index: 0;
        min-width: 250rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid lightgray;
      }

      .ppBg {
        background: rgba(142, 139, 228, 1);
      }

      .orBg {
        background: rgba(255, 182, 102, 1);
      }
    }
  }

  .toYy {
    width: 654rpx;
    height: 96rpx;
    background: rgba(3, 101, 249, 1);
    margin: 64rpx 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: white;
  }
}

</style>