uniapp后端合成分享海报

选择海报组件 share.vue

<template>
	<view class=''>
		<u-popup class="popup flex flex-column" height="790" v-model="isshow" mode="bottom" @close="close">
			<!-- 分享按钮 -->
			<view class="bg-white  fixed-bottom">
				<view class="center bb" style="height: 88rpx;">选择海报</view>
				<swiper class="swiper  u-p-t-20 u-p-l-50 u-p-r-50" :indicator-dots="false" :display-multiple-items="2">
					<!-- :style="{backgroundImage:'url('+item.img+')'}" -->
					<swiper-item class="item text-center relative" v-for="(item,i) in list" :key="i" @click="getPoster(i)">
						<image :src="item.img" mode=""></image>
						<image class="absolute radio" v-if="i==current" src="../static/share-active.png" mode=""></image>
						<image class="absolute radio" v-else src="../static/share-no-active.png" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="flex1 u-p-30 bt u-m-t-20">
					<view class="u-flex-1 text-center" @click="toWx(1)">
						<image class="icon-img" src="../static/vx-icon.png" mode=""></image>
						<view class="gray-1 u-font-24">微信好友</view>
					</view>
					<view class="u-flex-1 text-center" @click="toWx(2)">
						<image class="icon-img" src="../static/moments-icon.png" mode=""></image>
						<view class="gray-1 u-font-24">微信朋友圈</view>
					</view>
					<view class="u-flex-1 text-center" @click="toSave()">
						<image class="icon-img" src="../static/share-save.png" mode=""></image>
						<view class="gray-1 u-font-24">保存图片</view>
					</view>
					<view class="u-flex-1 text-center" @click="toCopy()">
						<image class="icon-img" src="../static/link-icon.png" mode=""></image>
						<view class="gray-1 u-font-24">复制链接</view>
					</view>
				</view>
				<view class="center bt blue" style="height: 88rpx;" @click="close">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			isshow: {
				type: Boolean,
				value: false
			},
			code: {
				type: String,
				value: ''
			}
		},
		data() {
			return {
				current: 0,
				list: [{
						img: '../../static/share-1-zh.png'
					},
					{
						img: '../../static/share-2-zh.png'
					},
					{
						img: '../../static/share-3-zh.png'
					}
				],
				img: '', //合成的海报
			}
		},
		mounted() {

		},
		onUnload() {
			uni.hideLoading()
		},
		onShow() {
			if(this.$i18n.locale == "zh"){
				this.list[0].img = '../../static/share-1-zh.png'
				this.list[1].img = '../../static/share-2-zh.png'
				this.list[2].img = '../../static/share-3-zh.png'
			}else if(this.$i18n.locale == "hk"){
				this.list[0].img = '../../static/share-1-hk.png'
				this.list[1].img = '../../static/share-2-hk.png'
				this.list[2].img = '../../static/share-3-hk.png'
			}else{
				this.list[0].img = '../../static/share-1-en.png'
				this.list[1].img = '../../static/share-2-en.png'
				this.list[2].img = '../../static/share-3-en.png'
			}
		},
		methods: {
			getPoster(i) {
				this.current = i
			},
			close() {
				this.$emit('close')
			},
			toWx(type) {
				uni.showLoading({
					title: this.$t('share.toast3')
				})
				this.$http('/api/share_url', {
					type: this.current + 1
				}).then(data => {
					console.log(data)
					this.img = data
					uni.share({
						provider: "weixin",
						scene: type == 1 ? "WXSceneSession" : "WXSenceTimeline",
						type: 2,
						imageUrl: this.img,
						success: function(res) {
							uni.hideLoading()
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							uni.hideLoading()
							console.log("fail111:" + JSON.stringify(err));
						}
					});
				})
			},
			toSave() { //type: this.current + 1
				let _this = this
				this.$http('/api/share_url').then(data => {
					this.img = data
					uni.downloadFile({
						url: _this.img, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								_this.save(res.tempFilePath)
							}
						}
					});
				})
			},
			save(file) {
				uni.saveImageToPhotosAlbum({
					filePath: file,
					success: () => {
						uni.showToast({
							title: this.$t('share.toast1')
						})
					},
					fail: () => {
						uni.showToast({
							title: this.$t('share.toast2')
						})
					},
				});
			},
			toCopy() {
				uni.setClipboardData({
					data: "http://teex.xjdm88.com/webTeex/?invite=" + this.code,
					success: function() {
						uni.getClipboardData({
							success: function(res) {

							}
						});
					}
				});
			}
		},
	}
</script>

<style scoped lang='scss'>
	.popup {
		background-color: rgba(0, 0, 0, .1);
	}

	/* /deep/ .u-drawer-bottom {
		background-color: transparent !important;
	} */


	uni-swiper {
		height: 400rpx;

		image {
			height: 100%;
			width: 250rpx;
			border-radius: 10rpx;
		}
	}

	.item {
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: relative;

		.radio {
			width: 40rpx;
			height: 40rpx;
			bottom: 10rpx;
			right: 50rpx;
		}
	}

	.code-con {
		position: absolute;
		left: 50%;
		top: 64%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		height: 380rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		margin: 500rpx auto 0;
		text-align: center;
		padding: 50rpx;
	}

	.icon-img {
		width: 70rpx;
		height: 70rpx;
	}
</style>

页面中应用

// 全局注册
import share from "./components/share.vue";
Vue.component('share', share)
<!-- 分享 -->
 <share :isshow="showShare" :code="userInfo.invite_code" @close="closeShare"></share>