430 lines
12 KiB
Vue
430 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="aleart" v-if="aleartStatus" :style="'background-image: url(' + giftbag + ');'">
|
|||
|
|
<template v-if="!posterImageStatus">
|
|||
|
|
<text class="iconfont icon-ic_close1 close" @click="posterImageClose"></text>
|
|||
|
|
<view class="from">赠送给好友一份礼物</view>
|
|||
|
|
<view class="message line2">{{ giftData.message }}</view>
|
|||
|
|
<view class="aleart-body">
|
|||
|
|
<image class="goods-img" :src="giftData.image" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="title line1">
|
|||
|
|
{{ giftData.title }}
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="btn" @tap="copyLink">复制礼物链接</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<button class="btn" open-type="share" hover-class="none">送给好友</button>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="btn-clear" @click="getPoster()">保存海报</view>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="posterImageStatus">
|
|||
|
|
<text class="iconfont icon-ic_close1 close" @click="posterImageClose"></text>
|
|||
|
|
<image class="poster-img" :src="posterImage"></image>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="keep">长按图片可以保存到手机</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</template>
|
|||
|
|
<!-- #ifdef H5 || APP-PLUS -->
|
|||
|
|
<zb-code
|
|||
|
|
ref="qrcode"
|
|||
|
|
:show="codeShow"
|
|||
|
|
:cid="cid"
|
|||
|
|
:val="codeVal"
|
|||
|
|
:size="size"
|
|||
|
|
:unit="unit"
|
|||
|
|
:background="background"
|
|||
|
|
:foreground="foreground"
|
|||
|
|
:pdground="pdground"
|
|||
|
|
:icon="codeIcon"
|
|||
|
|
:iconSize="iconsize"
|
|||
|
|
:onval="onval"
|
|||
|
|
:loadMake="loadMake"
|
|||
|
|
@result="qrR"
|
|||
|
|
/>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
aleartData: {},
|
|||
|
|
bag: HTTP_REQUEST_URL + '/statics/images/canvas-bag.png',
|
|||
|
|
giftBorder: HTTP_REQUEST_URL + '/statics/images/gift-border.png',
|
|||
|
|
giftbag: HTTP_REQUEST_URL + '/statics/images/gift-bag.png',
|
|||
|
|
//二维码参数
|
|||
|
|
codeShow: false,
|
|||
|
|
cid: '1',
|
|||
|
|
codeVal: '', // 要生成的二维码值
|
|||
|
|
size: 200, // 二维码大小
|
|||
|
|
unit: 'upx', // 单位
|
|||
|
|
background: '#FFF', // 背景色
|
|||
|
|
foreground: '#000', // 前景色
|
|||
|
|
pdground: '#000', // 角标色
|
|||
|
|
codeIcon: '', // 二维码图标
|
|||
|
|
iconsize: 40, // 二维码图标大小
|
|||
|
|
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
|||
|
|
onval: true, // val值变化时自动重新生成二维码
|
|||
|
|
loadMake: true, // 组件加载完成后自动生成二维码
|
|||
|
|
PromotionCode: '',
|
|||
|
|
posterImageStatus: false,
|
|||
|
|
posterImage: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
giftData: {
|
|||
|
|
type: Object
|
|||
|
|
},
|
|||
|
|
aleartStatus: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
aleartStatus(status) {
|
|||
|
|
if (!status) {
|
|||
|
|
this.aleartData = {};
|
|||
|
|
} else {
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.codeVal = window.location.origin + '/pages/goods/receive_gift/index?id=' + this.giftData.id + '&spid=' + this.$store.state.app.uid;
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.codeVal = HTTP_REQUEST_URL + '/pages/goods/receive_gift/index?id=' + this.giftData.id + '&spid=' + this.$store.state.app.uid;
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP
|
|||
|
|
this.PromotionCode = this.giftData.code;
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
copyLink() {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: this.codeVal,
|
|||
|
|
success: () => {
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: '复制成功'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
qrR(res) {
|
|||
|
|
// #ifdef H5
|
|||
|
|
if (!this.$wechat.isWeixin() || this.shareQrcode != '1') {
|
|||
|
|
this.PromotionCode = res;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.PromotionCode = res;
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
//隐藏弹窗
|
|||
|
|
posterImageClose() {
|
|||
|
|
this.posterImageStatus = false;
|
|||
|
|
this.$emit('close', false);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
drawPoster(loadedImages, name, store_name) {
|
|||
|
|
// 截断标题函数
|
|||
|
|
function truncateTitle(title, maxLength) {
|
|||
|
|
if (title.length > maxLength) {
|
|||
|
|
return title.substring(0, maxLength) + '...';
|
|||
|
|
}
|
|||
|
|
return title;
|
|||
|
|
}
|
|||
|
|
// 获取canvas上下文
|
|||
|
|
const ctx = uni.createCanvasContext('posterCanvas');
|
|||
|
|
return new Promise(async (resolve, reject) => {
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: loadedImages[0],
|
|||
|
|
success: (res) => {
|
|||
|
|
// 海报尺寸
|
|||
|
|
const posterWidth = 375;
|
|||
|
|
const posterHeight = 579;
|
|||
|
|
// const posterWidth = res.width / 2;
|
|||
|
|
// const posterHeight = res.height / 2;
|
|||
|
|
// 绘制背景图
|
|||
|
|
ctx.drawImage(loadedImages[0], 0, 0, posterWidth, posterHeight);
|
|||
|
|
ctx.save();
|
|||
|
|
// 头像和标题的布局
|
|||
|
|
|
|||
|
|
const avatarSize = 22; // 头像尺寸
|
|||
|
|
const nickname = name; // 昵称
|
|||
|
|
const title = '送你一份礼物'; // 标题文字
|
|||
|
|
const titleFontSize = 14; // 标题字号
|
|||
|
|
const nicknameFontSize = 14; // 昵称字号
|
|||
|
|
const padding = 10; // 元素之间的间距
|
|||
|
|
// 计算标题宽度
|
|||
|
|
ctx.setFontSize(titleFontSize);
|
|||
|
|
const titleWidth = ctx.measureText(title).width;
|
|||
|
|
const nicknameWidth = ctx.measureText(nickname).width;
|
|||
|
|
// 计算头像和标题的总宽度
|
|||
|
|
const totalWidth = avatarSize + padding + nicknameWidth + padding + titleWidth;
|
|||
|
|
|
|||
|
|
// 计算起始绘制位置（水平居中）
|
|||
|
|
const startX = (posterWidth - totalWidth) / 2;
|
|||
|
|
const startY = 47; // 距离顶部的距离
|
|||
|
|
|
|||
|
|
// 绘制头像
|
|||
|
|
// ctx.drawImage(loadedImages[3], startX, startY, avatarSize, avatarSize);
|
|||
|
|
const avatarX = startX + avatarSize / 2; // 头像中心点 X
|
|||
|
|
const avatarY = startY + avatarSize / 2; // 头像中心点 Y
|
|||
|
|
ctx.save(); // 保存画布状态
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.arc(avatarX, avatarY, avatarSize / 2, 0, Math.PI * 2); // 绘制圆形路径
|
|||
|
|
ctx.clip(); // 裁剪圆形区域
|
|||
|
|
ctx.drawImage(loadedImages[3], startX, startY, avatarSize, avatarSize); // 绘制头像
|
|||
|
|
ctx.restore(); // 恢复画布状态
|
|||
|
|
|
|||
|
|
// 绘制昵称
|
|||
|
|
ctx.setFontSize(nicknameFontSize);
|
|||
|
|
ctx.setTextAlign('left');
|
|||
|
|
ctx.fillText(nickname, startX + avatarSize + padding, startY + avatarSize - 5); // 调整文字垂直居中
|
|||
|
|
// 绘制标题
|
|||
|
|
ctx.setFontSize(titleFontSize);
|
|||
|
|
ctx.fillText(title, startX + avatarSize + padding + nicknameWidth + padding, startY + avatarSize - 5);
|
|||
|
|
|
|||
|
|
// 商品图尺寸
|
|||
|
|
const productImageSize = 225; // 商品图尺寸为 225px x 225px
|
|||
|
|
|
|||
|
|
// 绘制商品图边框
|
|||
|
|
const productBorderX = (posterWidth - productImageSize) / 2; // 水平居中
|
|||
|
|
const productBorderY = startY + avatarSize + 31; // 距离头像和标题的间距
|
|||
|
|
ctx.drawImage(loadedImages[1], productBorderX, productBorderY, productImageSize, productImageSize);
|
|||
|
|
|
|||
|
|
// 绘制商品图
|
|||
|
|
const productImagePadding = 10; // 商品图与边框的内边距
|
|||
|
|
const productImageX = productBorderX + productImagePadding;
|
|||
|
|
const productImageY = productBorderY + productImagePadding + 11;
|
|||
|
|
const productImageInnerSize = productImageSize - 2 * productImagePadding; // 商品图实际绘制尺寸
|
|||
|
|
ctx.drawImage(loadedImages[2], productImageX, productImageY, productImageInnerSize, productImageInnerSize - 10);
|
|||
|
|
|
|||
|
|
// 绘制商品标题
|
|||
|
|
const productTitle = store_name;
|
|||
|
|
const maxTitleLength = 20; // 标题最大长度
|
|||
|
|
const truncatedTitle = truncateTitle(productTitle, maxTitleLength); // 截断标题
|
|||
|
|
ctx.setFontSize(14);
|
|||
|
|
ctx.setTextAlign('center');
|
|||
|
|
ctx.fillText(truncatedTitle, posterWidth / 2, productBorderY + productImageSize + 26);
|
|||
|
|
// 绘制分享二维码
|
|||
|
|
const qrCodeSize = 100;
|
|||
|
|
const qrCodeX = (posterWidth - qrCodeSize) / 2;
|
|||
|
|
const qrCodeY = productBorderY + productImageSize + 63; // 距离商品标题的间距
|
|||
|
|
ctx.drawImage(loadedImages[4], qrCodeX, qrCodeY, qrCodeSize, qrCodeSize);
|
|||
|
|
|
|||
|
|
// 绘制完成
|
|||
|
|
ctx.draw(false, () => {
|
|||
|
|
// 生成海报图片
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
canvasId: 'posterCanvas',
|
|||
|
|
width: posterWidth,
|
|||
|
|
height: posterHeight,
|
|||
|
|
success: (res) => {
|
|||
|
|
resolve(res.tempFilePath);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
fail: (err) => {
|
|||
|
|
reject(err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
loadImage(src) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const img = new Image();
|
|||
|
|
img.crossOrigin = 'anonymous'; // 允许跨域
|
|||
|
|
img.src = src;
|
|||
|
|
img.onload = () => {
|
|||
|
|
resolve(img);
|
|||
|
|
};
|
|||
|
|
img.onerror = (err) => reject(err);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
share() {
|
|||
|
|
this.$emit('shareH5');
|
|||
|
|
},
|
|||
|
|
getPoster() {
|
|||
|
|
let images = [this.bag, this.giftBorder, this.giftData.image, this.giftData.avatar, this.PromotionCode];
|
|||
|
|
let postImg = ['', '', '', '', ''];
|
|||
|
|
// #ifdef MP
|
|||
|
|
for (let i = 0; i < images.length; i++) {
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: images[i],
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode == 200) {
|
|||
|
|
postImg[i] = res.tempFilePath;
|
|||
|
|
}
|
|||
|
|
const allNotEmpty = postImg.every((item) => item !== '');
|
|||
|
|
if (allNotEmpty) this.goPoster(postImg);
|
|||
|
|
},
|
|||
|
|
fail: function () {
|
|||
|
|
this.$set(this, 'PromotionCode', '');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef MP
|
|||
|
|
this.goPoster(images);
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
goPoster(postImg) {
|
|||
|
|
this.drawPoster(postImg, this.giftData.nickname, this.giftData.title)
|
|||
|
|
.then((posterPath) => {
|
|||
|
|
// #ifdef APP-PLUS || MP
|
|||
|
|
this.savePosterPathMp(posterPath);
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.posterImage = posterPath;
|
|||
|
|
this.posterImageStatus = true;
|
|||
|
|
// #endif
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.error('海报生成失败:', err);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// #ifdef APP-PLUS || MP
|
|||
|
|
savePosterPathMp(url) {
|
|||
|
|
let that = this;
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: url,
|
|||
|
|
success: function (res) {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: '保存成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: function (res) {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: '保存失败'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
savePic(url) {
|
|||
|
|
var a = document.createElement('a'); // 生成一个a元素
|
|||
|
|
a.download = 'Gift'; // 设置图片名称
|
|||
|
|
a.style.display = 'none';
|
|||
|
|
a.href = url; // 将生成的URL设置为a.href属性
|
|||
|
|
document.body.appendChild(a); // 将a标签追加到文档对象中
|
|||
|
|
a.click(); // 触发a的单击事件
|
|||
|
|
a.remove(); // 一次性的，用完就删除a标签
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.aleart {
|
|||
|
|
width: 600rpx;
|
|||
|
|
height: 980rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
z-index: 200;
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -490rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
/* 动画设置 */
|
|||
|
|
animation: scaleUp 0.3s ease-out;
|
|||
|
|
.poster-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
}
|
|||
|
|
.from {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
.message {
|
|||
|
|
max-width: 70%;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-bottom: 42rpx;
|
|||
|
|
}
|
|||
|
|
.aleart-body {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 396rpx;
|
|||
|
|
height: 419rpx;
|
|||
|
|
background-image: url('../../static/gift-border.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
.goods-img {
|
|||
|
|
width: 360rpx;
|
|||
|
|
height: 360rpx;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
max-width: 80%;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 52rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.btn,
|
|||
|
|
.btn-clear {
|
|||
|
|
width: 396rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
color: #fff;
|
|||
|
|
background: linear-gradient(90deg, #ff7931 0%, #e93323 100%);
|
|||
|
|
}
|
|||
|
|
.btn-clear {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
color: #e93323;
|
|||
|
|
border: 1px solid #e93323;
|
|||
|
|
}
|
|||
|
|
.keep {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: rgba(255, 255, 255, 0.7);
|
|||
|
|
position: fixed;
|
|||
|
|
right: calc(50% - 130rpx);
|
|||
|
|
bottom: -45rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.close {
|
|||
|
|
font-size: 50rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
position: fixed;
|
|||
|
|
right: calc(50% - 23rpx);
|
|||
|
|
bottom: -110rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes scaleUp {
|
|||
|
|
from {
|
|||
|
|
transform: translateX(-50%) scale(0.5);
|
|||
|
|
opacity: 0; /* 可选：淡入效果 */
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: translateX(-50%) scale(1);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|