MP_XOIL_company_new/BagStation/pages/components/price-tab.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 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>
	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: {
			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':
							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>