company_h5/src/views/orderDetails/components/oilGun.vue

<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>
        <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&nbsp;¥
                </div>
            </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
        }
    },
    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,
        },
        '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

        }
    },
    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)
        },
        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;
        },
    },
};
</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;
    margin-left: 10px;
}

.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;
}

.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;
}

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