konggang-city-miniprogram/pages/park/index.vue

<template>
	<view class="content">
		
		<view class="display-flex-start map-header-box">
			<uni-easyinput prefixIcon="search" v-model="headerVal" placeholder="请输入园区名称搜索" @iconClick="headerSerach()" class="map-search-box"></uni-easyinput>
			<navigator url="/pages/park/map_search"><button type="default" class="map-search-btn">地图查找</button></navigator>
		</view>
		
		<view class="park-select-box">
			<view class="park-select" @click="showFilterBox()">
				<view class="park-select-font">园区类型</view>
				<view class="corner"></view>
			</view>
			
			<view class="park-filter-box" v-show="filterBoxFlag">
				<view class="filter-content display-wrap" style="justify-content: space-around;">
					<view class="content-font" :class="item.isSelected ? 'filter-selected' : ''" v-for="(item,index) in filterList" :key="index" @click="filterPark(index,item.typeId)">{{item.name}}</view>
				</view>
				<view class="display-around" style="margin-top: 50rpx;">
					<button class="filter-left-btn" @click="restartBtn()">重置</button>
					<button class="filter-left-btn bgcolor-02A7F0" @click="submitBtn()">确定</button>
				</view>
			</view>
			
		</view>
		
		<view class="" style="position:relative;width: 90%;margin-top: 20rpx;">
			<view class="park-box" v-for="(item , index) in parkList" :key="item.id" @click="goParkDetailFn(item.id)">
				 <image :src="item.park_pics[0].pic_path || '/static/park/1.png'" mode="aspectFill" style="width:100%;height:400rpx;border-radius:32rpx 32rpx 0 0;"></image>
				 <view class="park-content-box">
					 <view class="park-title">{{item.name || '-'}}</view>
					 <view class="park-address display-flex-start">
						 <view class="display-flex-start" style="margin-right: 10rpx;"><image src="/static/park/park-time.png" mode="aspectFill" class="park-title-img"></image>{{item.addtime | globalTime}}建成</view>
						 <view class="display-flex-start"><image src="/static/park/park-name.png" mode="aspectFill" class="park-title-img"></image>{{item.manager || '-'}}</view>
					 </view>
					 <view class="park-footer-box display-between">
						  <view class="display-between-column width-30">
							  <view class="display-flex-start"><image src="/static/park/park-num.png" mode="aspectFill" class="park-footer-img"></image>{{item.company_count  || '-'}}</view>
							  <view class="park-footer-font">企业数量</view>
						  </view>
						  <view class="display-between-column width-30">
							  <view class="display-flex-start">
								  <image src="/static/park/park-area.png" mode="aspectFill" class="park-footer-img"></image>
								  {{item.cover_area  || '-'}}<text style="font-size: 12rpx;">万㎡</text></view>
							  <view class="park-footer-font">占地面积</view>
						  </view>
						  <view class="display-between-column width-30">
							  <view class="display-flex-start">
								  <image src="/static/park/park-area2.png" mode="aspectFill" class="park-footer-img"></image>
								  {{item.building_area  || '-'}}<text style="font-size: 12rpx;">万㎡</text></view>
							  <view class="park-footer-font">建设面积</view>
						  </view>
					 </view>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
				message:'找园区',
				filterBoxFlag:false,
				headerVal:'',
				parkList:[
					// {
					// 	url:'/static/park/1.png',
					// 	title:'华潮科技产业园',
					// 	time:'2015-10-25',
					// 	num:484,
					// 	area1:1.72,
					// 	area2:1.01
						
					// },
					// {
					// 	url:'/static/park/1.png',
					// 	title:'华潮科技产业园',
					// 	time:'2015-10-25',
					// 	num:484,
					// 	area1:1.72,
					// 	area2:1.01
					// },
					// {
					// 	url:'/static/park/1.png',
					// 	title:'华潮科技产业园',
					// 	time:'2015-10-25',
					// 	num:484,
					// 	area1:1.72,
					// 	area2:1.01
					// },
				],
				filterList:[
					{
						name:'工业厂房',
						isSelected:false,
						typeId:'1'
					},
					{
						name:'写字楼',
						isSelected:false,
						typeId:'2'
					},
					{
						name:'商务综合体',
						isSelected:false,
						typeId:'3'
					},
				],
				filterIndex:0
			}
		},
		onLoad() {
          this.getPark()
		},
		methods: {
			filterPark(index,id){
				this.filterList[index].isSelected = !this.filterList[index].isSelected;
			},
			restartBtn(){
				this.filterList.forEach((item)=>{item.isSelected = false});
			},
			submitBtn(){
				let typeStr = []
				let typeList = this.filterList.filter((item)=>{return item.isSelected})
				typeList.forEach((item)=>{typeStr.push(item.typeId)})
				typeStr = typeStr.join(',')
				console.log(typeStr)
				//this.getPark(typeStr)
				this.filterBoxFlag = false;
			},
			showFilterBox(){
				this.filterBoxFlag = !this.filterBoxFlag;
			},
			goParkDetailFn(id){
				uni.navigateTo({
					url:'/pages/park/park_deatil?id='+id
				})
			},
			getPark(searchVal,typeList){
				let md5Sign = md5("method="+'park'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
				let url = getApp().globalData.shareUrl+'api/api.php'+'?method=park&source=park&action=list&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
				let postData = {
					order_by:"weight desc",
				}
				if(searchVal){
					postData = {
						order_by:"weight desc",
						ss_name:searchVal
					}
				}
				if(typeList){
					postData = {
						order_by:"weight desc",
						ss_name:searchVal || '',
						park_type:typeList
					}
				}
				uni.request({
					url:url,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:postData,
					success: (res) => {
						console.log(res)
						if(res.data.code === 200){
							res.data.data.list.forEach((item)=>{if(item.park_pics.length){item.park_pics[0].pic_path = getApp().globalData.shareUrl + item.park_pics[0].pic_path}});
							this.parkList = res.data.data.list;
						}
					},
					fail: () => {
						console.log("连接失败");
					}
				});
			},
			headerSerach(){
				this.getPark(this.headerVal)
			}
       }
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.map-header-box {
		background-color: #02A7F0;
		padding: 20rpx 0rpx 30rpx 0rpx;
		width: 100%;
	}
	.map-search-box {
		background-color: #fff;
		margin-left: 30rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		width: 70%;
	}
	.map-search-btn {
		height: 66rpx;
		font-size: 26rpx;
		color: #fff!important;
		background-color: #F59A23!important;
		border-radius: 10rpx;
	}
	.park-box {
		border-radius: 32rpx;
		position: relative;
		height: 500rpx;
	}
	.park-content-box {
		width: calc(100% - 58rpx);
		background-color: #FFFFFF;
		border-radius: 56rpx 0px 32rpx 32rpx;
		position: absolute;
	    top: 250rpx;
		font-size: 24rpx;
		padding: 30rpx;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
	}
	.park-title {
		font-weight: 600;
		line-height: 36rpx;
		letter-spacing: 0.02em;
		color: #0D1937;
	}
	.park-address {
		font-weight: 600;
		font-size: 19rpx;
		letter-spacing: 0.02em;
		color: #CFCFCF;
		margin-top: 10rpx;
	}
	.park-title-img {
		width: 16rpx;
		height: 16rpx;
		margin-right: 4rpx;
	}
	.park-footer-box {
		margin-top: 30rpx;
	}
	.park-footer-img{
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}
	.park-footer-font {
		color: #CFCFCF;
		font-size: 19rpx;
		margin-top: 10rpx;
	}
	.width-30 {
		width: 30%;
	}
	
	.park-select-box {
		width: 98%;
		height: 90rpx;
		border-radius: 10rpx;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
		position: relative;
	}
	
	.park-select {
		padding: 10rpx;
		background-color: #d7d7d7;
		width: 20%;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 10rpx;
		display: flex;
	    align-items: center;
	    justify-content: space-around;
	    margin-left: 20rpx;
	    margin-top: 15rpx;
		font-size: 26rpx;
	}
	
	.park-select-font {
	   color: #7F7F7F
	}
	.corner {
		width: 0;
		height: 0;
		border: 10rpx solid #7f7f7f;
		border-bottom-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		margin-top: 12rpx;
	}
	.park-filter-box {
		width: 95%;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
		position: absolute;
		top: 100rpx;
		z-index: 99;
	}
	.filter-content {
		 color: #7F7F7F;
		 font-size: 20rpx;
	}
	.content-font {
		padding: 10rpx;
	}
	.filter-left-btn {
		font-size: 22rpx;
		width: 20%;
		line-height: 27px;
		height: 50rpx;
		background-color: #C8C7C7;
		color: #fff;
		border: none;
		font-weight: 600;
	}
	.bgcolor-02A7F0{
		background-color: #02A7F0;
	}
	.filter-selected {
		background-color: #3ADBDB;
		color: #fff;
		border-radius: 10rpx;
	}
</style>