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

<template>
  <view class="verificationCode">
    <view class="receiptCode-wrap">
      <view class="receiptCode-wrap-inner">
        <view class="code-bg">
          <uqcode ref="uqcode" class="code-img"/>
          <view class="msg">
            <view class="code">有效期：<uni-countdown :second="second" @timeup="getCode" class="num"/></view>

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

<script>
import { post } from "@/request/api.js";
var app = getApp();
var appEv = app.$vm.$options;
import uqcode from "@/components/uqrcode/uqrcode.vue";
export default {
  name: "verificationCode",
  data() {
    return {
      qr_code: "",
      account: "",
      order_id: "", //订单ID
      code: "",
      modal_qr: false,
      second: 0,
    };
  },
  components: {
    // ayQrcode,
    uqcode
  },
  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.$refs.uqcode.createCode(this.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;

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

    .code-img {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin: 0 auto;
      margin-bottom: 36rpx;
      // 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;
  .code {
    margin-bottom: 6rpx;
    .num{
      display: inline-block;
    }
  }
}
</style>