qjm/pages/zc/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';
export default {
	data() {
		return { id: '', info: {}, shareShow: false, shareImage: '' };
	},
	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] + '&';
			}
			// 保存邀请人
			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>