AstraZeneca_uniapp/pages/subPackages/scanCode/index.vue

<template>
  <div class="scanCode">
    <div class="form" v-if="info.id">
      <div class="title-box">
        <div class="status" style="color: white">已预约</div>
        <div class="title">预约码</div>
        <div class="status">{{ info.statusStr }}&nbsp;</div>
      </div>
      <div class="form-data">
        <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="btn">
      <van-button
        color="rgba(138, 5, 84, 1)"
        type="primary"
        @click="scanCode()"
      >
        重新扫码
      </van-button>
      <van-button
        v-if="info.statusStr == '待签到'"
        color="rgba(138, 5, 84, 1)"
        type="primary"
        @click="doReservationSign()"
      >
        签到确认
      </van-button>
      <van-button
        v-if="info.statusStr == '装卸中'"
        color="rgba(138, 5, 84, 1)"
        type="primary"
        @click="doReservationFinish()"
      >
        装卸完成
      </van-button>
    </div>
  </div>
</template>

<script>
// /wx/dock/getReservationVoById

import {
  getReservationVoById,
  doReservationSign,
  doReservationFinish,
} from "@/js_sdk/sjTools.js";
import { getUserLocalStorageInfo } from "@/js_sdk/localUserInfo.js";

import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";

export default {
  data() {
    return {
      url: "",
      modal_qr: false,
      info: {},
      id: "",
    };
  },
  components: { ayQrcode },

  onLoad(e) {
    console.log(e);
    this.scanCode();
    // this.getReservationVoById(e.id);
  },
  methods: {
    async doReservationFinish() {
      let data = await doReservationFinish({
        id: this.id,
        userId: getUserLocalStorageInfo().user.id,
      });
      if (data.errmsg == "成功") {
        this.$showToast("操作成功");
        this.getReservationVoById();
      }
    },
    async doReservationSign() {
      let data = await doReservationSign({
        id: this.id,
        userId: getUserLocalStorageInfo().user.id,
      });
      if (data.errmsg == "成功") {
        this.$showToast("签到成功");
        this.getReservationVoById();
      }
    },
    scanCode() {
      wx.scanCode({
        onlyFromCamera: true,
        // scanType: ["qrCode"],
        success: (res) => {
          console.log(res.result); // 扫码结果

          this.id = res.result.split('id=')[1];
          this.getReservationVoById();
          // 根据扫码结果进行后续处理
          // 例如，使用wx.navigateTo跳转到新的页面，并传递扫码结果作为参数
          // wx.navigateTo({
          //   url: '/path/to/page?scanResult=' + encodeURIComponent(res.result)
          // })
        },
        fail: (err) => {
          console.error(err);
          // 处理扫码失败的情况
          wx.showToast({
            title: "扫码失败",
            icon: "none",
          });
        },
      });
    },
    async getReservationVoById() {
      let { data } = await getReservationVoById({ id: this.id });
      console.log(data);
      this.info = data;
    },
    wxShare(e) {
      console.log(e);
    },
    hideQrcode() {
      this.modal_qr = false;
    },

    onShareAppMessage(res) {
      //发送给朋友
      console.log(`分享到朋友圈`, res);
    },
    onShareTimeline(res) {
      //分享到朋友圈
      console.log(`分享到朋友圈`, res);
      return {};
    },
  },
};
</script>

<style lang="scss">
.scanCode {
  margin-top: 24rpx;
  .btn {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0;
    padding: 20rpx;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    padding-bottom: 40rpx;
    button {
      width: 200rpx;
      // margin-top: 120rpx;
    }
  }
  .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: 320rpx;
      height: 320rpx;
      // 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>