316 lines
7.4 KiB
Vue
316 lines
7.4 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-wrap">
|
||
<view class="fui-bg__box">
|
||
<image src="/static/images/share/img_bg_3x.png" mode="widthFix" class="fui-share__bg"></image>
|
||
<view class="fui-logo__box">
|
||
<image class="fui-logo" src="/static/images/common/img_logo.png"></image>
|
||
<view class="fui-text">First UI组件库</view>
|
||
</view>
|
||
</view>
|
||
<view class="fui-qrcode__box">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image src="/static/images/qrcode/wx_qrcode.jpg" mode="widthFix" class="fui-qrcode"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY-->
|
||
<image src="/static/images/qrcode/ali_qrcode.png" mode="widthFix" class="fui-qrcode"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-QQ-->
|
||
<image src="/static/images/qrcode/qq_qrcode.jpg" mode="widthFix" class="fui-qrcode"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-BAIDU-->
|
||
<image src="/static/images/qrcode/baidu_qrcode.png" mode="widthFix" class="fui-qrcode"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN || MP-ALIPAY || MP-QQ || MP-BAIDU -->
|
||
<image src="/static/images/qrcode/h5_qrcode.png" mode="widthFix" class="fui-qrcode"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="fui-btn__box">
|
||
<fui-button open-type="share" @tap="share" radius="100rpx"
|
||
background="-webkit-linear-gradient(90deg, #465CFF 0%, #6831FF 100%)" :margin="['64rpx','0','32rpx']">
|
||
<view class="fui-flex__center">
|
||
<image class="fui-share__ic" src="/static/images/share/icon_share_3x.png"></image>
|
||
<text>分享好友</text>
|
||
</view>
|
||
</fui-button>
|
||
<fui-button radius="100rpx" background="#F1F4FA" color="#333333" borderColor="#465CFF"
|
||
@click="generatePoster">
|
||
<view class="fui-flex__center">
|
||
<image class="fui-share__ic" src="/static/images/share/icon_picture_3x.png"></image>
|
||
<text>生成海报</text>
|
||
</view>
|
||
</fui-button>
|
||
|
||
<!-- #ifdef MP-BAIDU-->
|
||
<fui-animation :duration="500" :animationType="['fade']" :styles="styles" :show="show" @click="handleClick">
|
||
<view class="fui-ani__box">
|
||
<image class="fui-poster__img" :src="filePath" mode="widthFix"></image>
|
||
<view class="fui-flex__center">
|
||
<fui-button type="purple" btn-size="medium" radius="100rpx" @click="saveImage">保存到相册
|
||
</fui-button>
|
||
</view>
|
||
</view>
|
||
</fui-animation>
|
||
<!-- #endif -->
|
||
|
||
</view>
|
||
<fui-poster ref="generator" :width="750" :height="1064" @ready="ready"></fui-poster>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $fui from '@/components/firstui/fui-clipboard';
|
||
export default {
|
||
data() {
|
||
return {
|
||
posterData: {
|
||
imgs: [{
|
||
imgResource: '/static/images/share/img_bg_3x.png',
|
||
x: 64,
|
||
y: 112,
|
||
width: 622,
|
||
height: 466,
|
||
zIndex: 1
|
||
}, {
|
||
imgResource: '/static/images/common/img_logo.png',
|
||
x: 329,
|
||
y: 48,
|
||
width: 92,
|
||
height: 92,
|
||
borderRadius: 24,
|
||
zIndex: 3
|
||
}, {
|
||
// #ifdef MP-WEIXIN
|
||
imgResource: '/static/images/qrcode/wx_qrcode.jpg',
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
imgResource: '/static/images/qrcode/ali_qrcode.png',
|
||
// #endif
|
||
// #ifdef MP-QQ
|
||
imgResource: '/static/images/qrcode/qq_qrcode.jpg',
|
||
// #endif
|
||
// #ifdef MP-BAIDU
|
||
imgResource: '/static/images/qrcode/baidu_qrcode.png',
|
||
// #endif
|
||
// #ifndef MP-WEIXIN || MP-ALIPAY || MP-QQ || MP-BAIDU
|
||
imgResource: '/static/images/qrcode/h5_qrcode.png',
|
||
// #endif
|
||
x: 175,
|
||
y: 546,
|
||
width: 400,
|
||
height: 400,
|
||
zIndex: 3
|
||
}],
|
||
blocks: [{
|
||
width: 750,
|
||
height: 1064,
|
||
x: 0,
|
||
y: 0,
|
||
backgroundColor: '#F1F4FA'
|
||
}, {
|
||
width: 512,
|
||
height: 512,
|
||
x: 119,
|
||
y: 490,
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 48,
|
||
shadow: {
|
||
offsetX: 0,
|
||
offsetY: 20,
|
||
blur: 50,
|
||
color: 'rgba(9, 41, 134, 0.12)'
|
||
},
|
||
zIndex: 2
|
||
}],
|
||
texts: [{
|
||
text: 'First UI组件库',
|
||
x: 375,
|
||
y: 184,
|
||
fontSize: 28,
|
||
color: '#181818',
|
||
width: 184,
|
||
fontWeight: 'bold',
|
||
textAlign: 'center',
|
||
zIndex: 3
|
||
}]
|
||
},
|
||
isReady: false,
|
||
//海报绘制完成保存路径，避免重复绘制
|
||
filePath: '',
|
||
show: false,
|
||
styles: {
|
||
position: 'fixed',
|
||
bottom: 0,
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
display: 'flex',
|
||
'justify-content': 'center',
|
||
'align-items': 'center',
|
||
backgroundColor: 'rgba(0,0,0,0.6)'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
ready() {
|
||
this.isReady = true
|
||
},
|
||
previewImage() {
|
||
// #ifndef MP-BAIDU
|
||
uni.previewImage({
|
||
// #ifdef MP-ALIPAY
|
||
enablesavephoto: true,
|
||
enableShowPhotoDownload: true,
|
||
// #endif
|
||
urls: [this.filePath]
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef MP-BAIDU
|
||
setTimeout(() => {
|
||
this.show = true
|
||
}, 50)
|
||
// #endif
|
||
},
|
||
generatePoster() {
|
||
if (this.isReady) {
|
||
//已经绘制直接使用，避免重复绘制
|
||
if (this.filePath) {
|
||
this.previewImage()
|
||
} else {
|
||
uni.showLoading({
|
||
title: '正在生成...'
|
||
})
|
||
//绘制海报
|
||
this.$refs.generator.generatePoster(this.posterData, (res) => {
|
||
//海报图片res
|
||
console.log(res)
|
||
this.filePath = res;
|
||
this.previewImage()
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
} else {
|
||
this.fui.toast('组件尚未初始化完成！')
|
||
}
|
||
},
|
||
saveImage() {
|
||
//百度小程序
|
||
this.$refs.generator.saveImage(this.filePath)
|
||
},
|
||
handleClick() {
|
||
//百度小程序
|
||
this.show = false;
|
||
},
|
||
share(e) {
|
||
//#ifdef APP-PLUS
|
||
plus.share.sendWithSystem({
|
||
content: 'First UI组件库',
|
||
href: 'https://firstui.cn/',
|
||
pictures: ['/static/images/common/logo.png']
|
||
},
|
||
function() {
|
||
console.log('分享成功');
|
||
},
|
||
function(e) {
|
||
console.log('分享失败：' + JSON.stringify(e));
|
||
}
|
||
);
|
||
//#endif
|
||
// #ifdef H5
|
||
const text = 'First UI组件库，官网链接：https://firstui.cn/'
|
||
$fui.getClipboardData(text, res => {
|
||
this.fui.toast('链接复制成功，快去分享吧~');
|
||
}, e);
|
||
// #endif
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: 'First UI组件库'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.fui-wrap {
|
||
width: 100%;
|
||
padding: 0 64rpx 64rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.fui-bg__box {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.fui-share__bg {
|
||
width: 100%;
|
||
height: 466rpx;
|
||
display: block;
|
||
margin-top: 112rpx;
|
||
}
|
||
|
||
.fui-logo__box {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 48rpx;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.fui-logo {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.fui-text {
|
||
font-size: 28rpx;
|
||
padding-top: 16rpx;
|
||
}
|
||
|
||
.fui-qrcode__box {
|
||
width: 512rpx;
|
||
height: 512rpx;
|
||
padding: 56rpx;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 20rpx 20rpx 0 rgba(9, 41, 134, 0.12);
|
||
border-radius: 48rpx;
|
||
margin: -88rpx auto 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.fui-qrcode {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
}
|
||
|
||
.fui-btn__box {
|
||
width: 100%;
|
||
}
|
||
|
||
.fui-share__ic {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.fui-ani__box {
|
||
width: 600rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.fui-poster__img {
|
||
width: 100%;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 30rpx;
|
||
display: block;
|
||
}
|
||
</style> |