hwnc/components/sharebox/sharebox.vue

<template>
	<view :class="[AppTheme]">
		<u-popup :show="ifshare" mode="bottom">
			<view class="sharebox">
				<view class="shareitem_title">分享到:</view>
				<view class="shareitem_list">
					<!-- #ifdef MP-WEIXIN -->
					<view class="shareitem" v-for="(item,index) in shareitemlist" :key="index" @click="sharemsg(item)">
						<u-icon v-if="item.provider!='weixin'" labelPos="bottom" :label="item.title" labelSize="12"
							size="40" :name="reqimg(item.imgsrc,item.type)"></u-icon>
						<button v-else class="separate" plain="true" data-name="shareBtn" open-type="share">
							<u-icon labelPos="bottom" :label="item.title" labelSize="12" size="40"
								:name="reqimg(item.imgsrc,item.type)"></u-icon>
						</button>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="shareitem" v-for="(item,index) in shareitemlist" :key="index" @click="sharemsg(item)">
						<u-icon labelPos="bottom" :label="item.title" labelSize="12" size="40"
							:name="reqimg(item.imgsrc,item.type)"></u-icon>
					</view>
					<!-- #endif -->
				</view>
				<view class="sharecanle" @click="colosesharebox()">取消</view>
			</view>
		</u-popup>
		<u-popup :show="showalert" mode="center">
			<view class="dAlert" v-show="showalert">
				<view class="wrapperAlert" @click="closeModal">
					<view class="wrapperAlertBox" @click.stop="" @touchmove.stop.prevent="">
						<view class="vueDAlertWrapper" style="border-radius: 20rpx;">
							<view style="width: 100%;height: 50rpx;"></view>
							<view class="vueDAlertWrapperTop" style="justify-content: center;display: flex;">
								<u--image :src="sharedata.imageUrl" mode="aspectFit" width="600rpx" height="900rpx">
									<template v-slot:loading>
										<u-loading-icon color="#afafaf"></u-loading-icon>
									</template>
								</u--image>
							</view>

							<view class="vueDAlertWrapperBtn" @click.stop="saveImage()">
								长安海报进行保存或者分享
							</view>
							<view style="justify-content: center;display: flex;" @click="closeModal()">
								<u-icon name="close-circle" color="#ffffff" size="28"></u-icon>
							</view>
						</view>
					</view>

				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	// #ifdef H5
	import FileSaver from 'file-saver'
	import wxchar from '@/js/wxchar.js'
	// #endif
	export default {
		props: ["data"],
		data() {
			return {
				depng: '@/static/imgs/del.png',
				showalert: false,
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				sharedata: [],
				ifshare: false,
				shareitemlist: [{
						title: '微信好友',
						provider: 'weixin',
						type: 1,
						imgsrc: 'weixin.png'
					},
					// {
					// 	title: 'QQ好友',
					// 	provider: 'qq',
					// 	type: 1,
					// 	imgsrc: 'qq.png'
					// },
					// {
					// 	title: 'QQ空间',
					// 	provider: 'qq',
					// 	type: 1,
					// 	imgsrc: 'qqkjian.png'
					// },
					// {
					// 	title: '复制链接',
					// 	provider: 'copyhref',
					// 	type: 1,
					// 	imgsrc: 'href.png'
					// },
					{
						title: '保存图片',
						provider: 'saveimg',
						type: 2,
						imgsrc: 'download'
					}
				]
			}
		},
		created() {
			let that = this;
			if (that.data) {
				that.sharedata = that.data
			} else {
				that.sharedata = that.$config.sharedata
			}
			// #ifdef H5
			let wxdata = {
				title: that.sharedata.title,
				desc: that.sharedata.title,
				link: that.sharedata.path,
				imageUrl: that.sharedata.imageUrl,
			};
			wxchar.initWeixinShareConfig(wxdata);
			that.shareitemlist = [{
					title: '复制链接',
					provider: 'copyhref',
					type: 1,
					imgsrc: 'href.png'
				},
				{
					title: '保存图片',
					provider: 'saveimg',
					type: 2,
					imgsrc: 'download'
				}
			]
			// #endif
			// #ifdef APP-PLUS
			that.shareitemlist = [{
					title: '微信好友',
					provider: 'weixin',
					type: 1,
					imgsrc: 'weixin.png'
				},
				{
					title: '微信朋友圈',
					provider: 'weixin',
					type: 1,
					imgsrc: 'pyq.png'
				}, {
					title: '复制链接',
					provider: 'copyhref',
					type: 1,
					imgsrc: 'href.png'
				},
				{
					title: '保存图片',
					provider: 'saveimg',
					type: 2,
					imgsrc: 'download'
				}
			]
			// #endif
		},
		methods: {
			//保存图片到相册
			saveImage() {
				//判断用户授权
				var that = this
				uni.getSetting({
					success(res) {
						console.log('获取用户权限', res.authSetting)
						if (Object.keys(res.authSetting).length > 0) {
							//判断是否有相册权限
							if (res.authSetting['scope.writePhotosAlbum'] == undefined) {
								that.authorize();
							} else {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									that.authorize();
								}
							}
						} else {
							return
						}
					}
				})
				that.saveImg(that.sharedata.imageUrl);
			},
			authorize() {
				let scope = 'scope.writePhotosAlbum'
				return new Promise((resolve, reject) => {
					wx.getSetting({
						success: res => {
							if (!res.authSetting[scope]) {
								wx.authorize({
									scope,
									success: resolve,
									fail: () => wx.showModal({
										content: R.string
											.prompt_authorize_photos, // 请允许小程序使用相册权限
										success: () => wx.openSetting({
											success: res => {
												if (res.authSetting[
														scope]) {
													resolve(res
														.authSetting)
												} else {
													wx.showModal({
														content: R
															.string
															.prompt_authorize_cancel
													}) // 未允许使用该权限
													reject(res.authSetting)
												}
											}
										})
									})
								})
							} else {
								resolve(res.authSetting)
							}
						}
					})
				})
			},
			closeModal() {
				this.showalert = false;
			},
			// 引入图片
			reqimg(imgsrc, type = 1) {
				if (type == 2) {
					return imgsrc;
				} else {
					return this.settingFile.root_img + '/static/app/imgs/farm/' + imgsrc;
				}
			},
			//打开
			opensharebox(data = null) {
				let that = this;
				if (data) {
					that.sharedata = data;
				}
				this.ifshare = true;
				// #ifdef H5
				let wxdata = {
					title: that.sharedata.title,
					desc: that.sharedata.title,
					link: that.sharedata.paht,
					imageUrl: that.sharedata.imageUrl,
				};
				wxchar.initWeixinShareConfig(wxdata);
				// #endif
				console.log('that.sharedata', that.sharedata)
			},
			// 关闭分享窗口
			colosesharebox() {
				this.ifshare = false;
			},
			// 分享
			sharemsg(item) {
				let that = this
				that.colosesharebox()
				switch (item.provider) {
					//微信分支
					case 'weixin':
						// #ifndef MP-WEIXIN
						let scene = ''
						//判定是发送到微信好友还有朋友圈
						if (item.title === '微信好友') {
							scene = 'WXSceneSession'
						} else {
							scene = 'WXSceneTimeline'
						}
						uni.share({
							provider: item.provider,
							type: 0,
							scene: scene,
							title: that.sharedata.title,
							imageUrl: that.sharedata.imageUrl,
							summary: that.sharedata.title,
							href: that.sharedata.path,
							success: function(res) {
								uni.showToast({
									title: '分享成功',
									icon: 'none',
									position: 'top'
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '分享失败',
									icon: 'none',
									position: 'top'
								})
							}
						});
						// #endif
						break;
					case 'qq':
						uni.share({
							provider: item.provider,
							type: 2,
							title: that.sharedata.title,
							imageUrl: that.sharedata.imageUrl,
							href: that.sharedata.path,
							success: function(res) {
								uni.showToast({
									title: '分享成功',
									icon: 'none',
									position: 'top'
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '分享失败',
									icon: 'none',
									position: 'top'
								})
							}
						});
						break;
					case 'copyhref':
						var context = that.sharedata.title + "\r\n-------------\r\n打开链接：" + that.sharedata.tourl
						console.log('context', context)
						uni.setClipboardData({
							data: context,
							success() {
								uni.showToast({
									title: '已复制到剪贴板',
									icon: 'none',
									position: 'top'
								})
							}
						})
						break;
					case 'saveimg':
						// #ifdef H5
						let isWeixin = that.isWeiXin();
						console.log('isWeixin', isWeixin)
						if (isWeixin) {
							this.showalert = true;
						} else {
							FileSaver.saveAs(that.sharedata.imageUrl, 'saveimg.jpg');
						}
						// #endif
						// #ifndef H5
						that.saveImg(that.sharedata.imageUrl);
						// #endif
						break;
				}
			},
			saveImg(url) {
				const that = this;
				console.log('url',url)
				uni.downloadFile({
					url: url,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存下载成功',
										icon: 'none',
										position: 'top'
									})
								},
								fail: function() {
									uni.showToast({
										title: '保存失败，请稍后重试',
										icon: 'none',
										position: 'top'
									})
								}
							});
						} else {
							uni.showToast({
								title: '下载失败',
								icon: 'none',
								position: 'top'
							})
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.separate {
		// opacity: 0;
		border: 0px;
	}

	.wrapperAlert {
		z-index: 12000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 100;
		transition: background-color .15s linear;
		display: flex;
		align-items: center;
		justify-content: center;

		.vueDAlertWrapperBtn {
			padding: 30rpx;
			justify-content: center;
			display: flex;
			color: #FFFFFF;
		}

		.wrapperAlertBox {
			width: 90%;
			border-radius: 15rpx;

			.wrapperAlertBoxTitle {
				width: 100%;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #762cd9;
			}

			.wrapperAlertBoxCenter {
				width: 100%;
				height: 135rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #C0C0C0;
				color: red;

			}

			.wrapperAlertBoxBit {
				width: 100%;
				height: 1rpx;
				background-color: #f2f2f2;
			}

			.wrapperAlertBoxFooter {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.wrapperAlertBoxFooterBox {
					width: 290rpx;
					height: 115rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.wrapperAlertBoxFooterBit {
					width: 1rpx;
					height: 40rpx;
					background: #f2f2f2;
				}
			}
		}
	}

	.sharebox {
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		width: calc(100% - 50rpx);
		padding: 20rpx 25rpx 0 25rpx;

		.shareitem_title {
			color: #999;
			font-size: 25rpx;
		}

		.shareitem_list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #f3f3f3;

			.shareitem {
				width: 28%;
				margin: 20rpx 2.5%;
				text-align: center;

				.shareitem_thu {
					width: 80rpx;
					height: 80rpx;
				}

				.shareitem_text {
					color: #666;
					font-size: 22rpx;
					margin-top: 15rpx;
				}
			}
		}

		.sharecanle {
			width: 100%;
			font-size: 32rpx;
			text-align: center;
			color: #777;
			height: 100rpx;
			line-height: 100rpx;
		}
	}
</style>