product_wx/pages/subPackages/resourceReservation_manage/add.vue

<template>
  <div class="resourceAdd">
    <div class="topBox">
      <div class="topTitle">资源预约</div>
      <div class="choosTimeBox">
        <span class="msg">使用时间</span>
        <span class="choosIpt" @click="showTime('startTime')">{{ startTime }} </span>
        <span class="choosIpt" @click="showTimeList('startTime')">{{ timeListStr }} </span>
        <!--            <input placeholder="请选择时间段" class="choosIpt" disabled>-->
      </div>
    </div>
    <ul class="predetermineUl">
      <li class="detailLi">
        <span class="liName">主题</span>
        <span>
          <input placeholder="请填写">
               <input class="liInfo" placeholder="请填写" v-model="form.subject">
          </span>
      </li>
      <li class="detailLi">
        <span class="liName">容纳人数</span>
        <span>
               <input class="liInfo" placeholder="请填写整数" v-model="form.peopleNumber">
          </span>
      </li>
      <li class="detailLi">
        <span class="liName">联系人</span>
        <span>
               <input class="liInfo" placeholder="请填写" v-model="form.contacts">
          </span>
      </li>
      <li class="detailLi">
        <span class="liName">联系电话</span>
        <span>
               <input class="liInfo" placeholder="请填写" v-model="form.phone">
          </span>
      </li>
      <li class="detailLi2" style="border-bottom: none">
        <div class="titleBox">
          <span class="liName">备注</span>
        </div>
        <van-field
            :value="form.remarks"
            autosize
            type="textarea"
            placeholder="请输入"
            class="myField"
            maxlength="2000"
            show-word-limit
        />
      </li>
    </ul>
    <ul class="predetermineUl">
      <li class="detailLi">
        <span class="liName">预约单位</span>
        <span>
               <input class="liInfo" placeholder="" v-model="form.unit">
          </span>
      </li>
      <li class="detailLi">
        <span class="liName">预约人</span>
        <span>
               <input class="liInfo" placeholder="请填写" v-model="form.appointUserName">
          </span>
      </li>
      <li class="detailLi">
        <span class="liName">预约时间</span>
        <span>
               <input class="liInfo" placeholder="请填写" v-model="form.appointTime" disabled>
          </span>
      </li>
    </ul>
    <div class="buttonBox">
      <button class="btn zcBtn" @click="meetingAppointSubmit('1')">暂存</button>
      <button class="btn tjBtn" @click="meetingAppointSubmit('2')">提交</button>
    </div>
    <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>
    <van-popup
        :show="timeListShow"
        position="bottom"
        custom-style="height: 50%;"
    >
      <van-picker
          show-toolbar
          :columns="timeList"
          value-key="label"
          @confirm="selectTimeList"
          @cancel="timeListShow = false"
      />

    </van-popup>
  </div>
</template>

