pages/businessCard/provideCard.vue

<template>
    <view>
        <uni-section :title="`${cardRuleName}(${cardTypeName})`" type="line">
            <uni-card padding="0" spacing="0">
                <uni-list>
                    <uni-list-item title="适应车场" :rightText="plName">
                        <text></text>
                    </uni-list-item>
                    <uni-list-item :title="`价格：¥${price}/张`" :rightText="`商户库存：${cardNum}张`"></uni-list-item>
                </uni-list>
            </uni-card>
        </uni-section>
        <view class=" uni-card" style="padding: 10px 0">
            <view class="qr-box">
                <canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;"/>
            </view>
        </view>
        <view class="tip-wrap">
            <uni-notice-bar single text="温馨提示:" />
            <uni-notice-bar single text="卡券自动发放，扫码领券后会自动刷新卡券二维码。" />
        </view>
        <view class="uni-padding-wrap uni-common-mt">
            <button type="primary" style="margin-bottom: 15px">停止自动发放</button>
            <button type="warn">打印静态二维码</button>
        </view>
    </view>
</template>
<script>
import uQRCode from '../../common/uqrcode.js' //引入uqrcode.js
export default {
  data() {
    return {
      qrShow: false,
      cardTypeName: '',// 卡类型名称
      cardRuleName: '',// 卡名称
      plName:'', // 停车场
      price:'', // 卡价格
      cardNum:'', // 库存
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    // let option = JSON.parse(params.optionData)
    // console.log(option)
    // this.cardTypeName = option.cardTypeName
    // this.cardRuleName = option.cardRuleName
    // this.plName = option.plName
    // this.price = option.value
    // this.cardNum = option.cardNum
    // this.maxNum = option.cardNum
    this.getCouponDynamicQR()
  },
  onShow() {
    var me = this;
  },
  computed: {
  },
  methods: {
    getCouponDynamicQR() {
      let that = this
      let paramsData = {
        cardRelParkNo: '123qwe',
        codeType: '2'
      }
      // 首页信息获取 接口
      that.$myRequest({
        url: that.$common.getCouponDynamicQR,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        console.log(res)
        let qrUrl = res.data.qrUrl
        that.qrFun(qrUrl) //调用二维码方法
        console.log(qrUrl)
      })
    },
    //**生成二维码**//
    qrFun: function(text) {
      this.qrShow = true
      uQRCode.make({
        canvasId: 'qrcode',
        componentInstance: this,
        text: text,
        size: 150,
        margin: 0,
        backgroundColor: '#ffffff',
        foregroundColor: '#000000',
        fileType: 'jpg',
        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
        success: res => {}
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    /deep/ .uni-section{
        padding-bottom: 10px;
    }
    .rechargeWrap{
        position: relative;
        .rechargeArrow{
            position: absolute;
            right: 10px;
            top: 30px;
            font-size: 20px;
            color: #999;
        }
    }
    .recordCon {
        padding-right: 35px;
        color: #999;
        display: flex;
        justify-content: space-between;
    }
    .container {
        overflow: hidden;
    }
    .custom-cover {
        flex: 1;
        flex-direction: row;
        position: relative;
    }
    .cover-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background-color: rgba($color: #000000, $alpha: 0.4);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 15px;
        font-size: 14px;
        color: #fff;
    }
    .card-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 45px;
        border-top: 1px #eee solid;
    }
    .card-actions-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .card-actions-item-text {
        font-size: 12px;
        color: #666;
        margin-left: 5px;
    }
    .cover-image {
        flex: 1;
        height: 150px;
    }
    .no-border {
        border-width: 0;
    }
    .tip-wrap /deep/ .uni-noticebar{
        margin-bottom: 0;
    }
</style>