BJ_web_developers / jy_parkingOS

  <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" style="padding: 10px 0">

              <view class="qr-box">

                  <canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;height: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" @click="stopProvide">{{provideText}}</button>

              <button type="warn" @click="toPrintCard">生成静态二维码图片</button>

          </view>

  
  
      </view>
  </template>
  
  <script>

  import uQRCode from '../../common/uqrcode.js' //引入uqrcode.js

  export default {
    data() {

      return {

        qrShow: false,

        cardTypeName: '',// 卡类型名称
        cardRuleName: '',// 卡名称

        plName: '', // 停车场
        price: '', // 卡价格
        cardNum: '', // 库存
        timer: null, // 定时器
        qrUrl: '',// 二维码url
        provideText:'停止自动发放',
        cardRelParkNo:'',//商券规则关联车场和商户编码

      }
    },
    onLoad(params) {

      let that =  this

      wx.showShareMenu({
        withShareTicket: true
      })

      let option = JSON.parse(params.optionData)
      console.log(option)
      this.cardRelParkNo = option.cardRelParkNo
      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()

      that.timer = setInterval(() => {
        // 业务逻辑

        console.log(that.dateFormat(Date.parse(new Date())))

        that.getCouponDynamicQR() //调用二维码方法
      }, 60000)

    },

    onUnload() {

      let me = this
      if(me.timer) {
        clearTimeout(me.timer);
        me.timer = null;

      }
    },

    onShow() {
      var me = this;

    },

    computed: {},

    methods: {

      dateFormat(time) {
        let date = new Date(time);
        let year = date.getFullYear();
        // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
        // return year + "-" + month + "-" + day;
      },

      getCouponDynamicQR() {
        let that = this
        let paramsData = {

          cardRelParkNo: this.cardRelParkNo,

          codeType: '2'

        }

        // 首页信息获取 接口
        that.$myRequest({
          url: that.$common.getCouponDynamicQR,
          method: 'POST',
          data: that.$common.requestSign(paramsData)
        }).then(res => {
          console.log(res)

          that.qrUrl = res.data.qrUrl
          that.qrFun(that.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 => {
          }

        })

      },
      stopProvide: function () {
        let that = this
        // provideText:'停止自动发放'
        if(that.provideText == '停止自动发放'){
          that.provideText = '开始自动发放'
          clearInterval(that.timer)
          that.timer = null;
        }else{
          that.provideText = '停止自动发放'
          that.qrFun(that.qrUrl) //调用二维码方法
          that.timer = setInterval(() => {
            // 业务逻辑
            console.log('11')

            that.getCouponDynamicQR() //调用二维码方法
          }, 60000)

        }
      },
      toPrintCard: function () {
        uni.navigateTo({
  
          url: '../businessCard/printCard?cardRelParkNo='+this.cardRelParkNo+
          '&cardTypeName='+ this.cardTypeName+
          '&cardRuleName='+this.cardRuleName+
          '&plName='+this.plName+
          '&price='+this.price+
          '&cardNum='+this.cardNum
        });

      }

    }
  }
  </script>
  
  <style lang="scss" scoped>

      /deep/ .uni-section {

          padding-bottom: 10px;
      }

      .tip-wrap /deep/ .uni-noticebar {

          margin-bottom: 0;
      }

  </style>