231 lines
6.9 KiB
Vue
231 lines
6.9 KiB
Vue
<template>
|
||
<view class="cu-item cur padding no-mr-border site-item" :style="{'min-height': siteItem.activitySwitch?mHeight+'rpx !important':''}">
|
||
<view class="cu-avatar radius lg "
|
||
:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'">
|
||
|
||
</view>
|
||
<view class="content">
|
||
<view style="display: flex;">
|
||
<view style="flex-shrink:1" class="text-cut text-black text-lg padding-right-sm "> {{siteItem.siteName}}</view>
|
||
<view v-if="siteItem.siteLevel" class="siteName_tag">{{siteItem.siteLevel}}</view>
|
||
</view>
|
||
<view style="display: flex;" class="listTages">
|
||
<view :style="{background:siteItem.siteType==1?'#FF6700':'#00c15e'}" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteType==1?'加油站':'加气站'}}</view>
|
||
<view class="cu-tag round bg-self--dark-blue yu-tag text-xs" v-show="siteItem.ureaNumber>0">尿素</view>
|
||
<!-- <view v-if="siteItem.siteLevel" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteLevel}}级</view> -->
|
||
<view class="cu-tag round bg-self-yellow yu-tag text-xs" :class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}}</view>
|
||
<view class="cu-tag round bg-self--dark-yellow yu-tag text-xs" v-show="first">距离最近</view>
|
||
<view v-if="siteItem.highSpeedMark||siteItem.roadTpye" class="cu-tag round bg-self--dark-blue yu-tag text-xs" :style="{background:speedMarkColor(siteItem.highSpeedMark,siteItem.roadTpye)}">{{speedMark(siteItem.highSpeedMark,siteItem.roadTpye)}}{{siteItem.roadName?':'+siteItem.roadName:''}}</view>
|
||
<!-- <view v-if="siteItem.highSpeedMark!=null" class="cu-tag round bg-self--dark-blue yu-tag text-xs" :style="{background:speedMarkColor(siteItem.highSpeedMark)}">{{siteItem.highSpeedMark?siteItem.highSpeedMark:siteItem.roadTpye|speedMark(siteItem.highSpeedMark,siteItem.roadTpye)}}{{siteItem.roadName?':'+siteItem.roadName:''}}</view> -->
|
||
</view>
|
||
<view class="">
|
||
<view class="text-cut color-666 text-sm ">
|
||
{{siteItem.address}}
|
||
</view>
|
||
</view>
|
||
<view class="text-gray flex">
|
||
<view class="text-bold yellow-oil text-xl padding-right-xs">
|
||
{{siteItem.oilProductCode}}
|
||
</view>
|
||
<view class="oil-main-color text-xl text-bold padding-right-xs">
|
||
￥{{siteItem.sitePrice|moneyFormat}}
|
||
</view>
|
||
<view class="">
|
||
<text class="cu-tag oil-tag radius text-xs" v-if="siteItem.oilSitePrice - siteItem.sitePrice>0">省￥{{(siteItem.oilSitePrice - siteItem.sitePrice)|moneyFormat}}</text>
|
||
</view>
|
||
<view class="text-cut padding-left-sm text-lg">
|
||
<text class="text-delete color-333 text-sm padding-right-xs">
|
||
￥{{siteItem.oilSitePrice|moneyFormat}}/L
|
||
</text>
|
||
<!-- <my-icon iconName="￥.png" class="padding-right-xs icon-rectangle"></my-icon>
|
||
|
||
<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->
|
||
|
||
</view>
|
||
</view>
|
||
<view class="text-gray" v-if="siteItem.activitySwitch">
|
||
<view class="activity-cu">
|
||
<text>活动</text>
|
||
<text>{{siteItem.activityContent}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="action" style=" width: 88px;">
|
||
<view class="text-grey text-sm " style="padding-top: 6rpx;">
|
||
<!-- <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> -->
|
||
{{siteItem.juli|distanceFilter}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
siteItem: {
|
||
type: Object,
|
||
default () {}
|
||
},
|
||
first: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mHeight: 156,
|
||
starUrl: this.global.starUrl,
|
||
defaultLogo:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png'
|
||
}
|
||
},
|
||
mounted() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
|
||
query.select('.activity-cu').boundingClientRect(data => {undefined
|
||
|
||
// console.log(data,'1111111111111111111')
|
||
if(data){
|
||
this.mHeight = this.mHeight + data.height*2
|
||
}
|
||
}).exec();
|
||
},
|
||
methods: {
|
||
speedMarkColor(val,data){
|
||
if(val == 0){
|
||
if(data == '0'){
|
||
return '#666666'
|
||
}
|
||
if(data == '1'){
|
||
return '#F9AA64'
|
||
}
|
||
if(data == '2'){
|
||
return '#D61750'
|
||
}
|
||
}
|
||
if(val == 1){
|
||
return '#11A265'
|
||
}
|
||
},
|
||
speedMark(val,data){
|
||
// console.log(val,data,'qqqqqqqqqqqqqqqqqqqqqq')
|
||
if(val == 0){
|
||
if(data == '0'){
|
||
return '普通'
|
||
}
|
||
if(data == '1'){
|
||
return '省道'
|
||
}
|
||
if(data == '2'){
|
||
return '国道'
|
||
}
|
||
}
|
||
if(val == 1){
|
||
return '高速'
|
||
}
|
||
},
|
||
},
|
||
filters: {
|
||
channelCodeFamt(value) {
|
||
// console.log(value)
|
||
if (value == null || value == '' ) {
|
||
return '未知'
|
||
// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
|
||
// switch (value) {
|
||
// case 'XOIL':
|
||
// return '星油'
|
||
// case 'WJY':
|
||
// return '万金油'
|
||
// case 'LV':
|
||
// return '其他'
|
||
// case 'TY':
|
||
// return '团油'
|
||
// case 'YDJY':
|
||
// return '一点加油（壳牌）'
|
||
// }
|
||
} else {
|
||
return value
|
||
}
|
||
},
|
||
distanceFilter(value) {
|
||
if (value) {
|
||
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
|
||
}
|
||
},
|
||
moneyFormat(value) {
|
||
if (value) {
|
||
// console.log(value,String(value).split('.')[1].substring(1,2) + 1,'*******************')
|
||
let realAmount = Math.floor(value * 100) / 100
|
||
// console.log('old:',value)
|
||
// console.log('new:',realAmount)
|
||
// return realAmount
|
||
return String(value).split('.')[1]&&String(value).split('.')[1].length>2?Number(`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0,2)}${Number(String(value).split('.')[1].substr(2))==0?'':9}`).toFixed(2) :Number(value).toFixed(2);
|
||
} else {
|
||
return '0.00'
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.siteName_tag{
|
||
background-color: #FF6700;
|
||
border-radius: 50rpx;
|
||
width: 20px ;
|
||
height: 20px;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
}
|
||
.site-item {
|
||
margin-bottom: 1.8rem;
|
||
align-items: flex-start !important;
|
||
height: 147rpx!important;
|
||
}
|
||
|
||
.yellow-oil{
|
||
color: #e8775a;
|
||
}
|
||
.cu-avatar{
|
||
background-color: transparent !important;
|
||
}
|
||
.tag-red{
|
||
background-color: red;
|
||
}
|
||
.levelBox{
|
||
font-size: 24rpx;
|
||
color: red;
|
||
font-weight:bold;
|
||
margin-left: 16rpx;
|
||
}
|
||
.bg-self--dark-blue{
|
||
background: #2098ff;
|
||
color: #FFFFFF;
|
||
}
|
||
.activity-cu{
|
||
border: 1px solid #FF9000;
|
||
border-radius: 5px;
|
||
width: fit-content;
|
||
display: flex;
|
||
}
|
||
.activity-cu text{
|
||
font-size: 12px;
|
||
padding: 0 18rpx;
|
||
line-height: 20px;
|
||
}
|
||
.activity-cu text:last-child{
|
||
color:#ff9818;
|
||
}
|
||
.activity-cu text:first-child{
|
||
color:#ff6f0e;
|
||
background: #FFEBDE;
|
||
border-top-left-radius: 5px;
|
||
border-bottom-left-radius: 5px;
|
||
}
|
||
</style>
|