MP-XiaoXing/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>
				<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 class="activity" v-if="siteInfo.activitySwitch">
					<view class="content">
						{{siteInfo.activityContent}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			channelList: {
				type: Array,
				default () {}
			},
			siteInfo:{
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		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 lang="scss">
	.site-icon {
		width: 2rem;
		vertical-align: middle;
	}

	.my-tag {
		padding: 0 12rpx;
	}
	.activity {
		margin-top: 15rpx;
		display: flex;
		width: 45%;
		border:2rpx solid #fbbd0850;
		
		// border-radius: 10rpx;
		.content {
			flex: 1;
			padding: 10rpx 20rpx;
			line-height: 36rpx;
			// min-height: 80rpx;
			color: #fbbd08;
		}
	}
</style>