onecric_h5/pages/News/community-detail.vue

<!-- 文章详情 -->
<template>
	<view class="detail">
		<view class="detail-head flex">
			<image class="detail-head-left" @click="$back()" src="/static/image/common/left.png" mode=""></image>
			<!-- <image class="detail-head-logo" :src="detail.info.avatar" mode=""></image> -->
			<view class="detail-head-name">{{info.classification_name}}</view>
			<!-- <image src="/static/image/news/topic3.png" mode="" @click="$navigateTo('../download')"></image> -->
			
		</view>
		<view class="detail-comtent">
			<view class="album flex">
				<view class="album_top flex-start" v-if="info">
					<image class="logo" :src="info.avatar" mode=""></image>
					<view class="">
						<u--text :text="info.user_nickname" bold size="32"></u--text>
						<u--text margin="6px 0 0 0" color="#999" size="26" :text="info.addtimeString"></u--text>
					</view>
				</view>
				<view class="detail-head-status" :class="{active:info.is_attention == 1}" @click="attention(info.is_attention)" v-if="infos.id != info.uid">
					<image src="/static/image/match/guanzhu.png" mode=""></image>
					{{info.is_attention == 1?$t('news.followed'):$t('news.follow')}}
				</view>
			</view>
			
			<view class="font28" style="width: 100%;overflow: hidden;color: #333;" v-if="detail.info" v-html="detail.info.title"></view>
			
			<view class="album__content" v-if="info.is_flie_type == 0">
				<u-album multipleSize="200" space="16" :urls="info.img"></u-album>
			</view>
			<view class="album__content" v-else >
				<video style="width: 100%;" v-if="info.video[0]" :src="info.video[0].video"></video>
				<!-- <image v-if="info.video[0]" :src="info.video[0].img+'?vframe/jpg/offset/0'" mode=""></image> -->
				<!-- <image class="play" src="/static/image/match/play.png" mode=""></image> -->
			</view>
			
			<view class="detail-link flex-start">
				<view class="flex-start type">
					<image :src="info.classification_icon" mode="aspectFill"></image>
					{{info.classification_name}}
				</view>
				<view class="flex-start">
					<image src="/static/image/news/eyes.png" mode=""></image>
					<text class="font24">{{info.click}}</text>
				</view>
			</view>
			
		</view>
		<comment-community ref="eg" :articleId="id" style="background-color: white;"></comment-community>
		
		
		<view class="detail-common flex">
			<view class="flex-start input"  @click="setEg()">
				<image src="/static/image/news/topic9.png" mode=""></image>
				<text>{{$t('news.input')}}</text>
			</view>
			<!-- <image src="/static/image/news/topic7.png" mode="" @click="setEg()"></image> -->
			<view class="flex-start">
				<image :src="info.is_likes == 0?'/static/image/news/topic4.png' :'/static/image/news/zan.png'" mode="" @click="likes(info.is_likes)"></image>
				<text>{{info.likes}}</text>
			</view>
			<image :src="info.is_favorites == 0?'/static/image/news/topic1.png':'/static/image/news/fav.png'" mode="" @click="favorites(info.is_favorites)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				info:{
					
				},
				detail:{}
			}
		},
		mounted() {
			
			
		},
		computed:{
			infos() {
				return this.$store.state.info
			},
		},
		onLoad(optin) {
			this.id = optin.id;
			this.navigate(optin)
			// this.$u.get('/api/Headlines/getInfo', {id:optin.id}).then(res => {
			// 	this.detail = res
			// })
		},
		methods:{
			/* 关注 */
			attention(type) {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				uni.showLoading({
					title:this.$t('common.lab')
				})
				uni.$u.http.post('/api/Member/attention', {id:this.info.uid}).then(res => {
					uni.hideLoading()
					this.info.is_attention = type == 1?type = 0 : type = 1
				})
				
			},
			navigate(item){
				uni.showLoading({
					title:'loading'
				})
				// console.log(item);
				uni.$u.http.get('/api/circle/info', {params:{id:item.id}}).then(res => {
					this.detail = res;
					this.info = res.info;
					uni.hideLoading()
					uni.pageScrollTo({ 　　　　　　
				　　　　duration: 0,//过渡时间必须为0，否则运行到手机会报错
				　　　　scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
				　　})
				})
			},
			
			/* 打开评论 */
			setEg() {
				this.$refs.eg.showCom()
			},
			
			/* 点赞 */
			likes(type) {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				uni.showLoading({
					title:this.$t('common.lab')
				})
				uni.$u.http.post('api/Circleuser/likes',{id:this.info.id}).then(res=>{
					this.info.is_likes = type==1?0:1;
					type == 1?this.info.likes -- : this.info.likes ++
					uni.hideLoading()
				}).catch(res=>{})
			},
			/* 收藏 */
			favorites(type) {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				uni.showLoading({
					title:this.$t('common.lab')
				})
				uni.$u.http.post('api/Circleuser/favorites',{id:this.info.id}).then(res=>{
					this.info.is_favorites = type==1?0:1;
					uni.hideLoading()
				}).catch(res=>{})
			}
			
		}
	}
