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

<template>
	<view class="page">

		<!-- 瑶都万能墙 -->
		<view class="Headbackground">
			<view class="Toggle">
				<uv-icon
				size="30rpx"
				color="#fff"
				name="map"></uv-icon>
				长沙
			</view>
			<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(item.url)" 
			:key="index" 
			v-for="(item, index) in menu">
				<view class="RentingAhouseimg">
					<image 
					:src="item.icon" 
					style="width: 90rpx;height: 90rpx;" mode=""></image>
				</view>
				<view class="RentingAhouse">
					{{ item.title }}
				</view>
			</view>
		</view>

		<view class="LabelOptions">
			<uv-tabs :list="category" 
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#00f"
			lineHeight="8rpx"
			lineWidth="50rpx"
			keyName="title"
			@click="tabsClick"></uv-tabs>
		</view>
		
		<dynamicItem
		:key="index"
		v-for="(item, index) in list"
		:item="item"
		/>

		<createDetailPopup/>

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

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import tabber from '@/components/base/tabbar.vue'
	import createDetailPopup from '@/components/user/createDetailPopup.vue'
	import dynamicItem from '@/components/list/dynamic/dynamicItem.vue'
	import mixinsList from '@/mixins/list.js'
	import { mapState } from 'vuex'
	export default {
		mixins: [mixinsList],
		components: {
			tabber,
			PrivacyAgreementPoup,
			createDetailPopup,
			dynamicItem,
		},
		data() {
			return {
				headinfo: {},
				menu : [],
				mixinsListApi : 'getPostPage',
			}
		},
		onShow() {
			this.getIndexHeaderInfo()
			this.getClassifyList()
			this.$store.commit('getCategory')
		},
		computed: {
			...mapState(['city', 'category']),
		},
		methods: {
			tabsClick(item) {
				console.log('item', item);
			},
			menuClick(url) {
				// 跳转页面
				if (url.includes('reLaunch:')) {
					uni.reLaunch({
						url : url.replace('reLaunch:', '')
					})
				}else{
					uni.navigateTo({
						url
					})
				}
			},
			//获取首页头部信息
			getIndexHeaderInfo(){
				this.$api('getIndexHeaderInfo',res =>{
					if(res.code == 200){
						this.headinfo = res.result
					}
				})
			},
			//获取菜单
			getClassifyList(){
				this.$api('getClassifyList',res =>{
					if(res.code == 200){
						this.menu = res.result
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.Headbackground {
		padding-top: 150rpx;
		background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
		.Toggle{
			margin: 10rpx 30rpx;
			padding: 20rpx;
			background-color: #00000022;
			color: #fff;
			border-radius: 40rpx;
			width: fit-content;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
		.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;
			}
		}
	}

	
	
	
</style>