mallplus/mallplusui-uniapp-wx/components/share.vue

<template>
	<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent" :style="{ backgroundColor: backgroundColor }">
		<view
			class="mask-content"
			@click.stop.prevent="stopPrevent"
			:style="[
				{
					height: config.height,
					transform: transform
				}
			]"
		>
			<scroll-view class="view-content" show-scrollbar="false" scroll-y>
				<view class="share-header">分享到</view>
				<view class="share-list">
					<view v-for="(item, index) in shareList" :key="index" class="share-item" @click="shareToFriend(item.typeIcon, item.scene, item.provider)">
						<image :src="item.icon" mode=""></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</scroll-view>
			<view class="bottom b-t" @click="toggleMask">取消</view>
		</view>
	</view>
</template>

<script>
var href = null;
var title = null;
var imgUrl = null;
export default {
	data() {
		return {
			transform: 'translateY(50vh)',
			timer: 0,
			backgroundColor: 'rgba(0,0,0,0)',
			show: false,
			config: {}
		};
	},
	props: {
		contentHeight: {
			type: Number,
			default: 0
		},
		//是否是tabbar页面
		hasTabbar: {
			type: Boolean,
			default: false
		},
		shareList: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},
	created() {
		const height = uni.upx2px(this.contentHeight) + 'px';
		this.config = {
			height: height,
			transform: `translateY(${height})`,
			backgroundColor: 'rgba(0,0,0,.4)'
		};
		this.transform = this.config.transform;
	},
	methods: {
		toggleMask(title, imgUrl, href) {
			this.title = title;
			this.imgUrl = imgUrl;
			this.href = href;
			//防止高频点击
			if (this.timer == 1) {
				return;
			}
			this.timer = 1;
			setTimeout(() => {
				this.timer = 0;
			}, 500);

			if (this.show) {
				this.transform = this.config.transform;
				this.backgroundColor = 'rgba(0,0,0,0)';
				setTimeout(() => {
					this.show = false;
					this.hasTabbar && uni.showTabBar();
				}, 200);
				return;
			}

			this.show = true;
			//等待mask重绘完成执行
			if (this.hasTabbar) {
				uni.hideTabBar({
					success: () => {
						setTimeout(() => {
							this.backgroundColor = this.config.backgroundColor;
							this.transform = 'translateY(0px)';
						}, 10);
					}
				});
			} else {
				setTimeout(() => {
					this.backgroundColor = this.config.backgroundColor;
					this.transform = 'translateY(0px)';
				}, 10);
			}
		},
		//防止冒泡和滚动穿透
		stopPrevent() {},
		//分享操作
		shareToFriend(type, scene, provider) {
			// this.$api.msg(`分享给${type}`);
			// this.toggleMask();
			var url = this.href;
			var title = this.title;
			var imgUrl = this.imgUrl;
			uni.share({
				provider: provider,
				scene: scene,
				type: type,
				href: url,
				title: title,
				imageUrl: imgUrl,
				success: function(res) {
					console.log(JSON.stringify(res));
					uni.showToast({
						title: '已分享',
						duration: 2000
					});
				},

				fail: function(err) {
					var errrr = JSON.stringify(err);
					if (errrr) {
						uni.showModal({
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				}
			});
			this.toggleMask();
		}
	}
};
</script>

<style lang="scss">
.mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 998;
	transition: 0.3s;
	.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90upx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
	}
}

.mask-content {
	width: 100%;
	height: 580upx;
	transition: 0.3s;
	background: #fff;
	&.has-bottom {
		padding-bottom: 90upx;
	}
	.view-content {
		height: 100%;
		background: #ffffff;
	}
}
.share-header {
	height: 110upx;
	font-size: $font-base + 2upx;
	color: font-color-dark;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10upx;
	&:before,
	&:after {
		content: '';
		width: 240upx;
		heighg: 0;
		border-top: 1px solid $border-color-base;
		transform: scaleY(0.5);
		margin-right: 30upx;
	}
	&:after {
		margin-left: 30upx;
		margin-right: 0;
	}
}
.share-list {
	display: flex;
	flex-wrap: wrap;
}
.share-item {
	min-width: 33.33%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 180upx;
	image {
		width: 80upx;
		height: 80upx;
		margin-bottom: 16upx;
	}
	text {
		font-size: $font-base;
		color: $font-color-base;
	}
}
</style>