renshouH5/library/longPosterService/longPosterService2.vue

<template>
	<view>
		<view class="poster" id="poster">
			<!-- 日报 -->
			<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
			<view style="position: absolute;top: 414rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
				<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;">{{dataForm[0].title?dataForm[0].title:'文本一'}}</view>
				<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">{{dataForm[0].data?dataForm[0].data.value:'300'}}</view>
				
				<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 20rpx;">{{dataForm[1].title?dataForm[1].title:'文本二'}}</view>
				<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">{{dataForm[1].data?dataForm[1].data.value:'文本二内容'}}</view>
				
				<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 20rpx;">{{dataForm[2].title?dataForm[2].title:'文本三'}}</view>
				<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">{{dataForm[2].data?dataForm[2].data.value:'文本三内容'}}</view>
				
				
				<view class="table-th ddflex" v-if="dataForm[3].data.title&&dataForm[3].data.title.length>0">
					<view class="table-th-item fflex" v-for="item,index in dataForm[3].data.title">{{item}}</view>
				</view>
				
				<view v-if="dataForm[3].data.value&&dataForm[3].data.value.length>0">
					<view class="table-td" v-for="item,index in dataForm[3].data.value">
						<view class="ddflex">
							<view class="table-td-item" :class="(item.length<3&&idx==0||item.length>2)?'fflex':''" v-for="it,idx in item">{{it}}</view>
						</view>
						<view v-if="index!=dataForm[3].data.value.length-1" class="table-td-item-border"></view>
					</view>
				</view>
				
				<!-- <view class="ddflex" style="margin-top: 40rpx;">
					<view class="flex">
						<view class="poster-title">杜平 | 18665676418</view>
						<view class="poster-note">扫码即可咨询理赔事宜</view>
					</view>
					<image class="poster-code" src="https://img.zhiqiyun.com/test/2023/08/23/d44ab2b86522a05ee6bd026cf04ec8bd.png"></image>
				</view> -->
			</view>
			
		</view>
		<view class="ddflex" style="margin: 30rpx 0 10rpx;justify-content: space-between;">
			<view class="ddflex">
				<view class="option ddflex" @click="uploadImage">
					<image mode="aspectFit" src="../static/images/opt1.png"></image>
					更换背景
				</view>
				<view class="line"></view>
				<view class="option ddflex" @click="jumpUrl('/library/longPosterContent/longPosterContent2')">
					<image mode="aspectFit" src="../static/images/opt2.png"></image>
					编辑内容
				</view>
			</view>
			<view class="option-btn" @click="toImg">发布</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import html2canvas from '../static/html2canvas.min.js';

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				productLink:'',
				posterBg:'',
				base64:'',
				
				formType:1,//1 年报 2 月报 3日报
				time:'',
				
				dataForm:[{
					chineseName:'文本一',
					title:'',
					code:'',
					data:''
				},{
					chineseName:'文本二',
					title:'',
					code:'',
					data:''
				},{
					chineseName:'文本三',
					title:'',
					code:'',
					data:''
				},{
					chineseName:'文本四',
					title:'',
					code:'',
					data:[]
				}],
				
				codeDetail:''
			}
		},
		onLoad(options) {
			this.posterBg = 'https://img.zhiqiyun.com/test/2023/08/23/d2ae45f898abdb12559da237f3c92188.png'
			this.getCodeDetail('riyuenianbao')
		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getCodeDetail(code){
				req.getRequest('/api/material/longPosterDetail',{code:code},res=>{
					this.codeDetail = res&&res.extForm?JSON.parse(res.extForm):[]
				})
			},
			creatCode(){
				
			},
			toImg() {
				// 使页面滑到顶部，避免顶部出现白边
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				var dom = document.querySelector('#poster'); // 获取dom元素
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					// 将生产的canvas转为base64图片
					this.base64 = canvas.toDataURL('image/png')
					// console.log(this.base64)
					// let path = this.base64ToFile(this.base64,new Date().getTime())
					let path = uni.base64ToArrayBuffer(this.base64);
					console.log(path)
					req.uploadFile('/api/nocheck/upload', path, res => {
						console.log(res)
					});
					// uni.downloadFile({
					// 	url: this.base64, //仅为示例，并非真实的资源
					// 	success: (res) => {
					// 		console.log(res)
					// 		if (res.statusCode === 200) {
					// 			console.log('下载成功');
					// 			var oA = document.createElement("a");
					// 			oA.download = ''; // 设置下载的文件名，默认是'下载'
					// 			oA.href = res.tempFilePath; //临时路径再保存到本地
					// 			document.body.appendChild(oA);
					// 			oA.click();
					// 			oA.remove(); // 下载之后把创建的元素删除
					// 		}
					
					// 	}
					// });
				});
			},
			uploadImage(){
				let that = this;
				let count = 1
				uni.chooseImage({
					count: count,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function({ tempFilePaths }) {
						var promise = Promise.all(
							tempFilePaths.map(tempFilePath => {
								return new Promise(function(resolve, reject) {
									req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
										that.posterBg = res.src
									});
								});
							})
						);
						promise
							.then(function(results) {
								console.log(results);
							})
							.catch(function(err) {
								console.log(err);
							});
					}
				});
			},
		},
		mounted() {
		},
		onPageScroll: function(e) {
		}
	}
</script>
<style>
	@import "./longPosterService.css";
</style>