zhongPin/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-blues 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-blues 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;
			}
		}
	},
	created() {},

	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>