pull/12/head
xiaozhiyong
2 years ago
parent
90e2d26117
commit
6df26c7fe5
12 changed files with 590 additions and 230 deletions
@ -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> |
||||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 227 B |
|
After Width: | Height: | Size: 344 B |
Loading…
Reference in new issue