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-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon">
        </li>
      </ul>
      <div class="timeBox">
        <div>日期</div>
        <div style="margin-left: 110rpx">2024/05/21 — 2024/05/22</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===1?'ppBg':timeItem.type===2?'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="datetime"
          :value="currentDate"
          :formatter="formatter"
          @cancel="timeShow=false"
          @confirm="selectTime"
      />
    </van-popup>
    </div>
</template>

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

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

      ],
      form: {
        enterpriseId: getUserLocalStorageInfo().userId,
        companyName: getUserLocalStorageInfo().username,
      },
      id: '',
      companyName: getUserLocalStorageInfo().username,
      timeShow:false,
      currentDate: new Date().getTime(),

    }
  },
  onLoad(options) {
    this.id = options.id
    this.getById()
  },
  methods: {
    getById() {
      const data = {
        id: this.id
      }
      meetingRoomDetail(data).then(res => {
        if (res.code === 200) {
          this.form = res.data
        }
      })
    },
    roomTimeSoltSeach() {
      if (this.startTime !== '' && this.startTime !== null && this.startTime !== undefined &&
          this.formatEndTime !== '' && this.formatEndTime !== null && this.formatEndTime !== undefined) {
        this.roomTimeSolt()
      } else {
        Toast('请选择时间区间')
      }
    },
    // 获取会议室时段开放状态
    roomTimeSolt() {
      const reqData = {
        id: this.id,
        startTime: this.formatStartTime,
        endTime: this.formatEndTime
      }
      roomTimeSoltDetail(reqData).then((res) => {
        this.dateList = []
        this.timeList = []
        if (res.key == 200) {
          this.dateList = res.data.dateList
          this.timeList = res.data.timeList
        }
      })
    },
    toAdd() {
      uni.navigateTo({
        url: '/pages/subPackages/resourceReservation_manage/add'
      })
    },
    // 时间选择单位
    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 === 'actStartTime'){
        this.time1Str = e.detail
        if (this.time2Str){
          if (this.time1Str >= this.time2Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.form.activityStartTime = dateString
          }
        }else{
          this.form.activityStartTime = dateString
        }
      }else if(this.timePickerType === 'actEndTime'){
        this.time2Str = e.detail
        if (this.time1Str){
          if (this.time1Str >= this.time2Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.form.activityEndTime = dateString
          }
        }else{
          this.form.activityEndTime = dateString
        }
      }else if(this.timePickerType === 'regStartTime'){
        this.regTime1Str = e.detail
        if (this.time1Str){
          if (this.time1Str <= this.regTime1Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.form.registrationStartTime = dateString
          }
        }else{
          this.form.registrationStartTime = dateString
        }
      }
      this.timeShow = false
      // console.log(dateString)
    },
  }
}
</script>

<style lang="scss">
.resourceDetail {
  .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>