支付增加订阅功能,增加海报生成传递from类型
This commit is contained in:
Gao xiaosong
@ -29,19 +29,8 @@
|
||||
<view class="save-poster" @click="savePosterPath">生成图片</view>
|
||||
</view>-->
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
@ -49,163 +38,187 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import html2canvas from "html2canvas";
|
||||
import { PosterCanvas } from "@/utils";
|
||||
import { getProductPoster } from "@/api/store";
|
||||
// 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();
|
||||
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, {
|
||||
from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType
|
||||
})
|
||||
.then(res => {
|
||||
this.canvasStatus = true;
|
||||
this.posterImage = res.data;
|
||||
})
|
||||
.finally(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
// return;
|
||||
// //清空图片重新生成
|
||||
// that.posterImage = "";
|
||||
// uni.showLoading({ title: "海报生成中", mask: true });
|
||||
// console.log(this);
|
||||
// var prodId = that.$yrouter.currentRoute.query.id;
|
||||
// uni.downloadFile({
|
||||
// url:
|
||||
// this.$VUE_APP_API_URL +
|
||||
// "/shareImg/" +
|
||||
// prodId +
|
||||
// "?shareImgName=" +
|
||||
// this.posterData.code,
|
||||
// fail: function(res) {},
|
||||
// success: function(res) {
|
||||
// console.log(res);
|
||||
// that.canvasStatus = true;
|
||||
// that.posterImage = res.tempFilePath;
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
},
|
||||
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();
|
||||
});
|
||||
// return;
|
||||
// //清空图片重新生成
|
||||
// that.posterImage = "";
|
||||
// uni.showLoading({ title: "海报生成中", mask: true });
|
||||
// console.log(this);
|
||||
// var prodId = that.$yrouter.currentRoute.query.id;
|
||||
// uni.downloadFile({
|
||||
// url:
|
||||
// this.$VUE_APP_API_URL +
|
||||
// "/shareImg/" +
|
||||
// prodId +
|
||||
// "?shareImgName=" +
|
||||
// this.posterData.code,
|
||||
// fail: function(res) {},
|
||||
// success: function(res) {
|
||||
// console.log(res);
|
||||
// that.canvasStatus = true;
|
||||
// that.posterImage = res.tempFilePath;
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less" lang="less">
|
||||
.poster-first {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
.poster-pop {
|
||||
width: 4.5 * 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;
|
||||
}
|
||||
.poster-first {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.poster-pop {
|
||||
width: 4.5 * 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>
|
||||
|
||||
Reference in New Issue
Block a user