renshouH5/library/longPosterService/longPosterService.vue

<template>
	<view>
		<view class="poster" id="poster">
			<!-- 年度理赔账单 -->
			<block v-if="type==1">
				<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
				
				<view style="position: absolute;top: 912rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
					<view style="font-size: 36rpx;font-weight: bold;text-align: center;">合计理赔金额（元）</view>
					<view style="font-size: 90rpx;font-weight: bold;color: #FF5700;margin-top: 5rpx;line-height: 126rpx;text-align: center;">340895.2</view>
					
					<view style="font-size: 33rpx;font-weight: bold;margin-top: 78rpx;text-align: center;">理赔概况</view>
					<view style="width:522rpx;font-size: 26rpx;font-weight: 400;color: #333;line-height: 48rpx;margin: 17rpx auto 0;">
						这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况这里是理赔经过的概况描述文案
					</view>
					
					
					<view class="table-th ddflex">
						<view class="table-th-item fflex">赔付事件</view>
						<view class="table-th-item fflex">赔付金额</view>
					</view>
					
					<view>
						<view class="table-td" v-for="item,index in 10">
							<view class="ddflex">
								<view class="table-td-item fflex">L女士 32岁 福建人 甲状腺癌</view>
								<view class="table-td-item">14826元</view>
							</view>
							<view v-if="index!=10-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>
			</block>
			<!-- 日报 -->
			<block v-if="type==2">
				<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
				<view style="position: absolute;top: 484rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
					<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;">理赔总件数</view>
					<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">489</view>
					
					<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 30rpx;">理赔总金额（元）</view>
					<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">340895.2</view>
					
					<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 30rpx;">最高赔付金额（元）</view>
					<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">40895.2</view>
					
					
					<view class="table-th ddflex">
						<view class="table-th-item fflex">赔付事件</view>
						<view class="table-th-item fflex">理赔件数</view>
						<view class="table-th-item fflex">赔付金额</view>
					</view>
					
					<view>
						<view class="table-td" v-for="item,index in 5">
							<view class="ddflex">
								<view class="table-td-item fflex">疾病医疗</view>
								<view class="table-td-item fflex">35</view>
								<view class="table-td-item fflex">14826元</view>
							</view>
							<view v-if="index!=5-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>
			</block>
			
		</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?type='+type)">
					<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:'',
				type:1,
			}
		},
		onLoad(options) {
			if(options.type) this.type = options.type
			if(this.type == 1){
				this.posterBg = 'https://img.zhiqiyun.com/test/2023/08/23/e5705790f7614ebede4c06073b7abd50.png'
			}else{
				this.posterBg = 'https://img.zhiqiyun.com/test/2023/08/23/d2ae45f898abdb12559da237f3c92188.png'
			}
		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			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)
					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() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>
<style>
	@import "./longPosterService.css";
</style>