chunwan/components/share.vue

<template>
	<view>
		<u-popup v-model="isShare" mode="bottom"  border-radius="20" :mask-close-able="false">
			<view class="share">
				<template v-if="type==1">
					<view class="title">分享至</view>
					<view class="content">
						<view class="item" @click="appShare('hb')">
							<image src="@/static/icon-share-03.png"></image>
							<view class="txt">生成海报</view>
						</view>
						<view class="item" @click="appShare('WXSceneSession',2)">
							<image src="@/static/icon-share-01.png"></image>
							<view class="txt">微信好友</view>
						</view>
						<view class="item" @click="appShare('WXSceneTimeline',2)">
							<image src="@/static/icon-share-02.png"></image>
							<view class="txt">朋友圈</view>
						</view>
						<view class="item" @click="appShare('src')">
							<image src="@/static/icon-share-04.png"></image>
							<view class="txt">复制链接</view>
						</view>
					</view>
					<view class="fd">
						<view class="btn" @click="closePopup()">取消</view>
					</view>
				</template>
				<template v-if="type==2">
					<view class="titles">分享<image @click="closePopup()" src="@/static/cha.png"></image></view>
					<view class="content">
						<view class="item" @click="appShare('WXSceneSession',1)">
							<image src="@/static/icon-share-01.png"></image>
							<view class="txt">微信</view>
						</view>
						<view class="item" @click="appShare('web',1)">
							<image src="@/static/icon-share-04.png"></image>
							<view class="txt">复制链接</view>
						</view>
					</view>
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"insufficient",
		props: {
			info: {
				type: Object,
				default: {}
			},
			isShare: {
				type: Boolean,
				default: false
			},
			type: {
				type: Number,
				default: 2
			},
		},
		methods: {
			confirm() {
				uni.navigateTo({
					url: "/pages/users/recharge/index"
				})
			},
			closePopup() {
				uni.$emit("closeSharePopup",false)
			},
			
			// APP分享
			appShare(scene,type){
				let that = this;
				if(scene == 'web'){
					uni.setClipboardData({
						data: this.$articleShareUrl+this.info.id,
						success: function () {
							uni.getClipboardData({
								success: function (res) {
									uni.$emit("closeSharePopup",false)
									uni.showToast({
										title: "复制成功"
									})
								}
							});
						}
					})
					return ;
				}
				if(scene == 'src'){
					uni.setClipboardData({
						data: this.$userShareUrl+this.info.invitationCode,
						success: function () {
							uni.getClipboardData({
								success: function (res) {
									uni.$emit("closeSharePopup",false)
									uni.showToast({
										title: "复制成功"
									})
								}
							});
						}
					})
					return ;
				}
				if(scene == 'hb'){
					uni.$emit("closeSharePopup",false)
					uni.$emit("openHaibaoPopup",true)
					return;
				}
				
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type,
					href: that.info.href,
					title: that.info.title,
					summary: that.info.summary,
					imageUrl: that.info.imageUrl,
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						})
						uni.$emit("closeSharePopup",false)
						uni.hideLoading();
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						uni.$emit("closeSharePopup",false)
						uni.hideLoading();
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.share{
	width: 100%;
	background: #EEEFF0;
	.title{
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;
		color: #333333;
		padding: 30rpx 0;
	}
	.titles{
		font-weight: 400;
		font-size: 30rpx;
		text-align: left;
		color: #333333;
		padding: 30rpx;
		image{
			width: 44rpx;
			height: 44rpx;
			float: right;
		}
	}
	.content{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 50rpx 0;
		.item{
			width: 25%;
			text-align: center;
			image{
				width: 100rpx;
				height: 100rpx;
			}
			.txt{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin-top: 20rpx;
			}
		}
	}
	.fd{
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn{
			width: 702rpx;
			line-height: 90rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 90rpx;
			text-align: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
}
</style>