191 lines
4.2 KiB
Vue
191 lines
4.2 KiB
Vue
<template>
|
|
<view class="pt-md" style="background-color: #F4F6F7">
|
|
<view class="hideCanvasView">
|
|
<l-painter class="hideCanvas" ref="painter" useCORS />
|
|
</view>
|
|
<view class="ml-md" v-if="src">
|
|
<image :src="src" class="code-img radius-16" @tap="previewImage"></image>
|
|
<view class="info_text fill-base flex-column mt-sm radius-16">
|
|
<view class="f-paragraph mt-sm mb-md" style="color:#2F2F2F">
|
|
邀请3步
|
|
</view>
|
|
<view class="flex-between f-paragraph" style="color:#767676">
|
|
<view class="flex-y-center">
|
|
1.分享海报
|
|
</view>
|
|
<image mode="aspectFill" class="info_text_img"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/btn.png"></image>
|
|
<view class="flex-y-center">
|
|
2.微信扫码
|
|
</view>
|
|
<image mode="aspectFill" class="info_text_img"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/btn.png"></image>
|
|
<view class="flex-y-center">
|
|
3.注册登录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="space-max-footer"></view>
|
|
<fix-bottom-button @confirm="toPreviewSave" :text="[{text: confirmText,type:'confirm'}]" bgColor="#fff"
|
|
:classType="2">
|
|
</fix-bottom-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions
|
|
} from 'vuex';
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
// #ifdef H5
|
|
confirmText: '长按上图保存图片',
|
|
// #endif
|
|
// #ifndef H5
|
|
confirmText: '保存图片至相册',
|
|
// #endif
|
|
src: ''
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
configInfo: state => state.config.configInfo,
|
|
userInfo: state => state.user.userInfo,
|
|
}),
|
|
async onLoad(options) {
|
|
// #ifdef H5
|
|
if (this.$jweixin.isWechat()) {
|
|
await this.$jweixin.initJssdk();
|
|
this.$jweixin.wxReady(() => {
|
|
this.$jweixin.hideOptionMenu()
|
|
})
|
|
}
|
|
// #endif
|
|
this.$util.showLoading()
|
|
await this.getConfigInfo()
|
|
this.$util.setNavigationBarColor({
|
|
bg: this.primaryColor
|
|
})
|
|
let that = this
|
|
setTimeout(() => {
|
|
that.canvase()
|
|
}, 1000)
|
|
},
|
|
methods: {
|
|
...mapActions(['getConfigInfo']),
|
|
async canvase() {
|
|
let that = this
|
|
let qr_code = await this.$api.mine.userCommQr({admin_id:that.userInfo.id})
|
|
let {
|
|
promotion_poster_img = ''
|
|
} = this.configInfo
|
|
let cover = promotion_poster_img || 'https://lbqny.migugu.com/admin/anmo/mine/fx-share.png'
|
|
let qr_radius = '0rpx'
|
|
// #ifdef MP-WEIXIN
|
|
qr_radius = '145rpx'
|
|
// #endif
|
|
|
|
console.log('-------',qr_code)
|
|
console.log('-------',cover)
|
|
|
|
let poster = {
|
|
css: {
|
|
width: '710rpx',
|
|
height: '1152rpx',
|
|
},
|
|
views: [{
|
|
type: 'image',
|
|
src: cover,
|
|
css: {
|
|
width: '710rpx',
|
|
height: '1152rpx',
|
|
objectFit: "cover",
|
|
top: '0rpx',
|
|
left: '0rpx',
|
|
position: 'absolute'
|
|
}
|
|
},
|
|
{
|
|
type: 'image',
|
|
src: qr_code,
|
|
css: {
|
|
position: 'absolute',
|
|
width: '290rpx',
|
|
height: '290rpx',
|
|
bottom: '70rpx',
|
|
left: '210rpx',
|
|
background: '#ffffff',
|
|
borderRadius: qr_radius
|
|
}
|
|
}
|
|
]
|
|
}
|
|
// 渲染
|
|
this.$refs.painter.render(poster);
|
|
// 生成图片
|
|
this.$refs.painter.canvasToTempFilePathSync({
|
|
fileType: "jpg",
|
|
quality: 1,
|
|
success: (res) => {
|
|
that.$util.hideAll()
|
|
this.src = 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: '保存成功'
|
|
})
|
|
},
|
|
toPreviewSave() {
|
|
// #ifdef H5
|
|
this.previewImage()
|
|
// #endif
|
|
// #ifndef H5
|
|
this.saveImage()
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.info_text {
|
|
width: 710rpx;
|
|
padding: 20rpx 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.info_text_img {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.code-img {
|
|
width: 710rpx;
|
|
height: 1152rpx;
|
|
}
|
|
</style> |