328 lines
8.9 KiB
Vue
328 lines
8.9 KiB
Vue
<template>
|
|
<view class="page">
|
|
<canvas type="2d" :id="'canvas_'+ pageId"
|
|
style="width: 320px;height: 560px;position: fixed;left:8888px"></canvas>
|
|
<!-- <canvas v-if="templateInfo.templateType == 2" type="2d" id="myCanvas2" style="width: 800px;height: 360px;position: fixed;left:8888px"></canvas> -->
|
|
<view id="img-box" style="width: 100%;height: calc(100vh - 200rpx);overflow: hidden;border-radius: 12rpx;">
|
|
<image :src="url" mode="widthFix" style="width: 100%;" show-menu-by-longpress="true"></image>
|
|
</view>
|
|
<view class="flex justify-around margin-tb">
|
|
<view class="btn" @click="savePic">
|
|
<image src="@/static/download.png" style="width: 48rpx;height: 48rpx"></image>
|
|
<text>存为图片</text>
|
|
</view>
|
|
<view class="btn" @click="share"><text class="cuIcon-weixin" style="color:#39E5B1;font-size: 48rpx;"></text>
|
|
<text>微信好友</text>
|
|
</view>
|
|
<!-- <button class="btn" open-type="share" id="pyq" @click="shareFile">朋友圈</button> -->
|
|
</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: {},
|
|
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')
|
|
},
|
|
// onShareTimeline(res) {
|
|
// console.log('pyq',res)
|
|
// },
|
|
// onShareAppMessage(res) {
|
|
// if(res.form == 'menu') {
|
|
// console.log('分享按钮',res.target.id)
|
|
// return {
|
|
// imageUrl: this.url,
|
|
// }
|
|
// }
|
|
|
|
// },
|
|
onReady() {
|
|
this.getTemplateInfo()
|
|
},
|
|
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.createPic()
|
|
})
|
|
},
|
|
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,
|
|
})
|
|
},
|
|
// 保存到相册
|
|
savePic() {
|
|
|
|
uni.getSetting({
|
|
success: (res) => {
|
|
console.log(res)
|
|
// 判断是否拥有此权限进行拉起授权 和 重新授权功能
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
// 未授权此项权限 拉起授界面
|
|
uni.authorize({
|
|
scope: 'scope.writePhotosAlbum',
|
|
success: () => {
|
|
// 授权成功后 就可以执行 需要权限的 操作函数了
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: this.url,
|
|
success: (res) => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: '保存失败',
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
/*
|
|
第一次拒绝授权后必须在 uni.authorize的fail中使用
|
|
uni.openSetting 才能进入设置界面打开授权按钮
|
|
*/
|
|
|
|
// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
|
|
uni.showModal({
|
|
title: '是否重新授权相册功能',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
uni.openSetting({
|
|
success() {
|
|
console.log('开启权限成功');
|
|
},
|
|
fail() {
|
|
console.log('开启权限失败');
|
|
}
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log('拒绝开启开启权限');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: this.url,
|
|
success: (res) => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: '保存失败',
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
createPic() {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
let _this = this
|
|
|
|
// 获取的画布
|
|
uni.createSelectorQuery().select('#canvas_' + _this.pageId).fields({
|
|
node: true,
|
|
size: true
|
|
}).exec((res) => {
|
|
const ctx = res[0].node.getContext('2d')
|
|
const canvas = res[0].node
|
|
const dpr = uni.getWindowInfo().pixelRatio
|
|
|
|
// 设置画布的宽高
|
|
canvas.width = res[0].width * dpr
|
|
canvas.height = res[0].height * dpr
|
|
ctx.scale(dpr, dpr)
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
// 绘制背景
|
|
// let imageBg = canvas.createImage()
|
|
// let imageCover = canvas.createImage()
|
|
// imageBg.src = this.els.background
|
|
// imageCover.src = this.els.cover.url
|
|
// imageBg.onload = () => {
|
|
// ctx.drawImage(imageBg, 0, 0, 360, 600)
|
|
let imgArr = []
|
|
if (this.els.background) {
|
|
imgArr.push(this.els.background)
|
|
} else if (this.els.cover && this.els.cover.url) {
|
|
imgArr.push(this.els.cover.url)
|
|
}
|
|
|
|
this.downfile(imgArr, canvas).then(res => {
|
|
if (this.els.background) {
|
|
ctx.drawImage(res[0], 0, 0, 320, 560)
|
|
} else if (this.els.cover && this.els.cover.url) {
|
|
ctx.drawImage(res[1], this.els.cover.x, this.els.cover.y, this.els.cover
|
|
.w, this.els.cover.h * 0.9)
|
|
}
|
|
|
|
|
|
for (let key in this.els) {
|
|
if (key == "background" || key == "cover") {
|
|
continue;
|
|
} else {
|
|
// console.log(key);
|
|
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, item.y)
|
|
}
|
|
}
|
|
}
|
|
uni.canvasToTempFilePath({
|
|
canvas: canvas,
|
|
success: (res) => {
|
|
_this.url = res.tempFilePath
|
|
uni.hideLoading()
|
|
},
|
|
fail: (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;
|
|
}
|
|
|
|
.h-img {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
</style> |