AstraZeneca_uniapp/pages/subPackages/sj_history/detail.vue

<template>
  <div class="edityy">
    <div
      style="width: 100%; height: 0rpx; position: relative; background: white"
    >
      <div class="status qd" v-if="form.statusStr == '待签到'">待签到</div>
      <div class="status rc" v-if="form.statusStr == '待入厂'">待入厂</div>
      <div class="status zx" v-if="form.statusStr == '装卸中'">装卸中</div>
      <div class="status wc" v-if="form.statusStr == '已完成'">已完成</div>
      <div class="status gq" v-if="form.statusStr == '已过期'">已过期</div>
      <div class="status qx" v-if="form.statusStr == '已取消'">已取消</div>
    </div>
    <div class="form bd_bottom">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>供应商</span>
      </div>
      <div @click="oepnGysPopup()">
        {{ form.gysName ? form.gysName : "请选择" }}
      </div>
    </div>
    <div class="form bd_bottom pdt32 pdb32" style="display: block">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>车牌号</span>
      </div>
      <div>
        <car-number disabled ref="carNum" v-model="carNumber"></car-number>
      </div>
    </div>
    <div class="form bd_bottom">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>车辆类型</span>
      </div>
      <div class="form-value">
        {{ form.carType ? form.carType : "请选择" }}
      </div>
    </div>
    <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>司机姓名</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            disabled
            placeholder="请选择"
            v-model="form.driverName"
          />
        </div>
      </div>
      <div class="historyList">
        <div
          class="historyList-item mt32"
          v-for="item in nameList"
          @click="selectName(item)"
        >
          <div>{{ item }}</div>
        </div>
      </div>
    </div>
    <div class="form bd_bottom" style="display: block">
      <div style="display: flex; align-items: center">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>手机号/账号</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            disabled
            placeholder="请选择"
            v-model="form.driverUsername"
          />
        </div>
      </div>
      <!-- <div class="historyList">
        <div class="historyList-item mt32">
          <div>13921516068</div>
 
        </div>
        <div class="historyList-item mt32">
          <div>13921516068</div>
 
        </div>
        <div class="historyList-item mt32">
          <div>13921516068</div>
 
        </div>
        <div class="historyList-item mt32">
          <div>13921516068</div>
 
        </div>
      </div> -->
    </div>
    <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>联系电话</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            disabled
            placeholder="请选择"
            v-model="form.driverContactPhone"
          />
        </div>
      </div>
    </div>
    <div class="form bd_bottom mt32">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>装卸类型：</span>
      </div>
      <div>
        {{ form.loadType }}
      </div>
    </div>
    <div class="form bd_bottom">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>件数/托盘数：</span>
      </div>
      <div>
        <input
          type="text"
          placeholder="请输入"
          disabled
          v-model="form.loadNum"
        />
      </div>
    </div>
    <div class="form bd_bottom" v-if="mtId">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>预约日期：</span>
      </div>
      <div class="uni-input">
        {{ form.reservationDate ? form.reservationDate : "请选择" }}
        <!--           {{form.reservationDate?form.reservationDate:''}} -->
      </div>
    </div>

    <div class="bottom-form mt32">
      <div class="mt-select">
        <div
          class="select-item"
          :style="{
            background: item.value == mtId ? '#8A0554' : '#f5f7fa',
            color: item.value == mtId ? 'white' : 'black',
          }"
          v-for="item in mtList"
          @click="getMtId(item)"
          :key="item.value"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="sj-select-title">
        <div class="sj-label">
          <span style="color: red">*</span>
          可选时间
        </div>
        <div class="legend">
          <div class="white-legend"></div>
          <div>可选</div>
        </div>
        <div class="legend">
          <div class="purple-legend"></div>
          <div>已占用</div>
        </div>
      </div>
      <div class="sj-select">
        <div
          :class="
            item.statusStr == '已预约'
              ? 'select-item yyyStatus'
              : item.statusStr == '已锁定'
              ? 'select-item ysdStatus'
              : 'select-item '
          "
          :key="item.timeEnd"
          v-for="item in kxTimeList"
        >
          {{ item.timeStart }}~{{ item.timeEnd }}
          <van-icon
            name="success"
            v-if="
              form.dockSettingDetailId == item.dockSettingDetailId &&
              form.dockSettingId == item.dockSettingId &&
              form.timeEnd == item.timeEnd &&
              form.timeStart == item.timeStart
            "
          />
        </div>
      </div>

      <div class="foot-btn">
        <van-button
          @click="cancelYY"
          color="rgba(0, 0, 0, 0.05)"
          type="default"
          class="cancel"
        >
          返回
        </van-button>
      </div>
      <van-popup :show="gysPopupStatus" position="bottom" bind:close="onClose">
        <div style="text-align: right">
          <van-icon @click="closeGysPopup(null)" name="cross" />
        </div>
        <div class="popupListBox">
          <div v-for="item in gysList" class="popupListBox-row">
            <div>{{ item.label }}</div>
            <van-button size="mini" type="primary" @click="closeGysPopup(item)">
              选择
            </van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
  
  <script>
