settle_down_wx/pages/subPackages/venueRoom/confirm.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 }}</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">
      <div class="custom-item-tit">
        <div class="tit">审核结果</div>
      </div>
      <div class="cell-item">
        <p class="label">审核结果</p>
        <p class="tit">
          {{ oderDetial.stateDesc == "已取消" ? "已取消" : "审核通过" }}
        </p>
      </div>
      <div class="block-cell-item">
        <p class="label">取消原因</p>
        <div class="tit">
          <div class="textarea">
            {{
              oderDetial.cancelReason || oderDetial.cancelReason == "请输入"
                ? oderDetial.cancelReason
                : "暂无"
            }}
          </div>
        </div>
      </div>
      <div class="cell-item">
        <p class="label">经办人</p>
        <p class="tit">{{ oderDetial.examineName }}</p>
      </div>
      <div class="cell-item">
        <p class="label">经办时间</p>
        <p class="tit">{{ oderDetial.examineTime }}</p>
      </div>
    </div>

    <div class="white-box part-4 form-part">
      <div class="custom-item-tit">
        <div class="tit">支付凭证</div>
      </div>
      <div class="cell-item">
        <p class="label">支付方式</p>
        <p class="tit">
          {{
            dic_SelectList.payType[oderDetial.payType - 1].label
              ? dic_SelectList.payType[oderDetial.payType - 1].label
              : "暂无"
          }}
        </p>
      </div>
      <div class="cell-item">
        <p class="label">支付人名称</p>
        <p class="tit">
          {{ oderDetial.payUserName ? oderDetial.payUserName : "暂无" }}
        </p>
      </div>

      <div class="block-cell-item">
        <p class="label">
          处理后拍照<span class="tips" v-if="!readOnlyType"
            >（支持图片上传限20M内，最多1张）</span
          >
        </p>
        <div class="tit">
          <ul class="annex-list-box">
            <li
              class="annex-item"
              v-for="(item, index) in processedAnnexList"
              :key="index"
            >
              <img :src="item.url" alt="" v-if="item.isImage" />
              <video
                :src="item.url"
                v-if="!item.isImage"
                width="100%"
                height="100%"
              ></video>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="white-box part-5 form-part">
      <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" v-if="oderDetial.stateDesc == '已取消'">
        <div class="tit">取消原因</div>
      </div>

      <uni-easyinput
        type="textarea"
        autoHeight
        v-if="oderDetial.stateDesc == '已取消'"
        :disabled="radio == '1' || !readOnlyType"
        v-model="reason"
        maxlength="800"
        class="textarea-item input-item-warp"
        placeholder="暂无"
      />
      <div class="cell-item">
        <p class="label">经办人</p>
        <p class="tit">
          {{
            oderDetial.handlerName == null || oderDetial.handlerName == ""
              ? currUser.truename
              : oderDetial.handlerName
          }}
        </p>
      </div>

      <div class="cell-item">
        <p class="label">经办时间</p>
        <p class="tit">{{ oderDetial.examineTime }}</p>
      </div>
    </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 vanRadio from "../../../wxcomponents/weapp/dist/radio/index";
import vanRadioGroup from "../../../wxcomponents/weapp/dist/radio-group/index";
import TelNum from "../../subPackages/components/tel-number";
import {
  getUserLocalStorageInfo,
  getAppUserMain,
  getDetial,
  confirmAudit,
  getByCodes,
} from "@/js_sdk/venueRoom";
// import { formatDate } from "@/plugins/dateFormat";

export default {
  components: {
    TelNum,
    vanRadio,
    vanRadioGroup,
  },
  data() {
    return {
      active: "",
      dic_SelectList: {},
      dic_key: ["timeSlot", "payType"],
      currUser: {},
      bizInfo: "",
      roomDetial: {},
      oderDetial: {},
      appointId: "",
      readOnlyType: false,

      //停车场信息
      lotInfo: {},
      //车位列表
      seatList: [],
      //数量
      num: -1,
      radio: "1",
      reason: "",
      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"],
        },
      ],

      //   时间段列表
      timeList: ["9:00-12:00", "13:00-18:00", "18:00-22:00"],

      processedAnnexList: [],
    };
  },
  onLoad(option) {
    this.currUser = getUserLocalStorageInfo().user;
    this.appointId = option.id;
    this.readOnlyType = option.readOnlyType == "1" ? true : false;
    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) {
          let radio;
          console.log(res.data.oderDetial.state);
          if (
            res.data.oderDetial.state == 4 ||
            res.data.oderDetial.state == 3
          ) {
            radio = "1";
          } else if (res.data.oderDetial.state == 5) {
            radio = "2";
          } else {
            debugger;
            radio = null;
          }
          console.log("radioradioradioradioradio", radio);
          this.roomDetial = res.data.roomDetial;
          this.oderDetial = res.data.oderDetial;
          this.oderDetial.examineTime = this.$common.transDate(
            this.oderDetial.examineTime
          );
          this.oderDetial.useTime = this.$common.transDate(
            this.oderDetial.useTime
          );
          this.radio = radio;
          this.$forceUpdate();
          console.log(this.roomDetial);
          this.processedAnnexList = JSON.parse(res.data.oderDetial.payProof);
          this.getBizMain();
        }
      });
    },

    //提交
    submitFrom() {
      let reqData = {
        id: this.appointId,
        confirmType: this.radio,
        reason: this.reason,
        userId: this.currUser.id,
      };
      confirmAudit(reqData).then((res) => {
        console.log("获取提交详情_:", res);
        if (res.key == 200) {
          this.$showToast("确认成功!");
          uni.navigateBack({
            success() {
              beforePage.getAppointList("1,3");
            },
          });
        }
      });
    },

    formatTime(val) {
      console.log(val);
      return this.$common.formatDate(val, "day");
    },

    /**
     * 开始时间弹窗取消
     */
    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: 125rpx;
    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: 125rpx;

      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;
    }
  }

  .part-4 {
    .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;
    }
  }

  .part-5 {
    .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>