partnerApp/pages/carInsure1/payCode1.vue

<template>
	<view class="container page" :style="getHeight">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="panel" id="panelcanvas">
			<view class="header">请扫描下方二维码进行付款</view>
			<!-- <view class="d-flex a-center j-center" style="margin-bottom: 20upx;color: #f00;" v-show="paycodeimg">
				<text>该二维码将于 {{endDateTime}} 失效</text>
			</view> -->
			<view class="d-flex a-center j-center qrcode" style="position: relative;">
				<image :src="paycodeimg" mode="widthFix"></image>
				<image :src="logoimg" mode="" style="width: 30px;height: 30px;position: absolute;margin: 0 auto;">
				</image>
			</view>
			<view class="row d-flex">
				<view>投保人</view>
				<view>{{applyName}}</view>
			</view>
			<view class="row d-flex">
				<view>车牌号</view>
				<view>{{licenseNo}}</view>
			</view>
			<view class="row d-flex">
				<view>保险公司</view>
				<view>{{companyName}}</view>
			</view>

			<view v-if="jqpremium" class="row d-flex">
				<view>交强</view>
				<view>{{jqpremium}}</view>
			</view>
			<view class="row d-flex">
				<view>车船税</view>
				<view>{{taxamount}}</view>
			</view>
			<view v-if="jypremium" class="row d-flex">
				<view>驾意险</view>
				<view>{{jypremium}}</view>
			</view>
			<view v-if="sypremium" class="row d-flex">
				<view>商业</view>
				<view>{{sypremium}}</view>
			</view>
			<view class="row d-flex">
				<view>保费合计</view>
				<view style="font-size: 34upx;color: red;font-weight: bold;">￥{{sumPermium}}</view>
			</view>
			<view v-if="jqStartDate" class="row d-flex">
				<view>交强起保日期</view>
				<view>{{jqStartDate}}</view>
			</view>
			<view v-if="jqStartDate" class="row d-flex">
				<view>交强终保日期</view>
				<view>{{jqEndDate}}</view>
			</view>
			<view v-if="syStartDate" class="row d-flex">
				<view>商业起保日期</view>
				<view>{{syStartDate}}</view>
			</view>
			<view v-if="syStartDate" class="row d-flex">
				<view>商业终保日期</view>
				<view>{{sysEndDate}}</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="tip d-flex a-center j-center" @tap="sendPayCode">发送到微信</view>
		<!-- #endif -->
		<view class="tip d-flex a-center j-center" @tap="navOrder">返回订单</view>
		<canvas id="mycanvas" ref="mycanvas" canvas-id="mycanvas" style="width: 1080px;height: 1680px;"></canvas>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				paycodeimg: "",
				payImg: "",
				endDateTime: "",
				companyId: "",
				companyName: "", //保险公司名称
				sumPermium: "", //保费合计
				licenseNo: "", //车牌号
				applyName: "", //车主名字
				mobile: "", //车主手机号
				jqpremium: "",
				sypremium: "",
				taxamount: "",
				jypremium: "",
				jqStartDate: "",
				jqEndDate: "",
				syStartDate: "",
				sysEndDate: "",
				arr: false,
				posterUrl: "",
				insCompanyList: [{
						name: "中煤财险",
						icon: "../../static/insuranceicon/zhongmei.png"
					}, //华农
					{
						name: "恒邦财险",
						icon: "../../static/insuranceicon/hengbang.png"
					},
					{
						name: "安盛天平",
						icon: "../../static/insuranceicon/ansheng.png"
					},
					{
						name: "中国人寿",
						icon: "../../static/insuranceicon/renshou.png"
					},
					{
						name: "众安财险",
						icon: "../../static/insuranceicon/zhongan.png"
					},
					{
						name: "永诚财险",
						icon: "../../static/insuranceicon/yongcheng.png"
					},
					{
						name: "永安财险",
						icon: "../../static/insuranceicon/yongan.png"
					},
					{
						name: "紫金财险",
						icon: "../../static/insuranceicon/zijin.png"
					},
					{
						name: "国任财险",
						icon: "../../static/insuranceicon/guoren.png"
					},
					{
						name: "华泰财险",
						icon: "../../static/insuranceicon/huatai.png"
					},
					{
						name: "大家财险",
						icon: "../../static/insuranceicon/dajia.png"
					},
					{
						name: "太平财险",
						icon: "../../static/insuranceicon/taiping.png"
					},
					{
						name: "华农财险",
						icon: "../../static/insuranceicon/huanong.png"
					},
				],
				logoimg: "",
			}
		},
		computed: {
			...mapState(['userInfo', 'token']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `height: ${height}px;`;
			}
		},
		async onLoad(data) {
			if (!!data.companyId) {
				let params = {
					companyId: data.companyId
				};
				let res = await this.$http.get('/order/qrCode/getQrCode?areaCompanyId=' + data.companyId);
				//获取前一个页面传过来的信息（车辆信息，人员信息，险种信息）
				if (res.code == '200') {
					this.companyName = res.data.inscompany;
					this.sumPermium = res.data.sumpremium;
					this.licenseNo = res.data.cPlateNo;
					this.applyName = res.data.cInsuredNme;
					this.jqpremium = res.data.jqpremium; // 交强
					this.sypremium = res.data.sypremium; // 商业
					this.taxamount = res.data.taxamount; // 车船税
					this.jypremium = res.data.jypremium; // 驾意险
					this.jqStartDate = res.data.jqStartDate; // 交强起保日期
					this.jqEndDate = res.data.jqEndDate; // 交强起保日期
					this.syStartDate = res.data.syStartDate; // 商业起保日期
					this.sysEndDate = res.data.sysEndDate; // 商业起保日期
					if (this.companyName == '太平财险') {
						let result = res.data.qrCodeUrl.replace(/[\r\n]/g, "");
						let imgBase64 = `data:image/png;base64,${result}`;
						base64ToPath(imgBase64)
							.then(path => {
								this.paycodeimg = path;
							})
					} else {
						this.paycodeimg = QR.createQrCodeImg(res.data.qrCodeUrl, {
							size: parseInt(300) //二维码大小  
						})
					}
					this.insCompanyList.map(ele => {
						if (ele.name == res.data.inscompany) {
							uni.getImageInfo({
								src: ele.icon,
								success: image => {
									pathToBase64(image.path)
										.then(base64 => {
											this.logoimg = base64;
										})
										.catch(error => {});
								},
								fail: err => {}
							});
						}
						return ele;
					})

				} else {
					uni.showModal({
						showCancel: false,
						title: res.msg
					})
				}
			} else {
				uni.showModal({
					showCancel: false,
					title: "未查询到该订单"
				})
			}
		},
		methods: {
			...mapMutations(['setOrderType', 'setOrderStage']),
			async tpcodeconfirm() { //输入验证码，获取支付二维码
				let tpcode = {
					issueCode: this.tpcodevalue,
					orderno: this.orderno,
				}
				let tpcoderes = await this.$http.post('/API/insCBIT/taiPingPay', tpcode); //太平
				this.paycodeimg = QR.createQrCodeImg(JSON.parse(tpcoderes.data).payUrl, {
					size: parseInt(300) //二维码大小  
				})
			},

			//发送收款码到微信
			sendPayCode() {
				// var that = this;
				// this.canvasPayImage();
				if (this.payImg) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.payImg
					})
				}
			},
			// canvasPayImage() {
			// 	let myCanvas = uni.createCanvasContext('mycanvas', this);
			// 	var ww = '1080px';
			// 	var hh = '1680px';
			// 	//画布尺寸
			// 	// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
			// 	//背景
			// 	myCanvas.drawImage('/static/image/car-insure/payBg.jpg', 0, 0, ww, hh);
			// 	// 失效时间
			// 	// if (!this.arr) {
			// 	// 	myCanvas.setFillStyle('#f00') //文字样式
			// 	// 	myCanvas.font = `40px Arial,sans-serif`; //绘制文字
			// 	// 	myCanvas.setTextAlign('center') //设置对于坐标点的对齐方式
			// 	// 	myCanvas.fillText('该二维码将于 ' + this.endDateTime + ' 失效', 540, 355);
			// 	// }
			// 	//二维码
			// 	myCanvas.drawImage(this.paycodeimg, 315, 415, 435, 435);
			// 	//个人信息
			// 	myCanvas.setFillStyle('#000') //文字样式
			// 	myCanvas.font = `44px Arial,sans-serif`; //绘制文字
			// 	myCanvas.setTextAlign('left')
			// 	myCanvas.fillText(this.applyName, 535, 965);
			// 	myCanvas.fillText(this.licenseNo, 535, 1085);
			// 	myCanvas.fillText(this.companyName, 535, 1205);
			// 	myCanvas.setFillStyle('#f00') //文字样式
			// 	myCanvas.font = `bold 48px Arial,sans-serif`; //绘制文字
			// 	myCanvas.fillText('￥' + this.sumPermium, 535, 1328);
			// 	//开始绘画，必须调用这一步，才会把之前的一些操作实施
			// 	myCanvas.draw(true, () => {
			// 		uni.hideLoading();
			// 		uni.canvasToTempFilePath({
			// 			canvasId: 'mycanvas',
			// 			success: (res) => {
			// 				// 在H5平台下，tempFilePath 为 base64
			// 				this.payImg = res.tempFilePath;
			// 				console.log(this.payImg)
			// 			},
			// 			fail: () => {
			// 				uni.showToast({
			// 					title: '生成支付码海报失败',
			// 					duration: 2000
			// 				});
			// 			}
			// 		});
			// 	});
			// },
			navOrder() {
				this.navigate({
					url: "/pages/orders/orders"
				}, "switchTab", true);
			},
			//页面截图转路径
			receiveRenderData(val) {
				this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
				const imageStr = this.posterUrl;
				// 将base64转化为临时地址
				base64ToPath(imageStr).then(path => {
					this.payImg = path
				}).catch(error => {});
			},
			showLoading() {
				uni.showLoading({
					title: '正在生成图片'
				});
			},
			hideLoading() {
				uni.hideLoading();
			},

		}
	}
