yd_qycpfb/jp-mobile/pages/yqList/yqList.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/indexcf/indexcf">
			<block slot="content">园区列表</block>
		</cu-custom>

		<view :style="[{top:CustomBar + 'px'}]">
			<!-- <view class="search-box">
				<view class="choose-box">
					<jp-picker v-model="parkId" rangeKey="label" rangeValue="value" :range="parkList" empty="选择园区">
					</jp-picker>
				</view>

				<view class="input-box">
					<input type="text" placeholder="请输入楼宇名称" v-model="curWord" confirm-type="search"></input>
				</view>


				<text class="cuIcon-search color-white" @click="doSearch"></text>
			</view> -->

			<view>
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
					v-for="(item, index) in yqList" :key="index" :data-target="'move-box-' + index">

					<view class="item-box" @click="gotoYQInfo(item)">
						<view class="item-title">
							<view>
								<text class="line-zs"></text>{{item.name}}
							</view>
							<view class="btn-box" v-if="stype == 5">
								<view class="edit-botton" @click.stop="edit(item.id)">修改</view>
								<view class="del-botton" @click.stop="del(item.id)">删除</view>
							</view>
						</view>
						<view class="item-line">
							<view class="item-name">地址：</view>
							<view class="item-content">{{item.site}}</view>
						</view>
						<view class="item-line">
							<view class="item-name">距离机场：</view>
							<view class="item-content">{{item.distance}}</view>
						</view>
						<view class="item-line">
							<view class="item-name">面积：</view>
							<view class="item-content">{{item.area}}㎡
							</view>
						</view>
					</view>

				</view>
			</view>
			
			<view style="height: 2vh;"></view>
			
		</view>
	</view>
</template>

<script>
	import loginService from '@/api/auth/loginService.js'
	export default {
		onShow(option) {},
		components: {},
		data() {
			return {
				yqList: [{
						name: "亭湖区电子信息产业园",
						site: "盐城市亭湖区南洋镇太湖路99号",
						distance: "10km",
						longitude: 120.232445,
						latitude: 33.430631,
						area: 5000
					},
					{
						name: "睿思亭湖数字基地",
						site: "江苏省盐城市亭湖区中亭路9号",
						distance: "5.4km",
						longitude: 120.209738,
						latitude: 33.400009,
						area: 4500
					},
					{
						name: "盐城环保产业园",
						site: "光伏路与经一路交叉口西北150米",
						distance: "13.4km",
						longitude: 120.269329,
						latitude: 33.440453,
						area: 5500
					},
					{
						name: "江苏盐城光电产业园",
						site: "盐城市亭湖区青墩连接线与太湖路交叉路口",
						distance: "11km",
						longitude: 120.237555,
						latitude: 33.432122,
						area: 4800
					},
					{
						name: "盐东镇科技产业园",
						site: "盐城市亭湖区利民村3组",
						distance: "22.2km",
						longitude: 120.355611,
						latitude: 33.473836,
						area: 4580
					},
					{
						name: "兴泰(亭湖)产业园",
						site: "江苏省盐城市亭湖区瑞鹤路",
						distance: "14km",
						longitude: 120.275086,
						latitude: 33.44331,
						area: 4500,
					},
					{
						name: "江苏新青洋智能装备产业园",
						site: "江苏省盐城市亭湖区盐才路1号",
						distance: "16.3km",
						longitude: 120.192397,
						latitude: 33.468225,
						area: 4500
					},
				],
				searchForm: {},
				curWord: "", //当前搜索关键词
				dataList: [], // 数据列表
				modalName: null,
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: []
				},
				loading: true,
				parkList: [],
				parkId: '',
				stype: '', // 企业 => 3  楼宇 => 2  园区 => 1  zfadmin => 4  admin=> 5
			}
		},
		created() {
			// this.stype = uni.getStorageSync('stype')
			// this.getParkList()
		},
		methods: {
			gotoYQInfo(item) {
				uni.navigateTo({
					url: '/pages/map/parkShow?parkId=' + 5 +
						'&parkName=' + item.name + 
						'&parkImage=' + '../../static/img/th-park-5.jpg'
				});
			},
		},
	}
</script>

<style>
	.ellipsis-description {
		font-size: 12px;
		line-height: $line-height-base;
		display: -webkit-box;
		/*作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp: 1;
		/*显示的行数；如果要设置2行加...则设置为2*/
		overflow: hidden;
		/*超出的文本隐藏*/
		text-overflow: ellipsis;
		/* 溢出用省略号*/
		-webkit-box-orient: vertical;
		/*伸缩盒子的子元素排列：从上到下*/
	}

	.item-box {
		width: 710rpx;
		margin-left: 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 3px 0px rgba(9, 2, 4, 0.1);
		border-radius: 10px;
		padding-top: 20rpx;
		padding-left: 38rpx;
		padding-right: 10rpx;
		margin-top: 20rpx;
	}

	.item-title {
		position: relative;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		align-items: center;
	}

	.item-line {
		display: flex;
		height: 48rpx;
		margin-top: 20rpx;
	}

	.subtitle {
		color: #E5880E;
	}

	.item-name {
		font-size: 30rpx;
		color: #333;
	}

	.item-content {
		color: #1497EF;
		font-size: 30rpx;
	}

	.btn-box {
		display: flex;
	}

	.line-zs {
		width: 2rpx;
		height: 30rpx;
		background: #36A7F3;
	}

	.edit-botton {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		color: #fff;
		font-size: 28rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		background: #5A9EE9;
		text-align: center;
	}

	.del-botton {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		color: #fff;
		font-size: 28rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		background: #F27C85;
		text-align: center;
	}

	.color-white {
		color: #fff;
		font-size: 40rpx;
		line-height: 60rpx;
	}

	.search-box {
		background: #36A7F3;
		display: flex;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 10rpx;
	}

	.input-box {
		margin-left: 20rpx;
		background: #fff;
		height: 60rpx;
		width: 420rpx;
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		padding-left: 10rpx;
		margin-right: 20rpx;
	}

	.choose-box {
		background: #fff;
		width: 200rpx;
		border-radius: 30rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cu-bar .search-form {
		background-color: white;
	}
</style>