intelligentGroup/pageTwo/news/detail.vue

<template>
	<view class="content bgfff">
		<view v-if="content">
			<!-- 文本 -->
			<view v-if="content.ptype!=2">
				<image :src="content.headimg" mode="scaleToFill" class="topimg" v-if="content.headimg"
					@click="previewImage"></image>
				<!--  -->
				<view class="box newsDetail">
					<view class="title">
						{{content.title}}
					</view>
					<view class="c999 size12">
						<text class="mr-10">浏览量：{{content.browsecnt}}次</text>
						<text>点赞：{{content.likecnt}}次</text>
					</view>
					<view class="c999 size12">
						<text>发布时间：{{content.createdtime}}</text>
						<text class="f-r bold size14" v-if="content.status"
							:class="[content.status==1?'orangecolor':content.status==2?'bluecolor':'redcolor']">{{content.status==1?'未开始':content.status==2?'进行中':'已结束'}}</text>
					</view>

					<view class="address" v-if="type==4">
						<view>活动地点：{{content.province}}{{content.city}}{{content.area}}{{content.address}}</view>
						<view>活动时间：{{content.starttime}} -{{content.endtime}}</view>
						<!-- <view>报名形式：这里是文字文字</view> -->
						<!-- <view>参会人数：200人</view> -->
					</view>
					<view class="con">
						<u-parse :content="content.content"></u-parse>
					</view>
				</view>
				<!--  -->
				<view class="foot">
					<button open-type="share" class="share">
						<uni-icons type="paperplane" size="22"></uni-icons>
						<text>分享</text>
					</button>
					<view v-if="!content.islike" @click="handleZan">
						<icon class="iconfont icon-zantong"></icon>
						<text>点赞</text>
					</view>
					<view v-else>
						<icon class="iconfont icon-zantongfill"></icon>
						<text>点赞</text>
					</view>
					<view class="call" v-if="type==4" @click="$tools.getCall(user.authlist,content.phone)">
						<icon class="iconfont icon-dianhua1 mr-5"></icon>拨打电话
					</view>
				</view>
			</view>
			<!-- H5 -->
			<view class="" v-if="content.ptype==2">
				<web-view :src="content.content"></web-view>
			</view>
		</view>
		<view class="nolist" v-else>
			<image src="@/static/none.png"></image>
			<text>暂无数据</text>
		</view>
		<!-- 秘书处弹框 -->
		<secratary></secratary>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import uParse from '@/uni_modules/u-parse/u-parse.vue'
	export default {
		data() {
			return {
				type: 1,
				content: null
			}
		},
		components: {
			uParse
		},
		computed: {
			...mapState(["user"]),
		},
		onLoad(options) {
			console.log("资讯", options)
			this.type = options.type
			this.handleActive(options.id)
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage"]
			})
		},
		onShareAppMessage() {
			let that = this
			return {
				title: that.content.title,
				path: '/pageTwo/news/detail?id=' + that.content.id + '&type=' + that.type,
				imageUrl: that.content.headimg,
				success: function(res) {
					console.log("分享到朋友成功")
				},
				fail: function(res) {
					console.log("分享到朋友失败")
				},
			}
		},
		methods: {
			handleActive(id) {
				let that = this
				let account = {
					id: id,
					type: that.type
				}
				let https = ""
				if (that.type == 1 || that.type == 5 || that.type == 6 || that.type == 7) {
					https = that.$model.getInfoDetail(account)
				} else if (that.type == 4) {
					https = that.$model.getCampaignDetail(account)
				}
				return https.then((res) => {
					if (res.code != 0) return
					this.content = res.data
				})
			},
			previewImage() {
				let that = this
				let image = []
				image.push(that.content.headimg)
				uni.previewImage({
					urls: image,
					current: 0,
				}).catch((e) => {
					console.log(e) //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				});
			},
			handleZan() {
				console.log("点赞")
				this.$model.getLike({
					id: this.content.id,
					type: this.type
				}).then(res => {
					this.content.islike = true
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0;
	}

	.nolist {
		padding-top: 40%;
		margin-top: 0 !important;
	}

	.box {
		padding-bottom: 70px;
	}

	.topimg {
		width: 750rpx;
		height: 381rpx;
	}

	.icon-zantongfill {
		color: $red;
	}

	.foot {
		height: 50px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 15px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		icon {
			font-size: 20px;
			margin-bottom: 3px;
		}

		view {
			width: 30%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}

		text {
			width: 100%;
			text-align: center;
			display: inline-block;
		}

		.call {
			width: 120px !important;
			color: #000;
			padding: 5px;
			border-radius: 5px;
			margin-left: 10px;
			float: right;
			background-color: #E6C8A2;
		}

		/deep/button {
			width: 30%;
			padding: 0;
			line-height: 20px;
			font-size: 14px;
			background: #fff;
			margin: 0;

		}

		button:after {
			border: none;
		}

	}
</style>