cyywl_server/yudao-ui-app/pages/users/user_spread_code/index.vue

<template>
  <view class="main-page">
    <image :src="posterUrl" style="width:100%;height:100%;" mode="scaleToFill" v-show="posterUrl"></image>
    <view class="spread-wrap" id="poster-wrap" v-show="!posterUrl">
      <view class="logo-wrap">
        <image :src="tenantInfo.logo" class="logo-image"></image>
      </view>
      <view class="activity-wrap" v-show="activityList.length > 0">
        <view class="item-wrap" :key="index" v-for="(item, index) in activityList">
          <view class="text">办理会员{{item.gearAmount}}元</view>
          <view class="text">可享一年返回<span>{{item.refundAmount}}元</span>话费</view>
        </view>
        <view class="tips">
          三个活动可同时参与，每个手机号仅限一次，最高可返<span>{{total}}元</span>话费！！！
        </view>
        <view class="service-phone">{{tenantInfo.serviceMobile}}</view>
        <view class="tenant-info-wrap">
          <view class="info-wrap">
            <view class="info">
              <view class="name">{{userInfo.nickname}}</view>
              <view class="phone">{{userInfo.mobile}}</view>
              <view class="address">
                {{userInfo.parentDeptName}}
              </view>
            </view>
            <view class="qrcode-wrap">
              <canvas id="qrcode" style="width:132rpx;height:132rpx;"></canvas>
            </view>
          </view>
          <u-button class="logon" @click="downImage" v-show="!isHideBtn">生成海报</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    toLogin
  } from '@/libs/login.js';
  import {
    memberGradeInfo
  } from '@/api/member.js';
  import {
    mapGetters
  } from "vuex";
  import appConfig from '@/config/app.js'
  import QRCode from 'qrcode'
  import * as htmlToImage from 'html-to-image'
  export default {
    data() {
      return {
        activityList: [],
        posterUrl: '',
        isHideBtn: false
      };
    },
    computed:{
      ...mapGetters(['isLogin', 'uid', 'userInfo', 'tenantId', 'tenantInfo']),
      total: function(){
        let _total = 0
        for (let active of this.activityList) {
          _total+= parseInt(active.refundAmount)
        }
        return _total
      },
    },
    onLoad() {
      if (!this.isLogin) {
        toLogin()
      } else {
        this.getActivityInfo()
      }
    },
    onReady() {},
    methods: {
      async downImage() {
        const that = this
        uni.showLoading({
          title: '生成海报中',
          mask: true
        });
        that.isHideBtn = true
        for(let i = 0; i<2; i++){
         await htmlToImage.toPng(document.getElementById('poster-wrap'), {
             quality: 0.95,
             cacheBust: true
           });
        }
        htmlToImage.toPng(document.getElementById('poster-wrap'), {
            quality: 0.95,
            cacheBust: true
          })
          .then(function(dataUrl) {
            console.log('dataUrl', dataUrl)
            uni.hideLoading()
            that.posterUrl = dataUrl
            that.$util.Tips({
              title: '生成成功，长按保存图片'
            })
          }).catch(()=>{
            that.$util.Tips({
              title: '生成失败'
            })
            that.isHideBtn = false
          })
      },
      // 生成二维码；
      make() {
        let that = this;
        const url =
          `${appConfig.SPREAD_DOMAIN}${appConfig.SPREAD_LINK}?redirectUrl=${appConfig.SPREAD_DOMAIN}&tenantId=${that.tenantId}&spreadId=${that.uid}`
        console.log('url', url)
        QRCode.toCanvas(document.getElementById('qrcode').querySelector('canvas'), url, {
          scale: 1.5
        }, function(error) {
          console.log(error)
        })
      },
      // 获取活动套餐信息
      async getActivityInfo() {
        try {
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          const res = await memberGradeInfo()
          this.activityList = res.data
          // 生成二维码
          setTimeout(() => {
            this.make()
          }, 500)
        } catch (e) {
          this.$util.Tips({
            title: '获取活动信息失败'
          })
        } finally {
          uni.hideLoading()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  page {
    background-color: #F8EEEF !important;
    height: 100vh;
    overflow: auto;
  }

  .main-page{
    height: 100%;
    overflow: auto;
  }

  .spread-wrap {
    height: 100%;
    background: url('@/static/images/spread_bg.png') center 0 no-repeat;
    background-size: 100% auto;
    position: relative;
    background-color: #F8EEEF;
  }

  .logo-wrap {
    text-align: center;
    padding-top: 53rpx;

    .logo-image {
      width: 160rpx;
      height: 141rpx;
    }
  }

  .activity-wrap {
    position: absolute;
    top: 460rpx;
    left: 104rpx;
    right: 110rpx;

    .tenant-info-wrap {
      position: absolute;
      left: 0;
      right: 0;
      top: 656rpx;

      .info-wrap {
        display: flex;
        justify-content: space-between;
      }

      .qrcode-wrap {
        margin-left: 40rpx;
      }

      .address {
        margin-top: 18rpx;
      }

      .logon {
        width: 100%;
        height: 70rpx;
        margin: 30rpx 0;
        color: #FFFFFF;
        font-size: 28rpx;
        background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
        border-radius: 44rpx;
      }
    }

    .service-phone {
      position: absolute;
      bottom: -114rpx;
      right: 48rpx;
      font-size: 30rpx;
      color: #ED387C;
      font-style: italic;
      font-weight: bold;
    }

    .tips {
      font-size: 28rpx;
      color: #000;
      span{
        color: #C80D00;
        font-weight: bold;
      }
    }

    .item-wrap {
      font-size: 26rpx;
      font-style: italic;
      color: #010101;
      font-weight: bold;
      margin-bottom: 54rpx;
      padding-left: 227rpx;

      .text span {
        color: #C80D00;
      }
    }
  }

  .canvas {
    position: relative;
  }
</style>