Skip to content

G
GaoQuYingJiH5-ASD
Commit 9ecf8548 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

商户信息详情二维码-无poster

parent 63602ba3
Hide whitespace changes
Inline Side-by-side
Showing with 57 additions and 266 deletions
src/_shanghu_detail.html
View file @ 9ecf8548
......@@ -9,25 +9,25 @@
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<div id="app">
<div class="wrapper" v-cloak>
<!-- 表单内容 -->
<van-cell-group inset>
<van-cell-group>
<van-field label="商家名称" v-model="formData.unitName" :disabled="flag=='XQ'" />
</van-cell-group>
<van-cell-group>
<van-field label="负责人" v-model="formData.owner" type="tel" :disabled="flag=='XQ'"/>
</van-cell-group>
<van-cell-group>
<van-field label="电话" v-model="formData.merchantPhone" type="number" :disabled="flag=='XQ'" />
</van-cell-group>
<van-cell-group>
<van-field label="地址" v-model="formData.businessAddress" :disabled="flag=='XQ'"/>
</van-cell-group>
<van-cell-group>
<van-field label="场所类型" v-model="formData.smallPlaceTypeName" :disabled="flag=='XQ'"/>
</van-cell-group>
<!-- <van-cell-group>
<div class="wrapper" v-cloak>
<!-- 表单内容 -->
<van-cell-group inset>
<van-cell-group>
<van-field label="商家名称" v-model="formData.unitName" :disabled="flag=='XQ'" />
</van-cell-group>
<van-cell-group>
<van-field label="负责人" v-model="formData.owner" type="tel" :disabled="flag=='XQ'" />
</van-cell-group>
<van-cell-group>
<van-field label="电话" v-model="formData.merchantPhone" type="number" :disabled="flag=='XQ'" />
</van-cell-group>
<van-cell-group>
<van-field label="地址" v-model="formData.businessAddress" :disabled="flag=='XQ'" />
</van-cell-group>
<van-cell-group>
<van-field label="场所类型" v-model="formData.smallPlaceTypeName" :disabled="flag=='XQ'" />
</van-cell-group>
<!-- <van-cell-group>
<van-field label="场所类型" v-model="formData.type" placeholder="请选择场所类型" readonly clickable
@click="showTypePicker = true" />
</van-cell-group>
......@@ -37,28 +37,15 @@
@cancel="showTypePicker = false" />
</van-popup>
-->
<van-cell-group>
<van-field label="安全二维码" :disabled="true"/>
</van-cell-group>
<van-cell-group>
<van-field label="安全二维码" :disabled="true" />
</van-cell-group>
</div>
</div>
<div class="container">
<div class="qr-card">
<!-- <canvas id="mainCanvas" width="3000" height="4000"></canvas> -->
<!-- 基础调试确认版 -->
<!-- <canvas id="mainCanvas" width="420" height="594"></canvas> -->
<!-- 不晃动rev -->
<!-- <canvas id="mainCanvas" width="375" height="530"></canvas> -->
<canvas id="displayCanvas"></canvas> <!-- 页面预览用 -->
</div>
<!-- <button class="save-btn" onclick="saveCanvas()" v-if="canvasReady">保存二维码</button> -->
<button class="save-btn" onclick="saveImage()" :class="{'showEle': true}">保存二维码</button>
</div>
</van-cell-group>
<img :src="formData.qrCodeUrl" style="margin-left: 50%; transform: translateX(-50%);"/>
<button class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" onclick="saveCanvas()" v-if="formData.qrCodeUrl">保存二维码</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_shanghu_detail.js
View file @ 9ecf8548
var VUE = null
window.addEventListener('load', function () {
// const canvas = document.getElementById('mainCanvas')
// const ctx = canvas.getContext('2d')
// ctx.imageSmoothingEnabled = true;
// ctx.imageSmoothingQuality = 'high';
// ctx.fillStyle = '#1890ff'; // 或其他所需颜色
// ctx.fillRect(0, 0, canvas.width, canvas.height);
// 配置参数
const CONFIG = {
bgSize: { width: 2480, height: 3502 }, // 背景图原始尺寸
qrSize: 1150, // 二维码尺寸
pageWidth: 375 // 页面显示宽度
};
// 初始化双Canvas
const displayCanvas = document.getElementById('displayCanvas');
const exportCanvas = document.createElement('canvas');
const displayCtx = displayCanvas.getContext('2d');
const exportCtx = exportCanvas.getContext('2d');
// 设置离屏Canvas（固定导出尺寸）
exportCanvas.width = CONFIG.bgSize.width;
exportCanvas.height = CONFIG.bgSize.height;
// 适配显示Canvas
function initDisplayCanvas() {
const dpr = window.devicePixelRatio || 1;
const displayHeight = (CONFIG.pageWidth / CONFIG.bgSize.width) * CONFIG.bgSize.height;
// 设置物理像素
displayCanvas.width = CONFIG.pageWidth * dpr;
displayCanvas.height = displayHeight * dpr;
// 调整CSS显示尺寸
displayCanvas.style.width = `${CONFIG.pageWidth}px`;
displayCanvas.style.height = `${displayHeight}px`;
// 缩放绘图上下文
displayCtx.scale(dpr, dpr);
displayCtx.imageSmoothingEnabled = true; // 抗锯齿
}
// 加载并绘制资源
async function drawPoster(bgUrl, qrUrl) {
const [bgImage, qrImage] = await Promise.all([
loadImage(bgUrl),
loadImage(qrUrl)
]);
if(!bgImage || !qrImage){
console.log('图片加载失败')
return
}
// 计算显示比例
const scale = CONFIG.pageWidth / CONFIG.bgSize.width;
// 绘制显示Canvas（适配页面宽度）
displayCtx.drawImage(bgImage, 0, 0, CONFIG.bgSize.width, CONFIG.bgSize.height,
0, 0, CONFIG.pageWidth, CONFIG.pageWidth * (CONFIG.bgSize.height/CONFIG.bgSize.width));
// 绘制二维码（居中显示）
const qrDisplaySize = CONFIG.qrSize * scale;
const qrX = (CONFIG.pageWidth - qrDisplaySize) / 2;
const qrY = displayCanvas.height/displayCtx.getTransform().a - qrDisplaySize - 50*scale -980*scale;
displayCtx.drawImage(qrImage, qrX, qrY, qrDisplaySize, qrDisplaySize);
// 绘制离屏Canvas（原始尺寸）
exportCtx.drawImage(bgImage, 0, 0);
const qrExportX = (CONFIG.bgSize.width - CONFIG.qrSize) / 2;
const qrExportY = CONFIG.bgSize.height - CONFIG.qrSize - 100 -980;
exportCtx.drawImage(qrImage, qrExportX, qrExportY, CONFIG.qrSize, CONFIG.qrSize);
// VUE.canvasReady = true
document.getElementById('saveBtn').classList.remove('hideEle')
}
// 图片加载器
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
// 导出图片
window.saveImage = function() {
// const link = document.createElement('a');
// link.download = 'poster.jpg';
// link.href = exportCanvas.toDataURL('image/jpeg', 0.9);
// link.click();
// const canvas = document.getElementById('mainCanvas')
const dataURL = exportCanvas.toDataURL('image/png', 0.9)
console.log(dataURL, '图片下载')
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function (data) {
// vant.Toast.clear()
// alert(JSON.stringify(data))
vant.Dialog.alert({
message: '保存成功',
})
},
fail: function (data) {
// vant.Toast.clear()
// alert('保存失败')
vant.Dialog.alert({
message: '保存失败',
})
},
})
}
// 初始化执行
initDisplayCanvas();
// const qrcodeUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAADw0lEQVR42u2av2/TUBDHzxjViA6uOhUhESSQWLsioecMLGwI/oEiVQKJia2VAm6VoWtFF6Qi9V9JJrrlX/BQiYUh4ysNOe575xTFRIaN95A9OPbLx4ou73587xLivzmm1GEd1mEd1mH/BvMkh7we9DLmIWcjufUFDyt5TSPBCubKF9OSeZ7PyFM+kwemZcV4Kg7MUVrxiAbEY3kzw4kSOckDMWE+kc0SS5nJYYvG0zQ2jOdUmqvh6IkPRoWpv8E+XTd/G8vaKrcMFINt3uXDqnFakRwCxewY8wGJfWJpYkkgXZmiw8TUtyTMByTRgkN2DFc9xH8kGFyNCo16GiDtSsggCZDLOQ5M9mlGGvVi34AyLMm2zXq8ZGnImES9ljyp5OJvUj7E89Tf9CuIAhMjCa6GZIuTyw/EcIl6AcpIMBwLf5MdQ+6lQiJIsjDHgeEORbzOwpSwlo8ZNZNDuJioKKnfjPWRSRBhC4T+UhEPGmORTdDkqsRNShEqoO5dFJhHqdCT5iyfiKVyQtQ3UnS4GKSUepn4GzQ5L6TU+DfFFSyGyNCOQjMVokX9LRvlsWBSsG1dMq5cOUlclo+TpeQQMMamAaeDHoIHT9VathH1QWNo5IqFLvSWe7HWsDRcTNOVhnk2z4e2d2a9azR3wWI8sro35IW/YWCjV1TGgSHZIveKBEEltxZbbjH8SOPAMN6ovUw3y6G3GEnoqw/GgY1rIVhp8EgCHmgegywpI8Hm1pUy9JQ+kLLeNkImaAw9NZyONVAs7RI0+bKl4WKLiZmuqxCsJ02NQhkyVmg7jdYUbAZN7lWHzBspOljMogVOhxl+pRGks5rGMCFgzAbHqvwkXdnsFbJEon5JkweMwbcqM61usRnlHG13Y0oQLoZCV+8TQt9mNdfWx4BhtFRpXydGqg6xSm4TzCgwrp0OUW9FXPXtsNGfhozZDJ90bonxfYGRB6sm51gwtNjQsshUdWeUaY9UD/IjwNz1b1e/lLheLanB8DH0p4h10tD3tRgpY8JglSpYjXqd1fgVlgaK1b+wD0gFlE3MCvttKI0EI/tjw0znS5VmXAxh6+lTDFj3v5oOu/pUFhO3cWefe22YX1dsq1+ctX7o6Q5l7uXn/n1qw76v79DNtc2t/k4r5t98eHyxtrndf91qwnz9/cnEPb87+XrYir3dPzpyzzfo0WH7h76apG7jmB4m7V/Isy+527y3u9uKXZ7uP5i4F9vvLi7bv5C97cmT49u32j/06mTvx/mNj2fuafKHPeVzpKpvl52T/+/YTw8nrIRgQMwOAAAAAElFTkSuQmCC'
// drawPoster('../image/code/erweimabg.png', qrcodeUrl);
// 在原有Vue实例中添加
VUE = new Vue({
......@@ -206,119 +81,48 @@ window.addEventListener('load', function () {
var result = JSON.parse(res)
this.formData = result.data
console.log('查看详情:', id)
// this.formData = {} // 表单赋值
// 这里添加跳转逻辑
const QR_IMAGE_URL = result.data.qrCodeUrl
// '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)
// const qrcodeUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAADw0lEQVR42u2av2/TUBDHzxjViA6uOhUhESSQWLsioecMLGwI/oEiVQKJia2VAm6VoWtFF6Qi9V9JJrrlX/BQiYUh4ysNOe575xTFRIaN95A9OPbLx4ou73587xLivzmm1GEd1mEd1mH/BvMkh7we9DLmIWcjufUFDyt5TSPBCubKF9OSeZ7PyFM+kwemZcV4Kg7MUVrxiAbEY3kzw4kSOckDMWE+kc0SS5nJYYvG0zQ2jOdUmqvh6IkPRoWpv8E+XTd/G8vaKrcMFINt3uXDqnFakRwCxewY8wGJfWJpYkkgXZmiw8TUtyTMByTRgkN2DFc9xH8kGFyNCo16GiDtSsggCZDLOQ5M9mlGGvVi34AyLMm2zXq8ZGnImES9ljyp5OJvUj7E89Tf9CuIAhMjCa6GZIuTyw/EcIl6AcpIMBwLf5MdQ+6lQiJIsjDHgeEORbzOwpSwlo8ZNZNDuJioKKnfjPWRSRBhC4T+UhEPGmORTdDkqsRNShEqoO5dFJhHqdCT5iyfiKVyQtQ3UnS4GKSUepn4GzQ5L6TU+DfFFSyGyNCOQjMVokX9LRvlsWBSsG1dMq5cOUlclo+TpeQQMMamAaeDHoIHT9VathH1QWNo5IqFLvSWe7HWsDRcTNOVhnk2z4e2d2a9azR3wWI8sro35IW/YWCjV1TGgSHZIveKBEEltxZbbjH8SOPAMN6ovUw3y6G3GEnoqw/GgY1rIVhp8EgCHmgegywpI8Hm1pUy9JQ+kLLeNkImaAw9NZyONVAs7RI0+bKl4WKLiZmuqxCsJ02NQhkyVmg7jdYUbAZN7lWHzBspOljMogVOhxl+pRGks5rGMCFgzAbHqvwkXdnsFbJEon5JkweMwbcqM61usRnlHG13Y0oQLoZCV+8TQt9mNdfWx4BhtFRpXydGqg6xSm4TzCgwrp0OUW9FXPXtsNGfhozZDJ90bonxfYGRB6sm51gwtNjQsshUdWeUaY9UD/IjwNz1b1e/lLheLanB8DH0p4h10tD3tRgpY8JglSpYjXqd1fgVlgaK1b+wD0gFlE3MCvttKI0EI/tjw0znS5VmXAxh6+lTDFj3v5oOu/pUFhO3cWefe22YX1dsq1+ctX7o6Q5l7uXn/n1qw76v79DNtc2t/k4r5t98eHyxtrndf91qwnz9/cnEPb87+XrYir3dPzpyzzfo0WH7h76apG7jmB4m7V/Isy+527y3u9uKXZ7uP5i4F9vvLi7bv5C97cmT49u32j/06mTvx/mNj2fuafKHPeVzpKpvl52T/+/YTw8nrIRgQMwOAAAAAElFTkSuQmCC'
drawPoster('../image/code/erweimabg.png', QR_IMAGE_URL);
this.qrCodeUrl = result.data.qrCodeUrl
}
})
},
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value
this.showTypePicker = false
},
// 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
// // 图片的原始宽度和高度
// 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 = 180 // 假设前景图标显示的尺寸
// const fgX = (canvasWidth - fgIconSize) / 2
// const fgY = ((canvasHeight - fgIconSize) / 2 ) + 15
// // 绘制二维码
// ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize)
// this.canvasReady = true
// }
// onConfirmType(value) {
// this.formData.type = value
// this.showTypePicker = false
// },
},
})
})
// function saveCanvas() {
// if (!VUE.canvasReady) return
// vant.Toast.loading({
// message: '图片保存中...',
// forbidClick: true,
// loadingType: 'spinner',
// });
// const canvas = document.getElementById('mainCanvas')
// const dataURL = canvas.toDataURL('image/png')
// console.log(dataURL, '图片下载')
// lightAppJssdk.media.savePhoto({
// arg: dataURL,
// success: function (data) {
// // vant.Toast.clear()
// // alert(JSON.stringify(data))
// vant.Dialog.alert({
// message: '保存成功',
// })
// },
// fail: function (data) {
// // vant.Toast.clear()
// // alert('保存失败')
// vant.Dialog.alert({
// message: '保存失败',
// })
// },
// })
// }
function saveCanvas() {
vant.Toast.loading({
message: '图片保存中...',
forbidClick: true,
loadingType: 'spinner',
});
lightAppJssdk.media.savePhoto({
arg: VUE.formData.qrCodeUrl,
success: function (data) {
// vant.Toast.clear()
// alert(JSON.stringify(data))
vant.Dialog.alert({
message: '保存成功',
})
},
fail: function (data) {
// vant.Toast.clear()
// alert('保存失败')
vant.Dialog.alert({
message: '保存失败',
})
},
})
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment