pages/businessCard/printCard.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 text-center" style="padding: 10px 0">
            <image :src="qrUrl" style="width: 300px;height:300px;margin: 0 auto;" @longpress="savePosterPath(qrUrl)"></image>
        </view>
        <view>长按上面二维码可以保存为图片</view>
        <view class=" uni-card" style="padding: 10px 15px">
            二维码有效期（小时）：（自打印时间算起）
            <uni-number-box @change="changeValue" min="1"/>
        </view>
        <view class="uni-padding-wrap uni-common-mt">
            <!--<button type="primary" style="margin-bottom: 15px">停止自动发放</button>-->
            <button type="warn" @click="changeTime">重新生成二维码</button>
        </view>
    </view>
</template>
<script>
import uQRCode from '../../common/uqrcode.js' //引入uqrcode.js
export default {
  data() {
    return {
      cardTypeName: '',// 卡类型名称
      cardRuleName: '',// 卡名称
      plName: '', // 停车场
      price: '', // 卡价格
      cardNum: '', // 库存
      cardRelParkNo: '',//商券规则关联车场和商户编码
      numberValue: '1',
      hour: '9999999999999999999999',
      qrUrl: '', // 图片地址
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    console.log(params)
    let option = params
    this.cardRelParkNo = option.cardRelParkNo
    this.cardTypeName = option.cardTypeName
    this.cardRuleName = option.cardRuleName
    this.plName = option.plName
    this.price = option.price
    this.cardNum = option.cardNum
    this.getCouponStaticQR()
  },
  onShow() {
    var me = this;
  },
  computed: {},
  methods: {
    changeValue(value) {
      this.numberValue = value
    },
    getCouponStaticQR() {
      let that = this
      let paramsData = {
        cardRelParkNo: this.cardRelParkNo,
        codeType: '2',
        hour: this.hour
      }
      // 首页信息获取 接口
      that.$myRequest({
        url: that.$common.getCouponStaticQR,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        console.log(res)
        that.qrUrl = res.data.qrUrl
        console.log(that.qrUrl)
      })
    },
    //**生成二维码**//
    qrFun: function (text) {
      this.qrShow = true
      uQRCode.make({
        canvasId: 'qrcode',
        componentInstance: this,
        text: text,
        size: 130,
        margin: 0,
        backgroundColor: '#ffffff',
        foregroundColor: '#000000',
        fileType: 'jpg',
        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
        success: res => {
        }
      })
    },
    changeTime: function () {
      this.hour = this.numberValue
      this.getCouponStaticQR()
    },
    // 小程序保存图片
    savePosterPath(url) {
      uni.downloadFile({
        url,
        success: (resFile) => {
        console.log(resFile, "resFile");
      if (resFile.statusCode === 200) {
        uni.getSetting({
          success: (res) => {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
          uni.authorize({
            scope: "scope.writePhotosAlbum",
            success: () => {
            uni.saveImageToPhotosAlbum({
            filePath: resFile.tempFilePath,
            success: (res) => {
            return uni.showToast({
              title: "保存成功！",
            });
        },
          fail: (res) => {
            return uni.showToast({
              title: res.errMsg,
            });
          },
          complete: (res) => {},
        });
        },
          fail: () => {
            uni.showModal({
              title: "您已拒绝获取相册权限",
              content: "是否进入权限管理，调整授权？",
              success: (res) => {
              if (res.confirm) {
              uni.openSetting({
                success: (res) => {
                console.log(res.authSetting);
            },
            });
            } else if (res.cancel) {
              return uni.showToast({
                title: "已取消！",
              });
            }
          },
          });
          },
        });
        } else {
          uni.saveImageToPhotosAlbum({
            filePath: resFile.tempFilePath,
            success: (res) => {
            return uni.showToast({
              title: "保存成功！",
            });
        },
          fail: (res) => {
            return uni.showToast({
              title: res.errMsg,
            });
          },
          complete: (res) => {},
        });
        }
      },
        fail: (res) => {},
      });
      } else {
        return uni.showToast({
          title: resFile.errMsg,
        });
      }
    },
      fail: (res) => {
        return uni.showToast({
          title: res.errMsg,
        });
      },
    });
    },
  }
}
</script>
<style lang="scss" scoped>
</style>