<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 { Toast } from 'vant' import {Popup} from 'mint-ui' export default { name: "index", components:{ [Popup.name]:Popup }, 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{ Toast.loading({ mask: true, message: '' }); 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" Toast.clear() }).catch(res=>{ alert(res);console.log(); document.getElementById('capture').style.display="none" Toast.clear() }); },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>