feat: 首次提交

This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions

316
pages/my/share/share.vue Normal file
View File

@ -0,0 +1,316 @@
<!--本文件由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>