xiangqin/pages/forum/forum.vue

<template>
	<view>
		<image src="../../static/bg.png" mode="" class="bg"></image>
		<view class="top">
			<image src="../../static/forum/1@2x.png" mode=""></image>
		</view>
		<view class="content">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top1 u-flex u-row-between">
					<view class="topleft u-flex">
						<image :src="item.headimg" mode="" @click="headclick(item)"></image>
						<view class="">
							<view class="name">
								{{item.nickame}}
								<image src="../../static/index/1@2x.png" mode="" v-show="item.sex==2"></image>
								<image src="../../static/index/2@2x.png" mode="" v-show="item.sex==1"></image>
							</view>
							<view class="area">
								{{item.city}}·{{item.age}}岁
							</view>
						</view>
					</view>
					<view class="topright" @click="toguanzhu(item,index)">
						{{item.guanzhu==1?'已关注':'未关注'}}
					</view>
				</view>
				<view class="iteminfo">
					{{item.content}}
				</view>
				<view class="imaglist u-flex" v-if="item.suffix=='png'||item.suffix=='jpg'">
					<view class="imgbox" v-for="(ite,ind) in item.show_images" :key="ind">
						<image :src="ite" mode=""  @click="lookImage(ite)"></image>
					</view>
				</view>
				<video :src="item.show_images[0]" class="video" v-if="item.suffix=='mp4'"></video>
				<view class="bottom u-flex u-row-right">
					<view class="zan" :class="{'zan1':item.is_give==1}" @click="dianzan(item,index)">
						<image src="../../static/forum/2@2x.png" mode="" v-show="item.is_give==1"></image>
						<image src="../../static/forum/5@2x.png" mode="" v-show="item.is_give==0"></image>
						<text>{{item.give}}</text>
					</view>
					<view class="talk" @click="itemClick(item)">
						<image src="../../static/forum/3@2x.png" mode=""></image>
						<text>{{item.comment}}</text>
					</view>
				</view>
			</view>
		</view>
		<image src="../../static/forum/4@2x.png" mode="" @click="publish" class="fa"></image>
		<image src="../../static/forum/weirenzheng.png" mode="" class="norenzheng" v-show="show"></image>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.page=1
			this.getList()
			this.getUserInfo()
		},
		onPullDownRefresh() {
				this.page=1
				this.getList()
				this.getUserInfo()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		onReachBottom() {
			this.page++
			this.getList()
		},
		data() {
			return {
				info:{},
				show: false,
				page: 1,
				list: []
			}
		},
		methods: {
			getUserInfo(){
					uni.$u.http.post('/api/user/userinfo').then(res => {
						if(res.code==1){
							this.info=res.data
						}
					})
			},
			headclick(item){
				var id=uni.setStorageSync('userId')
				if(id&&id==item.m_id){
					uni.navigateTo({
						url:'../profile/myPage'
					})
				}else{
					uni.navigateTo({
						url:'/pages/profile/otherPage?id='+item.m_id
					})
				}
					
			},
			toguanzhu(item,index){
				uni.$u.http.post('/api/user/user_follow',{mid:item.m_id}).then(res => {
					if(res.code==1){
						if(item.guanzhu==1){
							this.list[index].guanzhu=0;
						}else{
							this.list[index].guanzhu=1;
						}
						this.$u.toast(res.msg)
					}
				})
			},
			dianzan(item,index){
				uni.$u.http.post('/api/forum/forum_give',{fid:item.id}).then(res => {
					if(res.code==1){
						if(item.is_give==1){
							this.list[index].is_give=0;
							this.list[index].give=this.list[index].give-1;
						}else{
							this.list[index].is_give=1;
							this.list[index].give=this.list[index].give+1;
						}
						this.$u.toast(res.msg)
					}
				})
			},
			//查看图片
			lookImage(ite) {
				let imgsArray = [];
				imgsArray[0] = ite;
				uni.previewImage({
					current: 0,
					urls: imgsArray,

				});
			},
			getList() {
				uni.$u.http.post('/api/forum/index', {
					page: this.page
				}).then(res => {
					if(this.page==1){
						this.list = res.data
					}else{
						this.list = [...this.list, ...res.data]
					}
				})
			},
			itemClick(item) {
				uni.navigateTo({
					url: './forumInfo?id='+item.id
				});
			},
			publish() {
				if(this.info.vip_level==0){
					if(!this.show){
						this.show=true
						setTimeout(()=>{
							this.show=false
						},2000)
					}
					return
				}
				if(this.info.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.info.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				// if(!this.show){
				// 	this.show=true
				// 	setTimeout(()=>{
				// 		this.show=false
				// 	},2000)
				// }
				uni.navigateTo({
					url: './publish'
				});
			}
		}
	}
</script>

<style lang="scss">
	.norenzheng {
		width: 160rpx;
		height: 44rpx;
		position: fixed;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.fa {
		width: 100rpx;
		height: 102rpx;
		position: fixed;
		bottom: 26rpx;
		right: 30rpx;
	}

	.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;
			}
		}
	}

	.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;
	}

	.content {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.item {
			padding: 36rpx 30rpx;
			border-bottom: 2rpx solid #F2F2F2;

			.video {
				margin-bottom: 42rpx;
				width: 690rpx;
				height: 320rpx;
				border-radius: 20rpx;
			}

			.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;
				}
			}

			.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;
			}
		}
	}

	.top {
		padding-top: 44rpx;
		padding-left: 30rpx;

		image {
			width: 102rpx;
			height: 60rpx;
		}
	}
</style>