You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
zhishifufei_uniapp/pages/spread/poster_special.vue

121 lines
2.4 KiB

10 months ago
<template>
<BaseContainer>
<NavBar title="推广海报" />
<TkiQrcode
loadMake
v-if="isQrcodeCanvasVisable"
ref="qrcode"
:showLoading="false"
:val="qrcodeText"
@result="handleQrcodeCreateSuccess"
/>
<canvas
canvas-id="poster"
v-if="isPosterCanvasVisable"
class="poster-canvas"
/>
<template v-if="filename">
<image
mode="widthFix"
@longpress="handleLonePress"
class="poster-img"
:src="filename"
/>
<view class="poster-tips">长按图片保存至手机</view>
</template>
</BaseContainer>
</template>
<script>
import { getPosterSpecial } from "@/api/spread";
import posterMixin from "@/mixins/poster";
import userInfoMixin from "@/mixins/userInfo";
export default {
mixins: [posterMixin, userInfoMixin],
data() {
return {
special_id: 0,
url: "",
poster_image: "",
site_name: "",
};
},
computed: {
shareQrcodeData() {
return {
spread_uid: this.userInfo?.uid,
special_id: this.special_id,
};
},
},
onLoad(options) {
const { special_id ,is_light } = this.$util.mergeLaunchParams(options);
this.is_preview = false;
this.special_id = special_id;
this.getPosterInfo().then(() => {
this.createSharePoster("special", {
id: this.special_id,
spread_uid: this.userInfo?.uid,
url: is_light ==0 ?'pages/special/details' :'pages/special/single_details'
});
});
},
methods: {
handleLonePress() {
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: this.filename,
success: () => {
this.$util.showMsg("保存成功");
},
fail: (err) => {
this.$util.showMsg(err.msg);
},
});
// #endif
},
async getPosterInfo() {
try {
const { data } = await getPosterSpecial(this.special_id);
const { url, poster_image, site_name } = data;
Object.assign(this, {
url,
poster_image,
site_name,
});
} catch (err) {
this.$util.showMsg(err);
}
},
},
};
</script>
<style scoped lang="scss">
.poster-canvas {
width: 600px;
height: 960px;
}
page {
background-color: #666;
}
.poster-img {
width: 80%;
margin: 70rpx auto;
display: block;
}
.poster-tips {
font-size: 24rpx;
text-align: center;
color: #cecece;
}
</style>