|
|
@@ -0,0 +1,376 @@
|
|
|
+<template>
|
|
|
+ <div class="share">
|
|
|
+ <div class="share-content" ref="shareContent">
|
|
|
+ <div class="header">
|
|
|
+ <div class="left-icon">
|
|
|
+ <img :src="require('@/assets/shareLeft.png')" />
|
|
|
+ </div>
|
|
|
+ <div class="right-icon">
|
|
|
+ <img :src="require('@/assets/shareRight.png')" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="summaryDay">
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="title">
|
|
|
+ <div class="name">{{ reportTarget.nickName }}的日报</div>
|
|
|
+ <div class="date">
|
|
|
+ {{
|
|
|
+ reportTarget.commitTime
|
|
|
+ ? formatChineseDate(reportTarget.commitTime.split(' ')[0])
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template
|
|
|
+ v-for="(item, index) in reportTarget.reportContents"
|
|
|
+ v-if="reportTarget.reportContents && reportTarget.reportContents.length > 0">
|
|
|
+ <div :class="['text', 'text' + index]">{{ filterText(index) }}</div>
|
|
|
+ <div class="content">{{ item.dayContent }}</div>
|
|
|
+ </template>
|
|
|
+ <div class="text">今日拜访照片</div>
|
|
|
+ <div class="content-photos">
|
|
|
+ <!-- <template v-for="item in reportTarget.photos">
|
|
|
+ <template v-for="item1 in item.photos">
|
|
|
+ <img :src="item1.baseUrl" crossorigin="anonymous" referrerpolicy="no-referrer" alt=""
|
|
|
+ style="display: block; width: 188px; height: 188px; object-fit: cover" v-if="item1.baseUrl" />
|
|
|
+ </template>photosData
|
|
|
+ </template> -->
|
|
|
+ <template v-for="item in photosData">
|
|
|
+ <img
|
|
|
+ :src="item"
|
|
|
+ crossorigin="anonymous"
|
|
|
+ referrerpolicy="no-referrer"
|
|
|
+ alt=""
|
|
|
+ style="display: block" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footerShare">
|
|
|
+ <div class="QRcodes" ref="QRcodes">
|
|
|
+ <div class="logo">
|
|
|
+ <img :src="require('@/assets/logo1.png')" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-text">
|
|
|
+ <div>长按识别二维码</div>
|
|
|
+ <div>查看详情&点评</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="html2canvas" ref="html2canvas">
|
|
|
+ <img :src="canvasImageUrl" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+import QRCode from 'qrcodejs2';
|
|
|
+export default {
|
|
|
+ name: 'share',
|
|
|
+ props: {
|
|
|
+ reportTarget: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ reportId: {
|
|
|
+ type: [String, Number],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ canvasImageUrl: '',
|
|
|
+ retryCount: 0,
|
|
|
+ photosData: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ // 二维码
|
|
|
+ this.creatQrCode();
|
|
|
+ this.toastLoading(0, '生成中...', true);
|
|
|
+ // 使用Promise.all确保所有图片加载完成
|
|
|
+ const photos = this.reportTarget.photos;
|
|
|
+ const photoPromises = [];
|
|
|
+
|
|
|
+ // 收集所有图片转换的Promise
|
|
|
+ photos.forEach((item) => {
|
|
|
+ item.photos.forEach((photo) => {
|
|
|
+ photoPromises.push(this.imageUrlToBase64(photo.fileUrl));
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 等待所有图片加载完成
|
|
|
+ Promise.all(photoPromises)
|
|
|
+ .then((photosArr) => {
|
|
|
+ this.photosData = photosArr;
|
|
|
+ this.$nextTick(async () => {
|
|
|
+ await this.htmlToCanvas();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error('图片加载失败:', error);
|
|
|
+ this.$toast('图片加载失败，请检查网络');
|
|
|
+ });
|
|
|
+ console.log(photos);
|
|
|
+
|
|
|
+ // 上拉边界下拉出现白色空白
|
|
|
+ let node = document.getElementsByClassName('share')[0];
|
|
|
+ node.addEventListener(
|
|
|
+ 'touchmove',
|
|
|
+ (e) => {
|
|
|
+ if (e._isScroller) return;
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ {
|
|
|
+ passive: false,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //异步执行
|
|
|
+ imageUrlToBase64(imageUrl) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ //一定要设置为let，不然图片不显示
|
|
|
+ let image = new Image();
|
|
|
+
|
|
|
+ //解决跨域问题
|
|
|
+ image.setAttribute('crossOrigin', 'anonymous');
|
|
|
+
|
|
|
+ image.src = imageUrl;
|
|
|
+
|
|
|
+ //image.onload为异步加载
|
|
|
+ image.onload = () => {
|
|
|
+ var canvas = document.createElement('canvas');
|
|
|
+ canvas.width = image.width;
|
|
|
+ canvas.height = image.height;
|
|
|
+ var context = canvas.getContext('2d');
|
|
|
+ context.drawImage(image, 0, 0, image.width, image.height);
|
|
|
+
|
|
|
+ var quality = 1;
|
|
|
+ //这里的dataurl就是base64类型
|
|
|
+ let dataURL = canvas.toDataURL('image/png', quality); //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
|
|
|
+ resolve(dataURL);
|
|
|
+ };
|
|
|
+
|
|
|
+ image.onerror = () => {
|
|
|
+ reject(new Error('图像加载失败'));
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterText(index) {
|
|
|
+ if (index == 0) {
|
|
|
+ return '明日工作计划';
|
|
|
+ } else {
|
|
|
+ return '今日机会与挑战总结';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ htmlToCanvas() {
|
|
|
+ html2canvas(this.$refs.shareContent, {
|
|
|
+ scale: window.devicePixelRatio || 1,
|
|
|
+ useCORS: true,
|
|
|
+ logging: true,
|
|
|
+ allowTaint: false,
|
|
|
+ backgroundColor: null,
|
|
|
+ imageTimeout: 30000,
|
|
|
+ })
|
|
|
+ .then((canvas) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ let imageUrl = canvas.toDataURL('image/png');
|
|
|
+ this.canvasImageUrl = imageUrl;
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ console.error('html2canvas error:', error);
|
|
|
+ this.$toast('生成分享图失败，请稍后重试');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ creatQrCode() {
|
|
|
+ let devText = 'https://suishenbangtest.nipponpaint.com.cn/homeIndex';
|
|
|
+ let proText = 'https://suishenbang.nipponpaint.com.cn/homeIndex';
|
|
|
+ let text = process.env.NODE_ENV == 'development' ? devText : proText;
|
|
|
+ var qrcode = new QRCode(this.$refs.QRcodes, {
|
|
|
+ text: text + '?reportId=' + this.reportId || '', // 需要转换为二维码的内容
|
|
|
+ colorDark: '#000000',
|
|
|
+ colorLight: '#ffffff',
|
|
|
+ correctLevel: QRCode.CorrectLevel.H,
|
|
|
+ });
|
|
|
+ let logo = '../assets/logo1.png';
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.share {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ // z-index: -1;
|
|
|
+
|
|
|
+ .share-content {
|
|
|
+ background: url('../assets/shareBack.png') no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ background-attachment: local;
|
|
|
+ width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ padding: vw(30);
|
|
|
+ position: absolute;
|
|
|
+ // z-index: -1;
|
|
|
+ padding-bottom: vw(190);
|
|
|
+ top: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left-icon {
|
|
|
+ width: vw(114);
|
|
|
+ height: vw(71);
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-icon {
|
|
|
+ width: vw(230);
|
|
|
+ height: vw(78);
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: -6px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: vw(-169);
|
|
|
+ .title {
|
|
|
+ color: #600d0e;
|
|
|
+ font-size: vw(36);
|
|
|
+ font-weight: bold;
|
|
|
+ // margin-top: vw(81);
|
|
|
+ // width: vw(338);
|
|
|
+ // height: vw(115);
|
|
|
+ text-align: center;
|
|
|
+ background: url('../assets/titleBack.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: vw(20) vw(30);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .summaryDay {
|
|
|
+ background: url('../assets/summaryDay.png') no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ padding: vw(24);
|
|
|
+ position: relative;
|
|
|
+ margin-top: vw(55);
|
|
|
+ border-radius: 0 0 vw(35) vw(35);
|
|
|
+ .text {
|
|
|
+ background: url('../assets/textBack.png') no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: vw(94);
|
|
|
+ background-size: cover;
|
|
|
+ color: #7d0207;
|
|
|
+ font-size: vw(36);
|
|
|
+ text-align: center;
|
|
|
+ line-height: vw(94);
|
|
|
+ // margin-top: vw(152);
|
|
|
+ // margin-bottom: vw(45);
|
|
|
+ margin: vw(35) 0;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .text0 {
|
|
|
+ margin-top: vw(152);
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: vw(28);
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffff;
|
|
|
+ line-height: vw(63);
|
|
|
+ white-space: pre-wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-photos {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // justify-content: space-between;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: vw(188);
|
|
|
+ height: vw(188);
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-right: 15px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerShare {
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: vw(100);
|
|
|
+
|
|
|
+ .right-text {
|
|
|
+ margin-left: vw(12.5);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ div {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: vw(24);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #html2canvas {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.share {
|
|
|
+ .QRcodes {
|
|
|
+ width: vw(87);
|
|
|
+ height: vw(87);
|
|
|
+ margin-right: vw(12.5);
|
|
|
+ position: relative;
|
|
|
+ .logo {
|
|
|
+ position: absolute;
|
|
|
+ top: vw(43);
|
|
|
+ left: vw(43);
|
|
|
+ margin: vw(-15) 0 0 vw(-15);
|
|
|
+ z-index: 3;
|
|
|
+ img {
|
|
|
+ width: vw(30);
|
|
|
+ height: vw(30);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
