zhihuixiaoyuan2-ui/mine/components/share/share.vue

<template>
  <view class="share_all">
	  <view class="shadow" v-if="shaflag" @click="getClose"></view>
	  
	  <transition name="fade">
	  	<view v-if="wxshareflag" @click="wxzheFn">
	  		<image :src="tipimg"  class="tipimg"></image>
	  	</view>
	  </transition>
	  <view :class="shareflag ? 'share_btn share_bot' : 'share_btn'">
		  <view class="f15 c16 fw5 txc">分享至</view>
		  <view class="box">
			  <!-- #ifdef MP-WEIXIN -->
				<view class="list">
					<image :src="wximg" class="share_img"></image>
					<view class="share_tit">微信好友</view>
					<button open-type="share" class="sharebox"></button>
					<!-- :data-id="datainfo.noticeId" :data-tit="datainfo.noticeContent" :data-img="photo.length?photo[0]:''" -->
				</view>
				<view class="list" @click="getPshare">
					<image :src="pyqimg" class="share_img"></image>
					<view class="share_tit">朋友圈</view>
				</view>
			  <!-- #endif -->
			  <!-- #ifdef APP-PLUS -->
				<view class="list" @click="getAppwshare">
					<image :src="wximg" class="share_img"></image>
					<view class="share_tit">微信好友</view>
				</view>
				<view class="list" @click="getApppshare">
					<image :src="pyqimg" class="share_img"></image>
					<view class="share_tit">朋友圈</view>
				</view>
			  <!-- #endif -->
		  </view>
		  <view class="zhan"></view>
		  <view class="share_close" @click="getClose">取消</view>
	  </view>
  </view>
</template>

<script>
	import {  mapState,  mapMutations  } from 'vuex';
  export default {
	props:{
		// notxt:{
		// 	type: String,
		// 	default () {
		// 		return '暂无数据'
		// 	}
		// },
		// padtop:{
		// 	type: Number,
		// 	default () {
		// 		return 200
		// 	}
		// }
	},
	data(){
		return{
			wximg:require("@/static/images/share/WeChat.png"), 
			pyqimg:require("@/static/images/share/friend.png"),
			tipimg:require("@/static/images/share/pytip.png"),
			wxshareflag:false,
			
		}
	},
	onLoad: function() {
	},
	computed: {
	    ...mapState({
		   shareflag: state => state.user.shareflag,
		   shaflag: state => state.user.shaflag,
		   sharetit: state => state.user.sharetit,
		   sharedesc: state => state.user.sharedesc,
		   sharelink: state => state.user.sharelink,
		 }),
	},
	methods:{
		...mapMutations({
			"shasFn": "share"
		}),
		wxzheFn(){
			var that = this;
			that.wxshareflag = false;
			that.getClose();
		},
		getAppwshare(){
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 0,
				href: this.sharelink,
				title: this.sharetit,
				summary: "我正在使用智能校管家，赶紧跟我一起来体验！",
				imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		getApppshare(){
			uni.share({
				provider: "weixin",
				scene: "WXSceneTimeline",
				type: 0,
				href: this.sharelink,
				title: this.sharetit,
				summary: "我正在使用智能校管家，赶紧跟我一起来体验！",
				imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		getPshare(){
			this.wxshareflag=true;
		},
		getClose(){
			var that = this;
			that.wxshareflag=false;
			var data = [
				{
					shareflag: false,
					shaflag: false,
					homeflag: false,
					sharetit: '',
					sharedesc: '',
					sharelink: '',
					shareimg: '',
					life_id: '',
				}
			];
			that.$nextTick(function(){
				this.shasFn(data);
			})
		} 
	},
	
  }
</script>

<style lang="scss" scoped>
.shadow{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.4);z-index: 97;}
.tipimg{width: 432rpx;height: 174rpx;position: fixed;top: 0;right: 120rpx;bottom: 0;z-index: 98;}
.share_btn{position: fixed;bottom: 0;left: 0;right: 0;background: #fff;z-index: 99;transition: all linear 0.3s;transform: translateY(100%);padding-top: 26rpx;
	.zhan{width: 100%;height: 24rpx;background-color: #f5f5f5;}
	.box{padding: 50rpx 0;display: flex;align-items: center;flex-wrap: nowrap;
		.list{flex: 1;display: flex;flex-direction: column;align-items: center;position: relative;
			.sharebox{position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity: 0;}
			.share_img{width: 90rpx;height: 90rpx;}
			.share_tit{color: #666666;font-size: 30rpx;padding-top: 40rpx;}
		}
	}
	.share_close{height: 100rpx;background: #FFFFFF;font-size: 32rpx;font-weight: 500;color: #4775EA;display: flex;align-items: center;justify-content: center;}
}
.share_bot{transform: translateY(0);}
</style>