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

<template>
	<view class="">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="page" id="panelcanvas">
			<view class="Shadow"></view>
			<view class="content">
				<view class="back">
					<view class="logo dis j-c a-c">
						<image :src="logoimg" mode="" style="width: 20px;height: 20px;">
						</image>
						<text style="font-weight: bold;margin-left: 6px;font-size: 16px;">{{companyName}}</text>
					</view>
					<view class="QR-code dis f-c" style="box-shadow: inset rgb(237 237 237) 0px 2px 1px 0px;">
						<view class="dis a-c j-c " style="padding: 20px 0;">
							<view class="d-flex a-center j-center qrcode" style="position: relative;">
								<image :src="paycodeimg" mode="widthFix"></image>
							</view>
						</view>
						<view style="border-bottom: 1px dashed  #EFEFEF;padding-bottom: 10px;">
							<view style="font-size: 16px;" class="dis j-s a-c ">
								<text style="color: #232832;font-weight: bold;">{{licenseNo}}</text>
								<text style="color: #FF5600;">￥{{sumPermium}}</text>
							</view>
							<text style="color: rgba(51,51,51,0.8);font-size: 14px;">{{applyName}}</text>
						</view>
						<view class="dis f-wrap" style=" padding: 10px 0; border-bottom: 1px dashed #EFEFEF;"
							v-if="jqStartDate">
							<view style="width: 50%;border-right: 1px dashed #EFEFEF;" class="dis f-c a-start ">
								<text style="font-size: 14px;color: rgba(51,51,51,0.8);">交强险起保日期</text>
								<text
									style="font-size: 15px;font-weight: bold;letter-spacing:1px;">{{ jqStartDate }}</text>
							</view>
							<view style="width: 50%;" class="dis f-c a-end">
								<text style="font-size: 14px;color: rgba(51,51,51,0.8);">交强险终保日期</text>
								<text
									style="font-size: 15px;font-weight: bold;letter-spacing:1px;">{{ jqEndDate }}</text>
							</view>

						</view>
						<view class="dis f-wrap" style=" padding: 10px 0; border-bottom: 1px dashed #EFEFEF;"
							v-if="syStartDate">
							<view style="width: 50%;border-right: 1px dashed #EFEFEF;" class="dis f-c a-start ">
								<text style="font-size: 14px;color: rgba(51,51,51,0.8);">商业险起保日期</text>
								<text
									style="font-size: 15px;font-weight: bold;letter-spacing:1px;">{{ syStartDate }}</text>
							</view>
							<view style="width: 50%;" class="dis f-c a-end">
								<text style="font-size: 14px;color: rgba(51,51,51,0.8);">商业险终保日期</text>
								<text
									style="font-size: 15px;font-weight: bold;letter-spacing:1px;">{{ sysEndDate }}</text>
							</view>
						</view>
						<view class="information">
							<view class="dis j-s a-c">
								<text>投保人：</text>
								<text>{{applyName}}</text>
							</view>
							<view v-if="jqpremium" class="dis j-s a-c">
								<text>交强险：</text>
								<text>￥{{jqpremium}}</text>
							</view>
							<view v-if="taxamount" class="dis j-s a-c">
								<text>车船税：</text>
								<text>￥{{taxamount}}</text>
							</view>
							<view v-if="sypremium" class="dis j-s a-c">
								<text>商业险：</text>
								<text>￥{{sypremium}}</text>
							</view>
							<view v-if="jypremium" class="dis j-s a-c">
								<text>驾意险：</text>
								<text>￥{{jypremium}}</text>
							</view>

							<view v-if="sumPermium" class="dis j-s a-c">
								<text>保费合计：</text>
								<text>￥{{sumPermium}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<kxj-watermark type="follow" color="#333" :texts="texts" :count="20"></kxj-watermark>
		</view>
		<view class="dis fixed-bottom f-c" style="margin-top: 20px;">
			<!-- #ifdef APP-PLUS -->
			<u-button type="primary" style="background-color:#0052FF;margin-bottom: 10px;"
				@click="sendPayCode">发送微信</u-button>
			<!-- #endif -->
			<u-button type="primary" :loading="loading" style="background-color:#EAEAEA ;color: #0052FF;"
				@click="navOrder">返回订单</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import kxjWatermark from '@/components/common/kxj-watermark/kxj-watermark.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import QR from "@/common/wxqrcode.js"
	export default {
		components: {
			kxjWatermark
		},
		data() {
			return {
				loading: true,
				texts: [],
				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', 'userLoginId']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `height: ${height}px;`;
			}
		},
		async onLoad(data) {
			this.texts = [this.userLoginId]
			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 => {
					console.log(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>
	.page {
		height: 100vh;
		background: #F8FAFE;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		padding: 16px;
		z-index: 999;
	}

	.information {
		width: 100%;
		height: auto;

		>view {
			padding: 10px 0;
			border-bottom: 1px solid #f2f2f2;

			text {
				font-size: 14px;
				color: #232832;
			}

			view:last-child {
				border: none;
			}
		}
	}

	.Shadow {
		width: 100%;
		height: 214px;
		background: linear-gradient(180deg, #0052FF 0%, #F8FAFE 100%);
	}

	.content {
		padding: 16px;
		margin-top: -190px;

		.back {
			background-color: white;
			border-radius: 6px;
			box-shadow: 0px 4px 10px 0px #DAE3F4;

			.logo {
				width: 100%;
				height: 38px;
			}
		}

	}

	.info {
		padding: 0 16px;
		background-color: #FFFFFF;
	}

	.QR-code {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		padding: 0 10px;
		border-radius: 0 0 6px 6px;
	}

	.qrcode {
		width: 120px;
		height: 120px;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #2D4D89;
	}

	.qrcode image {
		width: 105px;
		height: 105px;
	}
</style>