</script>
<script module="canvasImage" lang="renderjs">
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		mounted() {
			setTimeout(() => {
				this.canvasImage.generateImage()
			}, 1000);
		},
		methods: {
			generateImage() {
				setTimeout(() => {
					this.$ownerInstance.callMethod('showLoading')
					const dom = document.getElementById('panelcanvas') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// allowTaint: false,
						scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
		},
	}
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba($themeColor, 0.6);
	}

	.container {
		box-sizing: border-box;
	}

	.panel {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		box-sizing: border-box;
		width: 660upx;
		border-radius: 10upx;
		background-color: #fff;
	}

	.header {
		height: 100upx;
		background-color: #f0f0f0;
		border-radius: 10upx 10upx 0 0;
		text-align: center;
		line-height: 100upx;
		font-weight: bold;
		letter-spacing: 2px;
		margin-bottom: 20upx;
		color: rgba($themeColor, 0.6);
	}

	.row {
		height: 80upx;
		margin: 0upx 30upx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
	}

	.row>view {
		line-height: 80upx;
		font-size: 32upx;
	}


	.qrcode {
		margin: 10upx 0 20upx;
	}

	.qrcode image {
		width: 300upx;
	}

	.tip {
		width: 660upx;
		height: 90upx;
		background-color: #FFFFFF;
		margin-top: 30upx;
		border-radius: 10upx;
		font-size: 32upx;
		font-weight: bold;
	}

	#mycanvas {
		position: absolute;
		top: -10000px;
		left: -10000px;
	}
</style>