zhapp/components/uni-share/uni-share.vue

<template>
	<view class='uni-page'>
		<u-popup :show="modelshow" @close="close" round="20rpx">
			<view class="dis f-c ">
				<view class="header dis f-c ">
					<image src="/static/image/share.png" mode=""></image>
					<view class="dis a-c j-s tab">
						<view class="dis f-c a-c" @tap="weixin">
							<image src="/static/image/weixin.png" mode=""></image>
							<text>微信好友</text>
						</view>
						<view class="dis f-c a-c" @tap="userSmsShare">
							<image src="/static/image/duanxin.png" mode=""></image>
							<text>短信</text>
						</view>
						<view class="dis f-c a-c" @tap="copyLink">
							<image src="/static/image/fuzhi.png" mode=""></image>
							<text>复制链接</text>
						</view>
						<!-- <view class="dis f-c a-c" @tap="saveToAlbum">
							<image src="/static/image/baocun.png" mode=""></image>
							<text>保存到相册</text>
						</view> -->
					</view>
				</view>
				<u-gap height="15rpx" bgColor="#F7F7F7"></u-gap>
				<view class="btn dis a-c j-c " @tap="closeModal">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				modelshow: this.show
			}
		},
		onShow() {

		},
		onLoad() {

		},
		watch: {
			show(newVal) {
				this.modelshow = newVal
			}
		},
		methods: {
			weixin() {
				this.$emit('weixin')
			},
			userSmsShare() {
				this.$emit('userSmsShare')
			},
			copyLink() {
				this.$emit('copyLink')
			},
			saveToAlbum() {
				this.$emit('saveToAlbum')
			},

			closeModal() {
				this.$emit('closeModal')
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		padding: 40rpx 89rpx 60rpx;
		box-sizing: border-box;

		>image {
			margin: 0 auto;
			width: 470rpx;
			height: 50rpx;
			margin-bottom: 60rpx;
		}

		.tab {
			image {
				width: 88rpx;
				height: 88rpx;
			}

			text {
				font-size: 24rpx;
				color: #333;
				margin-top: 10rpx;
			}
		}
	}

	.btn {
		padding: 24rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #333;
	}
</style>