更新
This commit is contained in:
xiaozhiyong
@@ -1,25 +1,34 @@
|
||||
<template>
|
||||
<view class="cu-item cur padding no-mr-border site-item" :style="{height:siteItem.oilProductCodeAndPrices?siteItem.oilProductCodeAndPrices.length>3?'220rpx !important':listHeight?listHeight + 'rpx !important':'': ''}">
|
||||
<view class="cu-avatar radius lg "
|
||||
:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'">
|
||||
</view>
|
||||
<view class="content">
|
||||
<!-- :style="{height:siteItem.oilProductCodeAndPrices?siteItem.oilProductCodeAndPrices.length>3?'220rpx !important':listHeight?listHeight + 'rpx !important':'': ''}" -->
|
||||
<view class="site-item">
|
||||
<view class="radius"
|
||||
:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'">
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="action">
|
||||
<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>
|
||||
<view class="text-cut text-black text-lg padding-right-sm ">{{siteItem.siteName}}</view>
|
||||
<view class="text-cut text-black text-lg padding-right-sm ">{{siteItem.siteName}}</view>
|
||||
</view>
|
||||
<view class="listTages">
|
||||
<!-- <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 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>
|
||||
<view class="">
|
||||
<view class="text-cut color-666 text-sm ">
|
||||
{{siteItem.address}}
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="text-cut color-666 text-sm ">
|
||||
{{siteItem.address}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-gray flex" style="width: calc(100% + 30%);display: flex;flex-wrap: wrap;">
|
||||
<view v-if="listHeight" class="youpin" style="" v-for="(item,index) in siteItem.oilProductCodeAndPrices">
|
||||
<view class="text-gray flex" style="display: flex;flex-wrap: wrap;">
|
||||
<view v-if="listHeight" class="youpin" style=""
|
||||
v-for="(item,index) in siteItem.oilProductCodeAndPrices">
|
||||
<view class="text-bold yellow-oil text-xl padding-right-xs">
|
||||
{{item.oilProductCode}}
|
||||
</view>
|
||||
@@ -36,25 +45,25 @@
|
||||
<view v-if="!listHeight" 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 v-if="!listHeight" class="text-cut padding-left-sm text-lg">
|
||||
<text class="text-delete color-333 text-sm padding-right-xs">
|
||||
￥{{siteItem.oilSitePrice|moneyFormat}}/L
|
||||
</view>
|
||||
<view v-if="!listHeight" 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="￥.png" class="padding-right-xs icon-rectangle"></my-icon>
|
||||
|
||||
<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="activity" v-if="siteItem.activitySwitch">
|
||||
<view class="title">活动</view>
|
||||
<view class="content">
|
||||
{{siteItem.activityContent}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="action">
|
||||
<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>
|
||||
@@ -70,47 +79,47 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
listHeight:{
|
||||
type:Number,
|
||||
default:0
|
||||
listHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
starUrl: this.global.starUrl,
|
||||
defaultLogo:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png',
|
||||
audioUrl:''
|
||||
defaultLogo: 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png',
|
||||
audioUrl: ''
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
filters: {
|
||||
channelCodeFamt(value) {
|
||||
console.log(value)
|
||||
if (!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
|
||||
}
|
||||
},
|
||||
channelCodeFamt(value) {
|
||||
console.log(value)
|
||||
if (!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')
|
||||
}else{
|
||||
} else {
|
||||
return '0.00km'
|
||||
}
|
||||
},
|
||||
@@ -125,20 +134,43 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.site-item {
|
||||
margin-bottom: 1.8rem;
|
||||
align-items: flex-start !important;
|
||||
height: 150rpx!important;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start !important;
|
||||
padding: 25rpx;
|
||||
// margin-bottom: 1.8rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.action {
|
||||
position: absolute;
|
||||
right: 35rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
>.radius {
|
||||
margin-right: 30rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
font-size: 2em;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow-oil{
|
||||
|
||||
|
||||
|
||||
.yellow-oil {
|
||||
color: #e8775a;
|
||||
}
|
||||
.cu-avatar{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.youpin{
|
||||
|
||||
|
||||
.youpin {
|
||||
border: 1px solid #e4e4e4;
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
@@ -146,7 +178,33 @@
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.text-xl{
|
||||
|
||||
.text-xl {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.activity {
|
||||
display: flex;
|
||||
width: 85%;
|
||||
// padding: 10rpx 20rpx;
|
||||
border: 2rpx solid #FF8C00;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.title {
|
||||
width: 20%;
|
||||
padding: 10rpx 0;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
color: #FF8C00;
|
||||
background: #FF8C0030;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 10rpx 20rpx;
|
||||
line-height: 36rpx;
|
||||
min-height: 80rpx;
|
||||
color: #FFA500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user