kgMini-new/pages/park/park_deatil.vue

<template>
	<view class="content">
		<view class="page-section-spacing" style="width: 100%;">
		 	<swiper class="swiper" 
		 		indicator-dots="true" 
				 autoplay="true" 
		 		 duration="500"	
				 style="height:300rpx">
		 		<swiper-item v-for="(item , index) in swiperList" :key="index">
		 			<image :src="item.pic_path" mode="aspectFill" style="width: 100%;height: 100%;"></image>
		 		</swiper-item>
		 	</swiper>
		 </view>
	
	    <view class="header-detail-box">
			
			<view class="header-title">
				{{detailObj.name || '-'}}
			</view>
			
			<view class="header-content-box display-around display-wrap">
				<view class="display-between-column items-center width-30 margin-bottom-20">
					  <view class="display-flex-start"><image src="/static/park/detail/enterprise.png" mode="aspectFill" class="park-footer-img"></image>{{detailObj.company_count || '-'}}</view>
					  <view class="park-footer-font">入驻企业</view>
				</view>
				<view class="display-between-column items-center width-30 margin-bottom-20">
					  <view class="display-flex-start">
						  <image src="/static/park/detail/mu.png" mode="aspectFill" class="park-footer-img"></image>
						  {{detailObj.cover_area || '-'}}<text style="font-size: 18rpx;">亩</text>
					  </view>
					  <view class="park-footer-font">占地亩数</view>
				</view>
				<view class="display-between-column items-center width-30 margin-bottom-20">
					  <view class="display-flex-start">
						  <image src="/static/park/detail/rent.png" mode="aspectFill" class="park-footer-img"></image>
						  {{detailObj.price || '-'}}<text style="font-size: 18rpx;">元/㎡/月</text>
					  </view>
					  <view class="park-footer-font">租赁价格</view>
				</view>
				<view class="display-between-column items-center width-30 margin-bottom-20">
					  <view class="display-flex-start">
						  <image src="/static/park/detail/area.png" mode="aspectFill" class="park-footer-img"></image>
						  {{detailObj.building_area || '-'}}<text style="font-size: 18rpx;">万㎡</text>
					  </view>
					  <view class="park-footer-font">建设面积</view>
				</view>
				<view class="display-between-column items-center width-30 margin-bottom-20">
					  <view class="display-flex-start">
						  <image src="/static/park/detail/area1.png" mode="aspectFill" class="park-footer-img"></image>
						  {{detailObj.area_left_industry || '-'}}<text style="font-size: 18rpx;">万㎡</text>
					  </view>
					  <view class="park-footer-font">出租面积</view>
				</view>
				<view class="display-between-column items-center width-30 margin-bottom-20">
					  <view class="display-flex-start"><image src="/static/park/detail/level.png" mode="aspectFill" class="park-footer-img"></image>{{detailObj.level}}</view>
					  <view class="park-footer-font">园区级别</view>
				</view>
			</view>
			
		</view>
	
	    
	    <view class="header-detail-box">
	    	
	    	<view class="header-title">
	    		园区基本信息
	    	</view>
	    	
			<view class="display-around-column content-font">
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">运营机构</view>
					<view class="width-70">{{detailObj.manager || '-'}}</view>
				</view>
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">产业定位</view>
					<view class="width-70">{{detailObj.target || '-'}}</view>
				</view>
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">园区类型</view>
					<view class="width-70">{{detailObj.building_types || '-'}}</view>
				</view>
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">物业费</view>
					<view class="width-70">{{detailObj.service_price || '-'}}<text style="font-size: 24rpx;">元/㎡/月</text></view>
				</view>
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">电费</view>
					<view class="width-70">{{detailObj.power_price || '-'}}<text style="font-size:24rpx;">KW·h</text></view>
				</view>
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">水费</view>
					<view class="width-70">{{detailObj.water_price || '-'}}<text style="font-size: 24rpx;">元/m³</text></view>
				</view>
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">一层楼高</view>
					<view  class="width-70">{{detailObj.max_height || '-'}}<text style="font-size: 24rpx;">m</text></view>
				</view>
				<view  class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">最大承重</view>
					<view  class="width-70">{{detailObj.max_weight || '-'}}<text style="font-size: 24rpx;">kg</text></view>
				</view>
				<view class="display-flex-start items-center margin-bottom-20">
					<view class="width-30 margin-left-60 color-cf">联系电话</view>
					<view  class="width-70"  @click="makeCall(detailObj.phone)" style="color: #007AFF;">{{detailObj.phone}}</view>
				</view>
				<view class="display-flex-start items-center">
					<view class="width-30 margin-left-60 color-cf">详细地址</view>
					<view class="width-70">{{detailObj.address || '-'}}</view>
				</view>
			</view>
	    	
			<map style="width: 100%;height: 300rpx;margin-top: 20rpx;" :latitude="latitude" :longitude="longitude" :markers="covers" @tap="goTxMap(latitude,longitude)">
			</map>
	  
		</view>
	    
		<view class="detail-footer-tabs">
		   <v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
		   <view class="tabs-box">
			  <view v-if="current == 0" class="margin-bottom-20 content-font">
				{{detailObj.desc || '-'}}
			  </view>
			  <view v-if="current == 1" class="margin-bottom-20 content-font">
			  	{{detailObj.facilities || '-'}}
			  </view>
			</view>
		</view>
		<footer-share style="width: 100%;" :isCollection="false" @collectionPages="collectionPage" @sharePages="sharePage"></footer-share>
	</view> 
	</view>
</template>

