LSM_OIL_SITE/packageQr/components/OrderOil.vue

<template>
	<view>
		<view class="content text-left padding">
			<view class="strong padding-bottom-xs color-333 ">
				{{oilSite.siteName}}
			</view>
			<view class="font-12 color-999">
				<text class=" text-cut">{{oilSite.address}}</text>
			</view>
		</view>
		<view class="padding-left padding-right">
			<view class="padding-bottom-sm">
				油号选择：
			</view>
			<view style="display:flex">
				<view class="padding-xs" v-for="(item,index) in oilList" :key="index">
					<button class="cu-btn" @tap="oilNameSel(item)" :class="[selected.otherOilsName===item.otherOilsName?'bg-main-oil':'line-gray']">{{item.otherOilsName}}</button>
				</view>
			</view>
		</view>
		<view class="padding-top-xs padding-left padding-right">
			<text class="strong padding-right font-16">
				{{selected.otherOilsName}}
			</text>
			<text class="padding-right">星油价格:<text class="oil-main-color text-bold">￥{{selected.sitePrice|numberFilter}}/L</text></text>
			<text class="s-rich">市场价:￥{{selected.marketPrice|numberFilter}}/L</text>
		</view>
		<view class="padding-left padding-right">
			<view class="padding-bottom-sm">
				油枪选择：
			</view>
			<view class="grid col-5 justify-start">
				<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
					<button @tap="gunIdSel(index)" class="cu-btn" :class="[gunId===index?'bg-main-oil':'line-gray']">{{index+1}}</button>
				</view>
			</view>
		</view>

		<view class="solid-top margin-top-sm shadow-warp">
			<view class="cu-form-group">
				<view class="title">加油升数</view>
				<input type="digit" v-model="vol" @input="calcMoney" placeholder="请输入加油升数" name="input" />
				<text>约￥{{money.total|numberFilter}}</text>
			</view>
			<view class="my-cell">
				<text class="font-12">星卡优惠金额</text><text class="fr">-￥{{money.discount|numberFilter}}</text>
			</view>
			<view class="my-cell">
				<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥{{money.realPay|numberFilter}}</text>
			</view>
		</view>
		<button class="margin  round bg-main-oil" @tap="onConfirm">确定</button>

	</view>
</template>

<script>
	import OliSiteApi from '@/api/oli-site.js'
	export default {
		props: {
			oilList: {
				type: Array,
				default () {}
			}
		},
		data() {
			return {
				active: 0,
				vol: '',
				userInfo:uni.getStorageSync('loginUser'),
				oliNameList: [1, 2, 9, 10],
				ColorList: [1, 2, 9, 10],
				gunId: 0,
				oilSite: uni.getStorageSync('oilSite'),
				selected: {
					xkPrice: '',
					standardPrice: ''
				},
				money: {
					total: '',
					discount: '',
					realPay: ''
				},
				price: 1
			}
		},
		created() {
			this.initForm()
		},
		watch: {
			oilList: {
				handler(newVal, oldVal) {
					console.log('深度监听', newVal, oldVal)
					this.oilList = newVal
					this.initForm()
				},
				deep: true
			},
			selected: {
				handler(newVal, oldVal) {
					console.log('深度监听2323', newVal, oldVal)
					this.selected = newVal
					if (newVal) {
						this.calcMoney()
					}
				},
				deep: true
			},
		},
		methods: {
			gunIdSel(index) {
				this.gunId = index
			},
			oilNameSel(item) {
				this.selected = item
				console.log(item)
			},
			initForm() {
				if (this.oilList[0]) {
					this.selected = this.oilList[0]
				}
			},
			onConfirm() {
				// const data5 = {
				// 	...this.selected,
				// 	volume: this.vol,
				// 	oilPrice: this.selected.sitePrice,
				// 	gunId: this.gunId + 1,
				// 	price: this.money.realPay
				// }
				console.log(this.oilSite)
				const datas = {
					 channelId: this.oilSite.siteCode,    
					 siteName:this.oilSite.siteName,    
					 staffId: this.userInfo.id,    
					 refuelDetail: {        
						oilsBarNum: this.gunId + 1,       
						oilProductCode:this.selected.oilProductCode,       
						otherOilsName: this.selected.otherOilsName,       
						price:this.money.realPay,        
						volume:this.vol
					}
				}
				console.log(datas)
				this.$emit('confirmVol', datas)
			},
			calcMoney(e) {
				this.price = this.selected.sitePrice  
				console.log(this.price)
				this.money.total = this.vol * this.selected.marketPrice
				console.log(this.money.total)
				this.money.discount = this.vol * (this.selected.marketPrice - this.price)
				this.money.realPay = this.vol * this.selected.sitePrice  
			}
		},
		filters: {
			numberFilter(value) {
				value = value - 1 + 1
				if (value) {
					return value.toFixed(2)
				} else {
					return '0.00'
				}
			}
		}
	}
</script>

<style scoped>
	.page-content {
		background-color: #F1F2F7;
		min-height: 100%;
		position: relative;
	}

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}

	.money-container {
		position: relative;
	}

	.money-position {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		border-radius: 0 0 0 100upx;
	}
</style>