348 lines
9.2 KiB
Vue
348 lines
9.2 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<canvas type="2d" :id="'canvas_'+ pageId"
|
||
|
|
style="width: 560px;height: 320px;position: fixed;left:8888px"></canvas>
|
||
|
|
<view id="img-box" style="width: 100%;height: calc(100vh - 200rpx);">
|
||
|
|
<image :src="url" mode="heightFix" style="width: 100%;height: calc(100vh - 200rpx);"
|
||
|
|
show-menu-by-longpress="true"></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="flex justify-around">
|
||
|
|
<view class="btn" @click="savePdf('save')">
|
||
|
|
<image src="@/static/download.png" style="width: 48rpx;height: 48rpx"></image>
|
||
|
|
<text>保存文件</text></view>
|
||
|
|
<view class="btn" @click="savePdf('share')">
|
||
|
|
<text class="cuIcon-weixin" style="color:#39E5B1;font-size: 48rpx;"></text>
|
||
|
|
<text>微信好友</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getTemplateDetail,
|
||
|
|
saveExportRecord,
|
||
|
|
getBeerInfo
|
||
|
|
} from "@/api/bar.js"
|
||
|
|
import {
|
||
|
|
base_url
|
||
|
|
} from '@/api/config.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
pageId: Math.random().toString(36).substr(2),
|
||
|
|
templateId: '',
|
||
|
|
templateInfo: {},
|
||
|
|
els: {
|
||
|
|
// background: 'https://ma.zdtap.com/profile/upload/2025/02/26/815068ec81b4cb1738a4773bee57970@2x_20250226224217A001.png',
|
||
|
|
// cover: {
|
||
|
|
// width: 304,
|
||
|
|
// height: 400,
|
||
|
|
// x: 28,
|
||
|
|
// y: 36,
|
||
|
|
// url: 'https://ma.zdtap.com/profile/upload/2025/02/26/beercover_20250226223149A001.jpg',
|
||
|
|
// },
|
||
|
|
|
||
|
|
},
|
||
|
|
imgPath: '',
|
||
|
|
url: '',
|
||
|
|
userInfo: {},
|
||
|
|
barInfo: {},
|
||
|
|
beer: {}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.templateId = options.templateId
|
||
|
|
this.form = {
|
||
|
|
amount: options.amount,
|
||
|
|
amount1: options.amount1,
|
||
|
|
specs: options.specs,
|
||
|
|
specs1: options.specs1,
|
||
|
|
no: options.no,
|
||
|
|
beerStyles: options.beerStyles,
|
||
|
|
brandName: options.brandName,
|
||
|
|
beerId: options.beerId
|
||
|
|
}
|
||
|
|
this.userInfo = uni.getStorageSync('userInfo')
|
||
|
|
this.barInfo = uni.getStorageSync('barInfo')
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
this.getTemplateInfo()
|
||
|
|
}, // onShareTimeline(res) {
|
||
|
|
// console.log('pyq',res)
|
||
|
|
// },
|
||
|
|
// onShareAppMessage(res) {
|
||
|
|
// if(res.form == 'menu') {
|
||
|
|
// console.log('分享按钮',res.target.id)
|
||
|
|
// return {
|
||
|
|
// imageUrl: this.url,
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// },
|
||
|
|
methods: {
|
||
|
|
getBeerInfoFun() {
|
||
|
|
getBeerInfo(this.form.beerId).then(res => {
|
||
|
|
this.beer = res.data
|
||
|
|
this.els.brandName && (this.els.brandName.value = this.beer.brandName || '')
|
||
|
|
this.els.ABV && (this.els.ABV.value = this.beer.beerAbv|| '')
|
||
|
|
this.els.cover && (this.els.cover.url = this.beer.cover)
|
||
|
|
this.els.beerName && (this.els.beerName.value = this.beer.beerName || '')
|
||
|
|
this.els.beerStyle && (this.els.beerStyle.value = this.beer.beerStyles || '')
|
||
|
|
this.createPdf()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getTemplateInfo() {
|
||
|
|
getTemplateDetail(this.templateId).then(res => {
|
||
|
|
console.log(res)
|
||
|
|
this.templateInfo = res.data
|
||
|
|
this.els = JSON.parse(res.data.elements)
|
||
|
|
this.els.address && (this.els.address.value = this.barInfo.address|| '')
|
||
|
|
this.els.barName && (this.els.barName.value = this.barInfo.barName|| '')
|
||
|
|
this.els.phone && (this.els.phone.value = this.barInfo.barContactPhone|| '')
|
||
|
|
this.els.no && (this.els.no.value = this.form.no|| '')
|
||
|
|
this.els.amount && (this.els.amount.value = this.form.amount|| '')
|
||
|
|
this.els.amount1 && (this.els.amount1.value = this.form.amount1|| '')
|
||
|
|
this.els.specs && (this.els.specs.value = this.form.specs|| '')
|
||
|
|
this.els.specs1 && (this.els.specs1.value = this.form.specs1|| '')
|
||
|
|
this.getBeerInfoFun()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
share() {
|
||
|
|
uni.showShareImageMenu({
|
||
|
|
path: this.url,
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
savePdf(key) {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在生成',
|
||
|
|
mask: true,
|
||
|
|
})
|
||
|
|
uni.uploadFile({
|
||
|
|
url: base_url +
|
||
|
|
'/bar/bill/generatePdf', //仅为示例，非真实的接口地址
|
||
|
|
filePath: this.url,
|
||
|
|
header: {
|
||
|
|
'Authorization': 'Bearer ' + uni.getStorageSync('token')
|
||
|
|
},
|
||
|
|
name: 'file',
|
||
|
|
formData: {
|
||
|
|
type: 'file'
|
||
|
|
},
|
||
|
|
success: (uploadFileRes) => {
|
||
|
|
|
||
|
|
uni.downloadFile({
|
||
|
|
url: base_url + JSON.parse(uploadFileRes.data).pathFileName, //仅为示例，并非真实的资源
|
||
|
|
success: (res) => {
|
||
|
|
if (res.statusCode === 200) {
|
||
|
|
if (key == 'save') {
|
||
|
|
|
||
|
|
uni.getFileSystemManager().saveFile({
|
||
|
|
tempFilePath: res.tempFilePath,
|
||
|
|
success: (res) => {
|
||
|
|
console.log(res.savedFilePath)
|
||
|
|
uni.hideLoading()
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存成功',
|
||
|
|
icon: 'success',
|
||
|
|
})
|
||
|
|
uni.openDocument({
|
||
|
|
filePath: res
|
||
|
|
.savedFilePath,
|
||
|
|
showMenu: true,
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存失败',
|
||
|
|
icon: 'none',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else if (key == 'share') {
|
||
|
|
uni.showModal({
|
||
|
|
content: '分享微信好友',
|
||
|
|
success: (res1) => {
|
||
|
|
if (res1.confirm) {
|
||
|
|
uni.hideLoading()
|
||
|
|
uni.shareFileMessage({
|
||
|
|
filePath: res
|
||
|
|
.tempFilePath,
|
||
|
|
})
|
||
|
|
}else {
|
||
|
|
uni.hideLoading()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
saveExportRecord(this.templateId)
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
console.log(err)
|
||
|
|
uni.hideLoading()
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存失败',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
createPdf() {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
let _this = this
|
||
|
|
// 获取的画布
|
||
|
|
uni.createSelectorQuery().select('#canvas_' + _this.pageId).fields({
|
||
|
|
node: true,
|
||
|
|
size: true
|
||
|
|
}).exec((res) => {
|
||
|
|
console.log(res)
|
||
|
|
const ctx = res[0].node.getContext('2d')
|
||
|
|
const canvas = res[0].node
|
||
|
|
|
||
|
|
const dpr = uni.getWindowInfo().pixelRatio
|
||
|
|
|
||
|
|
// 设置画布的宽高
|
||
|
|
canvas.width = res[0].height * dpr
|
||
|
|
canvas.height = res[0].width * dpr
|
||
|
|
ctx.scale(dpr, dpr)
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||
|
|
ctx.translate(160, 280)
|
||
|
|
ctx.rotate(90 * Math.PI / 180)
|
||
|
|
// wx.loadFontFace({
|
||
|
|
// family: 'Bitstream Vera Serif Bold',
|
||
|
|
// source: 'url("https://sungd.github.io/Pacifico.ttf")',
|
||
|
|
// scopes: ['webview', 'native'],
|
||
|
|
// success: console.log
|
||
|
|
// })
|
||
|
|
// 绘制背景
|
||
|
|
|
||
|
|
let imgArr = []
|
||
|
|
if(this.els.background) {
|
||
|
|
imgArr.push(this.els.background)
|
||
|
|
}
|
||
|
|
if(this.els.cover && this.els.cover.url) {
|
||
|
|
console.log(this.els.cover)
|
||
|
|
imgArr.push(this.els.cover.url)
|
||
|
|
}
|
||
|
|
this.downfile(imgArr, canvas).then(res => {
|
||
|
|
if(this.els.background) {
|
||
|
|
ctx.drawImage(res[0], -280, -160,560, 320)
|
||
|
|
}
|
||
|
|
if(this.els.cover && this.els.cover.url) {
|
||
|
|
ctx.drawImage(res[1], this.els.cover.x-280, this.els.cover.y-160, this.els.cover.w, this.els.cover
|
||
|
|
.h)
|
||
|
|
}
|
||
|
|
// 绘制文字
|
||
|
|
for (let key in this.els) {
|
||
|
|
if (key == "background" || key == "cover") {
|
||
|
|
continue;
|
||
|
|
} else {
|
||
|
|
if (this.els.hasOwnProperty(key)) {
|
||
|
|
let item = this.els[key];
|
||
|
|
if(key== 'specs' || key == 'specs1') {
|
||
|
|
item.value += 'ML'
|
||
|
|
}
|
||
|
|
if(key == 'amount' || key == 'amount1') {
|
||
|
|
item.value = '¥'+ item.value
|
||
|
|
}
|
||
|
|
ctx.font = `${item.fontWeight} ${item.fontSize}px Arial`
|
||
|
|
ctx.fillStyle = item.color
|
||
|
|
// 内容居右对齐
|
||
|
|
if(key== 'no') {
|
||
|
|
ctx.textAlign = 'center'
|
||
|
|
}else {
|
||
|
|
ctx.textAlign = 'left'
|
||
|
|
}
|
||
|
|
ctx.fillText(item.value, item.x-280, item.y-160)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 保存图片
|
||
|
|
uni.canvasToTempFilePath({
|
||
|
|
canvas: canvas,
|
||
|
|
success: (res) => {
|
||
|
|
console.log(res.tempFilePath)
|
||
|
|
_this.url = res.tempFilePath
|
||
|
|
uni.hideLoading()
|
||
|
|
// 旋转屏幕
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
console.log(err)
|
||
|
|
uni.showToast({
|
||
|
|
title: err,
|
||
|
|
})
|
||
|
|
uni.hideLoading()
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
downfile(imgUrls, canvas) { //下载网络图片的promise对象
|
||
|
|
|
||
|
|
var _load = function(imgUrl) {
|
||
|
|
//创建img标签
|
||
|
|
var img = canvas.createImage();
|
||
|
|
img.src = imgUrl;
|
||
|
|
//跨域选项
|
||
|
|
// img.setAttribute("crossOrigin", 'Anonymous');
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
//文件加载完毕
|
||
|
|
img.onload = function() {
|
||
|
|
resolve(img);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
var _loadAll = function(imgUrls) {
|
||
|
|
var loadedImageUrls = [];
|
||
|
|
for (var i = 0, len = imgUrls.length; i < len; i++) {
|
||
|
|
loadedImageUrls.push(_load(imgUrls[i]));
|
||
|
|
}
|
||
|
|
return loadedImageUrls;
|
||
|
|
}
|
||
|
|
return Promise.all(_loadAll(imgUrls))
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page {
|
||
|
|
height: 100vh;
|
||
|
|
padding: 24rpx;
|
||
|
|
background: #F2F2F2;
|
||
|
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.btn {
|
||
|
|
width: 130rpx;
|
||
|
|
height: 130rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
font-family: Roboto;
|
||
|
|
font-size: 24rpx;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
color: #0B0E26;
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|