recycapp/pages/poster/sharePoster.vue

<template>
	<view style="height:100vh;">
		<view class="wanl-share" style="padding-top: 0px;background:#F5F5FA">
			<view class="wanl-poster__poster" v-if="posterShow">
				<wanlPoster
					ref="wanlPoster"
					:img="image"
					:title="shareTitle" 
					:price="price" 
					:marketPrice="marketPrice"
					:page="page"
					:scene="scene"
					@success="posterSuccess"
					@close="closeShare"
				/>
			</view>
			<view class="flex-center">
				<view class="footBox flex-center" @click="toSave">
					<image class="imgIcon" :src="path+'/assets/img/icon/downLoad.png'" mode="widthFix"></image>
					<text>保存图片</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * WanlShare 分享 
	 * @description 分享组件 深圳前海万联科技有限公司 https://www.wanlshop.com（除万联官方内嵌系统，未经授权严禁使用）
	 * @著作权：WanlShop 登记号：2020SR0255711 版本：V1.0.0
	 * @property {Number} scrollAnimation 滚动位置
	 * @property {Number} shareType 分享类型 0.图文 1.纯文字 2.纯图片 5.小程序
	 * @property {String} shareTitle 分享标题
	 * @property {String} shareText 分享详情
	 * @property {String} image 分享图片 如果是图文分享，且是ios平台，20kb
	 * @property {String} page 分享链接
	 * @event {Function} change 关闭弹窗
	 */
	// import {mapState} from 'vuex';
	import wanlPoster from './wanl-poster.vue';
	export default {
		name: 'WanlShare',
		props: {
			scrollAnimation: {
				type: Number,
				default: 300
			},
			shareType: {
				type: Number,
				default: 5
			},
			modalName: {
				type: String,
				default: null
			},
			shareTitle: {
				type: String,
				default: ''
			},
			shareText: {
				type: String,
				default: ''
			},
			image: {
				type: String,
				default: ''
			},
			price: {
				type: String,
				default: ''
			},
			marketPrice: {
				type: String,
				default: ''
			},
			page: {
				type: String,
				default: ''
			},
			scene: {
				type: Object,
				default () {
					return {}
				}
			},
			isReport: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				providerList: [],
				providerListBak: [],
				posterShow: true,
				posterFilePath: '',
				path: this.path
			};
		},
		components: {
			wanlPoster
		},
		computed: {
			// ...mapState(['common'])
		},
		created() {
			let user = uni.getStorageSync('wanlshop:user');
			if(user.isLogin){
				this.scene.u = user.id;
			}
		},
		methods: {
			// 生成海报成功
			posterSuccess(e){
				this.posterFilePath = e.tempFilePath;
			},
			// 手动保存
			toSave(url) {
				uni.getImageInfo({
					src: this.posterFilePath,
					success: (image)=> {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: ()=> {
								uni.showToast({
									title: '海报已保存相册',
									icon: 'success',
									duration: 2000
								});
								this.closeShare();
							}
						});
					}
				});
			}
			
		}
	};
</script>
<style lang="scss" scoped>
	page{
		height: calc(100vh - 44px);
	}
	.wanl-share{
		height: 100%;
		// 海报
		&__poster{}
		/* 分享 */
		&__share {
			background-color: #ffffff;
			border-radius: 11px 11px 0 0;
			min-height: 50rpx;
			padding-bottom: 0px;
			padding-bottom: env(safe-area-inset-bottom);
			.head {
				padding: 25rpx 25rpx 10rpx 25rpx;
				.content {
					justify-content: left;
					margin-left: 16rpx;
				}
			}
			.scroll-x {
				white-space: nowrap;
				width: 100%;
				padding: 24rpx 0;
				text-align: left;
				// height: 242rpx;
				display: flex;
				justify-content: center;
				.scroll-item {
					background: #fff;
					display: inline-block;
					font-size: 36rpx;
					// margin-left: 36rpx;
					margin: 0 10rpx;
					text-align: center;
					width: 200rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 10rpx;
					&:last-child {
						// margin-right: 36rpx;
					}
					.icons {
						width: 100rpx;
						height: 100rpx;
						line-height: 100rpx;
						border-radius: 9999rpx;
						margin: 0 auto;
						font-size: 40rpx;
						display: block;
						&.gray {
							color: #606060;
							background-color: #f5f5f5;
						}
						&.red {
							color: #ffffff;
							background-color: #e6162c;
						}
						&.blue {
							color: #ffffff;
							background-color: #3e92e8;
						}
					}
					button {
						line-height: 1;
						background-color: rgba(0, 0, 0, 0);
						border: 0;
						padding: 0;
						&:after {
							border: 0;
						}
					}
					.project {
						// margin-top: 25rpx;
					}
				}
			}
			.footer {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
			}
		}
	}
	::v-deep .uni-scroll-view-content{
		display: flex;
		justify-content: center;
	}
	.footBox{
		width: 240rpx;
		height: 85rpx;
		background: #FFFFFF;
		border-radius: 43rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #181622;
		.imgIcon{
			width: 37rpx;
			height: 37rpx;
			margin-right: 15rpx;
		}
	}
</style>