|
|
@@ -1,24 +1,59 @@
|
|
|
<template>
|
|
|
<div class="share">
|
|
|
- <div class="header">
|
|
|
- <div class="left-icon">
|
|
|
- <img :src="require('@/assets/shareLeft.png')" />
|
|
|
+ <div class="share-content" ref="shareContent" v-show="false">
|
|
|
+ <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="right-icon">
|
|
|
- <img :src="require('@/assets/shareRight.png')" />
|
|
|
+ <div class="title">
|
|
|
+ <div class="name">{{ reportTarget.nickName }}的日报</div>
|
|
|
+ <div class="date">
|
|
|
+ {{
|
|
|
+ reportTarget.commitTime ? formatChineseDate(reportTarget.commitTime.split(' ')[0]) : ''
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="title">
|
|
|
- <div class="name">{{ reportTarget.nickName }}的日报</div>
|
|
|
- <div class="date">
|
|
|
- {{
|
|
|
- reportTarget.commitTime ? formatChineseDate(reportTarget.commitTime.split(' ')[0]) : ''
|
|
|
- }}
|
|
|
+ <div class="summaryDay">
|
|
|
+ <template v-for="(item, index) in reportTarget.reportContents"
|
|
|
+ v-if="reportTarget.reportContents && reportTarget.reportContents.length > 0">
|
|
|
+ <div class="text">{{ 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.fileUrl" alt="" />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="QRcodes">
|
|
|
+ <template v-if="processFlag == 'development'">
|
|
|
+ <img :src="require('@/assets/testQRcode.png')" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img :src="require('@/assets/QRcode.png')" />
|
|
|
+ </template>
|
|
|
+ </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
|
|
|
export default {
|
|
|
name: 'share',
|
|
|
props: {
|
|
|
@@ -30,44 +65,153 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ processFlag: '',
|
|
|
+ canvasImageUrl: "",
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.processFlag = process.env.NODE_ENV;
|
|
|
console.log(this.reportTarget);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 调用html转化canvas函数
|
|
|
+ this.htmlToCanvas();
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
+ filterText(index) {
|
|
|
+ if (index == 0) {
|
|
|
+ return '明日工作计划';
|
|
|
+ } else {
|
|
|
+ return '今日机会与挑战总结';
|
|
|
+ }
|
|
|
+ },
|
|
|
splitTime(date) {
|
|
|
let time = date.split(' ');
|
|
|
return time[0].replice('-', '/');
|
|
|
},
|
|
|
+ htmlToCanvas() {
|
|
|
+ html2canvas(this.$refs.shareContent, {})
|
|
|
+ .then((canvas) => {
|
|
|
+ let imageUrl = canvas.toDataURL('image/png'); // 将canvas转成base64图片格式
|
|
|
+ this.canvasImageUrl = imageUrl;
|
|
|
+ // this.isDom = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.share {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
- background: url('../assets/shareBack.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
top: 0;
|
|
|
z-index: 9;
|
|
|
- padding: vw(45);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .share-content {
|
|
|
+ background: url(/mobile/static/img/shareBack.07ed8487.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ background-attachment: local;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: vw(45);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
.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 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #ecd98a;
|
|
|
+ font-size: vw(36);
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: vw(81);
|
|
|
+ }
|
|
|
+
|
|
|
+ .summaryDay {
|
|
|
+ .text {
|
|
|
+ background: url('../assets/textBack.png') no-repeat;
|
|
|
+ width: vw(595);
|
|
|
+ height: vw(94);
|
|
|
+ background-size: contain;
|
|
|
+ color: #7d0207;
|
|
|
+ font-size: vw(36);
|
|
|
+ text-align: center;
|
|
|
+ line-height: vw(94);
|
|
|
+ margin: vw(45) 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: vw(28);
|
|
|
+ font-weight: bold;
|
|
|
+ color: #e6cd78;
|
|
|
+ line-height: vw(63);
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-photos {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: vw(188);
|
|
|
+ height: vw(188);
|
|
|
+ margin-bottom: vw(40);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: vw(100);
|
|
|
+ padding-bottom: vw(190);
|
|
|
+
|
|
|
+ .QRcodes {
|
|
|
+ width: vw(87);
|
|
|
+ height: vw(87);
|
|
|
+ margin-right: vw(12.5);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
