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
Unified 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"> <view class="poster-pop" v-show="canvasStatus">
<img :src="`${$VUE_APP_RESOURCES_URL}/images/poster-close.png`" class="close" @click="posterImageClose" mode="widthFix" /> <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" /> <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>
<view class="mask"></view> <view class="mask"></view>
</view> </view>
</template> </template>
<script> <script>
// import html2canvas from "html2canvas"; // import html2canvas from "html2canvas";
import { import { PosterCanvas } from '@/utils'
PosterCanvas import { getProductPoster } from '@/api/store'
} from "@/utils";
import { export default {
getProductPoster name: 'StorePoster',
} from "@/api/store"; props: {
posterImageStatus: Boolean,
export default { posterData: Object,
name: "StorePoster", goodId: String,
props: { },
posterImageStatus: Boolean, data: function() {
posterData: Object, return {
goodId: String canvasStatus: false,
posterImage: '',
}
},
watch: {
posterImageStatus: function() {
var that = this
if (that.posterImageStatus === true) {
that.$nextTick(function() {
that.savePosterPath()
})
}
}, },
data: function () { },
return { mounted: function() {},
canvasStatus: false, methods: {
posterImage: "" posterImageClose: function() {
}; this.posterImageStatus = false
this.canvasStatus = false
this.$emit('setPosterImageStatus')
}, },
watch: { saveImg: function() {
posterImageStatus: function () { this.downloadFile(this.posterImage)
var that = this;
if (that.posterImageStatus === true) {
that.$nextTick(function () {
that.savePosterPath();
});
}
}
}, },
mounted: function () {}, downloadFile(url) {
methods: { uni.downloadFile({
posterImageClose: function () { url,
this.posterImageStatus = false; fail: function(res) {
this.canvasStatus = false; console.log(res)
this.$emit("setPosterImageStatus");
}, uni.showModal({
savePosterPath: function () { title: '提示',
const that = this; content: '保存失败',
uni.showLoading({
title: "海报生成中",
mask: true
});
getProductPoster(this.goodId, {
from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType
}) })
.then(res => { },
this.canvasStatus = true; success: function(res) {
this.posterImage = res.data; console.log(res)
uni.showModal({
title: '提示',
content: '保存成功',
}) })
.finally(() => { },
uni.hideLoading(); })
}); },
// return; savePosterPath: function() {
// //清空图片重新生成 const that = this
// that.posterImage = "";
// uni.showLoading({ title: "海报生成中", mask: true }); uni.showLoading({
// console.log(this); title: '海报生成中',
// var prodId = that.$yrouter.currentRoute.query.id; mask: true,
// uni.downloadFile({ })
// url: getProductPoster(this.goodId, {
// this.$VUE_APP_API_URL + from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType,
// "/shareImg/" + })
// prodId + .then(res => {
// "?shareImgName=" + this.canvasStatus = true
// this.posterData.code, this.posterImage = res.data
// fail: function(res) {}, })
// success: function(res) { .finally(() => {
// that.canvasStatus = true; uni.hideLoading()
// that.posterImage = res.tempFilePath; })
// 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> </script>
<style scoped lang="less" lang="less"> <style scoped lang="less" lang="less">
.poster-first { .poster-first {
overscroll-behavior: contain; overscroll-behavior: contain;
} }
.poster-pop { .poster-pop {
width: 4.5 * 100rpx; width: 4.5 * 100rpx;
height: 8 * 100rpx; height: 8 * 100rpx;
position: fixed; position: fixed;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 99; z-index: 99;
top: 50%; top: 50%;
margin-top: -4.6 * 100rpx; margin-top: -4.6 * 100rpx;
} }
.poster-pop .canvas { .poster-pop .canvas {
background-color: #ffffff; background-color: #ffffff;
height: 8 * 100rpx; height: 8 * 100rpx;
} }
.poster-pop .poster-image { .poster-pop .poster-image {
width: 100%; width: 100%;
height: auto; height: auto;
} }
.poster-pop .canvas .image { .poster-pop .canvas .image {
width: 4.5 * 100rpx; width: 4.5 * 100rpx;
height: 4.5 * 100rpx; height: 4.5 * 100rpx;
display: block; display: block;
} }
.poster-pop .canvas .text { .poster-pop .canvas .text {
text-align: center; text-align: center;
color: #000000; color: #000000;
margin-top: 0.32 * 100rpx; margin-top: 0.32 * 100rpx;
} }
.poster-pop .canvas .text.black { .poster-pop .canvas .text.black {
height: 0.68 * 100rpx; height: 0.68 * 100rpx;
} }
.poster-pop .canvas .text.rad { .poster-pop .canvas .text.rad {
color: #ff0000; color: #ff0000;
} }
.poster-pop .canvas .code { .poster-pop .canvas .code {
height: 1.4 * 100rpx; height: 1.4 * 100rpx;
display: flex; display: flex;
} }
.poster-pop .canvas .code .code-img { .poster-pop .canvas .code .code-img {
width: 33%; width: 33%;
padding: 0.06 * 100rpx; padding: 0.06 * 100rpx;
} }
.poster-pop .canvas .code .code-img image { .poster-pop .canvas .code .code-img image {
width: 100%; width: 100%;
} }
.poster-pop .canvas .code .code-text { .poster-pop .canvas .code .code-text {
width: 60%; width: 60%;
font-size: 0.12 * 100rpx; font-size: 0.12 * 100rpx;
line-height: 1.64 * 100rpx; line-height: 1.64 * 100rpx;
} }
.poster-pop .close { .poster-pop .close {
width: 0.46 * 100rpx; width: 0.46 * 100rpx;
height: 0.75 * 100rpx; height: 0.75 * 100rpx;
position: fixed; position: fixed;
right: 0; right: 0;
top: -0.73 * 100rpx; top: -0.73 * 100rpx;
display: block; display: block;
} }
.poster-pop .save-poster { .poster-pop .save-poster {
background-color: #df2d0a; background-color: #df2d0a;
font-size: 0.22 * 100rpx; font-size: 0.22 * 100rpx;
color: #fff; color: #fff;
text-align: center; text-align: center;
height: 0.76 * 100rpx; height: 0.76 * 100rpx;
line-height: 0.76 * 100rpx; line-height: 0.76 * 100rpx;
width: 100%; width: 100%;
margin-top: -0.04 * 100rpx; margin-top: -0.1 * 100rpx;
} border-radius: 0 0 10rpx 10rpx;
}
.poster-pop .keep {
color: #fff; .poster-pop .keep {
text-align: center; color: #fff;
font-size: 0.25 * 100rpx; text-align: center;
margin-top: 0.1 * 100rpx; font-size: 0.25 * 100rpx;
} margin-top: 0.1 * 100rpx;
}
.mask {
position: fixed; .mask {
top: 0; position: fixed;
left: 0; top: 0;
right: 0; left: 0;
bottom: 0; right: 0;
background-color: rgba(0, 0, 0, 0.6); bottom: 0;
z-index: 9; background-color: rgba(0, 0, 0, 0.6);
} z-index: 9;
}
</style> </style>

Write Preview
Loading…
Cancel
Save