<script>
import {getByCodes, getUserDept, getUserLocalStorageInfo, meetingAppoint, meetingAppointCheck} from "@/js_sdk/http";
import dayjs from "dayjs";
// import Toast from "../../../wxcomponents/weapp/lib/toast/index.vue";
export default {
  name: "add",
  data() {
    return {
      dc_key: ['timeSlot'],
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      theme: '',
      unit: '',
      postData: {},
      form: {
        createdId: getUserLocalStorageInfo().userId,
        appointTime: dayjs().format('YYYY-MM-DD HH:mm'),
        userType: getUserLocalStorageInfo().userType
      },
      meetingRoomId: '',
      startTime: '请选择使用时间',
      timeShow: false,
      timePickerType: '',
      currentDate: new Date().getTime(),
      timeList: [], //  时间段列表
      timeListStr: '请选择时间段',
      timeListShow: false,
      dic_SelectList: [],
    }
  },
  created() {
    this.getByCodes()
  },
  onLoad(options) {
    this.meetingRoomId = options.meetingRoomId
  },
  onShow() {
    // 企业端
    if (getUserLocalStorageInfo().userType == '1') {
      this.form.unit = getUserLocalStorageInfo().username
    }
    // 管理端
    if (getUserLocalStorageInfo().userType == '2') {
      const data = {
        id: getUserLocalStorageInfo().userId
      }
      getUserDept(data).then(res => {
        this.form.unit = res.msg
      })

    }
  },
  methods: {
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      // this.timeList = this.dic_SelectList.timeSlot.map(item =>{
      //   return item.label;
      // });
      this.timeList = this.dic_SelectList.timeSlot

    },
    showTime(e) {
      this.timePickerType = e
      this.timeShow = true
    },
    showTimeList(e) {
      this.timePickerType = e
      this.timeListShow = 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}`;
    },
    // 时间选择单位
    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);
      this.startTime = dateString
      this.timeShow = false
      // this.getRoomTime(this.startTime)
    },
    selectTimeList(e) {
      const data = {
        id: this.meetingRoomId,
        dateStr: this.startTime,
        timeSlot: e.detail.value.value
      }
      meetingAppointCheck(data).then((res) => {
        if (res.code == '200') {
          this.timeListStr = e.detail.value.label
          this.form.timeSlot = e.detail.value.value
          this.timeListShow = false
        } else {
          this.$showToast("时间段已占用或已冻结，请重新选择");
        }
      }).catch(err => {
        this.$showToast(err);
      })

    },
    // // 获取日期可以选择的区间
    // getRoomTime(roomTime) {
    //   const reqData = {
    //     id: this.roomId,
    //     useTime: roomTime
    //   }
    //   roomTimeSoltUseful(reqData).then((res) => {
    //     this.timeList = res.data
    //     console.log('获取日期可以选择的区间_:', res)
    //   })
    // },

    // 提交预约
    meetingAppointSubmit(e) {
      if (this.startTime !== '' && this.startTime !== null && this.startTime !== undefined &&
          this.endTime !== '' && this.endTime !== null && this.endTime !== undefined) {
        uni.showToast({
          title: "请选择使用时间",
        });
        return false
      }
      this.form.saveType = e
      this.form.useTime = this.startTime
      this.form.meetingRoomId = this.meetingRoomId
      console.log('提交预约_:', this.form)
      meetingAppoint(this.form).then((res) => {
        console.log('提交预约_:', res)
        if (res.code == '200') {
          uni.showToast({
            title: '预约成功',
            icon: 'success',
            mask: true,
            duration: 1000
          });
          uni.navigateBack({})
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'success',
            mask: true,
            duration: 1000
          });
        }
      })
    },


  }
}
</script>

<style lang="scss">
.resourceAdd {
  .topBox {
    padding: 24rpx 32rpx;
    background: white;
    margin: 24rpx 0;

    .topTitle {
      color: rgba(34, 34, 34, 1);
      font-size: 36rpx;
      font-weight: 600;
    }

    .choosTimeBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

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

      .choosIpt {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 260rpx;
        height: 96rpx;
        font-size: 32rpx;
        background: rgba(245, 247, 250, 1);
        box-sizing: border-box;
      }
    }
  }

  .predetermineUl {
    margin: 24rpx 0;
    background: white;
    box-sizing: border-box;
    padding: 0 32rpx;

    .predetermineLi {
      padding: 32rpx 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);
      display: flex;
      justify-content: space-between;
    }

    .predetermineLi2 {
      padding: 32rpx 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);
      display: flex;
      flex-direction: column;
    }

    .van-cell {
      background: #F5F7FA !important;
      border-radius: 8rpx;
      font-size: 28rpx;
      margin-top: 16rpx;
    }

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

    .liIpt {
      color: rgba(102, 102, 102, 1);
      font-size: 32rpx;
      text-align: right;
    }

    .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: 488rpx;
        width: 488rpx;
        color: rgba(102, 102, 102, 1);
        font-size: 32rpx;
        line-height: 38rpx;

        .radio {
          margin-left: 64rpx;
        }
      }
    }

    .detailLi2 {
      display: flex;
      flex-direction: column;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #E6E6E6;

      .detailLi2BoxTop {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 12rpx 0;

        .checkItem {
          width: 128rpx;
          height: 64rpx;
          font-size: 28rpx;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #F5F7FA;
          border-radius: 8rpx;
          margin: 12rpx 0;
        }

        .checked {
          background: #0365F9;
          color: white;
        }
      }
    }
  }

  .buttonBox {
    display: flex;
    justify-content: center;

    .btn {
      width: 240rpx;
      height: 80rpx;
      display: flex;
      border-radius: 8rpx;
      align-items: center;
      justify-content: center;
      margin: 48rpx 16rpx 150rpx 16rpx;
      color: white;
      letter-spacing: 2rpx;
      text-indent: 2rpx;
    }

    .zcBtn {
      background: #FE8643;
    }

    .tjBtn {
      background: #0365F9;
    }
  }
}
</style>