277 lines
7.4 KiB
Vue
277 lines
7.4 KiB
Vue
<template>
|
||
<!-- 分享海报 -->
|
||
<view class="share" @click="closeShow" catchtouchmove="preventD">
|
||
<view class="box" v-show="!showPrivacy">
|
||
<canvas class="canvas" id="myCanvas" canvas-id="myCanvas" @click.stop></canvas>
|
||
<view class="btn" @tap.stop="saveImage">保存图片</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 隐私协议弹窗 -->
|
||
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree.stop="showPrivacy = false" @refuse="showPrivacy = false" />
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
|
||
import { getOldDay, saveImg, judgePrivacy, showToast } from '../common.js'
|
||
import { post } from '@/api/request.js'
|
||
import api from '@/api/index.js'
|
||
import privacyPopup from '../privacyPopup/index.vue'
|
||
|
||
export default {
|
||
components: {
|
||
privacyPopup
|
||
},
|
||
props: {
|
||
goods: Object
|
||
},
|
||
setup(props, context) {
|
||
const data = reactive({
|
||
canvasWidth: {},
|
||
ctx: null,
|
||
showImage: '',
|
||
avatar: '',
|
||
faceImg: '',
|
||
loading: false,
|
||
shareImg: '',
|
||
Color: uni.getStorageSync('theme_color'),
|
||
showPrivacy: false
|
||
})
|
||
|
||
// 关闭
|
||
function closeShow() {
|
||
context.emit('closeShow')
|
||
}
|
||
|
||
function draw1() {
|
||
data.ctx.setFontSize(20)
|
||
data.ctx.setFillStyle('white')
|
||
data.ctx.fillRect(0, 0, data.canvasWidth.width || 275, data.canvasWidth.height || 470)
|
||
data.ctx.drawImage(data.avatar, 15, 10, 30, 30)
|
||
data.ctx.setFontSize(12)
|
||
data.ctx.setFillStyle('#666666')
|
||
var nickname = uni.getStorageSync('nickname')
|
||
data.ctx.fillText(nickname, 50, 20)
|
||
data.ctx.setFontSize(11)
|
||
data.ctx.setFillStyle('#999999')
|
||
data.ctx.fillText(getOldDay(), 50, 40)
|
||
data.ctx.drawImage(data.faceImg, 15, 50, 245, 245)
|
||
data.ctx.font = 'warp bold 15px Arial,sans-serif '
|
||
data.ctx.setFillStyle('#111111')
|
||
toFormateStr(data.ctx, props.goods.title, 15, 315, 15, 230, 1)
|
||
data.ctx.setFontSize(12)
|
||
data.ctx.setFillStyle('#999999')
|
||
toFormateStr(data.ctx, props.goods.description.replace(/\s+/g, ''), 15, 335, 15, 230, 3)
|
||
data.ctx.setFontSize(12)
|
||
data.ctx.setFillStyle('#F14939')
|
||
let price = ''
|
||
if (props.goods.goods_size > 1) {
|
||
if (parseInt(props.goods.max_price) < parseInt(props.goods.min_price)) {
|
||
price = props.goods.max_price + '~' + props.goods.min_price
|
||
} else {
|
||
price = props.goods.min_price + '~' + props.goods.max_price
|
||
}
|
||
} else {
|
||
if (props.goods.group_goods[0].specs_type === 0) {
|
||
price = props.goods.group_goods[0].price
|
||
} else {
|
||
if (props.goods.group_goods[0].max_price === props.goods.group_goods[0].min_price) {
|
||
price = props.goods.group_goods[0].min_price
|
||
} else if (
|
||
parseInt(props.goods.group_goods[0].max_price) <
|
||
parseInt(props.goods.group_goods[0].min_price)
|
||
) {
|
||
price = props.goods.group_goods[0].max_price + '~' + props.goods.group_goods[0].min_price
|
||
} else {
|
||
price = props.goods.group_goods[0].min_price + '~' + props.goods.group_goods[0].max_price
|
||
}
|
||
}
|
||
}
|
||
data.ctx.fillText('￥', 15, 400)
|
||
data.ctx.setFontSize(15)
|
||
data.ctx.fillText(price, 27, 400)
|
||
data.ctx.setFillStyle('rgba(246, 246, 246, 0.9)')
|
||
data.ctx.fillRect(15, 410, 130, 55)
|
||
data.ctx.setFontSize(11)
|
||
data.ctx.setFillStyle('#999999')
|
||
data.ctx.fillText('长按识别图中小程序', 25, 430)
|
||
data.ctx.fillText('跟团购买>>', 25, 450)
|
||
data.ctx.drawImage(data.showImage, 165, 375, 90, 90)
|
||
data.ctx.draw()
|
||
}
|
||
|
||
// 文本换行
|
||
function toFormateStr(
|
||
ctx,
|
||
content,
|
||
drawX, // 15
|
||
drawY, // 335
|
||
lineHeight, // 15
|
||
lineMaxWidth, // 230
|
||
lineNum // 3
|
||
) {
|
||
var drawTxt = '' // 当前绘制的内容
|
||
var drawLine = 1 // 第几行开始绘制
|
||
var drawIndex = 0 // 当前绘制内容的索引
|
||
|
||
// 判断内容是否可以一行绘制完毕
|
||
if (ctx.measureText(content).width <= lineMaxWidth) {
|
||
ctx.fillText(content.substring(drawIndex, i), drawX, drawY)
|
||
} else {
|
||
for (var i = 0; i < content.length; i++) {
|
||
drawTxt += content[i]
|
||
if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
|
||
if (drawLine >= lineNum) {
|
||
ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY)
|
||
break
|
||
} else {
|
||
ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY)
|
||
drawIndex = i + 1
|
||
drawLine += 1
|
||
drawY += lineHeight
|
||
drawTxt = ''
|
||
}
|
||
} else {
|
||
// 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
|
||
if (i === content.length - 1) {
|
||
ctx.fillText(content.substring(drawIndex), drawX, drawY)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取单张图片信息
|
||
const getImageInfo = async (imgSrc) => {
|
||
return new Promise((resolve, reject) => {
|
||
uni.getImageInfo({
|
||
src: imgSrc,
|
||
success: function(image) {
|
||
resolve(image.path)
|
||
},
|
||
fail(err) {
|
||
reject()
|
||
}
|
||
})
|
||
})
|
||
}
|
||
// 获取页面二维码
|
||
const getImg = () => {
|
||
return new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: api.url + '/api/v1/user/code',
|
||
method: 'POST',
|
||
data: {
|
||
page: 'pages/groups/index',
|
||
shop_goods_id: props.goods.id
|
||
},
|
||
header: {
|
||
Authorization: uni.getStorageSync('token') || '',
|
||
appid: api.appId
|
||
},
|
||
responseType: 'arraybuffer',
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
let base64 = ''
|
||
const bytes = new Uint8Array(res.data)
|
||
const len = bytes.byteLength
|
||
for (let i = 0; i < len; i++) {
|
||
base64 += String.fromCharCode(bytes[i])
|
||
}
|
||
base64 = `data:image/png;base64,${btoa(base64)}`
|
||
resolve(base64)
|
||
} else {
|
||
reject('')
|
||
}
|
||
},
|
||
})
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '海报生成中...'
|
||
})
|
||
const instance = getCurrentInstance()
|
||
setTimeout(() => {
|
||
const query = uni.createSelectorQuery().in(instance)
|
||
query.select('#myCanvas').boundingClientRect(async (res) => {
|
||
console.log(res)
|
||
data.canvasWidth = res || {}
|
||
data.ctx = uni.createCanvasContext('myCanvas', instance)
|
||
data.avatar = await getImageInfo(uni.getStorageSync('avatar'))
|
||
data.faceImg = await getImageInfo(props.goods.face_img)
|
||
data.showImage = await getImg()
|
||
await draw1()
|
||
uni.hideLoading()
|
||
}).exec()
|
||
}, 200)
|
||
|
||
})
|
||
|
||
return {
|
||
...toRefs(data),
|
||
draw1,
|
||
closeShow,
|
||
getImg,
|
||
getImageInfo
|
||
}
|
||
},
|
||
methods: {
|
||
async saveImage() {
|
||
if(await judgePrivacy()) {
|
||
this.showPrivacy = true
|
||
return false
|
||
}
|
||
//保存到相册
|
||
const _this = this
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'myCanvas',
|
||
success(res) {
|
||
saveImg(res.tempFilePath)
|
||
},
|
||
fail(err) {
|
||
}
|
||
}, _this)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.share {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba($color: #000000, $alpha: 0.7);
|
||
z-index: 202;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.canvas {
|
||
width: 275px;
|
||
height: 470px;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.btn {
|
||
color: #fff;
|
||
background-color: v-bind('Color');
|
||
font-size: 30rpx;
|
||
width: 340rpx;
|
||
height: 76rpx;
|
||
line-height: 76rpx;
|
||
text-align: center;
|
||
margin: 60rpx auto 0;
|
||
border-radius: 76rpx;
|
||
}
|
||
}
|
||
</style>
|