Anti-fraud-mobile/components/Share/index.vue

<template>
	<view @touchmove.stop.prevent="moveHandle">
		<u-popup :show="show" :round="10">
			<view class="content">
				<view class="title">
					<text>分享</text>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="shareType">
					<view>
						<!-- <view class="iconBox" @click="shareToWechart">
							<i class="t-icon custom-t-icon-wechart"></i>
						</view> -->
						<button type="default" class="iconBox" open-type="share">
							<i class="t-icon custom-t-icon-wechart"></i>
						</button>
						<text>微信好友</text>
					</view>
					<view>
						<view class="iconBox" @click="shareToMoments">
							<i class="t-icon custom-t-icon-moments"></i>
						</view>
						<text>朋友圈</text>
					</view>
					<view>
						<view class="iconBox" @click="shareLink">
							<i class="t-icon custom-t-icon-link"></i>
						</view>
						<text>复制链接</text>
					</view>
				</view>
				<button type="default">
					<i class="t-icon custom-t-icon-wechart"></i>
				</button>
			</view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		props: {
			// 弹出层是否展示
			show: {
				type: Boolean,
				default: false
			},
		},
		options: {
			styleIsolation: "shared", // 解除组件样式隔离
		},
		data() {
			return {

			};
		},
		methods: {
			// 关闭分享弹窗
			close() {
				this.$emit('close')
			},
			// 禁止外层容器滚动
			moveHandle() {},
			// 分享给微信好友
			shareToWechart(){
				console.log(11)
			},
			// 分享到朋友圈
			shareToMoments(){
				console.log(22)
			},
			// 分享链接
			shareLink(){
				console.log(33)
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup {
		.content {
			height: 600rpx;
			padding: 40rpx;
		}

		.title {
			display: flex;
			justify-content: space-between;
			font-size: 50rpx;
			font-weight: 900;
		}

		.shareType {
			display: flex;
			align-items: center;
			text-align: center;
			margin-top: 50rpx;

			>view {
				margin-right: 20rpx;
			}

			.iconBox {
				// width: 120rpx;
				// height: 120rpx;
				width: 60px;
				height: 60px;
				border: 2rpx solid #ccc;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.t-icon {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>