pull/1/head
xiaozhiyong
2 years ago
parent
6967207669
commit
87caa6203b
15 changed files with 770 additions and 814 deletions
@ -1,457 +1,481 @@ |
||||
<template> |
||||
<div class="oilGun"> |
||||
<div class="seleOilGun"> |
||||
<div class="seleOilGun-title">油枪选择:</div> |
||||
<div class="seleOilGun-container"> |
||||
<div @click="seleGun(index, item)" |
||||
:style="{ background: seleIndex == item ? '#FF6700' : '', color: seleIndex == item ? '#FFFFFF' : '', border: seleIndex == item ? '0px' : '' }" |
||||
v-for="(item, index) in 9" :key="index" class="seleOilGun-item ac jc"> |
||||
{{ item }} |
||||
</div> |
||||
<div :style="{background:seleIndex==0 ? '#FF6700' : '',color:seleIndex==0 ? '#FFFFFF' : '',border: seleIndex==0 ?'0px' : ''}" @click="isShow.keyboard=true;seleIndex=0" class="other-seleOilGun-item ac jc"> |
||||
{{seleIndex?'other':otherOilsBar}} |
||||
</div> |
||||
</div> |
||||
<div class="oilGun"> |
||||
<div class="seleOilGun"> |
||||
<div class="seleOilGun-title">油枪选择:</div> |
||||
<div class="seleOilGun-container"> |
||||
<div |
||||
@click="seleGun(index, item)" |
||||
:style="{ |
||||
background: seleIndex == item ? '#FF6700' : '', |
||||
color: seleIndex == item ? '#FFFFFF' : '', |
||||
border: seleIndex == item ? '0px' : '' |
||||
}" |
||||
v-for="(item, index) in 9" |
||||
:key="index" |
||||
class="seleOilGun-item ac jc" |
||||
> |
||||
{{ item }} |
||||
</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 |
||||
:style="{ background: seleIndex == 0 ? '#FF6700' : '', color: seleIndex == 0 ? '#FFFFFF' : '', border: seleIndex == 0 ? '0px' : '' }" |
||||
@click=" |
||||
isShow.keyboard = true |
||||
seleIndex = 0 |
||||
" |
||||
class="other-seleOilGun-item ac jc" |
||||
> |
||||
{{ seleIndex ? 'other' : otherOilsBar }} |
||||
</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> |
||||
<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="discount"> |
||||
<div class="flex discount-title">优惠:</div> |
||||
<div class="flex bw top"> |
||||
<span>星油优惠金额</span> |
||||
<span>{{ page.oilDiscountAmount ? `-￥${Number(page.oilDiscountAmount).toFixed(2)}` : '---' }}</span> |
||||
</div> |
||||
<div class="flex bw top"> |
||||
<span>优惠券</span> |
||||
<span>---</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> |
||||
<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="plateNumber" class="license-plate-popup-input-input" type="text"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</van-popup> |
||||
<van-number-keyboard @hide="keyboardHide" v-model="otherOilsBar" :show="isShow.keyboard" :maxlength="2" @blur="isShow.keyboard = false" /> |
||||
</div> |
||||
</div> |
||||
<div class="discount"> |
||||
<div class="flex discount-title">优惠:</div> |
||||
<div class="flex bw top"> |
||||
<span>星油优惠金额</span> |
||||
<span>{{ page.oilDiscountAmount ? `-￥${Number(page.oilDiscountAmount).toFixed(2)}` : '---' }}</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="plateNumber" class="license-plate-popup-input-input" type="text" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</van-popup> |
||||
<van-number-keyboard @hide="keyboardHide" v-model="otherOilsBar" :show="isShow.keyboard" :maxlength="2" @blur="isShow.keyboard = false" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import oilSiteApi from '@/api/oil-site.js' |
||||
export default { |
||||
props: { |
||||
seleOil: { |
||||
type: Object, |
||||
default: () => null |
||||
props: { |
||||
seleOil: { |
||||
type: Object, |
||||
default: () => null |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
otherOilsBar: '', |
||||
timer: null, |
||||
plateNumber: '', |
||||
page: { |
||||
oilDiscountAmount: '', |
||||
volume: '', |
||||
payRealAmount: '', |
||||
plateNumber: '', |
||||
oilsBar: 1 |
||||
}, |
||||
aboutLiters: 0, |
||||
price: '', |
||||
seleIndex: 1, |
||||
isShow: { |
||||
licensePlate: false, |
||||
keyboard: false |
||||
}, |
||||
show: true, |
||||
selePriceIndex: null |
||||
} |
||||
}, |
||||
watch: { |
||||
seleIndex: function (n) { |
||||
if (n !== 0) { |
||||
this.otherOilsBar = '' |
||||
} |
||||
}, |
||||
'seleOil.oilProductCode': { |
||||
handler(n, o) { |
||||
if (n !== o) { |
||||
this.blur() |
||||
} |
||||
}, |
||||
deep: true |
||||
}, |
||||
data() { |
||||
return { |
||||
otherOilsBar:'', |
||||
timer: null, |
||||
plateNumber:'', |
||||
page: { |
||||
oilDiscountAmount: '', |
||||
volume: '', |
||||
payRealAmount: '', |
||||
plateNumber: '', |
||||
oilsBar: 1 |
||||
}, |
||||
aboutLiters: 0, |
||||
price: '', |
||||
seleIndex: 1, |
||||
isShow: { |
||||
licensePlate: false, |
||||
keyboard:false |
||||
}, |
||||
show: true, |
||||
selePriceIndex: null |
||||
}; |
||||
'isShow.licensePlate': { |
||||
handler(n) { |
||||
if (!n) { |
||||
if (this.checkFn('plateNumber', this.plateNumber)) { |
||||
this.page.plateNumber = this.plateNumber |
||||
} else { |
||||
this.$notify('请输入正确车牌号') |
||||
this.$nextTick(function () { |
||||
this.plateNumber = '' |
||||
this.page.plateNumber = '' |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
deep: true |
||||
}, |
||||
watch: { |
||||
seleIndex:function(n){ |
||||
if(n!==0){ |
||||
this.otherOilsBar = '' |
||||
} |
||||
}, |
||||
'seleOil.oilProductCode': { |
||||
handler(n, o) { |
||||
if (n !== o) { |
||||
this.blur() |
||||
} |
||||
}, |
||||
deep: true, |
||||
}, |
||||
'isShow.licensePlate': { |
||||
handler(n) { |
||||
if (!n) { |
||||
if (this.checkFn('plateNumber', this.plateNumber)) { |
||||
this.page.plateNumber = this.plateNumber |
||||
} else { |
||||
this.$notify('请输入正确车牌号') |
||||
this.$nextTick(function () { |
||||
this.plateNumber = '' |
||||
this.page.plateNumber = '' |
||||
}) |
||||
} |
||||
|
||||
} |
||||
}, |
||||
deep: true |
||||
}, |
||||
page: { |
||||
handler() { |
||||
this.$nextTick(function () { |
||||
console.log(this.page.oilsBar,'this.page.oilsBar') |
||||
this.$emit('input', Object.assign(JSON.parse(JSON.stringify(this.seleOil)), {...this.page,oilsBar:this.page.oilsBar?this.page.oilsBar:this.otherOilsBar})); |
||||
}) |
||||
}, |
||||
deep: true |
||||
|
||||
page: { |
||||
handler() { |
||||
this.$nextTick(function () { |
||||
this.$emit( |
||||
'input', |
||||
Object.assign(JSON.parse(JSON.stringify(this.seleOil)), { |
||||
...this.page, |
||||
oilsBar: this.page.oilsBar ? this.page.oilsBar : this.otherOilsBar |
||||
}) |
||||
) |
||||
}) |
||||
}, |
||||
deep: true |
||||
} |
||||
}, |
||||
created() {}, |
||||
mounted() { |
||||
this.plateNumber = this.$pinia.state.value.user.user.plateNumber |
||||
this.page.plateNumber = this.$pinia.state.value.user.user.plateNumber |
||||
this.$nextTick(function () { |
||||
this.$emit('input', Object.assign(this.seleOil, this.page)) |
||||
}) |
||||
}, |
||||
methods: { |
||||
keyboardHide() { |
||||
setTimeout(() => { |
||||
if (this.otherOilsBar) { |
||||
this.page = Object.assign({}, { ...this.page, oilsBar: this.otherOilsBar }) |
||||
} else { |
||||
this.seleIndex = 1 |
||||
} |
||||
}, 0) |
||||
}, |
||||
created() { }, |
||||
mounted() { |
||||
this.plateNumber = this.$pinia.state.value.user.user.plateNumber |
||||
this.page.plateNumber = this.$pinia.state.value.user.user.plateNumber |
||||
chenkFn() { |
||||
let chenk = /^\d+(.\d{1,2})?$/ |
||||
if (!chenk.test(Number(this.price))) { |
||||
this.$nextTick(function () { |
||||
this.$emit('input', Object.assign(this.seleOil, this.page)) |
||||
this.price = this.price.slice(0, this.price.length - 1) |
||||
}) |
||||
} else { |
||||
if (this.price.indexOf('.') !== -1 && this.price.split('.')[1].length > 2) { |
||||
this.$nextTick(function () { |
||||
this.price = Number(this.price).toFixed(2) |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
keyboardHide(){ |
||||
setTimeout(()=>{ |
||||
if(this.otherOilsBar){ |
||||
this.page = Object.assign({}, { ...this.page, oilsBar: this.otherOilsBar }) |
||||
}else{ |
||||
this.seleIndex= 1 |
||||
} |
||||
},0) |
||||
}, |
||||
chenkFn() { |
||||
let chenk = /^\d+(.\d{1,2})?$/ |
||||
if (!chenk.test(Number(this.price))) { |
||||
this.$nextTick(function () { |
||||
this.price = this.price.slice(0, this.price.length - 1); |
||||
}) |
||||
} else { |
||||
if (this.price.indexOf('.') !== -1 && this.price.split('.')[1].length > 2) { |
||||
this.$nextTick(function () { |
||||
this.price = Number(this.price).toFixed(2); |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
checkFn(e, n) { |
||||
switch (e) { |
||||
case 'name': |
||||
/(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/ |
||||
.test(n); |
||||
break |
||||
case 'plateNumber': |
||||
return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/ |
||||
.test(n) |
||||
break |
||||
case 'phone': |
||||
return /^1[3456789]\d{9}$/.test(n); |
||||
break; |
||||
case 'replacePhone': |
||||
/^1[3456789]\d{9}$/.test(n); |
||||
break; |
||||
} |
||||
}, |
||||
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 = item; |
||||
this.page = Object.assign({}, { ...this.page, oilsBar: item }) |
||||
}, |
||||
selePrice(index) { |
||||
this.price = (index + 1) * 100; |
||||
this.blur() |
||||
}, |
||||
change() { |
||||
this.chenkFn() |
||||
if (this.timer) { |
||||
clearTimeout(this.timer) |
||||
} |
||||
this.timer = setTimeout(() => { |
||||
this.blur() |
||||
}, 600); |
||||
}, |
||||
isShowFn() { |
||||
this.isShow.licensePlate = !this.isShow.licensePlate; |
||||
}, |
||||
checkFn(e, n) { |
||||
switch (e) { |
||||
case 'name': |
||||
;/(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/.test(n) |
||||
break |
||||
case 'plateNumber': |
||||
return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/.test( |
||||
n |
||||
) |
||||
break |
||||
case 'phone': |
||||
return /^1[3456789]\d{9}$/.test(n) |
||||
break |
||||
case 'replacePhone': |
||||
;/^1[3456789]\d{9}$/.test(n) |
||||
break |
||||
} |
||||
}, |
||||
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 = item |
||||
this.page = Object.assign({}, { ...this.page, oilsBar: item }) |
||||
}, |
||||
}; |
||||
selePrice(index) { |
||||
this.price = (index + 1) * 100 |
||||
this.blur() |
||||
}, |
||||
change() { |
||||
this.chenkFn() |
||||
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; |
||||
color: red; |
||||
font-weight: 600; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.top { |
||||
margin-top: 20px; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.license-plate-popup-input-input { |
||||
border: none !important; |
||||
background-color: #fcfcfc; |
||||
margin-left: 10px; |
||||
border: none !important; |
||||
background-color: #fcfcfc; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.license-plate-popup-input-lable { |
||||
font-size: 30px; |
||||
font-family: PingFang SC-中等, PingFang SC; |
||||
font-weight: normal; |
||||
color: #000000; |
||||
|
||||
|
||||
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; |
||||
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; |
||||
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); |
||||
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; |
||||
font-size: 30px; |
||||
font-family: PingFang SC-中等, PingFang SC; |
||||
font-weight: normal; |
||||
color: #333333; |
||||
} |
||||
|
||||
.discount { |
||||
margin-top: 20px; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.priceSelection-container { |
||||
gap: 20px; |
||||
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; |
||||
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; |
||||
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; |
||||
border: none !important; |
||||
max-width: 200px; |
||||
margin: 0 20px; |
||||
|
||||
font-size: 28px; |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.refuelingAmount-import-lable { |
||||
font-size: 28px; |
||||
font-family: PingFang SC-粗体, PingFang SC; |
||||
font-weight: normal; |
||||
color: #000000; |
||||
font-size: 28px; |
||||
font-family: PingFang SC-粗体, PingFang SC; |
||||
font-weight: normal; |
||||
color: #000000; |
||||
} |
||||
|
||||
.refuelingAmount-import { |
||||
text-align: left; |
||||
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; |
||||
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; |
||||
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; |
||||
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; |
||||
width: 47px; |
||||
height: 38px; |
||||
} |
||||
|
||||
.oilGun-information-item { |
||||
display: flex; |
||||
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; |
||||
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; |
||||
} |
||||
|
||||
.other-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; |
||||
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-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; |
||||
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; |
||||
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; |
||||
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; |
||||
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> |
||||
</style> |
||||
|
||||
@ -1,163 +1,167 @@ |
||||
<template> |
||||
<div class="oilLable"> |
||||
<div class="oilLable-sele flex ac jc"> |
||||
<div class="oilLable-sele-item flex ac"> |
||||
<img :src=" `${imgURL}${oilType.channelCode}.png` " alt=""> |
||||
<span>{{oilType.channelCode|channelCodeFamt}}</span> |
||||
</div> |
||||
</div> |
||||
<div class="oilLableDetails"> |
||||
<div v-for="(itemx, index) in oilType.oilSitePriceDetailsVos" :key="index" class="oilLableDetails-item flex ac"> |
||||
<span class="oilLableDetails-item-tip">惠</span> |
||||
<span class="oilLableDetails-item-oilNumber">{{ itemx.oilProductCode }}</span> |
||||
<span class="oilLableDetails-item-oilPrice">￥{{ moneyIntercept(itemx.sitePrice)}}/L</span> |
||||
<span class="oilLableDetails-item-originalPrice">￥{{ itemx.oilSitePrice | moneyIntercept }}/L</span> |
||||
<span class="oilLableDetails-item-text">预计每100L节省{{ (100 * (itemx.oilSitePrice - itemx.sitePrice)) | moneyFormat}}元</span> |
||||
</div> |
||||
</div> |
||||
<div class="oilLable"> |
||||
<div class="oilLable-sele flex ac jc"> |
||||
<div class="oilLable-sele-item flex ac"> |
||||
<img :src="`${imgURL}${oilType.channelCode}.png`" alt="" /> |
||||
<span>{{ oilType.channelCode | channelCodeFamt }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="oilLableDetails"> |
||||
<div v-for="(itemx, index) in oilType.oilSitePriceDetailsVos" :key="index" class="oilLableDetails-item flex ac"> |
||||
<span class="oilLableDetails-item-tip">惠</span> |
||||
<span class="oilLableDetails-item-oilNumber">{{ itemx.oilProductCode }}</span> |
||||
<span class="oilLableDetails-item-oilPrice">￥{{ moneyIntercept(itemx.sitePrice) }}/L</span> |
||||
<span class="oilLableDetails-item-originalPrice">￥{{ itemx.oilSitePrice | moneyIntercept }}/L</span> |
||||
<span class="oilLableDetails-item-text">预计每100L节省{{ (100 * (itemx.oilSitePrice - itemx.sitePrice)) | moneyFormat }}元</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
oilType: { |
||||
type: Object, |
||||
default: null |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
imgURL:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/site-' |
||||
} |
||||
props: { |
||||
oilType: { |
||||
type: Object, |
||||
default: null |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
imgURL: 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/site-' |
||||
} |
||||
}, |
||||
created() { |
||||
// console.log(this.oilType, '---------------') |
||||
}, |
||||
mounted() {}, |
||||
filters: { |
||||
moneyIntercept(value) { |
||||
if (value != 'xxx.x') { |
||||
// console.log(value, '************************') |
||||
return String(value).split('.')[1] && String(value).split('.')[1].length > 2 |
||||
? Number( |
||||
`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0, 1)}${ |
||||
Number(String(value).split('.')[1].substring(1, 2)) + 1 |
||||
}` |
||||
) |
||||
: Number(value).toFixed(2) |
||||
} else { |
||||
return Number(value).toFixed(2) |
||||
} |
||||
}, |
||||
created() { |
||||
console.log(this.oilType, '---------------') |
||||
|
||||
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 { |
||||
return Number(value).toFixed(2) |
||||
} |
||||
}, |
||||
mounted() { }, |
||||
filters: { |
||||
moneyIntercept(value) { |
||||
if (value != 'xxx.x') { |
||||
console.log(value, '************************') |
||||
return String(value).split('.')[1] && String(value).split('.')[1].length > 2 ? Number(`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0, 1)}${Number(String(value).split('.')[1].substring(1, 2)) + 1}`) : 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 { |
||||
return Number(value).toFixed(2) |
||||
} |
||||
}, |
||||
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 '一点加油（壳牌）' |
||||
} |
||||
} |
||||
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> |
||||
.oilLableDetails-item:last-child { |
||||
margin-bottom: 0px !important; |
||||
margin-bottom: 0px !important; |
||||
} |
||||
|
||||
.oilLableDetails-item-text { |
||||
font-size: 22px; |
||||
font-family: PingFang SC-中等, PingFang SC; |
||||
font-weight: normal; |
||||
color: #999999; |
||||
margin-left: 30px; |
||||
font-size: 22px; |
||||
font-family: PingFang SC-中等, PingFang SC; |
||||
font-weight: normal; |
||||
color: #999999; |
||||
margin-left: 30px; |
||||
} |
||||
|
||||
.oilLableDetails-item-originalPrice { |
||||
font-size: 22px; |
||||
font-family: PingFang SC-中等, PingFang SC; |
||||
font-weight: normal; |
||||
color: #999999; |
||||
text-decoration: line-through; |
||||
margin-left: 13px; |
||||
font-size: 22px; |
||||
font-family: PingFang SC-中等, PingFang SC; |
||||
font-weight: normal; |
||||
color: #999999; |
||||
text-decoration: line-through; |
||||
margin-left: 13px; |
||||
} |
||||
|
||||
.oilLableDetails-item-oilPrice { |
||||
font-size: 32px; |
||||
font-family: PingFang SC-特粗, PingFang SC; |
||||
font-weight: normal; |
||||
color: #FF6700; |
||||
margin-left: 34px; |
||||
font-size: 32px; |
||||
font-family: PingFang SC-特粗, PingFang SC; |
||||
font-weight: normal; |
||||
color: #ff6700; |
||||
margin-left: 34px; |
||||
} |
||||
|
||||
.oilLableDetails-item-oilNumber { |
||||
|
||||
color: #000000; |
||||
font-size: 34px; |
||||
margin-left: 17px; |
||||
color: #000000; |
||||
font-size: 34px; |
||||
margin-left: 17px; |
||||
} |
||||
|
||||
.oilLableDetails-item-tip { |
||||
width: 35px; |
||||
height: 35px; |
||||
box-sizing: border-box; |
||||
border: solid 1px #FF6700; |
||||
font-size: 25px; |
||||
color: #FF6700; |
||||
width: 35px; |
||||
height: 35px; |
||||
box-sizing: border-box; |
||||
border: solid 1px #ff6700; |
||||
font-size: 25px; |
||||
color: #ff6700; |
||||
} |
||||
|
||||
.oilLableDetails-item { |
||||
margin-bottom: 43px; |
||||
margin-bottom: 43px; |
||||
} |
||||
|
||||
.oilLableDetails { |
||||
margin-top: 37px; |
||||
margin-top: 37px; |
||||
} |
||||
|
||||
.oilLable-sele-item { |
||||
width: fit-content; |
||||
border-bottom: 4px solid #FF6700; |
||||
padding-bottom: 5px; |
||||
box-sizing: border-box; |
||||
width: fit-content; |
||||
border-bottom: 4px solid #ff6700; |
||||
padding-bottom: 5px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.oilLable-sele img { |
||||
width: 45px; |
||||
height: 45px; |
||||
margin-right: 10px; |
||||
width: 45px; |
||||
height: 45px; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.oilLable-sele { |
||||
width: 100%; |
||||
border-bottom: 3px solid #F2F2F2; |
||||
width: 100%; |
||||
border-bottom: 3px solid #f2f2f2; |
||||
} |
||||
|
||||
.oilLable { |
||||
--pd: calc((100vw - 684px)/2); |
||||
width: 100%; |
||||
background-color: #ffffff; |
||||
margin-top: -62px; |
||||
box-sizing: border-box; |
||||
padding-top: 102px; |
||||
padding-left: var(--pd); |
||||
padding-right: var(--pd); |
||||
padding-bottom: 36px; |
||||
--pd: calc((100vw - 684px) / 2); |
||||
width: 100%; |
||||
background-color: #ffffff; |
||||
margin-top: -62px; |
||||
box-sizing: border-box; |
||||
padding-top: 102px; |
||||
padding-left: var(--pd); |
||||
padding-right: var(--pd); |
||||
padding-bottom: 36px; |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue