luoshan_web/components/shareProp.vue

<template>
	<u-popup v-model="shareShow" mode="bottom">
		<view class="share">
			<view class="share-item">
				<button open-type="share" @click.stop="onShareAppMessage()" class="child">
					<image src="/static/image/share_1.png" mode="" style="width: 112upx;height: 112upx;"></image>
					<view class="item-text">
						微信好友
					</view>
				</button>
				<button @click="onShare()" hover-stop-propagation="true" class="child">
					<image src="/static/image/share_2.png" mode="" style="width: 112upx;height: 112upx;"></image>
					<view class="item-text">
						朋友圈
					</view>
				</button>
				<view class="child" @click="copy" v-if="!hidden">
					<image src="/static/image/share_3.png" mode="" style="width: 112upx;height: 112upx;"></image>
					<view class="item-text">
						复制链接
					</view>
				</view>
				<view class="child" v-if="!hidden">
					<image src="/static/image/share_4.png" mode="" style="width: 112upx;height: 112upx;"></image>
					<view class="item-text">
						保存图片
					</view>
				</view>
			</view>
			<view class="share-button" @click="shareShow=false">
				取消分享
			</view>
		</view>
	</u-popup>
</template>

<script>
	var app = getApp()
	export default {
		name: "shareProp",
		data() {
			return {
				shareShow: false,
				detail: '', //详情
				hidden: app.globalData.hidden
			}
		},
		onLoad() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(item) {
			return {
				title: this.detail.name,
				path: 'pages/detail/recruitDetail/recruitDetail?id=' + this.detail.id,
			}
		},

		// 自定义页面的分享到朋友圈
		onShareTimeline() { //分享好友
			return {
				title: this.detail_msg.name,
				path: 'pages/detail/recruitDetail/recruitDetail?id=' + this.detail_msg.id,
			}
		},
		methods: {

			showEdit(row) {
				this.detail = row
				console.log(row, 'rowrwowerwrwrwr')
				this.shareShow = true
			},
			// 复制
			copy() {
				uni.setClipboardData({
					data: 'pages/detail/recruitDetail/recruitDetail',
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			onShare() {
				uni.showToast({
					icon: 'none',
					title: '点击右上角三个点找到分享朋友圈'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	//分享弹窗
	.share {
		.share-item {
			display: flex;
			padding: 40upx 30upx;
			align-items: center;
			width: 100%;

			.child {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.item-text {
				font-size: 13px;
				color: #8a8a8a;
				margin-top: 10upx;
			}
		}

		.share-button {
			text-align: center;
			padding: 30upx;
			border-top: solid 1px #cacaca;
		}

		button {
			margin: 0 !important;
			background-color: #fff;
		}

		::after {
			border: none;
		}
	}
</style>