LSM_OIL_SITE/components/OrderOil.vue

<template>
	<view>
		<view class="content text-left padding">
			<view class="strong padding-bottom-xs color-333 ">
				{{oilSite.oilSiteName}}
			</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 class="grid col-5 justify-start">
				<view class="padding-xs" v-for="(item,index) in oilList" :key="index">
					<button class="cu-btn" @tap="oilNameSel(item)" :class="[selected.oilName===item.oilName?'bg-main-oil':'line-gray']">{{item.oilName}}</button>
				</view>
			</view>
		</view>
		<view class="padding-top-xs padding-left padding-right">
			<text class="strong padding-right font-16">
				{{selected.oilName}}
			</text>
			<text class="padding-right">星油价格:<text class="oil-main-color text-bold">￥{{selected.xkPrice?selected.xkPrice:selected.lvPrice|numberFilter}}/L</text></text>
			<text class="s-rich">市场价:￥{{selected.standardPrice|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="number" v-model="vol" @input="calcMoney" placeholder="请输入加油升数" name="input"></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>
	export default {
		props: {
			oilList: {
				type: Array,
				default () {}
			}
		},
		data() {
			return {
				active: 0,
				vol: '',
				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() {
			console.log(this.oilList)
			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

			},
			initForm() {
				if (this.oilList) {
					this.selected = this.oilList[0]
				}
			},
			onConfirm() {
				const data5 = {
					...this.selected,
					vol: this.vol,
					oilPrice: this.selected.xkPrice ? this.selected.xkPrice : this.selected.lvPrice,
					gunId: this.gunId + 1,
					realPay:this.money.realPay

				}
				console.log('被选中的', data5)
				this.$emit('confirmVol', data5)
			},
			calcMoney() {
				this.price = this.selected.xkPrice ? this.selected.xkPrice : this.selected.lvPrice
				this.money.total = this.vol * this.selected.standardPrice
				this.money.discount = this.money.total - this.vol * (this.selected.standardPrice - this.price)
				this.money.realPay = (this.money.total - this.money.discount).toFixed(2)
				console.log('总金额','折扣','实际支付')
			}
		},
		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>