fengpingle/pages/share/wzDetail.vue

<template>
	<view class="content">
		<view class="top">
			<image :src="info.share_images[0] || ''" mode="widthFix"></image>
		</view>
		<view class="title">{{ info.title || '' }}</view>
		<view class="tip">{{ info.synopsis || '' }}</view>
		<view class="main" v-for="(ls, index) in info.content" :key="index">
			<view v-if="ls.type == 'rich-text'" v-html="ls.value"></view>
			<video v-if="ls.type == 'video' && ls.value" :src="ls.value" style="width:100%;height: 300px"
				frameborder="0"></video>
		</view>
		<!-- <view class="navbar flex">
			<view class="navbar-item" @click.stop="shareLink()">
				<view class="navbar-icon">
					<image src="../../static/icon/sharejt.png" mode=""></image>
				</view>
				<view class="navbar-font">分享</view>
			</view>
			<view class="xian"></view>
			<view class="navbar-item" @click.stop="wzdz()">
				<view class="navbar-icon" v-if="info.user_good == 1">
					<image src="../../static/icon/zanguo.png" mode=""></image>
				</view>
				<view class="navbar-icon" v-else>
					<image src="../../static/icon/zan.png" mode=""></image>
				</view>
				<view class="navbar-font">{{ info.goods_count }}</view>
			</view>
		</view> -->
		<view v-if="shareShow" class="Shraremask" @click="cancel">
			<view class="mask-content">
				<scroll-view class="view-content" scroll-y>
					<view class="share-header">分享到</view>
					<view class="share-list">
						<view class="share-item">
							<button class="wechat-box" open-type="share">
								<image class="itemImage" src="../../static/icon/share1.png" mode=""></image>
								<text class="itemText">微信好友</text>
							</button>
							<view class="wechat-box" @click="navTo('/pages/zc/wzshare?id=' + id)">
								<image class="itemImage" src="../../static/icon/share2.png" mode=""></image>
								<text class="itemText">朋友圈</text>
							</view>
							<view class="wechat-box" @click="copy()">
								<image class="itemImage" src="../../static/icon/share3.png" mode=""></image>
								<text class="itemText">复制链接</text>
							</view>
							<view class="wechat-box" @click="shareToFriend()">
								<image class="itemImage" src="../../static/icon/share4.png" mode=""></image>
								<text class="itemText">生成海报</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="bottomButtom b-t" @click="cancel">取消</view>
			</view>
		</view>
		<uni-popup ref="popupshare" type="center">
			<view class="share-box">
				<image :src="shareImage" mode="" class="box-img" @longpress="saveImg()"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		details
	} from '@/api/user.js';
	import {
		article_good,
		short_link,
		article_poster
	} from '@/api/activity.js';
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				id: '',
				info: {},
				shareShow: false,
				shareImage: ''
			};
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
			}
			// #ifdef MP
			if (option.scene) {
				if (typeof option.scene == 'string') {
					// let scene = ('{' + option.scene + "}").replace('qr%26', '').replace(/%3D/g, ':').replace(/%26/g, ',')
					// 	.replace('id', '\"id\"').replace('pid', '\"pid\"');
					let scene = ('{' + option.scene + '}')
						.replace('qr%26', '')
						.replace(/%3D/g, ':')
						.replace(/%26/g, ',')
						.replace('id', '"id"')
						.replace('pid', '"pid"')
						.replace(/=/g, ':')
						.replace(/&/g, ',');
					console.log(scene, 'scene');
					let opt = JSON.parse(scene);
					console.log(opt);
					// 保存拼团订单id
					this.id = opt.id;
					if (opt.pid) {
						// 存储邀请人
						// this.spread = opt.pid;
						uni.setStorageSync('spread', opt.pid);
					}
				}
			}
			// #endif
		},
		onShow() {
			this.loadData();
		},
		onReachBottom() {},
		onReady() {},
		// #ifdef MP
		onShareAppMessage: function(res) {
			console.log(this.share);
			if (res.from === 'button') {
				// 来自页面内分享按钮
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				path += 'pid=' + this.userInfo.uid;
				// 保存邀请人
				let data = {
					path: path,
					imageUrl: this.info.share_images[0],
					title: this.info.title
				};
				console.log('data', data);
				return data;
			}
		},
		// #endif
		methods: {
			loadData() {
				details({}, this.id).then(({
					data
				}) => {
					data.content = data.content.replace(/<img/g, '<img class="rich-img"').replace(/<p>\s*<img/g,
						'<p class="pHeight"><img');
					data.content = this.getVideo(data.content);
					this.info = data;
				});
			},
			// 文章点赞
			wzdz() {
				article_good({}, this.id).then(e => {
					if (this.info.user_good == 0) {
						this.info.user_good = 1;
						this.info.goods_count += 1;
					} else {
						this.info.user_good = 0;
						this.info.goods_count -= 1;
					}
				});
			},
			shareLink(item) {
				console.log('dainjideniang');
				this.shareShow = true;
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			shareToFriend() {
				let obj = this;
				uni.showLoading({
					title: 'Loading...',
					mask: true
				});
				article_poster({}, this.id)
					.then(({
						data
					}) => {
						obj.shareImage = data.url;
						console.log(obj.shareImage, '123456');
						uni.hideLoading();
						this.$refs.popupshare.open();
					})
					.catch(e => {
						uni.hideLoading();
					});
			},
			copy() {
				short_link({
					url: 'pages/zc/wzDetail?id=' + this.id
				}).then(({
					data
				}) => {
					console.log(data);
					this.comfirm(data.link);
				});
			},
			comfirm(text) {
				console.log(text);
				const result = uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			},
			//取消分享
			cancel() {
				this.shareShow = false;
			},
			saveImg(w) {
				console.log(w);
				let obj = this;
				uni.downloadFile({
					//下载图片
					url: obj.shareImage,
					success: res => {
						console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							//将图片保存在手机
							filePath: res.tempFilePath, //保存的位置
							success: res => {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			// 富文本视频解析
			getVideo(data) {
				let videoList = [];
				let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
				let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
				let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组
				let articleList = data.split('</video>'); // 把字符串  从视频标签分成数组
				arr.forEach((item, index) => {
					var src = item.match(srcReg);
					videoList.push(src[1]); //所要显示的字符串中 所有的video 标签 的路径
				});
				let needArticleList = [];
				articleList.forEach((item, index) => {
					if (item != '' && item != undefined) {
						//  常见的标签渲染
						needArticleList.push({
							type: 'rich-text',
							value: item + '</video>'
						});
					}
					let articleListLength = articleList.length; // 插入到原有video 标签位置
					if (index < articleListLength && videoList[index] != undefined) {
						needArticleList.push({
							type: 'video',
							value: videoList[index]
						});
					}
				});
				return needArticleList;
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
	}

	.top {
		width: 750rpx;

		image {
			width: 100%;
		}
	}

	.title {
		margin-top: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #303030;
	}

	.tip {
		margin-top: 20rpx;
		padding: 0 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #969696;
	}

	.main {
		margin-top: 60rpx;
		padding: 10rpx;
	}

	/deep/ .main {
		.rich-img {
			width: 100% !important;
			height: auto;
		}
	}

	.navbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		padding: 50rpx 0;

		.xian {
			width: 2px;
			background: #999999;
			height: 36rpx;
		}

		.navbar-item {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			.navbar-icon {
				width: 36rpx;
				height: 36rpx;

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

			.navbar-font {
				margin-left: 17rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.Shraremask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 998;
		transition: 0.3s;
		background-color: rgba(51, 51, 51, 0.6);

		.bottomButtom {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 90rpx;
			background: #fff;
			z-index: 9;
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
		}
	}

	.mask-content {
		margin-bottom: 88rpx;
		width: 100%;
		height: 380rpx;
		transition: 0.3s;
		background: #fff;

		&.has-bottom {
			padding-bottom: 90rpx;
		}

		.view-content {
			height: 100%;
		}
	}

	.share-header {
		height: 110rpx;
		font-size: $font-base + 2rpx;
		color: font-color-dark;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 10rpx;

		&:before,
		&:after {
			content: '';
			width: 240rpx;
			height: 0;
			border-top: 1px solid $border-color-base;
			transform: scaleY(0.5);
			margin-right: 30rpx;
		}

		&:after {
			margin-left: 30rpx;
			margin-right: 0;
		}
	}

	.share-list {
		display: flex;
		width: 80%;
		margin: 0rpx auto;
	}

	.share-item {
		min-width: 33.33%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 180rpx;
		width: 100%;

		.wechat-box {
			width: 50%;
			height: 100%;
			background: #ffffff;
			border: 0;
			display: flex;
			align-items: center;
			flex-direction: column;

			&::after {
				border: 0;
			}

			.itemImage {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 16rpx;
			}

			.itemText {
				font-size: $font-base;
				color: $font-color-base;
				line-height: 2;
			}
		}
	}

	.share-box {
		width: 600rpx;
		height: 1000rpx;
		background: red;

		.box-img {
			width: 600rpx;
			height: 1000rpx;
		}
	}
</style>