You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.4 KiB
81 lines
2.4 KiB
<template> |
|
<view v-if="data" @click="goDetails" class="stationItem"> |
|
<!-- 上半部分 --> |
|
<view class="stationItem_top"> |
|
<view class="stationItem_top_title">{{data.name}}</view> |
|
<view class="flex ac"> |
|
<view class=" stationItem_top_label_container oneflex flex"> |
|
<view v-for="(item,index) in data.tags" :key="index" :style="{background:item.color}" |
|
class="stationItem_top_label"> {{item.label}}</view> |
|
</view> |
|
<view class="stationItem_distance flex"> |
|
<uni-icons style="margin-right: 10rpx;" type="paperplane-filled" color="#121836" |
|
size="15"></uni-icons> |
|
{{data.distance}}KM |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 下半部分 --> |
|
<view class="stationItem_bottom"> |
|
<view class="is_stop_row flex ac"> |
|
<image style="width: 35rpx;height:40rpx;" src="../../static/stop.png"></image> |
|
{{data.parkFee}} |
|
</view> |
|
<view class=" flex "> |
|
<view class="stationItem_bottom_label_container oneflex flex"> |
|
<view class="stationItem_bottom_label flex ac"> |
|
<view class="stationItem_bottom_label_logo flex ac jc">快</view> |
|
<text>{{data.fastChargingIdleRatio}}</text> |
|
</view> |
|
<view class="stationItem_bottom_label flex ac"> |
|
<view style="border: 2rpx solid #36658DFF;color: #36658DFF;" class="stationItem_bottom_label_logo flex ac jc">慢</view> |
|
<text>{{data.slowChargingIdleRatio}}</text> |
|
</view> |
|
<view class="stationItem_bottom_label flex ac"> |
|
<view style="border: 2rpx solid #F67A22FF;color: #F67A22FF;" class="stationItem_bottom_label_logo flex ac jc">其他</view> |
|
<text class="flex">{{data.otherIdleRatio}} </text> |
|
</view> |
|
</view> |
|
<view class="stationItem_bottom_price">￥{{ tool.getnum(data.unitPrice,3) }}/度</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "stationItem", |
|
props: { |
|
data: { |
|
type: Object, |
|
default: () => {} |
|
} |
|
}, |
|
data() { |
|
return { |
|
|
|
}; |
|
}, |
|
created() { |
|
console.log(this.data.tags, 'data.tags') |
|
}, |
|
methods: { |
|
goDetails() { |
|
let {stationLng,stationLat,id,tags} = this.data; |
|
let location = uni.getStorageSync('location') || { |
|
longitude: 116.38, |
|
latitude: 39.90, |
|
} ; |
|
uni.navigateTo({ |
|
url: `/ChargingStation/pages/index/index?data=${JSON.stringify({ |
|
stationLng:location.longitude , |
|
stationLat:location.latitude,id,tags})}` |
|
}); |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
@import 'index.css'; |
|
</style> |