|
|
@@ -1,10 +1,10 @@
|
|
|
-function initPlayMusic () {
|
|
|
+function initPlayMusic() {
|
|
|
var isAutoPlayMusic = false
|
|
|
var bgvid = document.getElementById("audio");
|
|
|
var b_music = document.getElementById('music-control-box')
|
|
|
var fullbox = document.querySelector('body');
|
|
|
|
|
|
- fullbox.addEventListener('touchstart', function(){
|
|
|
+ fullbox.addEventListener('touchstart', function () {
|
|
|
if (isAutoPlayMusic) {
|
|
|
isAutoPlayMusic = false
|
|
|
bgvid.play()
|
|
|
@@ -12,11 +12,11 @@ function initPlayMusic () {
|
|
|
}
|
|
|
}, false);
|
|
|
|
|
|
- bgvid.addEventListener("playing", function(){
|
|
|
+ bgvid.addEventListener("playing", function () {
|
|
|
b_music.style.display = 'block'
|
|
|
b_music.classList.add('run-music')
|
|
|
});
|
|
|
- bgvid.addEventListener("pause", function(){
|
|
|
+ bgvid.addEventListener("pause", function () {
|
|
|
b_music.classList.remove('run-music')
|
|
|
});
|
|
|
b_music.addEventListener('click', function (e) {
|
|
|
@@ -32,18 +32,18 @@ function initPlayMusic () {
|
|
|
var result = new Vue({
|
|
|
el: '#result',
|
|
|
delimiters: ['${', '}'],
|
|
|
- data: function() {
|
|
|
+ data: function () {
|
|
|
return {
|
|
|
resultList: [
|
|
|
- {_id: '1', title: '逢标必中的投标达人', label: domain +'/common-module/yearEndReport/images/result/label-1.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-1.png'},
|
|
|
- {_id: '2', title: '成功触手可及的追梦人', label: domain + '/common-module/yearEndReport/images/result/label-2.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-2.png'},
|
|
|
- {_id: '3', title: '怀抱热振元气满满的打工人', label: domain + '/common-module/yearEndReport/images/result/label-3.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-3.png'},
|
|
|
- {_id: '4', title: '日进斗金的大佬', label: domain + '/common-module/yearEndReport/images/result/label-4.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-4.png'},
|
|
|
- {_id: '5', title: '有钱任性的大BOSS', label: domain + '/common-module/yearEndReport/images/result/label-5.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-5.png'},
|
|
|
- {_id: '6', title: '开疆拓土的“顶梁柱”', label: domain + '/common-module/yearEndReport/images/result/label-6.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-6.png'},
|
|
|
- {_id: '7', title: '炉火纯青的盖章无影手', label: domain + '/common-module/yearEndReport/images/result/label-7.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-7.png'},
|
|
|
- {_id: '8', title: '有钱任性的大BOSS', label: domain + '/common-module/yearEndReport/images/result/label-8.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-5.png'},
|
|
|
- {_id: '9', title: '有钱任性的大BOSS', label: domain + '/common-module/yearEndReport/images/result/label-9.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-5.png'},
|
|
|
+ { _id: '1', title: '逢标必中的投标达人', label: domain + '/common-module/yearEndReport/images/result/label-1.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-1.png' },
|
|
|
+ { _id: '2', title: '成功触手可及的追梦人', label: domain + '/common-module/yearEndReport/images/result/label-2.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-2.png' },
|
|
|
+ { _id: '3', title: '怀抱热振元气满满的打工人', label: domain + '/common-module/yearEndReport/images/result/label-3.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-3.png' },
|
|
|
+ { _id: '4', title: '日进斗金的大佬', label: domain + '/common-module/yearEndReport/images/result/label-4.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-4.png' },
|
|
|
+ { _id: '5', title: '有钱任性的大BOSS', label: domain + '/common-module/yearEndReport/images/result/label-5.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-5.png' },
|
|
|
+ { _id: '6', title: '开疆拓土的“顶梁柱”', label: domain + '/common-module/yearEndReport/images/result/label-6.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-6.png' },
|
|
|
+ { _id: '7', title: '炉火纯青的盖章无影手', label: domain + '/common-module/yearEndReport/images/result/label-7.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-7.png' },
|
|
|
+ { _id: '8', title: '有钱任性的大BOSS', label: domain + '/common-module/yearEndReport/images/result/label-8.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-5.png' },
|
|
|
+ { _id: '9', title: '有钱任性的大BOSS', label: domain + '/common-module/yearEndReport/images/result/label-9.png', bg: domain + '/common-module/yearEndReport/images/result/item-bg-5.png' },
|
|
|
],
|
|
|
curRole: {
|
|
|
_id: '1',
|
|
|
@@ -54,51 +54,20 @@ var result = new Vue({
|
|
|
picImgStatus: false,
|
|
|
showAction: false,
|
|
|
actions: [{ name: '微信' }, { name: '朋友圈' }],
|
|
|
- wxSDKSign: {
|
|
|
- debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
|
|
|
- appId: '', // 必填，公众号的唯一标识
|
|
|
- timestamp: '', // 必填，生成签名的时间戳
|
|
|
- nonceStr: '', // 必填，生成签名的随机串
|
|
|
- signature: '',// 必填，签名
|
|
|
- jsApiList: [
|
|
|
- // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
- 'updateAppMessageShareData',
|
|
|
- // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
|
|
|
- 'updateTimelineShareData',
|
|
|
- // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
|
|
|
- 'onMenuShareWeibo',
|
|
|
- // 关闭当前网页窗口接口
|
|
|
- 'closeWindow',
|
|
|
- // 批量隐藏功能按钮接口
|
|
|
- // 'hideMenuItems',
|
|
|
- // 批量显示功能按钮接口
|
|
|
- // 'showMenuItems',
|
|
|
- // 隐藏所有非基础按钮接口
|
|
|
- // 'hideAllNonBaseMenuItem',
|
|
|
- // 显示所有功能按钮接口
|
|
|
- // 'showAllNonBaseMenuItem',
|
|
|
- // 调起微信扫一扫接口
|
|
|
- // 'scanQRCode'
|
|
|
- ],
|
|
|
- openTagList: ['wx-open-launch-app']
|
|
|
- },
|
|
|
- shareInfo: {
|
|
|
- title: '剑鱼标讯',
|
|
|
- desc: '我的剑鱼标讯2021」年度报告已经生成，请查收',
|
|
|
- link: location.href.split('?')[0],
|
|
|
- imgUrl: 'https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg'
|
|
|
- },
|
|
|
+ showAudio: true,
|
|
|
+ showScreen: false,
|
|
|
+ screenUrl: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ var pageInfo = sessionStorage.getItem('yearEndReportResult')
|
|
|
+ if (pageInfo) {
|
|
|
+ this.pageInfo = JSON.parse(pageInfo)
|
|
|
+ this.selectType(this.pageInfo.result)
|
|
|
+ } else {
|
|
|
+ location.href = './yearEndReport'
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
- var pageInfo = sessionStorage.getItem('yearEndPeportResult')
|
|
|
- if (pageInfo) {
|
|
|
- this.pageInfo = JSON.parse(pageInfo)
|
|
|
- this.selectType(this.pageInfo.result)
|
|
|
- } else {
|
|
|
- location.href = './yearEndPeport'
|
|
|
- }
|
|
|
- },
|
|
|
computed: {
|
|
|
isWeiXinBrowser: function () {
|
|
|
return utils.isWeiXinBrowser
|
|
|
@@ -111,7 +80,7 @@ var result = new Vue({
|
|
|
selectType: function (type) {
|
|
|
var list = this.resultList
|
|
|
var _this = this
|
|
|
- list.forEach(function(item){
|
|
|
+ list.forEach(function (item) {
|
|
|
if (item._id == type) {
|
|
|
_this.curRole._id = item._id
|
|
|
_this.curRole.title = item.title
|
|
|
@@ -124,22 +93,22 @@ var result = new Vue({
|
|
|
const loading = this.$toast.loading({
|
|
|
duration: 0,
|
|
|
forbidClick: true,
|
|
|
- message: msg || '图片生成中...',
|
|
|
+ message: msg || '海报生成中...',
|
|
|
})
|
|
|
return loading
|
|
|
},
|
|
|
changeStyle: function () {
|
|
|
- var rWidth = ($('.result').width())*2
|
|
|
- var rHeight = ($('.result').height())*2
|
|
|
- var padLeft = (rWidth - 750 ) / 2
|
|
|
- var padTop = (rHeight - 1448 ) / 2
|
|
|
+ var rWidth = ($('.result').width()) * 2
|
|
|
+ var rHeight = ($('.result').height()) * 2
|
|
|
+ var padLeft = (rWidth - 750) / 2
|
|
|
+ var padTop = (rHeight - 1448) / 2
|
|
|
$('.mask-report').addClass('mask-report-active')
|
|
|
$('.r-content').css({
|
|
|
- "padding": '0 ' + + padLeft/2 + 'px'
|
|
|
+ "padding": '0 ' + + padLeft / 2 + 'px'
|
|
|
})
|
|
|
},
|
|
|
// html2canvas方法
|
|
|
- covertToImage: function(container, options = {}) {
|
|
|
+ covertToImage: function (container, options = {}) {
|
|
|
// 设置放大倍数
|
|
|
var scale = window.devicePixelRatio
|
|
|
// 传入节点原始宽高
|
|
|
@@ -157,25 +126,25 @@ var result = new Vue({
|
|
|
backgroundColor: null, // 避免图片有白色边框
|
|
|
...options
|
|
|
};
|
|
|
- return html2canvas(container, ops).then(function(canvas) {
|
|
|
+ return html2canvas(container, ops).then(function (canvas) {
|
|
|
// 返回图片的二进制数据
|
|
|
var url = canvas.toDataURL("image/png");
|
|
|
return url
|
|
|
})
|
|
|
},
|
|
|
// app端微信、朋友圈分享方法
|
|
|
- selectShare: function(e) {
|
|
|
+ selectShare: function (e) {
|
|
|
var shareTitle = '剑鱼标讯'
|
|
|
var content = '我的剑鱼标讯2021年度报告已经生成，请查收'
|
|
|
var link = window.location.href
|
|
|
if (e.name == '微信') {
|
|
|
try {
|
|
|
- JyObj.share(1,shareTitle,content,link);
|
|
|
- } catch (error) {}
|
|
|
+ JyObj.share(1, shareTitle, content, link);
|
|
|
+ } catch (error) { }
|
|
|
} else if (e.name == '朋友圈') {
|
|
|
try {
|
|
|
- JyObj.share(3,shareTitle,content,link);
|
|
|
- } catch (error) {}
|
|
|
+ JyObj.share(3, shareTitle, content, link);
|
|
|
+ } catch (error) { }
|
|
|
}
|
|
|
},
|
|
|
// 点击去分享
|
|
|
@@ -190,18 +159,25 @@ var result = new Vue({
|
|
|
// 点击生成海报
|
|
|
createImgFn: function () {
|
|
|
var loading = this.showLoading()
|
|
|
- $(".canvas-img").remove()
|
|
|
+ // $(".canvas-img").remove()
|
|
|
+ this.showAudio = false
|
|
|
this.picImgStatus = true
|
|
|
if (this.picImgStatus) {
|
|
|
var _this = this
|
|
|
_this.changeStyle() // 生成图片前 先改变页面样式
|
|
|
- setTimeout(function() {
|
|
|
- var data = _this.covertToImage(_this.$refs.resultRefs)
|
|
|
- data.then(function(url) {
|
|
|
+ setTimeout(function () {
|
|
|
+ var container = document.querySelector('.mask-report-active')
|
|
|
+ var data = _this.covertToImage(container)
|
|
|
+ data.then(function (url) {
|
|
|
+ _this.screenUrl = url
|
|
|
loading.clear()
|
|
|
- $("body").append('<div class="canvas"><img class="canvas-img" src='+ url + '></div>')
|
|
|
+ $('.mask-report').removeClass('mask-report-active')
|
|
|
+ // $("body").append('<div class="canvas"><img class="canvas-img" src=' + url + '></div>')
|
|
|
+ _this.picImgStatus = false
|
|
|
+ _this.showScreen = true
|
|
|
+ _this.showAudio = true
|
|
|
if (utils.isWeiXinBrowser) {
|
|
|
- // $("body").append('<div class="canvas"><img class="canvas-img" src='+ url + '></div>')
|
|
|
+ console.log('wx');
|
|
|
} else {
|
|
|
// 调用客户端保存图片方法
|
|
|
try {
|
|
|
@@ -210,9 +186,9 @@ var result = new Vue({
|
|
|
console.log(err);
|
|
|
}
|
|
|
}
|
|
|
- }).catch(function(err) {
|
|
|
+ }).catch(function (err) {
|
|
|
console.log(err);
|
|
|
- _this.$toast('图片生成失败')
|
|
|
+ _this.$toast('海报生成失败')
|
|
|
})
|
|
|
}, 500)
|
|
|
}
|
