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