// 在原有Vue实例中添加
new Vue({
	el: '#app',
	data() {
		return {
			formData: {
				principal: '',
				phone: '',
				area: '',
				businessHours: '',
				type: '', // 新增类型字段
				sjName1: '威海市宝威酒店有限公司',
				sjName2: 'XXX',
				sjName3: '0631-522221212',
				sjName4: '威海市XXXXXXXXX',
				sjName5: '小餐饮',
			},
			showTypePicker: false,
			typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
		}
	},
	computed: {},
	methods: {
		// 新增选择确认方法
		onConfirmType(value) {
			this.formData.type = value;
			this.showTypePicker = false;
		},
		viewDetail(id) {
			console.log('查看详情:', id);
			// 这里添加跳转逻辑
		}
	}
}); <
/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) {
		// 画布的宽度和高度
		const canvasWidth = canvas.width;
		const canvasHeight = canvas.height;

		// 图片的原始宽度和高度
		const imgWidth = img.width;
		const imgHeight = img.height;

		// 计算宽度和高度的缩放比例
		const scaleX = canvasWidth / imgWidth;
		const scaleY = canvasHeight / imgHeight;

		// 取较小的缩放比例作为最终的缩放比例
		const scale = Math.min(scaleX, scaleY);

		// 计算缩放后的图片宽度和高度
		const scaledWidth = imgWidth * scale;
		const scaledHeight = imgHeight * scale;

		// 计算图片在画布上的绘制位置，使其居中显示
		const x = (canvasWidth - scaledWidth) / 2;
		const y = (canvasHeight - scaledHeight) / 2;

		// 绘制图片到 canvas 上
		ctx.drawImage(img, x, y, scaledWidth, scaledHeight);

		// 绘制前景图标
		const fgIconSize = 150; // 假设前景图标显示的尺寸
		const fgX = (canvasWidth - fgIconSize) / 2;
		const fgY = (canvasHeight - fgIconSize) / 2;

		// 绘制二维码
		ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize);

		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,
		success: function(data) {
			alert(JSON.stringify(data));
		},
		fail: function(data) {
			alert(data);
		}
	});
}