high-mini/components/cc-shareMenu/cc-shareMenu.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
				}]">
			<!---->
			<view class="view-content ">
				<view class="share-header">
					分享内容
				</view>
				<view class="share-list">
					<view v-for="(item, index) in shareList" :key="index" class="share-item"
						@click="shareToFriend(item)">
						<template v-if="item.type==3">
							
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="share">
								<image :src="item.icon" mode=""></image>
								<text>{{item.text}}</text>
							</button>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<image :src="item.icon" mode=""></image>
							<text>{{item.text}}</text>
							<!-- #endif -->
							
						</template>
						<template v-else>
							<image :src="item.icon" mode=""></image>
							<text>{{item.text}}</text>
						</template>
					</view>
				</view>
			</view>
			<view style="height: 92rpx;">

			</view>
			<view class="bottom border-t" @click="toggleMask">取消</view>
		</view>
	</view>
</template>

<script>
	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() {
				//防止高频点击
				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) {

				this.$emit("click", type);
				this.toggleMask();
			},
		}
	}
</script>

<style lang='scss'>
	/* 文字尺寸 */

	$font-base: 28upx;

	/*文字颜色*/
	$font-color-dark: #303133;
	$font-color-base: #606266;

	/* 边框颜色 */
	/* $border-color-dark: #DCDFE6; */
	$border-color-base: #E4E7ED;
	/* 	$border-color-light: #EBEEF5; */
	/* 图片加载中颜色 */
	/* 	$image-bg-color: #eee; */
	/* 行为相关颜色 */
	/* $uni-color-primary:#fa436a;
	$uni-color-success: #4cd964;
	$uni-color-warning: #f0ad4e;
	$uni-color-error: #dd524d; */

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 998;
		transition: .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: .3s;
		background: #fff;

		&.has-bottom {
			padding-bottom: 90upx;
		}

		.view-content {
			/* height: 100%; */
		}
	}

	.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(.5);
			margin-right: 30upx;
		}

		&:after {
			margin-left: 30upx;
			margin-right: 0;
		}
	}

	.share-list {
		display: flex;
		flex-wrap: wrap;



	}

	.share-list button {
		min-width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180rpx;
		background-color: #fff;
		padding: 0;
		line-height: inherit;
		margin: 0;
		width: 100%;
		font-weight: normal;
		border-radius: none;
		border: none;
	}
	
	.share-list button::after {
	  border: none !important;
	  padding: 0 !important;
	  margin: 0 !important;
	}
	

	.share-item {
		min-width: 25%;
		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>