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.
136 lines
3.8 KiB
136 lines
3.8 KiB
<template> |
|
<view class="padding-top"> |
|
<scroll-view scroll-x class=" nav text-center"> |
|
<view class="cu-item" v-for="(item,index) in channelList" :class="index==TabCur?'text-red cur':''" :key="item.channelId" |
|
@tap="tabSelect" :data-id="index"> |
|
<image class="site-icon margin-right-sm" :src="imgURL+'site-'+item.channelCode+'.png'" mode="widthFix"> |
|
</image> |
|
{{item.channelCode|channelCodeFamt}} |
|
<!-- 少了壳牌 --> |
|
</view> |
|
|
|
</scroll-view> |
|
<view class="cu-list menu padding-left padding-right"> |
|
<view class="cu-item" v-for="(itemx,index) in oilSitePriceDetailsVos" :key="index" v-if="itemx.sitePrice>0"> |
|
<text class="cu-tag my-tag line-red text-lg"> |
|
惠 |
|
</text> |
|
<text class="text-bold text-black text-lg">{{itemx.oilProductCode}}</text> |
|
<text class="text-bold text-red text-lg">￥{{itemx.sitePrice==0?'-.--':itemx.sitePrice}}/L</text> |
|
<text class="text-delete">￥{{itemx.oilSitePrice}}/L</text> |
|
<text class="text-xs ">预计每100L节省{{(100*(itemx.oilSitePrice - itemx.sitePrice))|moneyFormat}}元</text> |
|
<!-- <text class="text-gray text-delete">$市场价</text> |
|
<text class="text-gray text-sm"> |
|
预计每100L节省581元 |
|
</text> --> |
|
</view> |
|
</view> |
|
<!-- 油站特色 --> |
|
<view class="bg-gray padding-top-sm "> |
|
<view class="bg-white padding "> |
|
<text>油站特色</text> |
|
<view class="padding-top-sm"> |
|
<text class="cu-tag line-yellow margin-right-xs" v-for="(itemy,index) in tagList" :key="index">{{itemy}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
channelList: { |
|
type: Array, |
|
default () {} |
|
} |
|
}, |
|
data() { |
|
return { |
|
TabCur: 0, |
|
imgURL: this.global.imgURL, |
|
scrollLeft: 0 |
|
}; |
|
}, |
|
computed: { |
|
activeChannelCode() { |
|
if (this.channelList.length && this.channelList[this.TabCur]) { |
|
let channelCode = this.channelList[this.TabCur].channelCode |
|
let secondChannelCode = '' |
|
if (this.channelList[this.TabCur].secondChannelCode) { |
|
secondChannelCode = this.channelList[this.TabCur].secondChannelCode |
|
} |
|
this.$emit('onChangeChannelCode', channelCode, secondChannelCode) |
|
return channelCode |
|
} |
|
}, |
|
tagList() { |
|
if (this.channelList.length && this.channelList[this.TabCur].labelTag) { |
|
let labelTag = this.channelList[this.TabCur].labelTag |
|
let tagList = labelTag ? labelTag.split(',') : [] |
|
return tagList |
|
} |
|
}, |
|
activePay() { |
|
if (this.channelList.length && this.channelList[this.TabCur]) { |
|
let activePay = this.channelList[this.TabCur].activePay |
|
this.$emit('onChangePay', activePay, this.TabCur) |
|
} |
|
}, |
|
qrcodePay() { |
|
if (this.channelList.length && this.channelList[this.TabCur]) { |
|
let qrcodePay = this.channelList[this.TabCur].qrcodePay |
|
this.$emit('onChangePayQr', qrcodePay) |
|
} |
|
}, |
|
oilSitePriceDetailsVos() { |
|
if (this.channelList[this.TabCur]) { |
|
return this.channelList[this.TabCur].oilSitePriceDetailsVos |
|
} |
|
} |
|
}, |
|
methods: { |
|
tabSelect(e) { |
|
this.TabCur = e.currentTarget.dataset.id; |
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60 |
|
} |
|
}, |
|
filters: { |
|
moneyFormat(value) { |
|
if (value != 'xxx.x') { |
|
return "￥" + (parseInt(value * 100) / 100).toFixed(2) |
|
} else { |
|
return value |
|
} |
|
}, |
|
channelCodeFamt(value) { |
|
if (value) { |
|
// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）) |
|
switch (value) { |
|
case 'XOIL': |
|
return '星油' |
|
case 'WJY': |
|
return '万金油' |
|
case 'LV': |
|
return '老吕（找油网）' |
|
case 'TY': |
|
return '团油' |
|
case 'YDJY': |
|
return '一点加油（壳牌）' |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.site-icon { |
|
width: 2rem; |
|
vertical-align: middle; |
|
} |
|
|
|
.my-tag { |
|
padding: 0 12rpx; |
|
} |
|
</style>
|
|
|