Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

单用户版海报问题

zyh
Gao xiaosong 4 years ago
parent
62c02d00c8
commit
c4a848b2e3
1 changed files with 195 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 370
      components/StorePoster.vue

370
components/StorePoster.vue
Unescape View File

@ -31,193 +31,213 @@
<view class="poster-pop" v-show="canvasStatus">
<img :src="`${$VUE_APP_RESOURCES_URL}/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 class="save-poster" @click="saveImg">保存海报</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
// 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()
})
}
},
data: function () {
return {
canvasStatus: false,
posterImage: ""
};
},
mounted: function() {},
methods: {
posterImageClose: function() {
this.posterImageStatus = false
this.canvasStatus = false
this.$emit('setPosterImageStatus')
},
watch: {
posterImageStatus: function () {
var that = this;
if (that.posterImageStatus === true) {
that.$nextTick(function () {
that.savePosterPath();
});
}
}
saveImg: function() {
this.downloadFile(this.posterImage)
},
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
downloadFile(url) {
uni.downloadFile({
url,
fail: function(res) {
console.log(res)
uni.showModal({
title: '提示',
content: '保存失败',
})
.then(res => {
this.canvasStatus = true;
this.posterImage = res.data;
},
success: function(res) {
console.log(res)
uni.showModal({
title: '提示',
content: '保存成功',
})
.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) {
// that.canvasStatus = true;
// that.posterImage = res.tempFilePath;
// uni.hideLoading();
// }
// });
}
}
};
},
})
},
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) {
// 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.1 * 100rpx;
border-radius: 0 0 10rpx 10rpx;
}
.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>

Write Preview
Loading…
Cancel
Save