|
|
@@ -109,302 +109,9 @@
|
|
|
<script src="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"></script>
|
|
|
<script src=//res2.wx.qq.com/open/js/jweixin-1.6.0.js></script>
|
|
|
<script src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/common.js"></script>
|
|
|
+ <script src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/share.js"></script>
|
|
|
+ <script src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/result.js"></script>
|
|
|
<!-- 使用html2canvas 生成图片dom层不能使用背景图 否则生成的图片会模糊 且无法修复 -->
|
|
|
- <script>
|
|
|
- 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(){
|
|
|
- if (isAutoPlayMusic) {
|
|
|
- isAutoPlayMusic = false
|
|
|
- bgvid.play()
|
|
|
- b_music.classList.add('run-music')
|
|
|
- }
|
|
|
- }, false);
|
|
|
-
|
|
|
- bgvid.addEventListener("playing", function(){
|
|
|
- b_music.style.display = 'block'
|
|
|
- b_music.classList.add('run-music')
|
|
|
- });
|
|
|
- bgvid.addEventListener("pause", function(){
|
|
|
- b_music.classList.remove('run-music')
|
|
|
- });
|
|
|
- b_music.addEventListener('click', function (e) {
|
|
|
- if (b_music.classList.contains('run-music')) {
|
|
|
- bgvid.pause()
|
|
|
- b_music.classList.remove('run-music')
|
|
|
- } else {
|
|
|
- bgvid.play()
|
|
|
- b_music.classList.add('run-music')
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- var result = new Vue({
|
|
|
- el: '#result',
|
|
|
- delimiters: ['${', '}'],
|
|
|
- data: function() {
|
|
|
- return {
|
|
|
- pageInfo: {},
|
|
|
- resultList: [
|
|
|
- {_id: '1', title: '逢标必中的投标达人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-1.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-1.png'},
|
|
|
- {_id: '2', title: '成功触手可及的追梦人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-2.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-2.png'},
|
|
|
- {_id: '3', title: '怀抱热振元气满满的打工人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-3.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-3.png'},
|
|
|
- {_id: '4', title: '日进斗金的大佬', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-4.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-4.png'},
|
|
|
- {_id: '5', title: '有钱任性的大BOSS', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-5.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-5.png'},
|
|
|
- {_id: '6', title: '开疆拓土的“顶梁柱”', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-6.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-6.png'},
|
|
|
- {_id: '7', title: '炉火纯青的盖章无影手', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-7.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-7.png'},
|
|
|
- {_id: '8', title: '有钱任性的大BOSS', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-8.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-5.png'},
|
|
|
- {_id: '9', title: '有钱任性的大BOSS', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-9.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-5.png'},
|
|
|
- ],
|
|
|
- curRole: {
|
|
|
- _id: '1',
|
|
|
- title: '逢标必中的投标达人',
|
|
|
- label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-1.png',
|
|
|
- bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-1.png'
|
|
|
- },
|
|
|
- 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'
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- initPlayMusic()
|
|
|
- // 微信端注册sdk
|
|
|
- if (utils.isWeiXinBrowser) {
|
|
|
- this.getWxSdkSign()
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- selectType: function (type) {
|
|
|
- var list = this.resultList
|
|
|
- var _this = this
|
|
|
- list.forEach(function(item){
|
|
|
- if (item._id == type) {
|
|
|
- _this.curRole._id = item._id
|
|
|
- _this.curRole.title = item.title
|
|
|
- _this.curRole.label = item.label
|
|
|
- _this.curRole.bg = item.bg
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- showLoading: function (msg) {
|
|
|
- const loading = this.$toast.loading({
|
|
|
- duration: 0,
|
|
|
- forbidClick: true,
|
|
|
- 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
|
|
|
- $('.mask-report').addClass('mask-report-active')
|
|
|
- $('.result').css({
|
|
|
- "padding": '0.64rem 0',
|
|
|
- "background-position": '-40px -40px',
|
|
|
- "background-size": "110% 110%"
|
|
|
-
|
|
|
- })
|
|
|
- $('.r-content').css({
|
|
|
- "padding": '0 ' + + padLeft/2 + 'px'
|
|
|
- })
|
|
|
- $('.role-bg').css({
|
|
|
- "width": "8.48rem",
|
|
|
- "left": "-41px"
|
|
|
- })
|
|
|
- $('.info').css({
|
|
|
- "width": "6.88rem"
|
|
|
- })
|
|
|
- $('.role-main').css({
|
|
|
- "padding": "0.48rem .54rem"
|
|
|
- })
|
|
|
- $(".role-text").css({
|
|
|
- "font-size": '0.36rem'
|
|
|
- })
|
|
|
- $('.r-bottom').css({
|
|
|
- padding: '0 0.3rem'
|
|
|
- })
|
|
|
- },
|
|
|
- // html2canvas方法
|
|
|
- covertToImage: function(container, options = {}) {
|
|
|
- // 设置放大倍数
|
|
|
- var scale = window.devicePixelRatio
|
|
|
- // 传入节点原始宽高
|
|
|
- var _width = container.offsetWidth
|
|
|
- var _height = container.offsetHeight
|
|
|
- let { width, height } = options
|
|
|
- width = width || _width
|
|
|
- height = height || _height
|
|
|
- var ops = {
|
|
|
- dpi: 300,
|
|
|
- scale,
|
|
|
- async: false,
|
|
|
- useCORS: true,
|
|
|
- // scrollX: 20,
|
|
|
- // scrollY: 20,
|
|
|
- allowTaint: false,
|
|
|
- backgroundColor: null, // 避免图片有白色边框
|
|
|
- ...options
|
|
|
- };
|
|
|
- return html2canvas(container, ops).then(function(canvas) {
|
|
|
- // 返回图片的二进制数据
|
|
|
- var url = canvas.toDataURL("image/png");
|
|
|
- return url
|
|
|
- })
|
|
|
- },
|
|
|
- // app端微信、朋友圈分享方法
|
|
|
- selectShare: function(e) {
|
|
|
- var shareTitle = '我的剑鱼标讯2021年度报告已经生成，请查收'
|
|
|
- var content = ''
|
|
|
- var link = window.location.href
|
|
|
- if (e.name == '微信') {
|
|
|
- try {
|
|
|
- JyObj.share(1,shareTitle,content,link);
|
|
|
- } catch (error) {}
|
|
|
- } else if (e.name == '朋友圈') {
|
|
|
- try {
|
|
|
- JyObj.share(3,shareTitle,content,link);
|
|
|
- } catch (error) {}
|
|
|
- }
|
|
|
- },
|
|
|
- // 取用户appid、签名等
|
|
|
- getWxSdkSign: function() {
|
|
|
- var _this = this
|
|
|
- $.ajax({
|
|
|
- url: '/jypay/wx/getwxSdkSign',
|
|
|
- type: 'POST',
|
|
|
- data: {
|
|
|
- url: location.href.split('#')[0]
|
|
|
- },
|
|
|
- success: function (res) {
|
|
|
- if (res && res.wxsdk && $.isArray(res.wxsdk)) {
|
|
|
- _this.wxSDKSign.appId = res.wxsdk[0]
|
|
|
- _this.wxSDKSign.timestamp = res.wxsdk[1]
|
|
|
- _this.wxSDKSign.nonceStr = res.wxsdk[2]
|
|
|
- _this.wxSDKSign.signature = res.wxsdk[3]
|
|
|
- _this.registerWxSDK()
|
|
|
- }
|
|
|
- },
|
|
|
- complete: function () {},
|
|
|
- error: function () {}
|
|
|
- })
|
|
|
- },
|
|
|
- // 注册微信sdk方法
|
|
|
- registerWxSDK: function () {
|
|
|
- var _this = this
|
|
|
- var extInfo = {
|
|
|
- url: 'jianyu360.com'
|
|
|
- }
|
|
|
- // 微信sdk注册
|
|
|
- wx.config(this.wxSDKSign)
|
|
|
- wx.error(function(err){
|
|
|
- console.log(err);
|
|
|
- })
|
|
|
- wx.ready(function (res) {
|
|
|
- // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
|
|
|
- wx.updateAppMessageShareData(_this.shareInfo)
|
|
|
- // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
|
|
|
- wx.updateTimelineShareData(_this.shareInfo)
|
|
|
- // onMenuShareWeibo
|
|
|
- wx.onMenuShareWeibo(_this.shareInfo)
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击去分享
|
|
|
- shareFn: function () {
|
|
|
- if (utils.isWeiXinBrowser) {
|
|
|
- // 微信端使用自带分享
|
|
|
- } else {
|
|
|
- // app 使用客户端方法分享
|
|
|
- this.showAction = true
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击生成海报
|
|
|
- createImgFn: function () {
|
|
|
- var loading = this.showLoading()
|
|
|
- $(".canvas-img").remove()
|
|
|
- this.picImgStatus = true
|
|
|
- if (this.picImgStatus) {
|
|
|
- var _this = this
|
|
|
- _this.changeStyle() // 生成图片前 先改变页面样式
|
|
|
- setTimeout(function() {
|
|
|
- var data = _this.covertToImage(_this.$refs.resultRefs)
|
|
|
- data.then(function(url) {
|
|
|
- loading.clear()
|
|
|
- $("body").append('<div class="canvas"><img class="canvas-img" src='+ url + '></div>')
|
|
|
- if (utils.isWeiXinBrowser) {
|
|
|
- $("body").append('<img class="canvas-img" src='+ url + '>')
|
|
|
- } else {
|
|
|
- // 调用客户端保存图片方法
|
|
|
- try {
|
|
|
- window.JyObj.savePic(url)
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
- }
|
|
|
- }).catch(function(err) {
|
|
|
- console.log(err);
|
|
|
- _this.$toast('图片生成失败')
|
|
|
- })
|
|
|
- }, 500)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- </script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
zhangyuhan