AstraZeneca_uniapp/pages/subPackages/sj_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">已预约</div>
      </div>
      <div class="form-data">
        <div class="code"></div>
        <div class="form-item">
          <div class="item-label">对应码头</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">预约目的</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">集装箱车辆</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">预约日期</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">所属企业</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">司机姓名</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">车牌号</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">件数/托盘数</div>
          <div class="item-value">4号码头</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">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">签到日期</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">卸货日期</div>
          <div class="item-value">4号码头</div>
        </div>
        <div class="form-item">
          <div class="item-label">完成日期</div>
          <div class="item-value">4号码头</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>
export default {
  created() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  methods: {
    wxShare(e) {
      console.log(e);
    },
    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: 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>