myc/pages/moments/details.vue

<template>
	<view class="container">
		<view class="notice-item">
			<view class="notice_name">{{list.title}}</view>
			<view class="flex notice_text">
				<text class="">作者：新零售</text>
				<text class="">{{list.add_time}}</text>
			</view>
			<view class="notice_content"><rich-text :nodes="list.content"></rich-text></view>
		</view>
		<view class="mask" v-show="show"><image @click="onTap" src="/static/img/shareimg.png"></image></view>
	</view>
</template>

<script>
import { details } from '@/api/moments.js';
import { mapState } from 'vuex';
import { saveUrl } from '@/utils/loginUtils.js';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
export default {
	data() {
		return {
			id:'',
			list:"",
			spread:"",
			show:false
		};
	},
	async onLoad(options) {
		this.id = options.id;
		if(options.spread){
			// 存储邀请人
			this.spread = options.spread;
			uni.setStorageSync('spread', options.spread);
		}
		let obj = this;
		details({},obj.id).then(function(e) {
			obj.list = e.data;
			// #ifdef H5
			obj.shareDate();
			// #endif
		});
		saveUrl();
	},
	onShow() {
	},
	computed: {
		...mapState(['userInfo', 'baseURL'])
	},
	methods: {
		shareDate() {
			let obj = this;
			let url = window.location.href.replace(/[\?,&]{0,1}from=singlemessage/g, '')+ '&spread=' + this.userInfo.uid;
			let bool = uni.getStorageSync('weichatBrowser') || '';
			// 判断是否微信浏览器
			if (bool) {
				let data = {
					link: url, // 分享链接
					imgUrl: obj.list.image_input[0], // 分享图标
					desc: obj.list.synopsis,
					title: obj.list.title,
					success: function() {}
				};
				// #ifdef H5
				// 判断是否为微信浏览器
				if (uni.getStorageSync('weichatBrowser')) {
					// 加载微信注册信息
					weixindata(data);
				}
				// #endif
			}
		},
		//显示弹窗
		open(){
			this.show = true;
	    },
		//随意点击隐藏弹窗
		onTap() {
			if (!this.open) return
			this.close()
		},
		close() {
			this.show = false;
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background:#FFFFFF;
	padding-bottom: 30rpx;
}
.notice_name {
	font-size: 35rpx !important;
	color: #303133;
}
.notice-item {
	width: 100%;
	height: 100%;
	color: #666666;
	padding: 35rpx 35rpx;
	font-size: 23rpx;
}
.notice_text {
	border-bottom: 1px solid #F0F0F0;
	padding: 30rpx 0rpx;
}
.notice_content {
	font-size: 28rpx;
	padding: 25rpx 0rpx;
	line-height: 45rpx;
}
.share{
	text-align: center;
	background-color: #e93323!important;
	color: #FFFFFF !important;
	padding: 20rpx 0rpx;
	border-radius: 35rpx;
	margin-bottom: 20rpx;
}
.mask{
   z-index: 999;
   width: 750rpx;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   image{
	   width: 100%;
	   height: 100%;
	   opacity: 0.9;
   }
}
</style>