xiangqin/pages/forum/forumInfo.vue

<template>
	<view class="index">
		<view class="item">
			<view class="top1 u-flex u-row-between">
				<view class="topleft u-flex">
					<image :src="info.headimg" mode="" @click="headclick"></image>
					<view class="">
						<view class="name">
							{{info.nickame}} 
							<!-- <image src="../../static/index/1@2x.png" mode=""></image> -->
						</view>
						<view class="area">
							{{info.city}}·{{info.age}}岁
						</view>
					</view>
				</view>
				<!-- <view class="topright">
					关注
				</view> -->
			</view>
			<view class="iteminfo">
				{{info.content}}
			</view>
			<view class="imaglist u-flex"  v-if="info.suffix!='mp4'">
				<view class="imgbox" v-for="(ite,ind) in info.show_images" :key="ind" @click="lookImage(ite)">
					<image :src="ite" mode="" ></image>
				</view>
			</view>
			<video :src="info.show_images[0]" class="video" v-if="item.suffix=='mp4'"></video>
			<view class="bottom u-flex u-row-between">
				<view class="u-flex u-row-left">
					<view class="zan">
						<!-- <image src="../../static/forum/2@2x.png" mode="" v-show="info.is_give==1"></image> -->
						<image src="../../static/forum/5@2x.png" mode=""></image>
						<text>{{info.give.length||0}}</text>
					</view>
					<view class="talk">
						<image src="../../static/forum/3@2x.png" mode=""></image>
						<text>{{info.comment.length||0}}</text>
					</view>
				</view>
				<!-- <image src="../../static/forum/more.png" mode="" style="width: 36rpx;height: 36rpx;"></image> -->
			</view>
		</view>
		<view class="tab u-flex">
			<view class="" :class="{'select':current==index}" v-for="(item,index) in list" :key="index" @click="itemClick(index)">
				{{item}}
			</view>
		</view>
		<view class="" v-show="current==0">
			<view class="topleft u-flex u-row-between" style="margin-top: 40rpx;padding-left: 30rpx;"v-for="(item,index) in info.give">
				<view class="u-flex ">
					<image :src="item.headimg" mode=""></image>
					<view class="">
						<view class="name">
							{{item.nickname}}
						</view>
						<view class="area">
							{{item.shortname}}·{{item.age}}岁
						</view>
					</view>
				</view>
				<view class="topright" @click="toguanzhu(item,index)">
					{{item.guanzhu==1?'已关注':'关注'}}
				</view>
			</view>
		</view>
		<view class=""  v-show="current==1">
			<view class="pinglunitem" v-for="(item,index) in info.comment" :key="index">
				<view class="topleft u-flex u-row-between" style="margin-top: 40rpx;padding-left: 30rpx;">
					<view class="u-flex ">
						<image :src="item.headimg" mode=""></image>
						<view class="">
							<view class="name">
								{{item.nickname}} 
							</view>
							<view class="area">
								{{item.shortname}}·{{item.age}}岁
							</view>
						</view>
					</view>
					<view class="topright" @click="toguanzhu(item,index)">
						{{item.guanzhu==1?'已关注':'关注'}}
					</view>
				</view>
				<view class="content">
					{{item.comment}}
				</view>
				<view class="pinglun">
					{{item.create_at}}
				</view>
			</view>
		</view>
		<view class="bottomBox u-flex">
			<u--input type="text" v-model="content" :clearable="true"@confirm='confirm'  :border="false" placeholder="说点什么吧"></u--input>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.id=option.id
			this.getInfo(option.id)
		},
		data() {
			return {
				list:['赞','评论'],
				current:0,
				info:{},
				content:'',
				id:'',
				userInfo:JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		methods: {
			toguanzhu(item,index){
				uni.$u.http.post('/api/user/user_follow',{mid:item.id}).then(res => {
					if(res.code==1){
						if(item.guanzhu==1){
							item.guanzhu=0;
						}else{
							item.guanzhu=1;
						}
						this.getInfo(this.id)
						this.$u.toast(res.msg)
					}
				})
			},
			headclick(){
				var id=uni.setStorageSync('userId')
				if(id&&id==this.info.m_id){
					uni.navigateTo({
						url:'../profile/myPage'
					})
				}else{
					uni.navigateTo({
						url:'/pages/profile/otherPage?id='+this.info.m_id
					})
				}
					
			},
			confirm(e){
				if(this.userInfo.vip_level==0){
					this.$u.toast('您暂未认证')
					return
				}
				if(this.userInfo.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.userInfo.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				
					if(!this.content){
						this.$u.toast('请输入要评论的内容')
						return
					}
					uni.$u.http.post('/api/forum/forum_comment',{fid:this.info.id,comment:this.content}).then(res => {
						if(res.code==1){
							this.$u.toast(res.msg)
							this.content=''
							this.getInfo(this.id)
						}
					})
			},
			dianzan(item,index){
				uni.$u.http.post('/api/forum/forum_give',{fid:this.info.id}).then(res => {
					if(res.code==1){
						if(this.info.is_give==1){
							this.info.is_give=0;
							this.info.give=this.info.give-1;
						}else{
							this.info.is_give=1;
							this.info.give=this.info.give+1;
						}
						this.$u.toast(res.msg)
					}
				})
			},
			lookImage(ite) {
				let imgsArray = [];
				imgsArray[0] = ite;
				uni.previewImage({
					current: 0,
					urls: imgsArray,
			
				});
			},
			getInfo(id){
				uni.$u.http.post('/api/forum/forumdetails', {
					id: id
				}).then(res => {
					this.info=res.data
				})
			},
			itemClick(index){
				if(this.current!=index){
					this.current=index
				}
			}
		}
	}
</script>

<style lang="scss">
	.topright {
		margin-right: 20rpx;
		width: 108rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		border-radius: 28rpx;
		border: 3rpx solid #C7A6CE;
		font-weight: 400;
		color: #999999;
		background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.bottom{
		color: #999999;
		font-size: 24rpx;
		.zan{
			margin-right: 40rpx;
			// font-weight: 400;
			// background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			image{
				vertical-align: middle;
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}
		.zan1 {
			background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.talk{
			image{
				vertical-align: middle;
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}
	}
	.pinglunitem{
		padding-bottom: 28rpx;
		border-bottom: 2rpx solid #F2F2F2;
	}
	.pinglun{
		padding-left: 118rpx;
color: #999999;
font-size: 20rpx;
	}
	.content{
		margin: 12rpx 32rpx 12rpx 118rpx;
		font-size: 24rpx;
		color: #222222;
line-height: 34rpx;
	}
	.bottomBox{
		box-sizing: border-box;
		padding-top: 16rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8rpx 0px rgba(0,0,0,0.1000);
		input{
			padding-left: 32rpx;
			width: 690rpx;
			height: 72rpx;
			background: #F3F3F3;
			border-radius: 40rpx;
			margin: 0 auto;
		}
	}
	.index{
		padding-bottom: 170rpx;
	}
	.topleft{
		image{
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.name{
			font-size: 28rpx;
			color: #222222;
			font-weight: 600;
			image{
				margin-left: 8rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
		.area{
			font-size: 20rpx;
			color: #999999;
		}
	}
	.tab{
		margin-top: 20rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		color: #999999;
		font-weight: 600;
		view{
			padding-bottom: 10rpx;
			margin-right: 40rpx;
		}
	}
	.select{
		color: #222222;
		position: relative;
	}
	.select::before{
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 20rpx;
		height: 4rpx;
		background: #222222;
		border-radius: 2rpx;
	}
	.bottom{
		color: #999999;
		font-size: 24rpx;
		.zan{
			margin-right: 40rpx;
			// font-weight: 400;
			// background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			image{
				vertical-align: middle;
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}
		.talk{
			image{
				vertical-align: middle;
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}
	}
	.imaglist{
		flex-wrap: wrap;
		.imgbox{
			margin-right: 15rpx;
			max-width: 220rpx;
			max-height: 220rpx;
			margin-bottom: 20rpx;
			image{
				max-width: 220rpx;
				max-height: 220rpx;
				border-radius: 20px;
			}
		}
		.imgbox:nth-child(3n+3) {
			margin-right: 0;
		}
		
		
	}
	.iteminfo{
		margin: 22rpx 0 20rpx;
		font-size: 28rpx;
		color: #222222;
	}
.item{
			padding: 36rpx 30rpx;
			border-bottom: 2rpx solid #F2F2F2;
			.video{
				margin-bottom: 42rpx;
				width: 690rpx;
				height: 320rpx;
				border-radius: 20rpx;
			}
			
			.topright{
				width: 108rpx;
				height: 56rpx;
				text-align: center;
				line-height:  56rpx;
				border-radius: 28rpx;
				border: 3rpx solid #C7A6CE;
				font-weight: 400;
				color: #999999;
				background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
</style>