236 lines
7.2 KiB
Vue
236 lines
7.2 KiB
Vue
<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>
|
||
<!-- ==0?'-.--':itemx.sitePrice -->
|
||
<text class="text-bold text-red text-lg">￥{{itemx.sitePrice |moneyIntercept}} /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 v-if="ts" class="bg-gray padding-top-sm ">
|
||
<view @click="goFinancial" style="margin-bottom: 20rpx;" class="bg-white padding ">
|
||
<view class="advertisement_body">
|
||
<view class="advertisement_body_label">车辆评估</view>
|
||
<view>评估分数+改善建议,组合报告查询8.8折</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white padding ">
|
||
<text>油站特色</text>
|
||
<view class="">
|
||
<text style="margin-top: 20rpx;margin-left: 0;" class="cu-tag line-yellow margin-right-xs"
|
||
v-for="(itemy,index) in tagList" :key="index">{{itemy}}</text>
|
||
<text style="margin-top: 20rpx;margin-left: 0;height: auto;line-height: 20px;"
|
||
v-if="channelPrice.activitySwitch"
|
||
class="cu-tag line-yellow margin-right-xs">{{channelPrice.activityContent}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Financial from '@/api/Financial.js'
|
||
export default {
|
||
props: {
|
||
channelPrice: {
|
||
type: Object,
|
||
default () {}
|
||
},
|
||
channelList: {
|
||
type: Array,
|
||
default () {}
|
||
},
|
||
ts: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
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: {
|
||
goFinancial() {
|
||
const user = uni.getStorageSync('user');
|
||
if (user) {
|
||
Financial.findHomePageReport({
|
||
customerId: user.id
|
||
}).then(res => {
|
||
if (res.data) {
|
||
uni.navigateTo({
|
||
url: `../../../Financial/pages/estimate/index?data=${encodeURIComponent(JSON.stringify(res.data))}`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '../../../Financial/pages/index?guide=1'
|
||
})
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先登录！',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
tabSelect(e) {
|
||
this.TabCur = e.currentTarget.dataset.id;
|
||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||
}
|
||
},
|
||
filters: {
|
||
moneyIntercept(value) {
|
||
if (value != 'xxx.x') {
|
||
console.log(value, '************************')
|
||
// let valus = (parseInt(value * 100) / 100).toFixed(2)
|
||
// let valus = `${String(value).split('.')[0]}.${String(value).split('.')[1].substring(1,2)}`
|
||
// let valus = Number(valus).toFixed(2)
|
||
// console.log(String(value).split('.')[1].substring(2,4),String(value).split('.')[1].length,'*-*-*-*-');
|
||
// console.log( Number(`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0,2)}`)+0.01,'************');
|
||
// return String(value).split('.')[1]&&String(value).split('.')[1].length>2? Number(`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0,2)}`)+0.01 :Number(value).toFixed(2);
|
||
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 Number(value).toFixed(2)
|
||
}
|
||
},
|
||
moneyFormat(value) {
|
||
if (value != 'xxx.x') {
|
||
// console.log('old:', value)
|
||
let realAmount = Math.floor(value * 100) / 100
|
||
// console.log('new:', realAmount)
|
||
// return realAmount
|
||
return Number(value).toFixed(2)
|
||
} else {
|
||
// console.log('old:',value)
|
||
// let realAmount = Math.floor(value * 100) / 100
|
||
// console.log('new:',realAmount)
|
||
// return value
|
||
return Number(value).toFixed(2)
|
||
}
|
||
// 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':
|
||
case 'ZDC':
|
||
return '星油'
|
||
case 'WJY':
|
||
return '万金油'
|
||
case 'LV':
|
||
return '其他'
|
||
case 'TY':
|
||
return '团油'
|
||
case 'YDJY':
|
||
return '一点加油（壳牌）'
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.advertisement_body_label {
|
||
color: #FFFFFF;
|
||
margin-right: 20rpx;
|
||
padding: 10rpx 35rpx 10rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
border-right: 0px solid;
|
||
background-image: linear-gradient(32deg, #FF9000 70%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, #FF9000 70%, rgba(255, 255, 255, 0) 50%);
|
||
}
|
||
|
||
.advertisement_body {
|
||
width: 100%;
|
||
height: 69rpx;
|
||
background: rgba(255, 144, 0, 0.2);
|
||
border-radius: 5px 5px 5px 5px;
|
||
opacity: 1;
|
||
color: #FF9000;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
/* justify-content: center; */
|
||
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.site-icon {
|
||
width: 2rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.my-tag {
|
||
padding: 0 12rpx;
|
||
}
|
||
</style>
|