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/100).toFixed(2)}/张`"
                                   :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;"
                   show-menu-by-longpress='1'></image>
        </view>
        <view style="padding: 5px 10px">长按上面二维码可以保存为图片</view>
        <view class=" uni-card" style="padding: 10px 15px">
            <view style="padding-bottom: 10px;">选择二维码有效期</view>
            <!--<uni-number-box @change="changeValue" min="1"/>-->
            <uni-datetime-picker v-model="single" :start="startTime"/>
        </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
import { formatDate } from '../../common/date.js';
export default {
  data() {
    return {
      cardTypeName: '',// 卡类型名称
      cardRuleName: '',// 卡名称
      plName: '', // 停车场
      price: '', // 卡价格
      cardNum: '', // 库存
      cardRelParkNo: '',//商券规则关联车场和商户编码
      numberValue: '1',
      deadline: '2099-10-01 00:00:00',
      qrUrl: '', // 图片地址
      single: '',
      startTime: '',
      deadlineInit: ""
    }
  },
  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.deadline = this.dateAdd(1)
    console.log(this.deadline)
    this.getCouponStaticQR()
  },
  onShow() {
    var me = this;
  },
  mounted() {
    setTimeout(() => {
      this.startTime = Date.now()
      this.single = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      this.deadlineInit = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
      console.log(this.single)
    }, 500)
  },
  computed: {},
  methods: {
    timeAdd0(str) {
      if (str < 10) {
        str = '0' + str;
      }
      return str
    },
    dateAdd(days) {
      var startDate = new Date();
      startDate = +startDate + days * 1000 * 60 * 60 * 24;
      startDate = new Date(startDate);
      var nextStartDate = startDate.getFullYear() + "-" + this.timeAdd0((startDate.getMonth() + 1)) + "-" + this.timeAdd0(startDate.getDate()) + " " + this.timeAdd0(startDate.getHours()) + ":" + this.timeAdd0(startDate.getMinutes()) + ":" + this.timeAdd0(startDate.getSeconds())
      return nextStartDate;
    },
    changeValue(value) {
      this.numberValue = value
    },
    getCouponStaticQR() {
      let that = this
      let paramsData = {
        cardRelParkNo: this.cardRelParkNo,
        codeType: '2',
        deadline: this.deadline
      }
      // 首页信息获取 接口
      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 () {
      console.log(this.single)
      console.log(new Date(this.single).getTime())
      console.log(new Date().getTime())
      if(new Date(this.single).getTime()<new Date().getTime()){
        uni.showToast({
          title: '二维码有效期时间必须大于当前时间',
          icon: 'none',
          duration: 2000
        })
      }else{
        this.deadline = this.single
        this.getCouponStaticQR()
      }
    },
    // 小程序保存图片
    savePosterPath(url) {
      console.log(url)
      uni.getSetting({ //获取用户的当前设置
        success: res => {
          console.log('1')
          if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
            this.saveImageToPhotosAlbum()
          } else {
            console.log('2')
            uni.authorize({//重新发起获取授权
              scope: 'scope.writePhotosAlbum',
              success: () => {
                this.saveImageToPhotosAlbum(url)
              },
              fail: () => {
                uni.showToast({
                  title: '请打开保存相册权限，再点击保存相册分享',
                  icon: 'none',
                  duration: 2000
                })
                let timer = setTimeout(() => {
                  clearTimeout(timer)
                  uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
                    success: e => {
                    }
                  })
                }, 2000)
              }
            })
          }
        }
      })
    },
    saveImageToPhotosAlbum() {
      console.log(this.qrUrl)
      wx.downloadFile({
        url: this.qrUrl,
        success: res => {
          if (res.statusCode === 200) {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                wx.showToast({title: '保存图片成功！',})
              },
              fail(res) {
                wx.showToast({title: '保存图片失败！',})
              }
            })
          }
        },
        fail: err => {
          console.log(err, 'err')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
</style>