更新

2023-08-30 11:32:32 +08:00
parent 90e2d26117
commit 6df26c7fe5
12 changed files with 590 additions and 230 deletions
--- a/BagStation/pages/newRoutePlanning/siteList.vue
+++ b/BagStation/pages/newRoutePlanning/siteList.vue
@@ -0,0 +1,188 @@
+<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>