<template>
	<view class="content">
		<view class="personal-wrap">
			<!-- 头像，名称，等级 -->
			<view class="user-info">
				<image :src="user.avatar" />
				<view class="name-vip-type">
					<view class="name-vip">
						<text class="title">{{user.nickname}}</text>
						<view class="VIP">
							<image src="../../icons/vip.png"></image>
							{{user.level.name1}}
						</view>
					</view>
					<view class="type">
						<text>帮工</text>
						<text>配送员</text>
						<text>销售员</text>
					</view>
				</view>
			</view>
			<!-- content  -->

			<view class="nodata" v-if="personlist.length==0">暂无数据</view>
			<view v-else>
				<view class="new-release-content" v-for="(item,index) in personlist" :key="index" @click="luntandetail(item)">
					<!-- 头像，名称，等级 -->
					<view class="userinfo-wrap">
						<image :src="item.user.avatar"></image>
						<text class="title">{{item.user.nickname}}</text>
						<view class="VIP">
							<image src="../../icons/vip.png"></image>
							{{item.user.level.name1}}
						</view>
					</view>
					<!-- type -->
					<view class="type-wrap">
						帮工招聘求职
						<text>帮工</text>
						<text>配送员</text>
						<text>销售员</text>
					</view>
					<!-- content -->
					<view class="release-text">
						<view class="release-text-title">
							{{item.title}}
						</view>
						<view class="release-text-content">
							<rich-text :nodes="item.content"></rich-text>
						</view>
					</view>
					<!-- 点赞， 人数 -->
					<view class="thumbs-number">
						<view class="thumbs">
							<image src="../../icons/thumbs.png"></image>
							{{item.praise}}
						</view>
						<view class="number">
							<image src="../../icons/number.png"></image>
							{{item.view}}
						</view>
					</view>
				</view>


			</view>

		</view>


	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				showbanben: false,
				user_id: '',
				page: 1,
				personlist: [],
				user: ''
			}
		},
		onLoad(options) {
			console.log(options)
			this.user_id = options.userid;
			this.user = JSON.parse(options.user);
			console.log(this.user)
			this.getpersonpage()
		},
		methods: {
			hidebanben() {
				this.showbanben = false;

			},
			// 获取个人主页
			getpersonpage() {
				let that = this;
				let url = 'forum/get_user_forum';
				var params = {
					user_id: that.user_id,
					page: that.page,
					pageNum: 10
				}
				app.post(url, params).then((res) => {
					console.log(res);
					console.log(res.data.data.length)
					that.personlist = that.personlist.concat(res.data.data);
					console.log(that.personlist.length)
				})
			},
			// 更多
			goodkind() {
				uni.navigateTo({
					url: '/pages/homepage/goodkind'
				})
			},
			// 积分商城
			jifenshop() {
				uni.navigateTo({
					url: '/pages/homepage/jifenshop'
				})
			},
			// 搜索
			search() {
				uni.navigateTo({
					url: '/pages/homepage/search'
				})
			},
			// 秒杀
			miaosha() {
				uni.navigateTo({
					url: '/pages/homepage/miaosha'
				})
			},
			
			// 论坛详情
			luntandetail(item){
				uni.navigateTo({
					url:'/pages/luntan/luntandetail?id='+item.id
				})
			},
		}

	}
</script>

<style>
	page {
		background: #F9F9F9;
	}

	.release-text-content {
		height: 120rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.personal-wrap .user-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 32rpx;
		margin-bottom: 15rpx;
		background: #fff;
	}

	.personal-wrap .user-info image {
		width: 128rpx;
		height: 128rpx;
	}

	.personal-wrap .user-info .name-vip-type {
		padding-left: 28rpx;
	}

	.personal-wrap .user-info .name-vip {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.personal-wrap .user-info .name-vip .title {
		font-size: 32rpx;
		padding-right: 20rpx;
		color: #061220;
		font-weight: bold;
	}

	.personal-wrap .user-info .name-vip .VIP {
		width: 100rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #f4d297 0%, #fcbf75 100%);
		color: #784700;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		border-radius: 50rpx;
	}

	.personal-wrap .user-info .name-vip .VIP image {
		width: 24rpx;
		height: 20rpx;
	}

	.personal-wrap .user-info .type text {
		margin-right: 16rpx;
		text-align: center;
		color: #C29445;
		font-size: 22rpx;
		border-radius: 50rpx;
		border: 1px solid #EEEEEE;
		padding: 5rpx 20rpx;
	}

	.personal-wrap .new-release-content {
		padding: 32rpx;
		background: #fff;
		border-bottom: 1px solid #EEEEEE;
	}

	.personal-wrap .new-release-content .userinfo-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.personal-wrap .new-release-content .userinfo-wrap image {
		width: 60rpx;
		height: 60rpx;
	}

	.personal-wrap .new-release-content .userinfo-wrap .title {
		font-size: 32rpx;
		padding: 0 20rpx;
		color: #061220;
		font-weight: bold;
	}

	.personal-wrap .new-release-content .userinfo-wrap .VIP {
		width: 100rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #f4d297 0%, #fcbf75 100%);
		color: #784700;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		border-radius: 50rpx;
	}

	.personal-wrap .new-release-content .userinfo-wrap .VIP image {
		width: 24rpx;
		height: 20rpx;
	}

	.personal-wrap .new-release-content .type-wrap {
		color: #BDC4CE;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.personal-wrap .new-release-content .type-wrap text:nth-child(1) {
		margin-left: 16rpx;
	}

	.personal-wrap .new-release-content .type-wrap text {
		margin-right: 16rpx;
		text-align: center;
		color: #C29445;
		font-size: 22rpx;
		border-radius: 50rpx;
		border: 1px solid #EEEEEE;
		padding: 5rpx 20rpx;
	}

	.personal-wrap .new-release-content .release-text .release-text-title {
		font-size: 32rpx;
		color: #061220;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 12rpx;
	}

	.personal-wrap .new-release-content .release-text .release-text-content {
		font-size: 28rpx;
		color: #3C444C;
	}

	.personal-wrap .new-release-content .thumbs-number {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.personal-wrap .new-release-content .thumbs-number .thumbs {
		margin-right: 16rpx;
	}

	.personal-wrap .new-release-content .thumbs-number .thumbs,
	.personal-wrap .new-release-content .thumbs-number .number {
		color: #5B5E64;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.personal-wrap .new-release-content .thumbs-number .thumbs image,
	.personal-wrap .new-release-content .thumbs-number .number image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
</style>