hhsc/pages/user/share.vue

<template>
	<view class="content">
		<!-- <view class="share" @click="shareHy()">
			分享给好友
		</view> -->
		<!-- <view class="share" @click="sharePyq()">
			分享至朋友圈
		</view> -->
		<image class="img" :src=bgImg mode=""></image>
		

		<view class="share">
			<view class="share-left" @click="shareHy()">
				<view class="title">
					分享好友
				</view>
				<image src="../../static/img/share04.png" mode=""></image>
			</view>

			<!-- <view class="share-right" @click="sharePyq()" v-show="isClose">
				<view class="title">
					分享朋友圈
				</view>
				<image src="../../static/img/share05.png" mode=""></image>
			</view> -->
		</view>
		<view class="share-img" v-show="isShow">
			<image class="img-share" src="../../static/user/share-right.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	// #ifndef APP-PLUS
	import {
		weixindata,shareFun
	} from '@/utils/wxAuthorized.js'
	// #endif
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		setShare,
		share
	} from '../../api/user.js'
	export default {
		data() {
			return {
				isShow:false,
				isClose:true,
				bgImg:'',//背景图片
			};
		},
		
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad() {
			this.IndexShare();
		},
		methods: {
			IndexShare() {
				//h5分享
				share().then(res => {
					const {
						link,
						title,
						synopsis,
						img,
						wechat_share_pic
					} = res.data.data
					this.bgImg = wechat_share_pic
					let shareList = {
						link: `${link}`,
						imgUrl: img,
						desc: synopsis,
						title,
						success: function(){
							// alert("分享成功+++++")
							setShare().then(res => {
								setTimeout(function() {
									uni.switchTab({
										url: './user'
									})({
							
									})
								}, 1500)
							})
							console.log('分享加载成功')
						
						},
						cancel : function() {
						          alert("取消分享");
						         }
					}
					console.log('分享加', shareList);
					shareFun(shareList);
				})
			},
			//分享好友
			shareHy() {
				// #ifdef H5 || MP-WEIXIN
				this.isShow = true
								
				// #endif
				// #ifdef APP-PLUS
				share().then(res => {
					const {
						link,
						title,
						synopsis,
						img
					} = res.data.data
					//app分享好友
					uni.share({
						//分享类型
						provider: "weixin",
						//分享方式:好友,朋友圈,收藏
						scene: "WXSceneSession",
						//默认图文0
						type: 0,
						//跳转链接
						href: `${link}`,
						//标题
						title,
						//主体
						summary: synopsis,
						//分享图片1
						imageUrl: img,
						success(res) {
							this.isClose = true
							setShare().then(res => {
								setTimeout(function() {
									uni.switchTab({
										url: './user'
									})({

									})
								}, 1500)
							})
						},
						fail(err) {
							console.log(err, '失败原因');
						}


					})
				})
				// #endif

			},
			sharePyq() {
				share().then(res => {
					const {
						link,
						title,
						synopsis,
						img
					} = res.data.data
					// #ifdef H5 || MP-WEIXIN
					this.isShow = true
				
					// #endif
					// #ifdef APP-PLUS
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						//跳转链接
						href: `${link}`,
						//标题
						title,
						//主体
						summary: synopsis,
						//分享图片1
						imageUrl: img,
						success(res) {
							this.isClose = true
							setShare().then(res => {
								setTimeout(function() {
									uni.switchTab({
										url: './user'
									})({

									})
								}, 1500)
							})
						},
						fail(err) {
							console.log(err, '失败原因');
						}
					});
					// #endif
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		position: relative;
		height: 100%;
		width: 750rpx;
		margin: 0;
		padding: 0;
		z-index: 99;

		.img {
			width: 750rpx;
			height: 100vh;

		}

		.share-img {
			z-index: 99;
			width: 750rpx;
			height: 100vh;
			position: absolute;
			top: 0;

			.img-share {
				width: 100%;
				height: 100%;
			}
		}

		.share {
			width: 100%;
			z-index: 9;
			display: flex;
			justify-content: space-around;
			position: absolute;
			bottom: 100rpx;

			.share-left {
				display: flex;
				justify-content: center;
				width: 300rpx;
				height: 100rpx;

				.title {
					position: absolute;
					z-index: 10;
					color: #FFFFFF;
					font-size: 30rpx;
					line-height: 100rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.share-right {

				display: flex;
				justify-content: center;
				width: 300rpx;
				height: 100rpx;

				.title {
					position: absolute;
					z-index: 10;
					font-weight: 500;
					color: #FFFFFF;
					font-size: 30rpx;
					line-height: 100rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>