Client-Teapay/src/pagesB/order/verificationCode.vue

<template>
  <view class="verificationCode">
    <view class="receiptCode-wrap">
      <view class="receiptCode-wrap-inner">
        <view class="code-bg">
          <view style="margin:0rpx 40rpx">
            <ayQrcode
              ref="qrcode"
              :modal="modal_qr"
              :url="code"
              @hideQrcode="hideQrcode"
              :height="200"
              :width="200"
              class="code-bg-img"
              themeColor="#12B280"
            />
          </view>
          <view class="msg">
            <view class="code">
              有效期:<uni-countdown
                :second="second"
                @timeup="getCode"
              ></uni-countdown>
            </view>

            <view>核销码:{{ code }}</view>
            <!-- <view>haha@qq.com</view> -->
          </view>
        </view>
        <!-- <button class="inputButton" @click="saveImgFile(qr_code)">保存到相册</button> -->
      </view>
    </view>
  </view>
</template>

<script>
var utils = require("@/utils/utils.js");
import { get, post } from "@/request/api.js";
var app = getApp();
var appEv = app.$vm.$options;
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
export default {
  name: "verificationCode",
  data() {
    return {
      qr_code: "",
      account: "",
      order_id: "", //订单ID
      code: "",
      modal_qr: false,
      second: 0,
    };
  },
  components: {
    ayQrcode,
  },
  onLoad(e) {
    this.order_id = e.id;
    this.getCode();
  },
  methods: {
    getCode() {
      if (this.order_id) {
        post("my/orderCollate", {
          order_id: this.order_id,
        }).then((res) => {
          uni.hideLoading();
          if (res.code === 0) {
            this.code = res.data.data.code;
            this.second = res.data.data.end_time - new Date().getTime() / 1000;
            this.showQrcode();
          }
        });
      }
    },
    showQrcode() {
      let _this = this;
      this.modal_qr = true;
      setTimeout(function () {
        _this.$refs.qrcode.crtQrCode();
      }, 50);
    },
    hideQrcode() {
      this.modal_qr = false;
    },
  },
};
</script>

<style scoped lang="scss">
.verificationCode {
  padding:0rpx 40rpx;
}

.receiptCode-wrap {
  margin-top: 20rpx;
  padding-bottom: 40rpx;
}

.receiptCode-wrap-inner {
  // background: #eee;
  border-radius: 48rpx;
  // padding: 40rpx 44rpx;

  .code-bg {
    padding: 52rpx 0rpx;
    border-radius: 48rpx;
    background: #dad6d6;

    .code-bg-img {
      // width: 400rpx;
      height: 498rpx;
      display: block;
      // margin-bottom: 30rpx;
      border-radius: 32rpx;
    }
  }
}

.inputButton {
  margin-top: 30rpx;
  background-color: #18bb88;
  color: #fff;
  font-size: 32rpx;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 50rpx;
}

.msg {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .code {
    display: flex;
    flex-direction: row;
  }
}
</style>