初始化代码
This commit is contained in:
253
uniapp/uni-app/mine/pages/distribution/poster.vue
Normal file
253
uniapp/uni-app/mine/pages/distribution/poster.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<view class="mine-distribution-poster">
|
||||
<view class="hideCanvasView">
|
||||
<l-painter class="hideCanvas" ref="painter" />
|
||||
</view>
|
||||
<block v-if="src">
|
||||
<view class="space-md fill-body"></view>
|
||||
<image :src="src" class="code-img" @tap="previewImage"></image>
|
||||
<view class="space-md fill-body"></view>
|
||||
<view class="pd-lg">
|
||||
<!-- #ifdef H5 -->
|
||||
<button class="save-btn flex-center radius" :style="{background:primaryColor}"
|
||||
@tap="previewImage">长按上图保存图片</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="save-btn flex-center radius" :style="{background:primaryColor}"
|
||||
@tap="saveImage">保存图片至相册</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<button class="save-btn flex-center radius" :style="{background:primaryColor}"
|
||||
@tap="toAppShare">分享专属海报</button>
|
||||
<!-- #endif -->
|
||||
<view class="text f-desc mt-lg" :style="{color:primaryColor}">
|
||||
<view class="flex-y-center">
|
||||
<view class="radius mr-sm" :style="{background:primaryColor}"></view>好友下载app并使用你的邀请码注册成功后
|
||||
</view>
|
||||
<view class="flex-y-center">
|
||||
<view class="radius mr-sm" :style="{background:primaryColor}"></view>TA将成为你的粉丝，粉丝下单，你也可以获得收益哟!
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from 'vuex';
|
||||
import siteInfo from '@/siteinfo.js';
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: '',
|
||||
options: '',
|
||||
poster: {}
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
async onLoad(options) {
|
||||
this.$util.setNavigationBarColor({
|
||||
color: '#000000',
|
||||
bg: '#ffffff'
|
||||
})
|
||||
this.widget = this.$refs.canvas
|
||||
this.$util.showLoading()
|
||||
let that = this
|
||||
setTimeout(() => {
|
||||
that.canvase()
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['user/report']),
|
||||
async canvase() {
|
||||
let that = this
|
||||
let qr_code = await this.$api.mine.getAppDownloadQr()
|
||||
let cover = 'https://lbqny.migugu.com/admin/farm/share.png'
|
||||
let {
|
||||
primaryColor
|
||||
} = this
|
||||
|
||||
let {
|
||||
fx_code,
|
||||
avatarUrl
|
||||
} = this.$util.getPage(-1).detail
|
||||
|
||||
let poster = {
|
||||
css: {
|
||||
width: '750rpx',
|
||||
height: '1156rpx',
|
||||
},
|
||||
views: [{
|
||||
type: 'image',
|
||||
src: cover,
|
||||
css: {
|
||||
width: '750rpx',
|
||||
height: '1156rpx',
|
||||
top: '0rpx',
|
||||
left: '0rpx',
|
||||
position: 'absolute'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: avatarUrl,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
baclground: '#fff',
|
||||
width: '82rpx',
|
||||
height: '82rpx',
|
||||
top: '407rpx',
|
||||
left: '333rpx',
|
||||
border: '1rpx solid #fff',
|
||||
borderRadius: '50%'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: `邀请码`,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
width: '137rpx',
|
||||
height: '30rpx',
|
||||
top: '658rpx',
|
||||
left: '304rpx',
|
||||
textAlign: 'center',
|
||||
fontSize: '26rpx',
|
||||
color: primaryColor
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: fx_code,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
width: '137rpx',
|
||||
height: '30rpx',
|
||||
top: '696rpx',
|
||||
left: '304rpx',
|
||||
textAlign: 'center',
|
||||
fontSize: '26rpx',
|
||||
textWeight: 'bold',
|
||||
color: primaryColor
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: qr_code,
|
||||
css: {
|
||||
position: 'absolute',
|
||||
baclground: '#fff',
|
||||
width: '148rpx',
|
||||
height: '148rpx',
|
||||
top: '505rpx',
|
||||
left: '304rpx',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 渲染
|
||||
this.$refs.painter.render(poster);
|
||||
// 生成图片
|
||||
this.$refs.painter.canvasToTempFilePathSync({
|
||||
fileType: "jpg",
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
that.$util.hideAll()
|
||||
this.src = res.tempFilePath
|
||||
console.log(res.tempFilePath);
|
||||
},
|
||||
});
|
||||
},
|
||||
previewImage() {
|
||||
let finalPath = this.src;
|
||||
uni.previewImage({
|
||||
current: finalPath,
|
||||
urls: [finalPath]
|
||||
})
|
||||
},
|
||||
async saveImage() {
|
||||
await this.$util.checkAuth({
|
||||
type: "writePhotosAlbum"
|
||||
});
|
||||
let filePath = this.src;
|
||||
let [err, success] = await uni.saveImageToPhotosAlbum({
|
||||
filePath
|
||||
})
|
||||
if (err) return;
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '保存成功'
|
||||
})
|
||||
},
|
||||
toAppShare() {
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 0,
|
||||
href: "",
|
||||
title: "用心分享邀粉丝",
|
||||
summary: "月入过万 收益多",
|
||||
imageUrl: this.src,
|
||||
success: function(res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.mine-distribution-poster {
|
||||
|
||||
.code-img {
|
||||
width: 750rpx;
|
||||
height: 1156rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 690rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text {
|
||||
.radius {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hideCanvasView {
|
||||
position: relative;
|
||||
|
||||
.hideCanvas {
|
||||
position: absolute;
|
||||
left: -9999rpx;
|
||||
top: -9999rpx
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user