renshouH5/library/longPosterService/longPosterService.vue

<template>
	<view>
		<view class="poster" id="poster">
			<!-- 年度理赔账单 -->
			<image class="poster-pic" :src="posterBg?posterBg:'/library/static/images/temp1.png'" mode="widthFix"></image>
			
			<view style="position: absolute;top: 912rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
				<view style="background-color: #fff;padding: 20rpx 0;">
					<view style="font-size: 36rpx;font-weight: bold;text-align: center;">{{dataForm[0].title?dataForm[0].title:'文本一'}}</view>
					<view style="font-size: 90rpx;font-weight: bold;color: #FF5700;margin-top: 5rpx;line-height: 126rpx;text-align: center;">{{dataForm[0].data?dataForm[0].data.value:'300'}}</view>
				</view>
				
				<view style="background-color: #fff;margin-top: 30rpx;padding: 20rpx 0;">
					<view style="font-size: 33rpx;font-weight: bold;text-align: center;">{{dataForm[1].title?dataForm[1].title:'文本二'}}</view>
					<view style="width:522rpx;font-size: 26rpx;font-weight: 400;color: #333;line-height: 48rpx;margin: 17rpx auto 0;">
						{{dataForm[1].data?dataForm[1].data.value:'文本二内容'}}
					</view>
				</view>
				
				
				<view class="table-th ddflex" v-if="dataForm[2].data.title&&dataForm[2].data.title.length>0">
					<view class="table-th-item fflex" v-for="item,index in dataForm[2].data.title">{{item}}</view>
				</view>
				
				<view>
					<view class="table-td" v-for="item,index in dataForm[2].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[2].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/longPosterContent')">
					<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 {
				posterBg:'',
				base64:'',
				title:'',
				time:'',
				dataForm:[{
					chineseName:'文本一',
					title:'',
					code:'',
					data:''
				},{
					chineseName:'文本二',
					title:'',
					code:'',
					data:''
				},{
					chineseName:'文本三',
					title:'',
					code:'',
					data:[]
				}],
				
				codeDetail:'',
				
				id:""
			}
		},
		onLoad(options) {
			this.getCodeDetail('nianduzhangdan')
			if(options.id){
				this.id = options.id
				this.getPosterDetail()
			}
		},
		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):[]
				})
			},
			getPosterDetail(){
				req.getRequest('/api/material/library/detail',{id:this.id},res=>{
					this.title = res&&res.title?res.title:''
					this.time = res&&res.extForm?JSON.parse(res.extForm).time:''
					this.posterBg = res&&res.extForm?JSON.parse(res.extForm).posterBg:''
					this.dataForm = res&&res.extForm?JSON.parse(res.extForm).dataForm:[]
				})
			},
			toImg() {
				if(!this.title) return req.msg('请编辑内容')
				if(!this.time) return req.msg('请编辑内容')
				if(!this.dataForm[0].title) return req.msg('请编辑文本一')
				if(!this.dataForm[1].title) return req.msg('请编辑文本二')
				if(!this.dataForm[2].title) return req.msg('请编辑文本三')
				
				uni.showLoading({
					title:'发布中'
				})
				// 使页面滑到顶部，避免顶部出现白边
				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')
					req.postRequest('/api/nocheck/uploadBase64',{fileString:this.base64.replace('data:image/png;base64,','')},data=>{
						let dataP = {
							title:this.title,
							code:'nianduzhangdan',
							pic:data.src,
							extForm:{
								posterBg:this.posterBg,
								time:this.time,
								dataForm:this.dataForm
							}
						}
						dataP.extForm = JSON.stringify(dataP.extForm)
						let url = '/api/material/saveLongPoster'
						if(this.id) {
							dataP.id = this.id
							url = '/api/material/updateLongPoster'
						}
						// return false
						req.postRequest(url,dataP,res=>{
							uni.hideLoading()
							req.msg('发布成功')
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						})
					})
					
					
					// 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() {
		}
	}
</script>
<style>
	@import "./longPosterService.css";
</style>