<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="icon" type="image/x-icon" href="./static/favicon.ico">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<style>
.body-container {
background: rgba(0, 35, 116, 1);
}
.flex {
display: flex;
}
.flex-wrap-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 嘉宾信息 */
.guest-info-wrap {
padding: .95rem .4rem 0 .4rem;
padding-bottom: .95rem;
position: relative;
}
.guest-info-wrap .guest-info-box {
background: rgba(13, 44, 131, 0.8);
box-shadow: 0 0 4px 0 rgba(20, 13, 109, 0.5), 0 0 5px 0 rgba(37, 240, 255, 0.32);
border-radius: .12rem;
border: 1px solid #4778FF;
padding: 0 .45rem;
position: relative;
/* padding-top: .87rem; */
/* margin-bottom: .95rem; */
max-height: 14.44rem;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox */
}
.guest-info-wrap .guest-info-box::-webkit-scrollbar {
display: none;
/* Chrome Safari */
}
.guest-info-wrap::before {
content: '';
width: 6.08rem;
height: .63rem;
background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/kabrita/live_pic_word_info.png') center center;
background-size: 100% 100%;
position: absolute;
top: .68rem;
left: 0;
right: 0;
margin: auto;
z-index: 9;
}
.guest-info-wrap .guest-info-box .guest-info-item {
padding-bottom: .4rem;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-title {
font-size: .24rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: .32rem;
padding-bottom: .22rem;
position: relative;
display: inline-block;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont {
background: #1D3DA0;
border-radius: .08rem;
padding: .38rem .32rem .16rem;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont .sub-title {
font-size: .22rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: .32rem;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont .sub-img-box {
width: 100%;
/* height: 2.9rem; */
margin: .12rem auto .16rem;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont .sub-img-box .sub-img {
display: block;
width: 100%;
height: 100%;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont .share-info {
padding: .16rem 0;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont .share-info .date {
font-size: .22rem;
font-family: HelveticaNeue;
color: rgba(255, 255, 255, 0.8);
line-height: .32rem;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont .share-info .share-btn {
font-size: .22rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #47F1FF;
line-height: .32rem;
position: relative;
}
.guest-info-wrap .guest-info-box .guest-info-item .info-item-cont .share-info .share-btn::after {
content: '';
width: .26rem;
height: .26rem;
background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/kabrita/share_icon.png') center center;
background-size: 100% 100%;
display: inline-block;
transform: translateY(2px);
}
.van-overlay {
display: flex;
justify-content: center;
align-items: center;
z-index: 20;
/* overflow-y: scroll;
padding: 1rem 0;
box-sizing: border-box; */
}
.share-pic-word {
width: 100%;
/* height: 100%; */
/* overflow: scroll; */
/* padding: 1rem 0; */
/* box-sizing: border-box; */
}
/* 图文分享弹框 */
.share-pic-word .share-pic-word-cont {
width: 89%;
/* max-height: 8.94rem;
overflow-y: scroll; */
margin: auto;
background: #0B2672;
/* box-shadow: 0px 0px 4px 0px rgba(20, 13, 109, 0.5), 0px 0px 5px 0px rgba(37, 240, 255, 0.32); */
/* border-radius: .12rem; */
/* border: 1px solid #4778FF; */
box-sizing: border-box;
padding: .4rem .45rem .3rem;
}
.share-pic-word .share-pic-word-cont .share-pic-word-title {
font-size: .24rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: .32rem;
}
.share-pic-word .share-pic-word-cont .time-box {
font-size: .24rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: .24rem;
position: relative;
padding: .24rem 0 .14rem;
}
.share-pic-word .share-pic-word-cont .time-box img {
display: block;
width: .24rem;
height: .24rem;
margin-right: .1rem;
}
.share-pic-word .share-pic-word-cont .share-pic-word-sub-title {
font-size: .22rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: .32rem;
padding-bottom: .12rem;
}
.share-pic-word .share-pic-word-cont .sub-img-box {
width: 100%;
/* height: 3.26rem; */
}
.share-pic-word .share-pic-word-cont .sub-img-box .sub-img {
width: 100%;
height: 100%;
display: block;
}
.share-pic-word .share-pic-word-cont .scan-code-box {
padding: .21rem .31rem;
align-items: center;
display: flex;
}
.share-pic-word .share-pic-word-cont .scan-code-box span {
font-size: .34rem;
font-family: Alibaba-PuHuiTi-H, Alibaba-PuHuiTi;
font-weight: normal;
color: #FFFFFF;
line-height: 1;
letter-spacing: 1px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
.share-pic-word .share-pic-word-cont .scan-code-box img {
width: 1.62rem;
height: 1.62rem;
display: block;
border: 5px solid #fff;
box-sizing: border-box;
}
.share-pic-word .save-btn {
font-size: .28rem;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #FFFFFF;
line-height: 1;
letter-spacing: 2px;
margin-top: .32rem;
display: block;
text-align: center;
}
.poster-img {
display: block;
width: 89%;
border-radius: .12rem;
border: 1px solid #4778FF;
margin: auto;
}
.no-before::before {
display: none !important;
}
.body-embed {
padding-bottom: 0 !important;
}
.body-embed::after {
display: none !important;
}
#qrcode {
width: 1.62rem;
height: 1.62rem;
display: block;
border: 5px solid #fff;
box-sizing: border-box;
overflow: hidden;
}
#qrcode img {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.poster-img-box {
overflow: scroll;
}
.share-mask {
display: flex;
justify-content: center;
align-items: center;
z-index: 20;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
}
.lock-body {
overflow: hidden !important;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body class="body-container">
<div id="app" v-cloak>
<div class="guest-info-wrap">
<ul class="guest-info-box">
<li class="guest-info-item" v-for="(item, index) in picWordList" :key="index">
<div class="info-item-title">{{ item.graphicInformationTitle }}</div>
<div class="info-item-cont">
<div class="sub-title">
{{ item.graphicInformationDetailContent }}
</div>
<div class="sub-img-box">
<img :src="item.graphicInformationPicture" v-if="item.graphicInformationPicture" alt="" class="sub-img">
</div>
<div class="share-info flex-wrap-between">
<span class="date">{{ item.createDate }}</span>
<a href="javascript:;" class="share-btn" @click="showShareInfo(index)">
图文分享
</a>
</div>
</div>
</li>
</ul>
</div>
<!-- 图文分享弹框 -->
<div class="share-mask" v-if="shareShow" @click="shareShow = false">
<div class="share-pic-word" @click.stop>
<div class="poster-img-box" v-if="posterImg" :style="{maxHeight: posterBoxMaxH}">
<img :src="posterImg" class="poster-img" alt="">
</div>
<div class="share-pic-word-cont" v-else>
<div class="share-pic-word-title van-multi-ellipsis--l2">
{{ sharePicWord.graphicInformationTitle }}
</div>
<div class="time-box flex">
<img :src="timeIcon" alt="">
{{ sharePicWord.createDate }}
</div>
<div class="share-pic-word-sub-title">
{{ sharePicWord.graphicInformationDetailContent }}
</div>
<div class="sub-img-box">
<img :src="sharePicWord.graphicInformationPicture" v-if="sharePicWord.graphicInformationPicture" class="sub-img"
alt="" @load="afterLoad">
</div>
<div class="scan-code-box flex-wrap-between" v-show="JSON.stringify(sharePicWord) !== '{}'">
<span>更多快讯请扫码查看</span>
<img :src="shareLinkImg" alt="" crossorigin="anonymous" @load="afterLoad">
</div>
</div>
<a href="javascript:;" class="save-btn">长按图片发送给好友</a>
</div>
</div>
</div>
</body>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
<script>
// new VConsole();
(function(w) {
var resizeEvt =
"orientationchange" in window ?
"orientationchange" :
"resize";
var docEl = document.documentElement;
function resizeFn() {
var docW = docEl.clientWidth;
if (docW > w) {
docW = w;
}
docEl.style.fontSize = (docW * 100) / w + "px";
}
resizeFn();
window.addEventListener(resizeEvt, resizeFn);
})(750);
var showLoading = options => {
toastInstance = vant.Toast.loading(options ? options : {
message: '玩命加载中...',
forbidClick: true,
duration: 0, // 持续展示 toast
});
}
// 隐藏loading
var hideLoading = () => {
toastInstance && toastInstance.clear();
}
var axiosGet = (url, params) => {
return new Promise((resolve, reject) => {
axios.get(url, params).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// 使用axios的post方法
var axiosPost = (url, params) => {
return new Promise((resolve, reject) => {
let isUploadFile = url.indexOf('uploadFile') !== -1;
let temp = params;
if (isUploadFile) {
temp = new FormData();
temp.append('file', params.file);
temp.append('name', params.file.name);
temp.append('type', params.type);
}
axios.post(url, temp).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// api地址
const APP_API_HOST = 'https://api-dev.tuoluohuodong.com/api';
// const APP_API_HOST = 'https://api-prod.tuoluohuodong.com/api';
// 分享图文快讯的时间图标
const timeIcon =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADIElEQVRoQ+2ZT4hPURTHP1/yZ8FSyYJQhoVJyYqFP2VhMWQ5hJEs/V0gY/J3wmZYK4xQFuTPUjILVjb+hMzCRLGRUmYhxdXV/dXzvD/3vXffzzzNq1/N9O4793zuufecc88RDX/UcP0ZB2hZ0BizGFgPLAJmRX52yMfI7xVwV9KLENavZAGndA+wAZhbUKER4DZwqQpMKQBjzGzgBLAZmFBQ8fjwn8BV4Iik90VlFQIwxkwGjgN7gClFJ8sZ/w04D/RJ+u4r2xvAGDMDuAWs8BVectwjYKOkTz7fewEYYzrtwQPm+AgNMOYd0CXpeZ6sXACn/GNgWp6wwO9HgeV5EJkAbts8aePKx9fAWmJZ1nZKBXAH9kEb9nye4eyZWJN2sLMATgMH8qS36f0ZSQeT5koEcH5+uKKrvAD0u0kPATsrwFoX25EUJ9IABoEtFSa0nx6TdNT+YYzps/9XlHdF0ta4jL8AXHrwNECEDQ1gI/aSeNqRBDDgIm3FBQtuAavPOUl7o4olAbwtkZglwYa2gJ1jRNK8VAAXtJ5VXXr3fR0AVnRndBv9YQFjTK/LMkMw1AXQK+lUS8E4wDWgO4T2NXihllrXJW1KA3gIrBzjAEOSVqUBvAEWjHGAYUkdaQBfA2addZ2BUUnT/1uAurbQfOAGsDTA9szcQiEP8aCkbS2FjTGTXHK3HyrVozIPcUg3anW/CeyQ9CUCshawyeLMktbIdKOHgZMlBad9Zksl3ZLstfT34256l4F1JebKDGT28h4qlYjq9gOwqXW/JJtVWggbRHcBZwFbrvF90lMJJzhUMpek0JAthkn64OayRbGXwEJP7bOTOSc0VDqdptNnoEfSvRIXnQFJ+6KC67zQ5C3qfWA1MDFvoHvvd6FxVghxpfTUy3uY35XSAdjirQ1qU73F1zuw2KXeQTS3rOIArGtrbmErEnCaWVqMRE0b3JpZ3I1BNLO8HoFoboMjAtFqMe2uwcXW22KKuvnGNvniscrVUbe7/nCZNusd4GLb26xJQddV9bo8Gt2vXaM7t//lE9xze2Q+Qv7lmHGAf7n6du5fIRdXQFEvSnYAAAAASUVORK5CYII='
// 图片链接前缀
const APP_IMG_HOST = 'https://eventimg.oss-cn-shenzhen.aliyuncs.com/kabrita';
var getGraphicList = params => axiosPost(`${APP_API_HOST}/h5/graphic/information/share/list`, params);
var fileToBase64 = params => axiosPost(`${APP_API_HOST}/file/common/file/to/base64`, params);
var getGraphicShare = params => axiosGet(`${APP_API_HOST}/h5/graphic/information/share/${params}`); //微信分享接口
const indexPage = window.location.hre;
const appId = APP_API_HOST.indexOf('prod') !== -1 ? 'wxfb54b0a71143dd15' : 'wxaf0e73a687201e7e';
const wxShare = function(title, desc, link, imgUrl) {
axios({
method: 'post',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
url: APP_API_HOST + '/common/wx/config',
data: JSON.stringify({
'url': encodeURIComponent(link),
appId
})
}).then(res => {
if (res && res.data.code === 0) {
let data = res.data.data;
wx.config({
//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: parseInt(data.timestamp), // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名，见附录1
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function() {
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
},
});
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
}
}).catch((err) => {
console.log(err, 'err');
});
}
new Vue({
el: '#app',
data: {
logo: `${APP_IMG_HOST}/kabrita.png`,
slogan: `${APP_IMG_HOST}/kabrita_slogan.png`,
avatorInfoBg: `${APP_IMG_HOST}/avator_info_bg.png`,
startPosition: 0,
picWordList: [],
shareShow: false,
sharePicWord: {},
page: 1,
pageSize: 10,
totalPage: 1,
shareLinkImg: `${APP_IMG_HOST}/template.png`,
timeIcon,
posterImg: '',
graphicInfoPicture: '',
curIndex: 0, // 当前查看的图文
shareLink: 'https://tuoluohuodong.com/',
shareData: {}, //分享相关数据
graphicInformationId: '', //id
posterBoxMaxH: `${document.body.clientHeight + 520}px`
},
mounted() {
console.log(window.location.href, '路径')
console.log(location.href.split('#')[0]);
this.getGraphicList()
this.$nextTick(() => {
document.body.className = 'body-container body-box';
// 监听滚动事件
let scrollTargetBox = document.querySelector('.guest-info-box');
scrollTargetBox.onscroll = () => {
var scrollHeight = scrollTargetBox.scrollHeight; //251
var scrollTop = scrollTargetBox.scrollTop; //0-18
var clientHeight = scrollTargetBox.clientHeight; //233
if (scrollHeight - clientHeight == scrollTop) {
//滚动条滚到最底部
if (this.page >= this.totalPage) return
this.page++;
this.getGraphicList()
}
}
})
},
watch: {
'shareShow': {
handler(newVal, oldVal) {
if (!newVal) {
this.posterImg = '';
this.sharePicWord = {};
this.shareLinkImg = `${APP_IMG_HOST}/template.png`;
this.$nextTick(() => {
document.body.className = 'body-container body-box';
})
hideLoading();
}
}
}
},
methods: {
showShareInfo(index) {
this.curIndex = index;
this.sharePicWord = JSON.parse(JSON.stringify(this.picWordList[index]));
let image = new Image();
image.src =
`https://api.qrserver.com/v1/create-qr-code?data=${this.sharePicWord.shareLink}&bgcolor=255-255-255&color=000000`;
image.onload = () => {
this.shareLinkImg = image.src;
}
this.generatePoster();
this.$nextTick(() => {
this.shareShow = true;
document.body.className = 'body-container body-box lock-body';
let timer = setTimeout(() => {
clearTimeout(timer)
document.querySelector('.share-pic-word-cont').scrollTop = 0;
}, 0);
})
},
// 生成海报
generatePoster() {
showLoading();
if (this.sharePicWord.graphicInformationPicture && this.sharePicWord.graphicInformationPicture.indexOf('http') !==
-1) {
fileToBase64({
fileUrl: this.sharePicWord.graphicInformationPicture
}).then(res => {
let {
code,
data
} = res;
if (code === 0 && data) {
this.sharePicWord.graphicInformationPicture = `data:image/png;base64,${data}`
this.picWordList[this.curIndex].graphicInformationPicture = `data:image/png;base64,${data}`
}
}).catch(() => {})
}
},
// 图片加载完毕再生成海报
afterLoad() {
// return
// 图片已经转成base64格式
if (this.shareShow && this.sharePicWord.graphicInformationPicture && this.sharePicWord.graphicInformationPicture
.indexOf('http') === -1 && this.shareLinkImg !== `${APP_IMG_HOST}/template.png`) {
let shareContent = document.querySelector('.share-pic-word-cont');
let width = shareContent.offsetWidth // 获取dom 宽度
let height = shareContent.offsetHeight // 获取dom 高度
let canvas = document.createElement('canvas') // 创建一个canvas节点
var scale = 4 // 定义任意放大倍数 支持小数
canvas.width = Math.floor(width * scale) // 定义canvas 宽度 * 缩放
canvas.height = Math.floor(height * scale) // 定义canvas高度 *缩放
var rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 如果页面根元素有滚动的话,否则可以忽略此项
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
// canvas.getContext('2d').translate(-rect.left - options.scrollX, -rect.left - options.scrollY);
canvas.getContext('2d').translate(-rect.left, -rect.top);
html2canvas(document.querySelector('.share-pic-word-cont'), {
logging: false, //日志开关，便于查看html2canvas的内部执行流程
scrollY: 0,
scrollX: 0,
useCORS: true, // 【重要】开启跨域配置
canvas,
background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
}).then(canvas => {
hideLoading();
this.posterImg = canvas.toDataURL("image/png");
})
}
},
//获取链接参数
getRequest() {
var url = window.location.href;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.split("?")[1];
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
},
// 获取图文快讯分页
getGraphicList() {
showLoading();
let {
page,
pageSize
} = this;
getGraphicList({
// graphicInformationId: this.getRequest()['id'],//获取链接里的id
graphicInformationId:"bj00N9qfFwM8WGzxK3FuKAkFvwtDcPnQ",
page,
pageSize
}).then(res => {
hideLoading();
let {
code,
data
} = res;
if (code === 0 && data && data.list && data.list.length) {
this.picWordList = [...this.picWordList, ...data.list];
this.totalPage = data.pagination.totalPage;
this.shareOut();
}
}).catch(() => {})
// },
},
// 获取微信分享
shareOut() {
// let graphicInformationId = this.picWordList[0].graphicInformationId;//获取列表里的id
let graphicInformationId = '2509165008675733504'
getGraphicShare(graphicInformationId).then(res => {
let {
code,
data
} = res;
if (code === 0 && data) {
this.shareData = data;
wxShare(data.shareTitle, data.shareSign, window.location.href, data.sharePic || "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/tuoluoicon.png");
}
}).catch(() => {})
},
}
})
</script>
</html>