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.
115 lines
2.1 KiB
115 lines
2.1 KiB
<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 { getPosterSpread } 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
|
|
};
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.is_preview = false;
|
|
this.getPosterInfo().then(() => {
|
|
this.createSharePoster();
|
|
});
|
|
},
|
|
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 getPosterSpread();
|
|
const { url, spread_poster_url: poster_image, site_name } = data;
|
|
Object.assign(this, {
|
|
url,
|
|
poster_image,
|
|
site_name,
|
|
});
|
|
} catch (err) {
|
|
this.$util.showMsg(err);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #666;
|
|
}
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
.poster-canvas {
|
|
margin-top: 200vh;
|
|
width: 600px;
|
|
height: 960px;
|
|
}
|
|
|
|
.poster-img {
|
|
width: 80%;
|
|
margin: 70rpx auto;
|
|
display: block;
|
|
}
|
|
|
|
.poster-tips {
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
color: #cecece;
|
|
}
|
|
</style>
|
|
|