index.vue

<template>
  <div class="star-activity-page">
    <div>
      <img class="bg" :src="starbg_1"/>
      <div class="star-total" @click="showLog">
        我的星星 <img class="x-img" :src="x_url"/>{{star_total}}
      </div>
      <img class="bg" :src="starbg_2"/>
      <img class="bg" :src="starbg_3" @click="showQr"/>
      <img class="bg" :src="starbg_4"/>
    </div>
    <div class="btn-block" ref="btn_block">
      <div class="btn">
        活动已结束
      </div>
    </div>

    <mt-popup v-model="qr_show" style="background: transparent">
      <div class="qr-img">
        <img :src="qr_url" class="qr-img" />
        <div class="qr-close" @click="qr_show = false"></div>
      </div>
    </mt-popup>

    <mt-popup v-model="log_show" style="background: transparent" :closeOnClickModal="false">
      <div :style="{backgroundImage:`url('${log_url}')`}" class="log-img">
        <div class="content">
          <div class="no-list" v-if="no_list">
            <img :src="no_url"/>
            —— 暂无记录 ——
          </div>
          <div class="list" v-for="data in logList">
            <span class="time-text">
              {{data.created_at | substrTime}}
            </span>
            <span class="desc-text">
              {{data.desc}}
            </span>
            <span class="star-num" v-if="data.is_add === 1" style="color: #7ED321">
              星星+{{data.value}}
            </span>
            <span class="star-num" v-if="data.is_add !== 1" style="color: #D0021B">
              星星-{{data.value}}
            </span>
          </div>
        </div>
        <div class="btn" @click="closeLog">
          知道了
        </div>
      </div>
    </mt-popup>

    <div v-if="share_show" class="share-show-block" @click="share_show=false">
      <div class="share-show-content">
        <img :src="dataURL" class="cvs-img" id="cvs-img"/>
        <div :style="{backgroundImage:`url('${share_img_url}')`}" class="share_img"  ref="imageWrapper" id="capture">
          <div id="qrcode" class="qrcode"></div>
        </div>
        <div class="tips">
          <b>长按保存海报  或发送给好友</b>
          <br>
          越多朋友报名，您可得越多星星
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import starbg_1 from '../../assets/starActivity/actBg1.png'
  import starbg_2 from '../../assets/starActivity/actBg2.png'
  import starbg_3 from '../../assets/starActivity/actBg3.png'
  import starbg_4 from '../../assets/starActivity/actBg4.png'
  import x_url from '../../assets/starActivity/x.png'
  import log_url from '../../assets/starActivity/log.png'
  import qr_url from '../../assets/starActivity/qr.png'
  import share_img_url from '../../assets/starActivity/share_bg.jpg'
  import no_url from '../../assets/starActivity/no.png'
  import {getUserIntegralApi,getUserIntegralListApi,getShortApi,getShareGoodsApi,getwechatParam} from "../../service/api";
  import  QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas'
  import { Indicator } from 'mint-ui'
  export default {
    name: "index",
    data(){
      return {
        starbg_1:starbg_1,
        share_img_url:share_img_url,
        log_url:log_url,
        no_list:false,
        log_show:false,
        share_show:false,
        qr_show:false,
        dataURL:null,
        no_url:no_url,
        qr_url:qr_url,
        starbg_2:starbg_2,
        starbg_3:starbg_3,
        starbg_4:starbg_4,
        x_url:x_url,
        star_total:0,
        logList:[],
        shopId:null,
        share_URL:null
      }
    },
    methods:{
      initPage(){
        getShareGoodsApi().then(res=>{
          this.shopId = res[0].value;
          this.share_URL = process.env.API_URL+'#/buyDetail?shopId='+ this.shopId + '&invite_code=CC-ZKHB-'+JSON.parse(localStorage.getItem('userDesc')).user_id;
          this.onShare(this.share_URL);
          this.toDataURLBase64(this.share_img_url,(cal)=>{
              this.share_img_url = cal;
          })
        });
        getUserIntegralApi().then(res=>{
          this.star_total = res.last_value
        })
      },
      closeLog(){
        window.removeEventListener("scroll",this.scrollFix);
        this.log_show = false
      },
      onShare(URL) {
        this.enableShare({
          product_title: `赠您【1元领取398元英语启蒙课程特权】，限时福利，立即领取`, // 分享标题
          desc: `学习另赠价值58元实物绘本，包邮送到家~`,//
          shareIcon:'https://cdn.singsingenglish.com/logo/logo.jpg',
          shareUrl:URL
        })
      },
      showQr(){
        this.qr_show = true;
        this.$sa.track('buttonClick',{
          tabTitle:'星星活动页',
          moduleTitle:'星星活动页',
          buttonType:'功能',
          buttonName:'小助手二维码'
        });
      },
      enableShare: function(option) {
        getwechatParam({
          api_list:   'onMenuShareAppMessage,onMenuShareTimeline',
          url:window.location.href.split('#')[0]
        }).then(wechatRes => {
          wx.config({
            debug: false,
            appId: wechatRes.appId,
            timestamp: parseInt(wechatRes.timestamp),
            nonceStr: wechatRes.nonceStr,
            signature: wechatRes.signature,
            jsApiList: wechatRes.jsApiList
          });
          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
                console.log('分享成功');
              },
              cancel: function() {
                console.log('分享失败');
              }
            });
            wx.onMenuShareAppMessage({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
              },
              cancel: function() {
              }
            });
          })
        })
      },
      qrcode(data){
        if(this.QRCodeB){
          this.QRCodeB.makeCode(data)
        }else{
          this.QRCodeB = new QRCode('qrcode', {
            width: 140,
            height: 140, // 高度
            text: data, // 二维码内容
            image: ''
          });
        }
      },
      refshow(){
        this.$sa.track('buttonClick',{
          tabTitle:'星星活动页',
          moduleTitle:'星星活动页',
          buttonType:'功能',
          buttonName:'生成海报'
        });
        this.share_show = true;
        if(this.dataURL){}else{
          Indicator.open();
          getShortApi({url:this.share_URL}).then(res=>{
            this.qrcode(res.url);
            this.$nextTick(()=>{
              let {
                width,
              } = document.getElementById('capture').getClientRects()[0];
              document.getElementById('capture').style.width = document.getElementById('capture').getClientRects()[0].width*2 + 'px';
              document.getElementById('capture').style.height = document.getElementById('capture').getClientRects()[0].height*2 + 'px';
              setTimeout(()=>{
                html2canvas(document.getElementById('capture'),{
                  async: true,
                  scale: 2,
                  letterRendering: true,
                }).then((canvas) => {
                  let dataURL = canvas.toDataURL("image/jpg");
                  this.dataURL = dataURL;
                  document.getElementById('capture').style.display="none"
                  Indicator.close();
                }).catch(res=>{
                  alert(res);console.log();
                  document.getElementById('capture').style.display="none"
                  Indicator.close();
                });
                },500)
            })
          })
        }
      },
      getOffsetRect(ele){
        var box=ele.getBoundingClientRect();
        var body=document.body,
          docElem=document.documentElement;
        //获取页面的scrollTop,scrollLeft(兼容性写法)
        var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
          scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
        var clientTop=docElem.clientTop||body.clientTop,
          clientLeft=docElem.clientLeft||body.clientLeft;
        var top=box.top+scrollTop-clientTop,
          left=box.left+scrollLeft-clientLeft;
        return {
          //Math.round 兼容火狐浏览器bug
          top:Math.round(top),
          left:Math.round(left)
        }
      },
      toDataURLBase64 (src, callback) {
        let xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
          let fileReader = new FileReader();
          fileReader.onloadend = function () {
            callback(fileReader.result)
          };
          fileReader.readAsDataURL(xhttp.response)
        };
        xhttp.responseType = 'blob';
        xhttp.open('GET', src, true);
        xhttp.send()
      },
      scrollFix(data){
        window.scrollTo(0, data)
      },
      showLog(){
        this.$sa.track('buttonClick',{
          tabTitle:'星星活动页',
          moduleTitle:'星星活动页',
          buttonType:'功能',
          buttonName:'查看积分'
        });
        getUserIntegralListApi({limit:1000}).then(res=>{
          if(!res.list || res.list.length <1 ){
            this.no_list = true
          }else{
            this.logList = res.list;
          }
          let t =document.documentElement.scrollTop||document.body.scrollTop;
          window.addEventListener("scroll",this.scrollFix);
          this.log_show = true;
        })
      }
    },
    filters:{
      substrTime(value){
        return value.substr(0,10).replace(/-/g,'.')
      }
    },
    mounted(){
      this.initPage();
      window.onscroll= ()=>{
        //变量t是滚动条滚动时，距离顶部的距离
        let t = document.documentElement.scrollTop||document.body.scrollTop;
        if(t>300){
          this.$refs.btn_block.style.opacity = 1;

          this.$refs.btn_block.style.display = 'block'
        }else{
          this.$refs.btn_block.style.opacity = 0;
          this.$refs.btn_block.style.display = 'none'
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
.star-activity-page{
  padding-bottom: 60*@toVw;
  .bg{
    width: 100%;
    display: block;
  }
  .star-total{
    width: 164*@toVw;
    height: 39*@toVw;
    border: 1*@toVw solid #000;
    border-radius: 80*@toVw;
    line-height: 39*@toVw;
    font-size:18px;
    background:rgba(255,216,0,1);
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(0,0,0,1);
    text-align: center;
    position: absolute;
    top: 480*@toVw;
    left: 50%;
    margin-left: -82*@toVw;
    .x-img{
      width: 7*@toVw;
    }
  }
  .btn-block{
    padding:8*@toVw;
    position: fixed;
    left: 0;
    width: 100%;
    background: white;
    opacity: 0;
    display: none;
    transition: all 0.5s;
    bottom: 0;
    .btn{
      width: 287*@toVw;
      height: 44*@toVw;
      margin: auto;
      background: #ccc;
      border-radius: 100*@toVw;
      color: white;
      line-height: 44*@toVw;
      text-align: center;
      font-size:16px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
    }
  }
}
  .qr-img{
    width: 323*@toVw;
  }
  .log-img{
    width: 337*@toVw;
    height: 354*@toVw;
    background-size: 100% 100%;
    padding-top: 130*@toVw;
    position: relative;
    .content{
      width: 280*@toVw;
      max-height: 220*@toVw;
      font-size:14px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(0,0,0,1);
      overflow: auto;
      line-height: 25*@toVw;
      .list{
        span{
          display: inline-block;
        }
        .star-num{
          float: right;
          vertical-align: middle;
        }
        .desc-text{
          vertical-align: middle;
          max-width: 120*@toVw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .time-text{
          vertical-align: middle;
          margin-right: 10*@toVw;
        }
      }
    }
    .btn{
      width: 247*@toVw;
      height: 46*@toVw;
      line-height: 46*@toVw;
      background: #F6D723;
      border-radius: 100*@toVw;
      color: #DF4225;
      font-size:16px;
      font-family:PingFang-SC-Bold;
      font-weight:bold;
      text-align: center;
      position: absolute;
      bottom: 36*@toVw;
      left: 50%;
      margin-left: -123.5*@toVw;
    }
  }
  .share_img{
    width: 297*@toVw;
    height: 475*@toVw;
    background-size: 100% 100%;
    position: relative;
    .qrcode{
      width: 175*@toVw;
      height: 175*@toVw;
      position: absolute;
      bottom: 34*@toVw;
      right: 8%;
    }
  }
  .cvs-img{
    position: absolute;
    width: 297*@toVw;
    height: 475*@toVw;
    background-size: 100% 100%;
    z-index: 2;
  }
  .share-show-block{
    position: fixed;
    overflow: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    .tips{
      color: white;
      width: 100%;
      left: 0;
      position: absolute;
      top: 475*@toVw;
      z-index: 3;
      text-align: center;
    }
    .share-show-content{
      width: 297*@toVw;
      height: 500*@toVw;
      position: absolute;
      top: 50%;
      margin-left: -148.5*@toVw;
      left: 50%;
      margin-top: -250*@toVw;
    }
  }
  .no-list{
    text-align: center;
    color: #aaaaaa;
    img{
      display: block;
      margin-bottom: 10*@toVw;
      width: 150*@toVw;
    }
  }
  .qr-close{
    width: 250*@toVw;
    position: absolute;
    bottom: 40*@toVw;
    left: 50%;
    margin-left: -125*@toVw;
    height: 40*@toVw;
  }
</style>
<style>
  .qrcode img{
    width: 100% !important;
  }
</style>