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 @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>