zd_wechatApp/pages/noLogin/communitylist.vue

<template>
	<view>
		<image src="/static/icon/background.png" mode="" class="background"></image>
		<view style="padding-top: 60rpx;">
			<view style="margin: 20rpx;">
				<u-search placeholder="请输入小区名称" v-model="nameValue" :action-style="{'font-size':'40rpx'}" @custom="getProjectList()"></u-search>
			</view>
			<view v-for="(item,index) in list" :key="index" >
				<view class="project-content" @click="gotoindex(item)">
					<view>
						<view class="font-forty-eight blue">
							{{item.name}}<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data() {
			return {
				list:[],
				value:'',
				nameValue:'',
				civilPower:''
			}
		},
		onLoad(e) {
			console.log(e)
			this.value = e.value
			 this.getProjectList();
			this.getUserName();
		},
		methods: {
			gotoindex(item){
				console.log(item)
				if(this.value==2)
				{
					uni.navigateTo({
						url:`/pages/noLogin/PressureRegulatingBox/PressureRegulatingBox?community=${item.id}&communityName=${item.name}`
					})
				}else if(this.value==3)
				{
					uni.navigateTo({
						url:`/pages/noLogin/CourtyardNetworkManagement/CourtyardNetworkManagement?community=${item.id}&communityName=${item.name}`
					})
				}else
				{
					uni.navigateTo({
						url:`/pages/noLogin/buildinglist?value=${this.value}&community=${item.id}`
					})
				}
				
			},
			topage(url){
				uni.navigateTo({
					url
				})
			},
			getProjectList() {
				service.getArea().then(res=>{
					console.log('getProjectType', res)
					if(res.length == 0){
						this.$UTILS.showPrompt('暂无项目!')
					}
					this.list = res;
				})
			},
			getUserName(){
				service.getUserName().then(res=>{
					this.civilPower = res.civilPower;
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.background {
		z-index: -1;
		position: fixed;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}

	.project {
		border-radius: 72rpx;
		padding: 25rpx 0;
		text-align: center;
		margin: 170rpx 55rpx 0;
	}

	.project-content {
		border: 4rpx solid #3857F3;
		margin: 40rpx 55rpx 0;
		padding: 30rpx 20rpx;
		border-radius: 48rpx;
	}
	.position{
		position: absolute;
		bottom: 100rpx;
		right: 50rpx;
		.arrow{
			width: 152rpx;
			height: 152rpx;
			border-radius: 50%;
			padding: 25rpx;
			margin-left: 20rpx;
		}
	}
	
</style>