166 lines
3.4 KiB
Vue
166 lines
3.4 KiB
Vue
<template>
|
|
<view v-if="posterImageStatus" class="poster-first">
|
|
<div class="posterCanvasWarp">
|
|
<canvas class="posterCanvas" canvas-id="myCanvas"></canvas>
|
|
</div>
|
|
<view class="poster-pop" v-show="canvasStatus">
|
|
<img
|
|
src="@/static/images/poster-close.png"
|
|
class="close"
|
|
@click="posterImageClose"
|
|
mode="widthFix"
|
|
/>
|
|
<image
|
|
:src="posterImage"
|
|
alt="tp"
|
|
class="poster-image"
|
|
show-menu-by-longpress
|
|
mode="widthFix"
|
|
/>
|
|
<view class="keep">长按图片可以保存到手机</view>
|
|
</view>
|
|
<view class="mask"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import html2canvas from "html2canvas";
|
|
import { PosterCanvas } from "@/utils";
|
|
import { getProductPoster } from "@/api/store";
|
|
|
|
export default {
|
|
name: "StorePoster",
|
|
props: {
|
|
posterImageStatus: Boolean,
|
|
posterData: Object,
|
|
goodId: String
|
|
},
|
|
data: function() {
|
|
return {
|
|
canvasStatus: false,
|
|
posterImage: ""
|
|
};
|
|
},
|
|
watch: {
|
|
posterImageStatus: function() {
|
|
var that = this;
|
|
if (that.posterImageStatus === true) {
|
|
that.$nextTick(function() {
|
|
that.savePosterPath();
|
|
});
|
|
}
|
|
}
|
|
},
|
|
mounted: function() {},
|
|
methods: {
|
|
posterImageClose: function() {
|
|
this.posterImageStatus = false;
|
|
this.canvasStatus = false;
|
|
this.$emit("setPosterImageStatus");
|
|
},
|
|
savePosterPath: function() {
|
|
const that = this;
|
|
|
|
uni.showLoading({ title: "海报生成中", mask: true });
|
|
getProductPoster(this.goodId)
|
|
.then(res => {
|
|
this.canvasStatus = true;
|
|
this.posterImage = res.data;
|
|
})
|
|
.finally(() => {
|
|
uni.hideLoading();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less" lang="less">
|
|
.poster-first {
|
|
overscroll-behavior: contain;
|
|
}
|
|
.poster-pop {
|
|
width: 6 * 100rpx;
|
|
height: 8 * 100rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 99;
|
|
top: 50%;
|
|
margin-top: -4.6 * 100rpx;
|
|
}
|
|
.poster-pop .canvas {
|
|
background-color: #ffffff;
|
|
height: 8 * 100rpx;
|
|
}
|
|
.poster-pop .poster-image {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.poster-pop .canvas .image {
|
|
width: 4.5 * 100rpx;
|
|
height: 4.5 * 100rpx;
|
|
display: block;
|
|
}
|
|
.poster-pop .canvas .text {
|
|
text-align: center;
|
|
color: #000000;
|
|
margin-top: 0.32 * 100rpx;
|
|
}
|
|
.poster-pop .canvas .text.black {
|
|
height: 0.68 * 100rpx;
|
|
}
|
|
.poster-pop .canvas .text.rad {
|
|
color: #ff0000;
|
|
}
|
|
.poster-pop .canvas .code {
|
|
height: 1.4 * 100rpx;
|
|
display: flex;
|
|
}
|
|
.poster-pop .canvas .code .code-img {
|
|
width: 33%;
|
|
padding: 0.06 * 100rpx;
|
|
}
|
|
.poster-pop .canvas .code .code-img image {
|
|
width: 100%;
|
|
}
|
|
.poster-pop .canvas .code .code-text {
|
|
width: 60%;
|
|
font-size: 0.12 * 100rpx;
|
|
line-height: 1.64 * 100rpx;
|
|
}
|
|
.poster-pop .close {
|
|
width: 0.46 * 100rpx;
|
|
height: 0.75 * 100rpx;
|
|
position: fixed;
|
|
right: 0;
|
|
top: -0.73 * 100rpx;
|
|
display: block;
|
|
}
|
|
.poster-pop .save-poster {
|
|
background-color: #df2d0a;
|
|
font-size: 0.22 * 100rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
height: 0.76 * 100rpx;
|
|
line-height: 0.76 * 100rpx;
|
|
width: 100%;
|
|
margin-top: -0.04 * 100rpx;
|
|
}
|
|
.poster-pop .keep {
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 0.25 * 100rpx;
|
|
margin-top: 0.1 * 100rpx;
|
|
}
|
|
.mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
z-index: 9;
|
|
}
|
|
</style>
|