settle_down_wx/pages/subPackages/venueRoom/audit.vue

<template>
  <div class="detail">
    <div class="white-box top-box">当前企业：{{ bizInfo }}</div>

    <div class="white-box part-1">
      <div class="custom-item-tit">
        <div class="tit">会议室信息</div>
      </div>
      <div class="cell-item">
        <p class="label">会议室名称</p>
        <p class="tit">{{ roomDetial.roomName ? roomDetial.roomName : "" }}</p>
      </div>
      <div class="cell-item">
        <p class="label">会议室位置</p>
        <p class="tit">{{ roomDetial.position }}</p>
      </div>
      <div class="cell-item">
        <p class="label">座位数</p>
        <p class="tit">{{ roomDetial.seatNumber }}</p>
      </div>

      <div class="cell-item">
        <p class="label">配套</p>
        <p class="tit">{{ roomDetial.match }}</p>
      </div>
      <div class="cell-item">
        <p class="label">收费标准</p>
        <p class="tit">{{ roomDetial.charges }}</p>
      </div>
      <div class="cell-item flex-item">
        <p class="label">预约电话</p>
        <p class="tit tel-box">
          <span>{{ roomDetial.appointPhone }}</span>
          <TelNum :num="roomDetial.appointPhone" :showTel="false" />
        </p>
      </div>
    </div>

    <div class="white-box part-2">
      <div class="custom-item-tit">
        <div class="tit">会议预约</div>
      </div>
      <div class="cell-item">
        <p class="label">使用时间</p>
        <p class="tit">
          {{ oderDetial.useTime }} 至
          {{ dic_SelectList.timeSlot[oderDetial.timeSlot - 1].label }}
        </p>
      </div>
      <div class="cell-item">
        <p class="label">会议主题</p>
        <p class="tit">
          {{ oderDetial.subject ? oderDetial.subject : "暂无" }}
        </p>
      </div>
      <div class="cell-item">
        <p class="label">参会人数</p>
        <p class="tit">
          {{ oderDetial.peopleNumber ? oderDetial.peopleNumber : "暂无" }}
        </p>
      </div>
      <div class="cell-item">
        <p class="label">联系人</p>
        <p class="tit">
          {{ oderDetial.contacts ? oderDetial.contacts : "暂无" }}
        </p>
      </div>
      <div class="cell-item">
        <p class="label">联系电话</p>
        <p class="tit">{{ oderDetial.phone ? oderDetial.phone : "暂无" }}</p>
      </div>

      <div class="block-cell-item">
        <p class="label">备注</p>
        <div class="tit">
          <div class="textarea">
            {{ oderDetial.remarks ? oderDetial.remarks : "暂无" }}
          </div>
        </div>
      </div>
    </div>

    <div class="white-box part-3 form-part" style="padding-bottom: 25px">
      <div class="custom-item-tit">
        <div class="tit">审核结果</div>
      </div>

      <div class="cell-item">
        <p class="label">审核结果</p>
        <div class="tit">
          <van-radio-group v-model="radio" :disabled="!readOnlyType">
            <van-radio name="1" checked-color="#976CEB">通过</van-radio>
            <van-radio name="2" checked-color="#976CEB">取消</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="custom-item-tit">
        <div class="tit">取消原因</div>
      </div>

      <uni-easyinput
        type="textarea"
        autoHeight
        :disabled="radio != '2' || !readOnlyType"
        v-model="reason"
        maxlength="800"
        class="textarea-item input-item-warp"
        placeholder="请输入"
      />
    </div>

    <div class="repair-bottom bottom-button" v-if="readOnlyType">
      <button class="btn" @click="submitFrom">提交</button>
    </div>
    <!-- 开始时间 -->
    <van-popup v-model="showStartPicker" position="bottom">
      <van-datetime-picker
        v-model="startTime"
        type="date"
        title="选择开始时间"
        @confirm="startTimeConfirml"
        @cancel="startTimeCancel"
      />
    </van-popup>
    <!-- 明天预约时间 -->
    <van-popup v-model="showEndPicker" position="bottom">
      <van-datetime-picker
        v-model="endTime"
        type="date"
        title="选择结束时间"
        @confirm="endTimeConfirml"
        @cancel="endTimeCancel"
      />
    </van-popup>
  </div>
