vue-insagent-app/pages/orders/paymentCode1.vue

<template>
	<view class=" page" :style="getHeight">
		<!-- 公共组件-每个页面必须引入 -->
		<service-widget @btnClick="btn_click"></service-widget>
		<public-module></public-module>
		<view class="panel dis f-c j-c a-c" id="panelcanvas">
			<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="quotation-data">
				<view class="circulate-impany dis a-c">
					<view>保险公司:</view>
					<view>{{companyName}}</view>
				</view>
				<view class="circulate-data dis a-c">
					<view>投保人:</view>
					<view>{{applyName}}</view>
				</view>
				<view class="circulate-data dis a-c">
					<view>车牌号:</view>
					<view>{{licenseNo}}</view>
				</view>
				<view v-if="jqpremium" class="circulate-data dis a-c">
					<view>交强险:</view>
					<view>￥{{jqpremium}}</view>
				</view>
				<view v-if="sypremium" class="circulate-data dis a-c">
					<view>商业险:</view>
					<view>￥{{sypremium}}</view>
				</view>
				<view v-if="taxamount" class="circulate-data dis a-c">
					<view>车船税:</view>
					<view>￥{{taxamount}}</view>
				</view>
				<view v-if="jypremium" class="circulate-data dis a-c">
					<view>驾意险:</view>
					<view>￥{{jypremium}}</view>
				</view>
				<view class="circulate-data dis a-c">
					<view>保费合计:</view>
					<view style="font-size: 34upx;color: #2D4D89;font-weight: bold;">￥{{sumPermium}}</view>
				</view>
				<view class="circulate-data dis a-c " v-if="jqStartDate">
					<view>交强起保日期:</view>
					<view>{{jqStartDate}}</view>
				</view>
				<view class="circulate-data dis a-c " v-if="jqEndDate">
					<view>交强终保日期:</view>
					<view>{{jqEndDate}}</view>
				</view>
				<view class="circulate-data dis a-c " v-if="syStartDate">
					<view>商业起保日期</view>
					<view>{{syStartDate}}</view>
				</view>
				<view class="circulate-data dis a-c " v-if="sysEndDate">
					<view>商业终保日期</view>
					<view>{{sysEndDate}}</view>
				</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<u-button type="primary" :loading="loading" style="width: 100%;background: #2D4D89;"
			@click="sendPayCode">发送到微信</u-button>
		<!-- #endif -->
		<u-button class="tip" type="default" :hair-line="false"
			style="color: #2D4D89;background: #EAEDF1;font-weight: bold;border: none;" @click="navOrder">返回订单</u-button>
		<!-- <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 {
				loading: true,
				paycodeimg: "",
				payImg: "",
				endDateTime: "",
				companyId: "",
				companyName: "", //保险公司名称
				sumPermium: "", //保费合计
				licenseNo: "", //车牌号
				applyName: "", //车主名字
				mobile: "", //车主手机号
				jqpremium: "",
				sypremium: "",
				taxamount: "",
				jypremium: "",
				jqStartDate: "",
				jqEndDate: "",
				syStartDate: "",
				sysEndDate: "",
				arr: false,
				posterUrl: "",
				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; // 商业起保日期
					this.paycodeimg = QR.createQrCodeImg(res.data.qrCodeUrl, {
						size: parseInt(300) //二维码大小  
					})
					this.$base.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) //二维码大小  
				})
			},
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			//发送收款码到微信
			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();
				this.loading = false;
			},

		}
	}
</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 {

		padding: 10px 16px;
	}

	.panel {
		width: 100%;
		margin-bottom: 20px;
	}

	.qrcode {
		width: 174px;
		height: 174px;
		padding: 10px;
		margin-top: 16px;
		border-radius: 4px;
		border: 1px solid #2D4D89;
	}

	.qrcode image {
		width: 174px;
		height: 174px;
	}

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

	.quotation-data {
		width: 100%;
		margin-top: 16px;
		border: 1px solid #2D4D89;

		.circulate-impany {
			height: 37px;
			padding: 8px 6px;
			background: rgba(45, 77, 137, 0.1);
			border-bottom: 1px solid #000000;
			font-weight: 700;

			view:first-child {
				margin-right: 10px;
			}
		}

		.circulate-data {
			height: 37px;
			color: #232832;
			padding: 8px 6px;
			border-bottom: 1px solid #000000;

			view:first-child {
				color: #232832;
				font-weight: 400;
				font-size: 14px;
				margin-right: 5px;
			}

			view:last-child {
				font-weight: 400;
				color: #232832;
				font-size: 14px;
			}
		}

		.circulate-data:last-child {
			border: none;
		}
	}

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