148 lines
3.1 KiB
Vue
148 lines
3.1 KiB
Vue
<template>
|
|
<view v-if="posterImageStatus" class="poster-first">
|
|
<view class="poster-pop">
|
|
<img
|
|
src="@/static/images/poster-close.png"
|
|
mode="widthFix"
|
|
class="close"
|
|
@click="posterImageClose"
|
|
/>
|
|
<image
|
|
:src="posterImage"
|
|
alt="tp"
|
|
class="poster-image"
|
|
:show-menu-by-longpress="false"
|
|
mode="widthFix"
|
|
/>
|
|
<view class="v12-white-text v12-radius-20 share-btn" @click="saveImg(posterImage)">保存图片</view>
|
|
</view>
|
|
<view class="mask"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getShareImg } from "@/api/product";
|
|
|
|
export default {
|
|
name: "LandMarkShareImg",
|
|
data: function () {
|
|
return {
|
|
posterImage: "",
|
|
posterImageStatus: false,
|
|
};
|
|
},
|
|
methods: {
|
|
saveImg(url) {
|
|
uni.showLoading({
|
|
mask:true,
|
|
})
|
|
uni.downloadFile({
|
|
url: url, // 文件的下载地址
|
|
success(res) {
|
|
if (res.statusCode === 200) {
|
|
let tempFilePath = res.tempFilePath; // 临时文件路径
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success:(success)=> {
|
|
uni.showToast({
|
|
title: "保存成功",
|
|
icon: "none",
|
|
mask: true,
|
|
});
|
|
},
|
|
fail(err) {
|
|
uni.showToast({
|
|
title: "保存失败，请重新尝试",
|
|
icon: "none",
|
|
mask: true,
|
|
});
|
|
},
|
|
})
|
|
}
|
|
},
|
|
});
|
|
},
|
|
posterImageClose() {
|
|
this.posterImageStatus = false;
|
|
this.$emit("setPosterImageStatus");
|
|
},
|
|
savePosterPath(id) {
|
|
uni.showLoading({ title: "海报生成中", mask: true });
|
|
|
|
getShareImg(id)
|
|
.then((res) => {
|
|
this.posterImage = res.data;
|
|
this.posterImageStatus = true;
|
|
})
|
|
.finally(() => {
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less" lang="less">
|
|
.share-btn{
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
background: #ff564a;
|
|
}
|
|
.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;
|
|
border-radius: 20rpx;
|
|
}
|
|
.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>
|