import CarNumber from "@/components/codecook-carnumber/codecook-carnumber.vue";
import {
  getDockCarType,
  getBizByUsername,
  getDockSelectList,
  getDockLoadType,
  getAvailableDateList,
  getDockTimeList,
  updateReservation,
} from "@/js_sdk/chooseCarApi.js";
import { getReservationVoById } from "@/js_sdk/sjTools.js";

import { getUserLocalStorageInfo } from "@/js_sdk/localUserInfo.js";
export default {
  data() {
    return {
      gysPopupStatus: false,
      formData: {
        carType: "",
      },
      carNumber: "",
      gysList: [],
      form: {},
      carNumberList: [],
      dockCarTypeList: [],
      mtList: [],
      yydateList: [],
      mtId: "",
      kxTimeList: [],
      nameList: [],
      telList: [],
      checkTimeData: {},
    };
  },
  components: {
    CarNumber,
  },
  onLoad(e) {
    this.form.id = e.id;
    console.log(e);
    this.getReservationVoById(e.id);
    this.getBizByUsername();
    this.getDockCarType();
  },
  methods: {
    cancelYY() {
      uni.navigateBack();
    },
    timeSelect(item) {
      if (item.statusStr == "已锁定") {
        this.$showToast("该时段已被锁定，请勿选择");
        return;
      }

      if (item.statusStr == "已预约") {
        if (
          item.dockSettingDetailId == this.checkTimeData.dockSettingDetailId &&
          item.dockSettingId == this.checkTimeData.dockSettingId &&
          item.timeEnd == this.checkTimeData.timeEnd &&
          item.timeStart == this.checkTimeData.timeStart &&
          item.dockId == this.checkTimeData.dockId
        ) {
        } else {
          this.$showToast("该时段已被预约，请重新选择");
          return;
        }
      }
      console.log(item);
      this.form.dockSettingDetailId = item.dockSettingDetailId;
      this.form.dockSettingId = item.dockSettingId;
      this.form.timeEnd = item.timeEnd;
      this.form.dockId = item.dockId;
      this.form.timeStart = item.timeStart;
      let form = { ...this.form };
      this.form = {};
      this.form = form;
    },
    async getAvailableDateList() {
      let { data } = await getAvailableDateList({ dockId: this.dockId });
      this.yydateList = data;
    },

    selectDriverContactPhone(e) {
      this.form.driverContactPhone = e;
      let form = { ...this.form };
      this.form = {};
      this.form = form;
    },
    async updateReservation() {
      if (!this.form.bizId) {
        this.$showToast("请选择供应商");
        return;
      }
      if (!this.carNumber) {
        this.$showToast("请输入车牌号");
        return;
      }
      if (!this.form.carType) {
        this.$showToast("请选择车辆类型");
        return;
      }
      if (!this.form.driverName) {
        this.$showToast("请输入司机姓名");
        return;
      }
      if (!this.form.driverName) {
        this.$showToast("请输入司机姓名");
        return;
      }
      if (!this.form.driverUsername) {
        this.$showToast("请输入手机号/账号");
        return;
      }
      if (!this.form.driverContactPhone) {
        this.$showToast("联系电话");
        return;
      }

      let res = await updateReservation({
        ...this.form,
        userId: getUserLocalStorageInfo().user.id,
        driverId: getUserLocalStorageInfo().user.id,
        carNo: this.carNumber,
      });
      if (res.errmsg == "成功") {
        this.$showToast("预约成功");
        uni.navigateBack({ delta: 2 });
      }
      console.log(res);
    },
    async getReservationVoById(id) {
      let { data } = await getReservationVoById({ id: id });
      console.log(data);
      // this.carNumber = data.carNo;
      this.form.carType = data.carType;
      this.form.driverName = data.driverName;
      this.form.bizId = data.bizId;
      this.form.carType = data.carType;
      this.form.loadType = data.loadType;
      this.form.reservationDate = data.reservationDate;
      this.dockId = data.dockId;
      this.form.dockId = data.dockId;
      this.form.statusStr = data.statusStr;
      this.mtId = data.dockId;
      this.form.loadType = data.loadType;
      this.form.driverUsername = data.driverUsername;
      this.form.loadNum = data.loadNum;
      this.form.driverContactPhone = data.driverContactPhone;
      this.form.gysName = data.businessName;
      this.checkTimeData = {
        ...{
          dockSettingDetailId: data.dockSettingDetailId,
          dockSettingId: data.dockSettingId,
          timeEnd: data.timeEnd,
          timeStart: data.timeStart,
          dockId: data.dockId,
        },
      };
      this.form.dockSettingDetailId = data.dockSettingDetailId;
      this.form.dockSettingId = data.dockSettingId;
      this.form.timeEnd = data.timeEnd;
      this.form.timeStart = data.timeStart;
      this.$refs.carNum.setCarNumValue(
        data.carNo.length == 7 ? data.carNo + " " : data.carNo
      );
      this.getDockSelectList();
      this.getAvailableDateList();
      this.getDockTimeList();
    },
    async getDockTimeList() {
      let { data } = await getDockTimeList({
        dateStr: this.form.reservationDate,
        dockId: this.mtId,
        bizId: this.form.bizId,
      });
      this.kxTimeList = data;
    },
    selectName(item) {
      this.form.driverName = item;
      let form = { ...this.form };
      this.form = {};
      this.form = form;
    },

    async selectYYDate({ detail }) {
      console.log(this.yydateList[detail.value]);
      this.form.reservationDate = this.yydateList[detail.value];
      let form = { ...this.form };
      this.form = {};
      this.form = form;
      let { data } = await getDockTimeList({
        dateStr: this.form.reservationDate,
        dockId: this.mtId,
        bizId: this.form.bizId,
      });
      this.kxTimeList = data;
      this.form.dockSettingDetailId = "";
      this.form.dockSettingId = "";
      this.form.timeEnd = "";
      this.form.dockId = "";
      this.form.timeStart = "";
    },
    async getMtId(item) {
      this.kxTimeList = [];
      this.form.reservationDate = "";
      console.log(item);
      let { data } = await getAvailableDateList({ dockId: item.value });
      this.mtId = item.value;
      // this.form.dockId = item.value;
      this.yydateList = data;
    },
    async getDockSelectList() {
      let { data } = await getDockSelectList({
        carType: this.form.carType,
        loadType: this.form.loadType.replace("预约", ""),
      });
      this.mtList = data;
    },
    selectCarType({ detail }) {
      console.log(detail);
      this.form.carType = this.dockCarTypeList[detail.value].label;
      console.log(this.dockCarTypeList[detail.value]);
      let form = { ...this.form };
      this.form = {};
      this.form = form;
      this.getDockSelectList();
    },
    async getDockCarType() {
      let { data } = await getDockCarType();
      this.dockCarTypeList = data;
      console.log(data);
    },
    selectCarNumber(e) {
      console.log(e);
      // this.carNumber = "苏B51WK7";
      // this.$forceUpdate();
      this.$refs.carNum.setCarNumValue(e);
      // this.carNumber = e;
    },
    oepnGysPopup() {
      this.gysPopupStatus = true;
    },
    async closeGysPopup(item) {
      console.log(item);
      this.gysPopupStatus = false;
      if (item) {
        console.log(item);
        this.form.gysName = item.label;
        this.form.bizId = item.value;
      }
    },

    async getBizByUsername() {
      let { data } = await getBizByUsername({
        username: getUserLocalStorageInfo().user.username,
      });
      console.log(data);
      this.gysList = data;
    },
  },
};
</script>
  
  <style lang="scss">
