|
|
@@ -8,8 +8,11 @@
|
|
|
<button class="admin-button-com big" style="background-color: green;border-color: green;color:white;" @click="gotoOrderDetail">订单详情</button>
|
|
|
<button class="admin-button-com big" @click="goBackHome">返回首页</button>
|
|
|
|
|
|
- <!-- 离屏画布，用于绘制退款凭证海报，绘制完成后导出为图片再展示 -->
|
|
|
- <canvas canvas-id="forwardPosterCanvas" style="width: 360px; height: 560px; position: fixed; left: -9999px; top: -9999px; z-index: -1;"></canvas>
|
|
|
+ <!-- 离屏画布：宽高与 drawPoster 一致；导出时也必须按此尺寸，否则整图会被纵向压扁 -->
|
|
|
+ <canvas
|
|
|
+ canvas-id="forwardPosterCanvas"
|
|
|
+ :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', position: 'fixed', left: '-9999px', top: '-9999px', zIndex: -1 }"
|
|
|
+ ></canvas>
|
|
|
<item-poster-popup ref="itemPosterPopup" :poster-url="posterUrl" @close="closePoster" @save="savePosterImg" />
|
|
|
</appResult>
|
|
|
</template>
|
|
|
@@ -42,7 +45,10 @@ export default {
|
|
|
customId: 0,
|
|
|
customName: '',
|
|
|
customBalance: 0,
|
|
|
- posterUrl: ''
|
|
|
+ posterUrl: '',
|
|
|
+ //画布逻辑宽高（与绘制坐标一致），导出时也必须用这对尺寸，避免压扁
|
|
|
+ canvasWidth: 360,
|
|
|
+ canvasHeight: 640
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
@@ -97,9 +103,12 @@ export default {
|
|
|
drawPoster(qrPath) {
|
|
|
let that = this;
|
|
|
const ctx = uni.createCanvasContext('forwardPosterCanvas', this);
|
|
|
- const width = 360;
|
|
|
- const height = 560;
|
|
|
+ const width = this.canvasWidth;
|
|
|
+ //画布高度需覆盖小程序码下方提示文案，560时底部会被裁切只露出半行字
|
|
|
+ const height = this.canvasHeight;
|
|
|
const radius = 20;
|
|
|
+ //导出按设备像素比放大，避免模糊；宽高必须与绘制一致，否则整图会被纵向压扁
|
|
|
+ const pixelRatio = Math.max((uni.getSystemInfoSync() && uni.getSystemInfoSync().pixelRatio) || 2, 2);
|
|
|
|
|
|
ctx.save();
|
|
|
ctx.beginPath();
|
|
|
@@ -174,16 +183,16 @@ export default {
|
|
|
ctx.setFillStyle('#666666');
|
|
|
ctx.fillText(dayjs().format('YYYY-MM-DD HH:mm'), width - 30, 368);
|
|
|
|
|
|
- //二维码
|
|
|
+ //小程序码：底部留足空间画「长按识别」提示，避免贴底被圆角裁切
|
|
|
const qrSize = 150;
|
|
|
const qrX = (width - qrSize) / 2;
|
|
|
- const qrY = 390;
|
|
|
+ const qrY = 400;
|
|
|
ctx.drawImage(qrPath, qrX, qrY, qrSize, qrSize);
|
|
|
|
|
|
ctx.setFontSize(20);
|
|
|
ctx.setFillStyle('#666666');
|
|
|
ctx.setTextAlign('center');
|
|
|
- ctx.fillText('长按识别，查看余额明细', width / 2, qrY + qrSize + 30);
|
|
|
+ ctx.fillText('长按识别，查看余额明细', width / 2, qrY + qrSize + 36);
|
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
@@ -193,6 +202,12 @@ export default {
|
|
|
uni.canvasToTempFilePath(
|
|
|
{
|
|
|
canvasId: 'forwardPosterCanvas',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ destWidth: width * pixelRatio,
|
|
|
+ destHeight: height * pixelRatio,
|
|
|
fileType: 'jpg',
|
|
|
quality: 1,
|
|
|
success: (res) => {
|
