2024年3月21日09:58:052

components/viewfinder.vue

 				@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
 				:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }">
 			</image> -->
-			<canvas canvas-id="canvasId" id="canvasId" style="height: 98vh;width: 100vh;" @touchstart="handleTouchStart"
+			<canvas canvas-id="canvasId" id="canvasId" style="height: 100vh;width: 100vh;" @touchstart="handleTouchStart"
 				@touchmove="handleTouchMove" @touchend="handleTouchEnd"
 				:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }"></canvas>
 		</view>
 		query.select('.container').boundingClientRect((rect : any) => {
 			if (rect) {
 
-				// 获取图片信息
-				uni.getImageInfo({
-					src: src,
-					success: (imgS) => {
-						console.log('输出内容', imgS.width, imgS.height)
-						// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
-						context.drawImage(src, rect.left + 30, rect.top + 140, rect.width * 1.8, rect.height * 1.8, rect.left, rect.top, rect.width, rect.height);
-						context.draw(false, () => {
-							uni.canvasToTempFilePath({
-								canvasId: canvasId,
-								x: rect.left,
-								y: rect.top,
-								width: rect.width,
-								height: rect.height,
-								destWidth: rect.width,
-								destHeight: rect.height,
-								success(res : any) {
-									// res.tempFilePath 是转换后的图片路径
-									console.log(res.tempFilePath);
-									res.tempImagePath = res.tempFilePath
-									emit('confirmReturn', res)
-								},
-								fail(err) {
-									console.error('canvasToTempFilePath failed', err);
-								}
-							}, currentInstance.value)
+				uni.getSystemInfo({
+					success: (demos) => {
+						// 获取图片信息
+						uni.getImageInfo({
+							src: src,
+							success: (imgS) => {
+								//rect.top + + 200 demos.windowHeight * 0.7 + + demos.statusBarHeight
+								console.log('输出内容', imgS.width, imgS.height, demos.windowWidth, demos.windowHeight, demos.statusBarHeight) ///180
+								// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
+								context.drawImage(src, rect.left + 30,  imgS.height * 0.21, rect.width * 1.8, rect.height * 1.8, rect.left, rect.top, rect.width, rect.height);
+								context.draw(false, () => {
+									uni.canvasToTempFilePath({
+										canvasId: canvasId,
+										x: rect.left,
+										y: rect.top,
+										width: rect.width,
+										height: rect.height,
+										destWidth: rect.width,
+										destHeight: rect.height,
+										success(res : any) {
+											// res.tempFilePath 是转换后的图片路径
+											console.log(res.tempFilePath);
+											res.tempImagePath = res.tempFilePath
+											emit('confirmReturn', res)
+										},
+										fail(err) {
+											console.error('canvasToTempFilePath failed', err);
+										}
+									}, currentInstance.value)
+								});
+							},
+							fail: (error) => {
+								console.error('获取图片信息失败', error);
+							},
 						});
-					},
-					fail: (error) => {
-						console.error('获取图片信息失败', error);
-					},
-				});
+					}
+				})
+
+
 
 
 				//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
 		top: 180px;
 		left: 40px;
 		width: 80%;
-		height: 400rpx;
+		height: 200px;
 		border: 2px solid #fff;
 		box-sizing: border-box;
 		border-radius: 16rpx;

manifest.json

 	"mp-alipay": {
 		"usingComponents": true,
 		"appid": "2021004103666218",
-		"component2": true
+		"component2": true,
+		"useDynamicPlugins": true,
+		"plugins": {
+			"myPlugin": {
+				"version": "*",
+				"provider": "2021003136659100" //权益插件的appId
+			}
+		}
 	},
 	"mp-baidu": {
 		"usingComponents": true

pages.json

 					"style": {
 						"navigationBarTitleText": "发行数据统计"
 					}
+				},
+				{
+					"path" : "zfbqy/zfbqy",
+					"style" : 
+					{
+						"navigationBarTitleText" : "",
+						"enablePullDownRefresh" : false,
+						"usingComponents": {
+							"home": "plugin://myPlugin/home"
+						}
+					}
 				}
 			]
 		}

pages/index/index.vue

 		duration: 3000,
 		easing: "easeInOutCubic"
 	})
+	console.log('输出内容==============',getItem(StorageKeys.OpenId),'==============')
+	// uni.navigateTo({
+	// 	url: '/subpackage/service/zfbqy/zfbqy'
+	// })
+	
+	// #ifdef MP-ALIPAY
+	my.getAuthCode({
+		scopes: 'auth_base',
+		success: items => {
+			const optionsUser = {
+				type: 2,
+				data: {
+					payConfigId: '6a9a54bc01f644312543761234',
+					code: items.authCode
+				},
+				method: "POST",
+				showLoading: true,
+			};
+			request('58760acb637245729e971597a1fb92c4', optionsUser).then((res) => {
+				const data = stringToJson(res.bizContent);
+				console.log('=====123',data,'======456',items,'========')
+	// 			const optionsali = {
+	// 				type: 2,
+	// 				data: {
+	// 					openId: getItem(StorageKeys.OpenId),
+	// 					wxOpenId: data.openId,
+	// 					cardId: state.cardId,
+	// 					orderNum: state.orderNum,
+	// 					payConfigId: aliPayConfigIdTwo,
+	// 					body: "储值卡充值",
+	// 				},
+	// 				method: "POST",
+	// 				showLoading: true,
+	// 			};
+	// 			request(cardCzPay, optionsali).then((res) => {
+	// 				const data = stringToJson(res.bizContent);
+	// 				my.tradePay({
+	// 					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
+	// 					tradeNO: data.tranPackage,
+	// 					success: res => {
+	// 						console.log("支付成功", res);
+	// 						checkOrder();
+	// 					},
+	// 					fail: res => {
+	// 						confirm(res, () => { }, "支付失败", false);
+	// 					},
+	// 				});
+	
+	// 			});
+			});
+		},
+		fail: err => {
+			console.log('my.getAuthCode 调用失败', err)
+		}
+	});
+	
+	// #endif
+	
+	// my.navigateTo({
+	//   url: 'plugin://lazyPlugin/hello',
+	// });
+	
 	const state = reactive({
 		type: 0, //1客车 2货车
 		userType: 1, //1个人 2单位

subpackage/service/zfbqy/zfbqy.vue

+
+
+<template>
+	<!-- 在需要使用组件的页面或组件的相应位置引入 -->
+	<!-- 在当前页面或组件中引入外部组件 -->
+	<!-- <uni-import name="home" src="plugin://myPlugin/home"></uni-import> -->
+	<div>
+		<home ref="homeRef" :subscribeStatus="subscribeStatus" @onGetAuthCode="getAuthCode" @onSubscribe="subscribe" />
+	</div>
+</template>
+<script setup lang="ts">
+	// // #ifdef MP-ALIPAY
+	// import home from 'plugin://myPlugin/home'
+	// // #endif
+	import { ref } from 'vue';
+	import {
+		onShow
+	} from '@dcloudio/uni-app'
+
+	const subscribeStatus = ref(false); // 订阅状态
+	let homeRef: any = ref(null); // 插件实例
+
+	// 从某个页面返回后 需要刷新插件内部任务列表
+	onShow(() => {
+		console.log(homeRef,homeRef.value,'onRefreshRights刷新了---');
+		homeRef && homeRef.value.onRefreshRights();
+	})
+
+	// 获取车辆信息authCode
+	const getAuthCode = ({ authCode, vid }) => {
+		console.log('我是宿主我收到authCode和vid了---', authCode, vid);
+	};
+
+	// 监听订阅的按钮的点击
+	const subscribe = () => {
+		console.log('我是宿主我监听到订阅按钮点击了---');
+		// 宿主小程序todo:拉取消息订阅，订阅成功后subscribeStatus设置为true
+	};
+
+	// 任务类型为3，为宿主自定义操作，插件给宿主一个task_code
+	const customActions = ({ code }) => {
+		console.log('我是宿主，我收到了插件给我的任务code', code);
+	};
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>