.edityy {
  .yyyStatus {
    background: #8e8be4 !important;
    color: white;
  }
  .ysdStatus {
    background: #ededed !important;
    color: #333333;
  }
  .popupListBox {
    height: 800rpx;
    padding: 20rpx;
    box-sizing: border-box;
    .popupListBox-row {
      margin-bottom: 15rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .status {
    width: 144rpx;
    height: 56rpx;
    text-align: center;
    line-height: 56rpx;
    border-top-right-radius: 5%;
    border-bottom-left-radius: 50%;
    position: absolute;
    top: -1rpx;
    right: 0;
    font-weight: 400;
    font-size: 28rpx;
  }
  .sj-select {
    display: flex;
    flex-wrap: wrap;
    margin-top: 32rpx;
    .select-item {
      text-align: center;
      line-height: 80rpx;
      width: 225rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #eaeff6;
    }
    .iselected {
      background: #ededed;
    }
    .isuse {
      background: rgba(142, 139, 228, 1);
    }
  }
  .sj-select-title {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    .legend {
      display: flex;
      align-items: center;
      margin-right: 32rpx;
    }
    .sj-label {
      margin-right: 64rpx;
    }
    .white-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #e9e9e9;
    }
    .purple-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #8e8be4;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
  }
  .qd {
    background: rgba(3, 101, 249, 0.2);
    color: #0365f9;
  }
  .rc {
    background: rgba(255, 184, 0, 0.3);
    color: #d99f00;
  }
  .zx {
    background: rgba(138, 5, 84, 0.2);
    color: #8a0554;
  }
  .wc {
    background: rgba(34, 181, 101, 0.2);
    color: #22b565;
  }
  .gq {
    color: #c7191f;
    background: rgba(199, 25, 31, 0.2);
  }
  .qx {
    color: #888888;
    background: rgba(136, 136, 136, 0.3);
  }
  .foot-btn {
    margin-top: 32rpx;
    margin-bottom: 32rpx;
    display: flex;
    justify-content: space-around;
    .cancel {
      button {
        color: rgba(138, 5, 84, 1) !important;
      }
    }
  }
  .form-value {
    width: 435rpx;
    input {
      width: 100%;
    }
  }
  .sj-select {
    display: flex;
    flex-wrap: wrap;
    margin-top: 32rpx;
    .select-item {
      text-align: center;
      line-height: 80rpx;
      width: 225rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #eaeff6;
    }
    .iselected {
      background: #ededed;
    }
    .isuse {
      background: rgba(142, 139, 228, 1);
    }
  }
  .sj-select-title {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    .legend {
      display: flex;
      align-items: center;
      margin-right: 32rpx;
    }
    .sj-label {
      margin-right: 64rpx;
    }
    .white-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #e9e9e9;
    }
    .purple-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #8e8be4;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
  }
  .bottom-form {
    background: #ffffff;
    padding: 32rpx;
    box-sizing: border-box;
    .mt-select {
      display: flex;
      flex-wrap: wrap;
      .select-item {
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 12rpx 30rpx;
        margin-left: 5rpx;
        margin-right: 5rpx;
        margin-bottom: 32rpx;
        background: rgba(245, 247, 250, 1);
      }
    }
  }
  .historyList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .historyList-item {
      padding: 10rpx 15rpx;
      display: flex;
      text-align: center;
      font-weight: 400;
      color: #666666;
      background: #f5f7fa;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin-left: 5rpx;
      margin-right: 5rpx;
      .btn {
        margin-left: 15rpx;
      }
    }
  }

  .form {
    padding: 32rpx 32rpx;
    display: flex;
    background: #ffffff;
    min-height: 112rpx;
    align-items: center;
    box-sizing: border-box;
    .form-label {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      margin-right: 64rpx;
      .form-requird {
        color: red;
      }
    }
  }
  .pdt32 {
    padding-top: 32rpx;
  }
  .pdb32 {
    padding-bottom: 32rpx;
  }
  .mb32 {
    margin-bottom: 32rpx;
  }
  .mt32 {
    margin-top: 32rpx;
  }
  .bd_bottom {
    border-bottom: 2rpx #e6e6e6 solid;
  }
}
</style>