<script>
	import md5 from '@/common/md5.js';
	export default {
		components: {
		},
		data() {
			return {
			    swiperList:[
					// {
					// 	img:'/static/swiper/swiper1.jpg'
					// },
					// {
					// 	img:'/static/swiper/swiper2.jpg'
					// },
				],
				nowId:'',
				levelList:{
					'1':'国家级',
					'2':'省级',
					'3':'市级',
					'4':'区级'
				},
				parkType:{
					'1':'标准厂房',
					'2':'写字楼',
					'3':'商业综合体',
					'1,2':'标准厂房,写字楼',
					'1,3':'标准厂房,商业综合体',
					'2,3':'写字楼,商业综合体',
				},
				trafficList:{
					 '1':'班车',
					 '2':'地铁',
					 '3':'公交',
					 '1,2':'班车,地铁',
					 '1,3':'班车,公交',
					 '2,3':'地铁,公交',
				},
				detailObj:{
					parkName:'新鸿辉工业园',
					nums:484,
					area1:1,
					price:20,
					area2:1.2,
					area3:0.9,
					level:'区级',
					direction:'制造,智能制造',
					type:'工业厂房，办公写字楼，商业综合体',
					property:1,
					elePrice:1.1,
					waterPrice:8,
					oneHeight:4.5,
					bearing:750, //承重
					tel:'81190876',
					address:'西咸新区空港新城底张镇',
					introduce:'新鸿辉工业园坐落于陕西省西安市西咸新区空港新城底张镇，占地面积一万平方米，内有大小企业共484家。',
					facilities:'食堂、停车场、公寓、咖啡厅、便利店' //设施
				},
				 latitude:'', //纬度
				 longitude:'', //经度
				 covers: [],
				 current: 0,
				 tabs: ['园区介绍', '配套设施']
			}
		},
		onLoad(option) {
           console.log(option) 
		 //  this.nowId = option.id;
		   this.getDetailInfo(option.id)
		},
		methods: {
			makeCall(tel){
				let telStr = tel;
				if(telStr.indexOf(';') !== -1){
					tel = telStr.split(';')
				}else {
					tel = telStr.split('；')
				}
				console.log(tel)
				uni.makePhoneCall({
					phoneNumber:tel[1]
				})
			},
			goTxMap(la,lo){
				let that = this;
				uni.openLocation({
					latitude:Number(la),
					longitude:Number(lo),
					name:that.detailObj.name,
					address:that.detailObj.address
				})
			},
			changeTab(index) {
			  console.log('当前选中的项：' + index)
			},
			collectionPage(){
				console.log('已收藏')
			},
			sharePage(){
				console.log('分享')
				uni.showShareMenu({
					title: this.detailObj.name,
					path:'pages/park/park_detail?id='+this.detailObj.id,
					success(res) {
						console.log(res)
					}
				})
			},
			showFacilities(room,restaurant,traffic){
				if(room && restaurant){
					this.detailObj.facilities = room + ',' + restaurant + ',' + traffic;
				}else if (room && !restaurant){
					this.detailObj.facilities = room + ','  + traffic;
				} else if(!room && restaurant){
					this.detailObj.facilities = restaurant + ','  + traffic;
				}else if (!room && !restaurant){
					this.detailObj.facilities =  traffic;
				}
			},
			getDetailInfo(parkId){
				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=info_by_id&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
				let postData = {
					order_by:"weight desc",
					id:parkId
					// s_show:1,
					// page:1,
					// page_size:7 
				}
				uni.request({
					url:url,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:postData,
					success: (res) => {
						if(res.data.code === 200){
							if(res.data.data.park_pics.length){
								res.data.data.park_pics.forEach((item)=>{item.pic_path = getApp().globalData.shareUrl + item.pic_path})
								this.swiperList = res.data.data.park_pics;
							}else{
								this.swiperList = [{pic_path:'/static/park/1.png'}]
							}
							this.detailObj = res.data.data;
							this.detailObj.location = this.detailObj.location.split(',');
							this.latitude = this.detailObj.location[0];
							this.longitude = this.detailObj.location[1];
							this.covers = [{'latitude': this.latitude,'longitude': this.longitude,}]
							this.detailObj.level = this.levelList[this.detailObj.level];
							this.detailObj.building_types = this.parkType[this.detailObj.building_types];
							let room = this.detailObj.room == '1' ? '宿舍':'';
							let restaurant = this.detailObj.restaurant == '1' ? '餐厅':'';
							let traffic = this.trafficList[this.detailObj.traffic];
						    this.showFacilities(room,restaurant,traffic);
						}else {
							uni.showToast({
								 title:res.data.msg,
								 duration:2000
							})
						}
					},
					fail: () => {
						console.log("连接失败");
					}
				});
			}
		}
	}
</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;
	}
	.header-title {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 36rpx;
		letter-spacing: 0.02em;
		color: #0D1937;
		margin: 20rpx 0 25rpx 10rpx;
	}
	.header-content-box {
		font-size: 30rpx;
	}
	.header-detail-box {
		width: 90%;
		border-radius: 10rpx;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		padding: 20rpx;
	}
	.park-footer-img{
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}
	.park-footer-font {
		color: #CFCFCF;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.width-30 {
		width: 30%;
	}
	.width-70 {
		width: 70%;
	}
	.content-font {
		font-size: 28rpx;
	}
	.margin-left-60 {
		margin-left: 60rpx;
	}
	.margin-bottom-20 {
		margin-bottom: 20rpx;
	}
	.color-cf {
		color: #ccc;
	}
	.detail-footer-tabs {
		width: 90%;
		padding: 20rpx;
		margin-bottom:80rpx;
	}
	.tabs-box {
		padding-left: 20rpx;
		margin-top: 20rpx;
	}
</style>