universal-wechat-uniapp-241007/pages/index/index.vue

<template>
	<view class="page">

		<!-- 瑶都万能墙 -->
		<view class="Headbackground">
			<view class="top">
				<view class=" profilePicture">
					<image :src="headinfo.headImage" mode=""></image>
				</view>
				<view class="UniversalWall">
					<view class="dynamic">
						{{headinfo.name}}
					</view>

					<view class="dynamics">
						{{headinfo.num}}动态<text>|</text>{{headinfo.userNum}}江华人
					</view>
				</view>

				<view class="join">
					加入
				</view>
			</view>
		</view>

		<view class="life">
			<view class="mouse" @click="menuClick(index)" 
			:key="index" 
			v-for="(item, index) in menu">
				<view class="RentingAhouseimg">
					<image 
					:src="`../../static/image/home/${index}.png`" 
					style="width: 90rpx;height: 90rpx;" mode=""></image>
				</view>
				<view class="RentingAhouse">
					{{ item.name }}
				</view>
			</view>
		</view>

		<view class="LabelOptions">
			<uv-tabs :list="tabs" 
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#00f"
			lineHeight="8rpx"
			lineWidth="50rpx"
			keyName="title"
			@click="tabsClick"></uv-tabs>
		</view>

		<view class="works" :key="index" 
		v-for="(item, index) in list">
			<view class="box">
				<view class="headPortraitimg">
						<!-- <image :src="item" mode=""></image> -->
				</view>
				<view class="YaoduUniversalWall">
					<view class="heide">
						<view class="username text-ellipsis">
							
						</view>
						<view class="inde">
							男性
						</view>
						<view class="inde">
							99年
						</view>
						<view class="inde">
							大路铺镇
						</view>
						<view class="authentication">
							官方认证
						</view>
					</view>

					<view class="Times">
						<view class="TimeMonth">
							<!-- 10-08 -->
							{{ item.createTime }}发布
						</view>
						<!-- <view class="Month">
							12:34
						</view> -->
					</view>
				</view>
			</view>
			<view class="dynamics"
			v-html="$utils.stringFormatHtml(item.title)">
			</view>
			<view class="Artworkimages">
				<view class="wrokimg" 
				:key="i"
				v-for="(img, i) in item.image && item.image.split(',')">
					<image :src="img" mode=""></image>
				</view>
			</view>
			<view class="bottom">
				<view class="browse">
					{{ item.isBrowse }}浏览
				</view>
				<view class="browse">
					{{ item.isComment }}条评论
				</view>
				<view class="Leavingamessage">
					<uv-icon size="30rpx" name="chat"></uv-icon>
				</view>
			</view>
		</view>
		
		<view class="createDetail"
		@click="$refs.createDetailPopup.open('bottom')">
			<uv-icon
			size="40rpx"
			color="#fff"
			name="plus"></uv-icon>
		</view>
		
		<uv-popup ref="createDetailPopup" :round="30">
			<view class="createDetailPopup">
				<view class=""
				:key="index"
				@click="$utils.navigateTo(item.path)"
				v-for="(item, index) in createDetail">
					<image
					:src="`../../static/image/home/${index}.png`" 
					style="width: 90rpx;height: 90rpx;" mode=""></image>
					
					<view class="info">
						<view class="title">
							{{ item.name }}
						</view>
						<view class="desc">
							{{ item.desc }}
						</view>
					</view>
					<view class="icon">
						<uv-icon
						size="30rpx"
						name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
		</uv-popup>

		<PrivacyAgreementPoup />
		<tabber select="0" />
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import tabber from '@/components/base/tabbar.vue'
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsList],
		components: {
			tabber,
			PrivacyAgreementPoup,
		},
		data() {
			return {
				tabs: [
					// {
					// 	name: '圈子动态',
					// }, 
					// {
					// 	name: '二手集市',
					// }, 
					// {
					// 	name: '游戏组局'
					// }, 
				],
				headinfo: {},
				menu : [
					{
						name : '租房',
					},
					{
						name : '工作',
					},
					{
						name : '活动',
					},
					{
						name : '美食',
					},
				],
				createDetail : [
					{
						name : '圈子动态',
						desc : '发布动态（请发布到合适的分区）',
						path : '/pages_order/post/addPost',
					},
					// {
					// 	name : '房屋出租',
					// 	desc : '发布房屋出租',
					// 	path : '/pages_order/renting/addRenting',
					// },
					// {
					// 	name : '工作',
					// 	desc : '发布工作',
					// 	path : '/pages_order/recruit/addRecruit',
					// },
				],
				mixinsListApi : 'getPostPage',
			}
		},
		onShow() {
			this.getCategory()
			this.getIndexHeaderInfo()
			this.getData()
		},
		computed: {},
		methods: {
			tabsClick(item) {
				console.log('item', item);
			},
			menuClick(index) {
				console.log(index);
				// 跳转页面
				if (index == 0) {
					uni.navigateTo({
						url: '/pages_order/renting/rentingList'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages_order/recruit/recruitList'
					})
				} else if (index == 2) {
					uni.reLaunch({
						url: '/pages/index/activity'
					})
				}
			},
			// 获取分类
			getCategory(){
				// 发起请求
				this.$api('getClassInfo', res => {
					if(res.code == 200){
						this.tabs = res.result
					}
				})
			},
			//获取首页头部信息
			getIndexHeaderInfo(){
				this.$api('getIndexHeaderInfo',res =>{
					if(res.code == 200){
						this.headinfo = res.result
					}
				})
			},
			//根据分类获取动态帖子列表带分页
			// getPostPage(){
			// 	this.$api('getPostPage', {
			// 		pageNo : 1,
			// 		pageSize : 10,
			// 	},res =>{
			// 		if(res.code == 200){
			// 			this.postList = res.result.records
			// 		}
			// 		console.log(res);
			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.Headbackground {
		padding-top: 200rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));

		.top {
			display: flex;
			color: white;
			padding: 35rpx;
			align-items: center;

			.profilePicture {
				width: 100rpx;
				height: 100rpx;
				image{
					border-radius: 20rpx;
				}
			}

			.UniversalWall {
				padding: 0rpx 45rpx;

				.dynamic {
					font-size: 40rpx;
					letter-spacing: 5rpx;
				}

				.dynamics {
					margin-top: 20rpx;
					font-size: 25rpx;

					text {
						margin: 0 20rpx;
					}
				}
			}

			.join {
				width: 125rpx;
				height: 50rpx;
				background-color: $uni-color-primary;
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
			}

		}
	}

	.life {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;
		flex-wrap: wrap;

		.mouse {
			.RentingAhouseimg {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 15rpx;
				width: 130rpx;
				height: 100rpx;
				background-color: #ffffff;
				border-top-left-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				border-bottom-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
		}
	}

	.works {
		margin: 40rpx 24rpx;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 6rpx 6rpx #00000011;

		.box {
			display: flex;
			align-items: center;

			.headPortraitimg {
				width: 100rpx;
				height: 100rpx;
				background-color: greenyellow;
				border-radius: 15rpx;
				overflow: hidden;
			}

			.YaoduUniversalWall {
				padding: 0rpx 10rpx;
				.username{
					max-width: 200rpx;
				}

				.heide {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.inde {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
					font-size: 20rpx;
					height: 30rpx;
					color: white;
					background-color: rgb(124, 136, 242);
					border-radius: 7rpx;
					flex-shrink: 0;
				}

				.authentication {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
					font-size: 20rpx;
					height: 34rpx;
					padding: 0rpx 10rpx;
					color: white;
					background-color: #ffd036;
					border-radius: 7rpx;
					flex-shrink: 0;
				}

				.Times {
					display: flex;
					padding: 5rpx 0rpx;
					font-size: 20rpx;
					margin-top: 10rpx;

					.Month {
						margin: 0rpx 15rpx;
					}
				}

			}
		}

		.personalInformation {
			display: flex;

			.inde {
				font-size: 25rpx;
				padding: 0rpx 8rpx;
			}

			.authentication {
				font-size: 25rpx;
			}
		}

		.dynamics {
			margin-top: 20rpx;
			font-size: 28rpx;
			// font-weight: bold;
			// line-height: 35rpx;
			letter-spacing: 3rpx;
		}

		.Artworkimages {
			display: flex;
			flex-wrap: wrap;

			.wrokimg {
				margin: 10rpx;
				
				image {
					height: 190rpx;
					width: 190rpx;
					border-radius: 20rpx;
				}
			}
		}

		.bottom {
			display: flex;

			font-size: 20rpx;

			.browse {
				margin: 0rpx 30rpx;
				color: rgb(132, 132, 132);
			}

			.Leavingamessage {
				height: 20rpx;
				width: 20rpx;
				margin-left: auto;
			}
		}
	}
	
	.createDetail{
		position: fixed;
		top: 50vh;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: $uni-color-primary;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx 10rpx rgba(#000, 0.1);
	}
	.createDetailPopup{
		padding: 20rpx;
		background-color: #ffffff;
		&>view{
			display: flex;
			align-items: center;
			padding: 24rpx;
			background-color: #f7f7f7;
			margin: 20rpx;
			border-radius: 20rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}
			.info{
				.title{
					font-size: 30rpx;
				}
				.desc{
					font-size: 24rpx;
				}
			}
			.icon{
				margin-left: auto;
			}
		}
	}
</style>