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

              <image :src="qrUrl" style="width: 300px;height:300px;margin: 0 auto;" @longpress="savePosterPath(qrUrl)"></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.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: {

      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)

        this.deadline = this.single

        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>