partnerApp/pages/carInsure1/payCode1.vue

<template>
	<view class="container page" :style="getHeight">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="panel">
			<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">
				<image :src="paycodeimg" mode="widthFix"></image>
			</view>
			<view class="d-flex a-center j-center" style="margin-bottom: 20upx;color: #A0A7AF;">
				<text @tap="savePayCodeImg" v-show="payImg">保存收款码</text>
			</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 class="row d-flex" style="margin-bottom: 20upx;border: none;">
				<view>保费合计</view>
				<view style="font-size: 34upx;color: red;font-weight: bold;">￥{{sumPermium}}</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: "",
				orderno: "",
				companyName: "", //保险公司名称
				sumPermium: "", //保费合计
				licenseNo: "", //车牌号
				applyName: "", //车主名字
				mobile: "",
			}
		},
		computed: {
			...mapState(['userInfo', 'token']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `height: ${height}px;`;
			}
		},
		async onLoad(params) {
			if (!!params.orderno) {
				this.orderno = params.orderno;
				let res = await this.$http.get('/insOrder/queryOrder?orderno=' + params.orderno);
				if ((res.code == 200) && (res.data.orderstatus === '5')) {
					//获取前一个页面传过来的信息（车辆信息，人员信息，险种信息）
					var submitTime = new Date(res.data.submittime);
					this.endDateTime = submitTime.getFullYear() + "/" + (submitTime.getMonth() + 1) + "/" + submitTime
						.getDate() + " 23:00";
					this.companyName = res.data.inscompany;
					this.sumPermium = res.data.sumpremium;
					this.licenseNo = res.data.carinfo.licenseNo;
					this.applyName = res.data.applyinfo.name;
					this.mobile = res.data.applyinfo.mobile;
					//跳转永安支付
					switch (this.companyName) {
						case "永安财险":
							this.paycodeimg = QR.createQrCodeImg(this.$base.h5BaseUrl +
								"/#/pages/carInsure1/yonganCode?orderno=" + this.orderno + '&mobile=' + this
								.mobile, {
									size: parseInt(300) //二维码大小
								})
							break;
						case "中煤财险":
							let result = res.data.paymenttype.replace(/[\r\n]/g, "");
							let imgBase64 = `data:image/png;base64,${result}`;
							base64ToPath(imgBase64)
								.then(path => {
									this.paycodeimg = path;
								})
							break;
						case "人保财险":
							this.paycodeimg = QR.createQrCodeImg(res.data.paymenttype, {
								size: parseInt(300) //二维码大小  
							})
							break;
						case "恒邦财险":
							this.paycodeimg = res.data.paymenttype;
							break;
						case "永诚财险":
							this.paycodeimg = QR.createQrCodeImg(res.data.paymenttype, {
								size: parseInt(300) //二维码大小  
							})
							break;
					}

				} else {
					uni.showModal({
						showCancel: false,
						title: "该订单无效或已支付"
					})
				}
			} 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) //二维码大小  
				})
			},

			// 保存收款码
			savePayCodeImg() {
				var that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.payImg, //    图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
					success: () => {
						uni.showToast({
							title: '保存收款码成功',
							icon: "none",
							duration: 2000
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '保存收款码失败',
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			//发送收款码到微信
			sendPayCode() {
				var that = this;
				this.canvasPayImage();
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: that.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);

				// 失效时间
				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;
						},
						fail: () => {
							uni.showToast({
								title: '生成支付码海报失败',
								duration: 2000
							});
						}
					});
				});
			},
			navOrder() {
				this.setOrderType(0);
				this.setOrderStage(3)
				this.navigate({
					url: "/pages/orders/orders"
				}, "switchTab", true);
			}
		}
	}
</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 {
		padding: 100upx 0;
		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>