样式调整 背景图片更换

src/_shanghu_detail.css

@@ -24,8 +24,10 @@
 
 	.container {
 		text-align: center;
+		margin-top: .3rem;
 	}
 
+
 	.qr-card {
 		margin-bottom: 10px;
 	}

src/_shanghu_detail.js

-// 在原有Vue实例中添加
-new Vue({
+var VUE = null
+window.addEventListener("load", function() {
+	const canvas = document.getElementById('mainCanvas');
+	const ctx = canvas.getContext('2d');
+	// 在原有Vue实例中添加
+	VUE = new Vue({
 		el: '#app',
 		data() {
 			return {
 				flag: 'XQ',
+				canvasReady: false,
+				loadedImages: 0,// 记录已加载的图片数量
 				formData: {
 					"id": 1,
 					"unitName": "威海火炬高技术产业开发区沸腾小火锅店",
@@ -45,50 +51,64 @@ new Vue({
 			}
 		},
 		computed: {},
+		mounted() {
+			this.detail()
+		},
 		methods: {
+			detail(id) {
+				console.log('查看详情:', id);
+				// this.formData = {}  // 表单赋值
+				// 这里添加跳转逻辑
+				const QR_IMAGE_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAAD70lEQVR42u2az0sUYRjHn8na6SCtVFRSOIqGHQILoRQ3f3TqYNgf0EHo4NVuLsi8YynWJbYWlgKbOQR16xJ0sjSEfsDmBEUkBI4o7lFlg9ZY5ul9n/edSc2gS9C+7DAsw8xnZ+F5n+f7/HgX8G+OdahiVayKVbEqpgMWgjhYyaJ7ASsBw8DAQNw19cLEdWCD5RA8xgEzsM2AqUc6YeI+t4NRsugax0rAMRv4p4YYNwh/SryFZBZdMe7Y3AgGcmtYkTPoh9FNUwYyjiE69K3dY6GiMRIum0J467mrvlU0Fh8h3eefTGjXH3NW5WL0NCCboANWKE5+8OjmQa0XJhZaRHFkFqFaBlfs35JRpWNSkBlVFBTOSsQo+WqGgaguTCFZIa2+E5lo69JrgEXCJeoKvuJCqEu8rOKeEOymbxWMIRVRSNnWoUqDLuL8qxGGUpZVF8Btwg+D6kbQCwtFAiJlJt+O6g3yBNQKQ3JsCcilR6qmhGVMvTAqFEmjZL8jREzlX72wkBpYamMt6fB2dIJ2mMg7FMg2kIgpKwXbYqHyMSHRVFQYUfYhE8kZhVYYVYmqejTkNEbEskpPOmFqEGGKC3FSqy7dgKFemCRLstMR7Q/NnWSdrBUWgqwV1VRNpt14yKYbhijrYabGTXH7oxdGq2zIbGvKb/2aDGuGidqJzCKNQ5NSiyZsumEO+XnsAHYU16AXFs9e5PjFBjV+CU0M9cJUww6qVZctnnRy0AwjTWaygqKIRgrt0Nw+LNUBk9s31KEDVVDUGsBO4dIGU9usEOUmOYrRECOXlk9D2m91tg9LtcDUBpzMtnLFaad1Z4FR8Vi0UUU7j6p6ZNGkQies+heXKlbF/gX2tIh+0ShjCt9hT7Eb6h8GxrR72POx56u5EWOPBy1/iUFNCt9KbCownESdwCYKmxHm1LRtzs8yPw/J9wEUz7sjcBLLuSuWX+h6sQrJCNvTe2y+j83Wwn4YhGfNHGscms5dLeeXOy9swZ7vm+pf4sKQKkG6kG11Wc+qeSIHtfmN9r0JFv2o9+SUe2sp7ZiN1mT5TbYFDkAh6STqO/I/mhdfjljR20xITiynvQJYNevGXC1hn9ze+nn76JdEjN27c9mbLKYzLYfcPo4l3dH7q+Y3d4BjlnGuN35brt9rLxrZlrOpSwX82Oamx1auZRJ1x+dT/sKRGMsc7K09s8QyrR3D+VYs9jRcv7nyfSpnLfrDcx8SA57CblxkmZEmli10dPlDWOzuHoUmfJCbtfxXwezn+G2nV8udYT/LjhtJ30fYY9v2INwdb2hIFjZvr8TYjFiwNfDcIQ/XEGpITB+5M8gNu/Da9/5zt/wJ5zVLxjs6WyMAAAAASUVORK5CYII=";
+				this.generateQRCode(QR_IMAGE_URL)
+				
+			},
 			// 新增选择确认方法
 			onConfirmType(value) {
 				this.formData.type = value;
 				this.showTypePicker = false;
 			},
-		viewDetail(id) {
-			console.log('查看详情:', id);
-			// 这里添加跳转逻辑
-		}
+			saveCanvas() {
+				if (!this.canvasReady) return;
+			
+				const canvas = document.getElementById('mainCanvas');
+				const dataURL = canvas.toDataURL('image/png');
+				console.log(dataURL, '图片下载')
+			
+				lightAppJssdk.media.savePhoto({
+					arg: dataURL,
+					success: function(data) {
+						alert(JSON.stringify(data));
+					},
+					fail: function(data) {
+						alert(data);
 					}
-}); <
-/script> <
-script >
-	const QR_IMAGE_URL = 'http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg';
-let canvasReady = false;
-// 记录已加载的图片数量
-let loadedImages = 0;
-
-const canvas = document.getElementById('mainCanvas');
-const ctx = canvas.getContext('2d');
-// 加载二维码图片
-const img = new Image();
-img.crossOrigin = "Anonymous"; // 处理跨域问题
-img.src = '../image/code/erweima.png'; // QR_IMAGE_URL;
-
-
-const img4erweima = new Image();
-img4erweima.crossOrigin = "Anonymous"; // 处理跨域问题
-img4erweima.src = QR_IMAGE_URL; // QR_IMAGE_URL;
-
-img.onload = function() {
-	loadedImages++;
-	drawImages();
-};
-
-img4erweima.onload = function() {
-	loadedImages++;
-	drawImages();
-};
-
-
-function drawImages() {
-	if (loadedImages === 2) {
+				});
+			},
+			generateQRCode(QR_IMAGE_URL) {
+				this.canvasReady = false;
+				// 加载二维码图片
+				const img = new Image();
+				img.crossOrigin = "Anonymous"; // 处理跨域问题
+				img.src = '../image/code/erweimabg.png'; // QR_IMAGE_URL;
+				
+				
+				const img4erweima = new Image();
+				img4erweima.crossOrigin = "Anonymous"; // 处理跨域问题
+				img4erweima.src = QR_IMAGE_URL; // QR_IMAGE_URL;
+				
+				img.onload = () => {
+					this.loadedImages++;
+					this.drawImages(img, img4erweima);
+				};
+				
+				img4erweima.onload = () => {
+					this.loadedImages++;
+					this.drawImages(img, img4erweima);
+				};
+			},
+			drawImages(img, img4erweima) {
+				if (this.loadedImages === 2) {
 					// 画布的宽度和高度
 					const canvasWidth = canvas.width;
 					const canvasHeight = canvas.height;
@@ -116,31 +136,19 @@ function drawImages() {
 					ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
 			
 					// 绘制前景图标
-		const fgIconSize = 150; // 假设前景图标显示的尺寸
+					const fgIconSize = 180; // 假设前景图标显示的尺寸
 					const fgX = (canvasWidth - fgIconSize) / 2;
 					const fgY = (canvasHeight - fgIconSize) / 2;
 			
 					// 绘制二维码
 					ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize);
 			
-		canvasReady = true;
+					this.canvasReady = true;
+				}
 			}
-}
+		}
+	});
 
-function saveCanvas() {
-	if (!canvasReady) return;
 
-	const canvas = document.getElementById('mainCanvas');
-	const dataURL = canvas.toDataURL('image/png');
-	console.log(dataURL, '图片下载')
 	
-	lightAppJssdk.media.savePhoto({
-		arg: dataURL,
+})
\ No newline at end of file
-		success: function(data) {
-			alert(JSON.stringify(data));
-		},
-		fail: function(data) {
-			alert(data);
-		}
-	});
-}
\ No newline at end of file