uniapp-ZHSQ/packages/community/communityDetail/index.vue

<template>
	<view class="container">
		<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
			<view class="searchBox_add">
				<img src="http://192.168.0.172:5500/com_communityIcon.png" alt="" />
				我的房产
			</view>
		</view>

		<div class="myRealEstate">
			<div class="myRealEstates">
				<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
				<div class="name">滏阳锦苑</div>
				<div class="Visitor">访客身份 点击立即入驻本社区</div>
			</div>


			<div class="Announcement">
				<image src="http://192.168.0.172:5500/com_Announcement.png" mode="aspectFill"></image>
				<div class="line"></div>
				<div class="msg" @click="notice">
					<div>asdasdasd</div>
					<image src="http://192.168.0.172:5500/com_more.png" mode="aspectFill"></image>
				</div>
			</div>
		</div>

		<div class="navList">
			<div class="navItem">
				<image src="http://192.168.0.172:5500/com_NavIcon1.png" mode="aspectFill"></image>
				物业服务
			</div>

			<div class="navItem" @click="repair">
				<image src="http://192.168.0.172:5500/com_NavIcon2.png" mode="aspectFill"></image>
				在线报修
			</div>

			<div class="navItem">
				<image src="http://192.168.0.172:5500/com_NavIcon3.png" mode="aspectFill"></image>
				物业缴费
			</div>

			<div class="navItem">
				<image src="http://192.168.0.172:5500/com_NavIcon4.png" mode="aspectFill"></image>
				物业公积
			</div>

			<div class="navItem">
				<image src="http://192.168.0.172:5500/com_NavIcon5.png" mode="aspectFill"></image>
				社区管家
			</div>

			<div class="navItem" @click="mores">
				<image src="http://192.168.0.172:5500/com_NavIconMore.png" mode="aspectFill"></image>
				更多
			</div>
		</div>

		<div class="tabList">
			<div class="tabItem tabItem1">
				门禁通行
			</div>
			<div class="tabItem tabItem2">
				人人爱净水
			</div>
			<div class="tabItem tabItem3">
				馒头领取
			</div>
		</div>

		<div class="nearbyTit">
			<div>周边补贴公积金商家</div>

			<div class="more">更多>>></div>
		</div>


		<div class="nearbyList">
			<div class="emptys" v-if="false">
				<image src="http://192.168.0.172:5500/com_nearbyList_empty.png" mode="aspectFill"></image>
				周边暂无补贴公积金商家

				<div class="emptysBtn">
					商户申请入驻
				</div>
			</div>

			<div class="nearbyList_left">
				<div class="nearbyList_leftItem">
					<image src="http://192.168.0.172:5500/com_nearbyImg1.png" mode="aspectFill"></image>
				</div>
				<div class="nearbyList_leftItem">
					<image src="http://192.168.0.172:5500/com_nearbyImg1.png" mode="aspectFill"></image>
				</div>
			</div>
			<div class="nearbyList_right">
				<div class="nearbyList_rightItem">
					<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image>
				</div>
				<div class="nearbyList_rightItem">
					<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image>
				</div>
				<div class="nearbyList_rightItem">
					<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image>
				</div>
			</div>
		</div>


		<div class="tabCard">
			<div @click="changeTab" data-active="0" :class="active == 0 ? 'active tabCardItem' : 'tabCardItem'">社区互动
			</div>
			<div @click="changeTab" data-active="1" :class="active == 1 ? 'active tabCardItem' : 'tabCardItem'">社区团购
			</div>
			<div @click="changeTab" data-active="2" :class="active == 2 ? 'active tabCardItem' : 'tabCardItem'">上门服务
			</div>
			<div @click="changeTab" data-active="3" :class="active == 3 ? 'active tabCardItem' : 'tabCardItem'">本地优选
			</div>
		</div>

		<div class="MsgList">


			<div v-if="active == 0" class="act1">
				<div class="empty" >
					<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image>
					暂无信息

					<div class="emptyAdd">发布社区互动信息</div>
				</div>

				<div class="MsgList_left" v-if="false">
					<div class="MsgList_leftItem">
						<div class="MsgList_leftItemImg">
							<image src="http://192.168.0.172:5500/com_MsgImg1.png" mode="widthFix"></image>
						</div>
						<div class="MsgList_leftItemName">我家的小猫丢了，谁看见了请联系我~</div>
						<div class="MsgList_leftItemMsg">
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image>
								134
							</div>
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image>
								134
							</div>
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image>
								134
							</div>
						</div>
					</div>

				</div>
				<div class="MsgList_right" v-if="false">
					<div class="MsgList_rightItem">
						<div class="MsgList_rightItemImg">
							<image src="http://192.168.0.172:5500/com_MsgImg2.png" mode="widthFix"></image>
						</div>

						<div class="MsgList_rightItemName">
							这几天准备去春游，小区有人一起去么？
						</div>

						<div class="MsgList_leftItemMsg">
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image>
								134
							</div>
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image>
								134
							</div>
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image>
								134
							</div>
						</div>
					</div>

					<div class="MsgList_rightItem">

						<div class="MsgList_rightItemName">
							这几天准备去春游，小区有人一起去么？
						</div>

						<div class="MsgList_leftItemMsg">
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image>
								134
							</div>
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image>
								134
							</div>
							<div class="MsgList_leftItemMsg_like">
								<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image>
								134
							</div>
						</div>
					</div>
				</div>
			</div>

			<div v-if="active == 1" class="act2">

				<div class="empty" >
					<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image>
					暂无信息

					<div class="emptyAdd">发布社区互动信息</div>
				</div>

				<div class="act2Item" v-for="itme in 3">
					<div class="act2Item_left">
						<image src="http://192.168.0.172:5500/com_act2Img.png" mode="widthFix"></image>
					</div>
					<div class="act2Item_right">
						<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
						<div class="act2Item_right_Msg">
							本社区已抢购 <span>1536份</span>
						</div>

						<div class="act2Item_right_Btn">
							<div class="act2Item_right_Btn_left">
								<image src="http://192.168.0.172:5500/com_act2Ms.png" mode="widthFix"></image>
								￥
								<span>5.58</span>
							</div>

							<div class="act2Item_right_Btn_right">
								立即抢购
							</div>

						</div>

					</div>
				</div>
			</div>

			<div v-if="active == 2" class="act2">

				<div class="empty" >
					<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image>
					暂无信息

					<div class="emptyAdd">发布社区互动信息</div>
				</div>

				<div class="act2Item" v-for="itme in 3">
					<div class="act2Item_left">
						<image src="http://192.168.0.172:5500/com_act2Img.png" mode="widthFix"></image>
					</div>
					<div class="act2Item_right">
						<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
						<div class="act2Item_right_Msg">
							本社区已抢购 <span>1536份</span>
						</div>

						<div class="act2Item_right_Btn">
							<div class="act2Item_right_Btn_left">
								￥
								<span>5.58</span>
								/时起
							</div>

							<div class="act2Item_right_Btn_right">
								立即预定
							</div>

						</div>

					</div>
				</div>
			</div>

			<div v-if="active == 3" class="act4">
				<div class="act4Item" v-for="itme in 4">
					<div class="act4Img">
						<image src="http://192.168.0.172:5500/com_act2Img.png" mode="aspectFill"></image>
					</div>
					<div class="act4Name">
						舒克小苏打牙膏（洁白细护）120G
					</div>
					<div class="act4Msg">
						本社区已抢购 <span>1536份</span>
					</div>
					<div class="act4Price">
						<span>￥</span>
						99.00
					</div>
				</div>
			</div>
		</div>

	</view>

</template>

<script>
import {
	request,
	picUrl,
	uniqueByField,
	menuButtonInfo
} from '../../../utils';
import {
	apiArr
} from '../../../api/community';


export default {
	data() {
		return {
			top: "",
			localHeight: "",
			active: 0
		}
	},
	onLoad(options) {
		const meun = menuButtonInfo();
		this.top = meun.top;
		// this.top = meun.height + meun.top;
		this.localHeight = meun.height;
	},


	methods: {
		changeTab(e) {
			const active = e.currentTarget.dataset.active;
			this.active = active;
		},

		mores() {
			uni.navigateTo({
				url: '../serverList/index'
			})
		},

		notice(){
			uni.navigateTo({
				url: '../notice/index'
			})
		},

		repair(){
			uni.navigateTo({
				url: '../repairList/index'
			})
		},
	},


}
</script>

<style>
@import url("./index.css");
</style>