h5 星游企业版
This commit is contained in:
caolc
371
src/views/orderDetails/components/oilGun.vue
Normal file
371
src/views/orderDetails/components/oilGun.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<div class="oilGun">
|
||||
<div class="seleOilGun">
|
||||
<div class="seleOilGun-title">油枪选择:</div>
|
||||
<div class="seleOilGun-container">
|
||||
<div @click="seleGun(index, item)"
|
||||
:style="{ background: seleIndex == index ? '#FF6700' : '', color: seleIndex == index ? '#FFFFFF' : '', border: seleIndex == index ? '0px' : '' }"
|
||||
v-for="(item, index) in 9" :key="index" class="seleOilGun-item ac jc">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oilGun-information">
|
||||
<div @click="isShowFn" class="oilGun-information-item ac">
|
||||
<img src="@/assets/kc.png" alt="" />
|
||||
<span :class=" page.plateNumber ?'cp' : '' " class="oilGun-information-item-text ">
|
||||
{{ page.plateNumber ? page.plateNumber : '请输入车牌号' }}
|
||||
</span>
|
||||
<van-icon name="arrow" />
|
||||
</div>
|
||||
<div class="oilGun-information-item ac">
|
||||
<img class="rigth-img" src="@/assets/sj.png" alt="" />
|
||||
<span class="oilGun-information-item-text">一号加油员</span>
|
||||
<van-icon name="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="refuelingAmount">
|
||||
<div class="flex bw">
|
||||
<div class="refuelingAmount-import">
|
||||
<span class="refuelingAmount-import-lable">加油金额</span>
|
||||
<input @blur="blur" @input="change" v-model="price" class="refuelingAmount-import-input"
|
||||
type="number" />
|
||||
<span class="refuelingAmount-import-lable">元</span>
|
||||
</div>
|
||||
<div class="samall-text">升数约 {{ Number(page.volume).toFixed(2) }} L</div>
|
||||
</div>
|
||||
<div class="priceSelection-container flex top">
|
||||
<div @click="selePrice(index)"
|
||||
:style="{ background: price == item * 100 ? '#FF6700' : '', color: price == item * 100 ? '#FFFFFF' : '', border: price == item * 100 ? '0px' : '' }"
|
||||
v-for="(item, index) in 5" :key="index" class="priceSelection-container-item flex ac jc">
|
||||
{{ item }}00 ¥
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount">
|
||||
<div class="flex discount-title">优惠:</div>
|
||||
<div class="flex bw top">
|
||||
<span>星油优惠金额</span>
|
||||
<span>{{ page.oilDiscountAmount ? `-￥${page.oilDiscountAmount}` : '---' }}</span>
|
||||
</div>
|
||||
<div class="flex bw top">
|
||||
<span>优惠券</span>
|
||||
<span>---</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-popup round closeable :style="{ height: '35%' }" position="bottom" v-model="isShow.licensePlate">
|
||||
<div class="license-plate-popup">
|
||||
<div class="license-plate-popup-title">选择车牌号</div>
|
||||
<div class="license-plate-popup-input flex ac">
|
||||
<div class="license-plate-popup-input-lable">
|
||||
<span>车牌号</span>
|
||||
<input v-model="page.plateNumber" class="license-plate-popup-input-input" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import oilSiteApi from '@/api/oil-site.js'
|
||||
export default {
|
||||
props: {
|
||||
seleOil: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
page: {
|
||||
oilDiscountAmount: '',
|
||||
volume: '',
|
||||
payRealAmount: '',
|
||||
plateNumber: '',
|
||||
oilsBar: 1
|
||||
},
|
||||
aboutLiters: 0,
|
||||
price: '',
|
||||
seleIndex: 0,
|
||||
isShow: {
|
||||
licensePlate: false
|
||||
},
|
||||
show: true,
|
||||
selePriceIndex: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'seleOil.oilProductCode': {
|
||||
handler(n, o) {
|
||||
console.log(n,o,'------------------')
|
||||
if (n !== o) {
|
||||
this.blur()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
page: {
|
||||
handler() {
|
||||
this.$nextTick(function () {
|
||||
this.$emit('input', Object.assign(JSON.parse(JSON.stringify(this.seleOil)), this.page));
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
mounted() {
|
||||
this.$nextTick(function () {
|
||||
this.$emit('input', Object.assign(this.seleOil, this.page))
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
resetFn() {
|
||||
this.page = Object.assign(
|
||||
{},
|
||||
{
|
||||
oilDiscountAmount: '',
|
||||
vlom: '',
|
||||
payRealAmount: '',
|
||||
plateNumber: '',
|
||||
oilsBar: 1
|
||||
})
|
||||
},
|
||||
blur() {
|
||||
let page = {
|
||||
payType: 'CUSTOMER_ACTIVE',
|
||||
userType: '1',
|
||||
xoilAmountGun: Number(this.price),
|
||||
priceId: this.seleOil.priceId
|
||||
}
|
||||
oilSiteApi.getOrderDiscountInfo(page).then(res => {
|
||||
let { payRealAmount, oilDiscountAmount, volume } = res.data;
|
||||
this.page = Object.assign(JSON.parse(JSON.stringify(this.page)),{ payRealAmount, oilDiscountAmount, volume });
|
||||
})
|
||||
},
|
||||
seleGun(index, item) {
|
||||
this.seleIndex = index;
|
||||
this.page = Object.assign({}, { ...this.page, oilsBar: item })
|
||||
},
|
||||
selePrice(index) {
|
||||
this.price = (index + 1) * 100;
|
||||
this.blur()
|
||||
},
|
||||
change() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.blur()
|
||||
}, 600);
|
||||
},
|
||||
isShowFn() {
|
||||
this.isShow.licensePlate = !this.isShow.licensePlate;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cp::first-letter {
|
||||
color: red;
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.license-plate-popup-input-input {
|
||||
border: none !important;
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
.license-plate-popup-input-lable {
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC-中等, PingFang SC;
|
||||
font-weight: normal;
|
||||
color: #000000;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.license-plate-popup-input {
|
||||
width: 647px;
|
||||
height: 75px;
|
||||
background: #fcfcfc;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
border: 1px solid #e7e7e7;
|
||||
margin-top: 30px;
|
||||
padding: 0 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.license-plate-popup-title {
|
||||
font-size: 28px;
|
||||
font-family: PingFang;
|
||||
font-weight: normal;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.license-plate-popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px var(--pd);
|
||||
}
|
||||
|
||||
.discount-title {
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC-中等, PingFang SC;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.discount {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.priceSelection-container {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.priceSelection-container-item {
|
||||
width: 110px;
|
||||
height: 50px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
opacity: 1;
|
||||
border: 1px solid #cecece;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.samall-text {
|
||||
font-size: 24px;
|
||||
font-family: PingFang SC-中等, PingFang SC;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
margin-left: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.refuelingAmount-import-input {
|
||||
border: none !important;
|
||||
max-width: 200px;
|
||||
margin: 0 20px;
|
||||
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.refuelingAmount-import-lable {
|
||||
font-size: 28px;
|
||||
font-family: PingFang SC-粗体, PingFang SC;
|
||||
font-weight: normal;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.refuelingAmount-import {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.refuelingAmount {
|
||||
height: 152px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10px 1px rgba(23, 23, 23, 0.102);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rigth-img {
|
||||
width: 35px;
|
||||
height: 45.15px;
|
||||
}
|
||||
|
||||
.oilGun-information-item-text {
|
||||
font-size: 24px;
|
||||
font-family: PingFang SC-中等, PingFang SC;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
margin-left: 21px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.oilGun-information-item img {
|
||||
width: 47px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.oilGun-information-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.oilGun-information {
|
||||
height: 85px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10px 1px rgba(23, 23, 23, 0.102);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
margin-top: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.seleOilGun-item {
|
||||
width: 110px;
|
||||
height: 50px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
opacity: 1;
|
||||
border: 1px solid #cecece;
|
||||
display: flex;
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.seleOilGun-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.seleOilGun-title {
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC-中等, PingFang SC;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.oilGun {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
padding: 27px var(--pd);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
padding-bottom: 159px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user