</template>
<script>
// import auth from "@/service/auth";
import vanRadio from "../../../wxcomponents/weapp/dist/radio/index";
import vanRadioGroup from "../../../wxcomponents/weapp/dist/radio-group/index";
import { formatDate } from "@/js_sdk/dateFormat";
import TelNum from "../../subPackages/components/tel-number";
import {
  getAppUserMain,
  getDetial,
  confirmAudit,
  getUserLocalStorageInfo,
  getByCodes,
} from "@/js_sdk/venueRoom";
export default {
  components: {
    TelNum,
    vanRadio,
    vanRadioGroup,
  },
  data() {
    return {
      active: "",
      dic_SelectList: {},
      dic_key: ["timeSlot"],
      currUser: {},
      bizInfo: {},
      roomDetial: {},
      oderDetial: {},
      appointId: "",
      readOnlyType: true,
      //停车场信息
      lotInfo: {},
      //车位列表
      seatList: [],
      //数量
      num: -1,
      radio: "1",
      showStartPicker: false,
      showEndPicker: false,
      startTime: "",
      formatStartTime: "",
      endTime: "",
      formatEndTime: "",
      //  日期列表
      dateList: [
        {
          date: "8/1",
          typeList: ["1", "3", "4"],
        },
        {
          date: "8/2",
          typeList: ["1", "2", "4"],
        },
        {
          date: "8/3",
          typeList: ["4", "2", "1"],
        },
      ],
      reason: "",

      //   时间段列表
      timeList: ["9:00-12:00", "13:00-18:00", "18:00-22:00"],
    };
  },
  onLoad(option) {
    console.log(option.readOnlyType === "1");
    this.appointId = option.id;
    this.readOnlyType = option.readOnlyType === "1" ? true : false;
    this.currUser = getUserLocalStorageInfo().user;

    this.getByCodes();
  },
  methods: {
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);

      this.getOrderDetail();
    },
    //获取公司名称
    getBizMain() {
      let reqData = {
        id: this.oderDetial.createdId,
      };
      getAppUserMain(reqData).then((res) => {
        if (res.key == 200) {
          this.bizInfo = res.data.qymc;
        }
      });
    },

    //获取预约详情
    getOrderDetail() {
      let reqData = {
        id: this.appointId,
      };
      getDetial(reqData).then((res) => {
        if (res.key == 200) {
          this.roomDetial = res.data.roomDetial;

          this.oderDetial = res.data.oderDetial;
          this.oderDetial.useTime = this.$common.transDate(
            this.oderDetial.useTime
          );
          this.radio = this.oderDetial.state == "5" ? "2" : "1";
          this.reason = this.oderDetial.cancelReason;
          this.getBizMain();
        }
      });
    },

    //提交
    submitFrom() {
      let reqData = {
        id: this.appointId,
        confirmType: this.radio,
        reason: this.reason,
        userId: this.currUser.id,
      };
      if (this.radio == 2) {
        if (!this.reason) {
          this.$showToast("请填写取消原因！");
          return false;
        }
      }

      confirmAudit(reqData).then((res) => {
        console.log("获取提交详情_:", res);
        if (res.key == 200) {
          this.$showToast("审核成功!");
          uni.navigateBack({
            success() {
              beforePage.getAppointList("1,3");
            },
          });
        }
      });
    },

    /**
     * 开始时间弹窗取消
     */
    startTimeCancel() {
      this.showStartPicker = false;
    },
    /**
     * 开始时间弹窗确认
     */
    startTimeConfirml(val) {
      this.formatStartTime = formatDate(val, "day");
      this.showStartPicker = false;
    },
    /**
     * 结束时间弹窗取消
     */
    endTimeCancel() {
      this.showEndPicker = false;
    },
    /**
     * 结束时间弹窗确认
     */
    endTimeConfirml(val) {
      this.formatEndTime = formatDate(val, "day");
      this.showEndPicker = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.detail {
  padding: 0 0 180rpx;
  overflow: hidden;
  .bottom-button {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 21.333vw;
    width: 92%;
    height: 100rpx;
    padding: 4.667vw 4vw;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    .btn {
      height: 100%;
      line-height: 100rpx;

      width: 100%;
      color: #fff;
      background-color: #60f;
      font-size: 4.533vw;
      border-radius: 1.333vw;
    }
  }

  .top-box {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    color: #333;
  }

  .part-1 {
    margin-bottom: 20rpx;
    .custom-item-tit {
      height: 13.333vw;
      font-size: 4.267vw;
      color: #333;
      padding: 2.667vw 0;
      position: relative;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      box-sizing: border-box;
      .tit {
        padding-left: 2.667vw;
        position: relative;
        font-size: 4.267vw;
        &::after {
          content: "";
          width: 0.8vw;
          height: 90%;
          background-color: #976dec;
          border-radius: 0.4vw;
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
  }
  .part-2 {
    margin-bottom: 20rpx;
    .custom-item-tit {
      height: 13.333vw;
      font-size: 4.267vw;
      color: #333;
      padding: 2.667vw 0;
      position: relative;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      box-sizing: border-box;
      .tit {
        padding-left: 2.667vw;
        position: relative;
        font-size: 4.267vw;
        &::after {
          content: "";
          width: 0.8vw;
          height: 90%;
          background-color: #976dec;
          border-radius: 0.4vw;
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
  }
  .filter-box {
    padding: 0 30rpx 30rpx;
    margin-bottom: 20rpx;
    .tit {
      font-size: 34rpx;
      padding-bottom: 30rpx;
    }
  }
  .filter-input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .custom-input-box {
      width: 250rpx;
    }
    .confirm-btn {
      width: 100rpx;
      height: 80rpx;
      border-radius: 10rpx;
      color: #fff;
      background-color: #6600ff;
      i {
        font-size: 35rpx;
      }
    }
  }

  .part-2 {
    padding: 30rpx;
  }

  .part-3 {
    .custom-item-tit {
      height: 13.333vw;
      font-size: 4.267vw;
      color: #333;
      padding: 2.667vw 0;
      position: relative;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      box-sizing: border-box;
      .tit {
        padding-left: 2.667vw;
        position: relative;
        font-size: 4.267vw;
        &::after {
          content: "";
          width: 0.8vw;
          height: 90%;
          background-color: #976dec;
          border-radius: 0.4vw;
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
    .input-item-warp {
      padding: 0 0 30rpx;
    }
  }
}
</style>