AstraZeneca_uniapp/pages/subPackages/yy_history/code.vue

<template>
  <div class="yycode">
    <div class="form">
      <div class="title-box">
        <div class="status" style="color: white">已预约</div>
        <div class="title">预约码</div>
        <div class="status">{{ info.statusStr }}</div>
      </div>
      <div class="form-data">
        <div class="code">
          <ayQrcode
            ref="qrcode"
            :modal="modal_qr"
            :url="url"
            @hideQrcode="hideQrcode"
            :height="160"
            :width="160"
          />
        </div>
        <div class="form-item">
          <div class="item-label">对应码头</div>
          <div class="item-value">{{ info.dockCode }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">预约目的</div>
          <div class="item-value">{{ info.loadType }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">车辆类型</div>
          <div class="item-value">{{ info.carType }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">预约日期</div>
          <div class="item-value">{{ info.reservationDate }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">所属企业</div>
          <div class="item-value">{{ info.businessName }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">司机姓名</div>
          <div class="item-value">{{ info.driverName }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">车牌号</div>
          <div class="item-value">{{ info.carNo }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">件数/托盘数</div>
          <div class="item-value">{{ info.loadNum }}</div>
        </div>
      </div>
    </div>
    <div class="form" style="margin-top: 24rpx; padding-top: 32rpx">
      <div class="form-data" style="padding-bottom: 32rpx; padding-top: 32rpx">
        <div class="form-item">
          <div class="item-label">预约日期</div>
          <div class="item-value">{{ info.reservationDate }}</div>
        </div>
        <div class="form-item">
          <div class="item-label">签到日期</div>
          <div class="item-value">
            {{ info.signTime ? info.signTime : "暂无数据" }}
          </div>
        </div>
        <div class="form-item">
          <div class="item-label">卸货日期</div>
          <div class="item-value">
            {{ info.loadTime ? info.loadTime : "暂无数据" }}
          </div>
        </div>
        <div class="form-item">
          <div class="item-label">完成日期</div>
          <div class="item-value">
            {{ info.finishTime ? info.finishTime : "暂无数据" }}
          </div>
        </div>
      </div>
    </div>
    <div class="form share" style="margin-top: 24rpx">
      <button open-type="share" class="sharbtn" @click="wxShare">
        <img src="./Frame.png" class="wxicon" height="112" width="112" />
      </button>
      <div class="tips">厂区预约码，分享好友需谨慎</div>
    </div>
  </div>
</template>

<script>
// /wx/dock/getReservationVoById

import { getReservationVoById, cancelReservation } from "@/js_sdk/sjTools.js";
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";

export default {
  data() {
    return {
      url: "",
      modal_qr: false,
      info: {},
    };
  },
  components: { ayQrcode },
  created() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  onLoad(e) {
    console.log(e);

    this.getReservationVoById(e.id);
  },
  methods: {
    async getReservationVoById(id) {
      let { data } = await getReservationVoById({ id });
      console.log(data);
      this.info = data;
      this.url = data.id;
      this.showQrcode();
    },
    wxShare(e) {
      console.log(e);
    },
    hideQrcode() {
      this.modal_qr = false;
    },
    showQrcode() {
      let _this = this;
      this.modal_qr = true;
      // uni.showLoading()
      setTimeout(function () {
        // uni.hideLoading()
        _this.$refs.qrcode.crtQrCode();
      }, 50);
    },
    onShareAppMessage(res) {
      //发送给朋友
      console.log(`分享到朋友圈`, res);
    },
    onShareTimeline(res) {
      //分享到朋友圈
      console.log(`分享到朋友圈`, res);
      return {};
    },
  },
};
</script>

<style lang="scss">
.yycode {
  margin-top: 24rpx;
  .form {
    background: white;
    padding: 32rpx;
  }
  .sharbtn {
    margin: auto;
    // display: block;
    padding: 0;
    border: none;
    height: 112rpx;
    width: 112rpx;
    background: rgba(0, 0, 0, 0);
    &:after {
      border: none;
    }
  }
  .tips {
    color: rgba(102, 102, 102, 1);
    margin-top: 32rpx;
    text-align: center;
  }
  .wxicon {
    height: 112rpx;
    width: 112rpx;
  }
  .form-data {
    box-sizing: border-box;
    padding: 0 80rpx;
    .code {
      margin-top: 16rpx;
      width: auto;
      height: auto;
      // background: #5c5c5c;
      margin: 16rpx auto;
    }
    .form-item {
      display: flex;
      margin-top: 15rpx;
      align-items: center;
    }
    .item-label {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      width: 175rpx;
    }
    .item-value {
      font-weight: 400;
      margin-left: 48rpx;
      font-size: 32rpx;
      color: #666666;
    }
  }
  .title-box {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: auto;

    .title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
    }
    .status {
      //   margin-left: auto;
      color: rgba(138, 5, 84, 1);
    }
  }
}
</style>