MP_XOIL_company_new/BagStation/pages/newRoutePlanning/siteList.vue

<template>
	<view class="site-list">
		<view class="container" v-if="siteList.length">
			<list >
				<view class="item" v-for="item,index in siteList" :key="index">
					<image
						:src="item.siteImages || 'https://static.czb365.com/1647787216992.jpg?x-oss-process=image/resize,m_lfit,h_420,w_630/format,png'">
					</image>
					<view>{{item.siteName}}</view>
					<view>
						<view>{{item.address}}</view> <text>{{item.juli | adjust}}km</text>
					</view>
					<view>0# ￥7.94</view>
					<view>
						<view @click="lookPosition(item)">查看位置</view>
						<view @click="jump(item)">查看详情</view>
					</view>
				</view>
			</list>
		</view>
		<view v-else class="empty">
			<image src="../../../static/img/empty.png"></image>
			<view>当前线路附近暂无油站</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteList: []
			}
		},
		onLoad(options) {
			if (!options.markers) return
			let markers = JSON.parse(decodeURIComponent(options.markers))
			this.siteList = markers
			console.log('site markers',markers)
		},
		filters: {
			adjust(val) {
				if (!val) return '--'
				val = +val
				return val.toFixed(2)
			}
		},
		methods: {
			lookPosition(item) {
				// console.log(getCurrentPages())
				getCurrentPages()[0].$vm.perspectives(item)
				uni.navigateBack()
			},
			jump(item) {
				let obj = {
					siteId: item.id,
					longitude: item.longitude,
					latitude: item.latitude,
				}
				let itemS = JSON.stringify(obj)
				// return
				uni.navigateTo({
					url: `../stationDetail/stationDetail?item=${itemS}&&types=map`
				})
			},
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background: #f0f0f0;
	// }
	.empty {
		padding-top: 150rpx;
		width: 100%;
		background: #fff;
		text-align: center;
		image {
			width: 450rpx;
			height: 381rpx;
		}
		view {
			color: #999;
		}
	}
	.site-list {
		min-height: 100vh;
		.container {
			padding: 50rpx;
			background: #f0f0f0;
		}
	}

	.item {
		position: relative;
		padding: 30rpx 30rpx 100rpx 160rpx;
		margin-bottom: 30rpx;
		min-height: 200rpx;
		background: #fff;
		// border: 1px solid #333;
		border-radius: 15rpx;

		>view {
			&:nth-of-type(1) {
				font-weight: 550;
				font-size: 32rpx;
			}

			&:nth-of-type(2) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;

				view {
					width: 80%;
				}

				// text {
				// 	float: right;
				// }
			}

			&:nth-of-type(3) {
				font-weight: 550;
				margin-top: 10rpx;
				color: #FF8C00;
			}

			&:nth-of-type(4) {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 80rpx;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 90%;
					height: 1rpx;
					background: #d3d3d3;
				}

				view {
					display: inline-block;
					width: 50%;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;

					&:nth-of-type(1) {
						color: #1E90FF;
					}

					&:nth-of-type(2) {
						color: #FF8C00;
					}
				}

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateY(-50%);
					width: 1rpx;
					height: 30rpx;
					background: #d3d3d3;
				}
			}
		}

		image {
			position: absolute;
			left: 30rpx;
			top: 13%;
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>