</script>

<style>
	.detail-comtent>>>img {
		height: auto !important;
		width: 100% !important;
	}
</style>
<style lang="scss" scoped>
	page {
		background-color: #F3F3F7;
	}
	.detail {
		padding-bottom: 100rpx;
	}
	video {
		margin-top: 20rpx;
		z-index: 0;
	}
	.album {
		// margin-top: 20rpx;
		padding: 0 24rpx;
		margin-bottom: 64rpx;
		border-radius: 12rpx;
		background-color: white;
		.logo {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.nav {
			padding-top: 20rpx;
		}
		.album__content {
			position: relative;
			margin-top: 30rpx;
			image {
				border-radius: 10rpx;
			}
			
			.play {
				position: absolute;
				top: 40%;
				left: 50%;
				margin-left: -60rpx;
				width: 80rpx;
				height: 80rpx;
				
			}
		}
		.tabbar {
			margin-top: 22rpx;
			padding: 0 22rpx;
			image {
				width: 48rpx;
				height: 48rpx;
			}
			view {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
		.detail-head-status {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 24rpx;
			border-radius: 6rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			text-align: center;
			border: 2rpx solid #F1F1F1;
			background: url('/static/image/live/live-at.png')center top / 100% 100%;
			// background: linear-gradient(90deg, #DC3C23 0%, #DC3C23 100%);
			image {
				width: 28rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}
		.active {
			background:#ccc
		}
	}
	.detail-head {
		position: sticky;
		top: 0;
		z-index: 99;
		padding: 14rpx 24rpx;
		background-color: white;
		border-bottom: 2rpx solid #F0F0F0;
		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}
		.detail-head-left {
			width: 60rpx;
			height: 60rpx;
			margin-right: 32rpx;
		}
		.detail-head-logo {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.detail-head-name {
			flex: 1;
			font-size: 28rpx;
			
		}
		
	}
	.detail-comtent {
		margin-top: 20rpx;
		padding: 32rpx 24rpx;
		background-color: white;
		.detail-link {
			margin-top: 24rpx;
			view {
				color: #999;
				image {
					width: 32rpx;
					height: 24rpx;
					margin-right: 16rpx;
					border-radius: 6rpx;
				}
			}
		}
		.type {
			color: #fff !important;
			border-radius: 10rpx;
			margin-right: 20rpx;
			padding: 10rpx 20rpx;
			background: rgb(238, 192, 123);
			text {
				color: #fff;
			}
			image {
				height: 32rpx !important;
			}
		}
	}
	.detail-article {
		padding: 0 24rpx;
		margin-top: 20rpx;
		padding-bottom: 120rpx;
		background-color: white;
		
		.detail-article-title {
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			padding-top: 32rpx;
			
		}
		.detail-article-li {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F0F0F0;
			view {
				flex: 1;
				color: #333;
				font-size: 32rpx;
				margin-right: 90rpx;
			}
			image {
				width: 242rpx;
				height: 136rpx;
				border-radius: 12rpx;
			}
		}
	}

	.detail-common {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: white;
		padding: 18rpx 28rpx;
		image {
			width: 60rpx;
			height: 60rpx;
			margin-left: 16rpx;
		}
		text {
			color: #999;
		}
		.input {
			flex: 1;
			color: #999;
			font-size: 28rpx;
			border-radius: 12rpx;
			padding: 22rpx 32rpx;
			background-color: #F5F5F5;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 32rpx;
			}
		}
	}
	
</style>