更新找园区页面

pages.json

@@ -35,7 +35,17 @@
 		{
 			"path": "pages/park/map_search",
 			"style": {
-				"navigationBarTitleText": "地图找园区"
+				"navigationBarTitleText": "地图找园区",
+				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTextStyle":"white"
+			}
+		},
+		{
+			"path": "pages/park/park_deatil",
+			"style": {
+				"navigationBarTitleText": "园区概况",
+				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTextStyle":"white"
 			}
 		},
 		{

pages/park/index.vue

@@ -7,25 +7,25 @@
 		</view>
 		
 		<view class="park-select-box">
-			<view class="park-select">
+			<view class="park-select" @click="showFilterBox()">
 				<view class="park-select-font">园区类型</view>
 				<view class="corner"></view>
 			</view>
 			
-			<view class="park-filter-box">
+			<view class="park-filter-box" v-show="filterBoxFlag">
 				<view class="filter-content display-wrap" style="justify-content: space-around;">
-					<view class="content-font" :class="index == filterIndex ? 'filter-selected' : ''" v-for="(item,index) in filterList" :key="index" @click="filterPark(index)">{{item}}</view>
+					<view class="content-font" :class="item.isSelected ? 'filter-selected' : ''" v-for="(item,index) in filterList" :key="index" @click="filterPark(index)">{{item.name}}</view>
 				</view>
 				<view class="display-around" style="margin-top: 50rpx;">
-					<button class="filter-left-btn">重置</button>
-					<button class="filter-left-btn bgcolor-02A7F0">确定</button>
+					<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="index">
+			<view class="park-box" v-for="(item , index) in parkList" :key="index" @click="goParkDetailFn(index)">
 				 <image :src="item.url" mode="aspectFill" style="width:100%;height:400rpx;border-radius:32rpx 32rpx 0 0;"></image>
 				 <view class="park-content-box">
 					 <view class="park-title">{{item.title}}</view>
@@ -62,6 +62,7 @@
 		data() {
 			return {
 				message:'找园区',
+				filterBoxFlag:false,
 				parkList:[
 					{
 						url:'/static/park/1.png',
@@ -90,7 +91,18 @@
 					},
 				],
 				filterList:[
-					'工业厂房','写字楼','商务综合体','工业厂房','写字楼','商务综合体','工业厂房','写字楼','商务综合体',
+					{
+						name:'工业厂房',
+						isSelected:false,
+					},
+					{
+						name:'写字楼',
+						isSelected:false,
+					},
+					{
+						name:'商务综合体',
+						isSelected:false,
+					},
 				],
 				filterIndex:0
 			}
@@ -100,8 +112,23 @@
 		},
 		methods: {
 			filterPark(index){
-				this.filterIndex = index;
-			}
+				this.filterList[index].isSelected = !this.filterList[index].isSelected;
+			},
+			restartBtn(){
+				this.filterList.forEach((item)=>{item.isSelected = false});
+			},
+			submitBtn(){
+				console.log(this.filterList);
+				this.filterBoxFlag = false;
+			},
+			showFilterBox(){
+				this.filterBoxFlag = !this.filterBoxFlag;
+			},
+			goParkDetailFn(index){
+				uni.navigateTo({
+					url:'/pages/park/park_deatil?id='+index
+				})
+			} 
        }
 	}
 </script>

pages/park/park_deatil.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="content">
+		<view class="page-section-spacing" style="width: 100%;">
+		 	<swiper class="swiper" 
+		 		indicator-dots="true" 
+				 autoplay="true" 
+		 		 duration="500"	
+				 style="height:400rpx">
+		 		<swiper-item v-for="(item , index) in swiperList" :key="index">
+		 			<image :src="item.img" mode="aspectFill" style="width: 100%;height: 100%;"></image>
+		 		</swiper-item>
+		 	</swiper>
+		 </view>
+		 </view> 
+		 
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			    swiperList:[
+					{
+						img:'/static/swiper/swiper1.jpg'
+					},
+					{
+						img:'/static/swiper/swiper2.jpg'
+					},
+				],
+			}
+		},
+		onLoad(option) {
+           console.log(option)
+		},
+		methods: {
+    }
+	}
+</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;
+	}
+	
+</style>