zx_flk_app/pages/index_1231/components/CarDemand/UpdatePopup.vue

<template>
    <view class="carDemand-container">
        <u-popup 
            v-model="showUpdateInfoPopup" 
            mode="top" 
            border-radius="32"
            :height="popupHeight"
            :custom-style="{ 'margin-top': top + 'px' }"
            :mask-custom-style="{ 'margin-top': top + 'px' }"
        >
            <view style="padding: 0 32rpx;">
                <UpdateReservationHireCar 
                    isUpdate
                    ref="UpdateReservation"
                    @changeType="showLeaseTypeHandle"
                    @close="closeUpdateInfoPopup"
                    @calendarChange="calendarChange"
                />
            </view>
        </u-popup>

        <u-popup v-model="showLeaseType" :closeable="false" mode="bottom" border-radius="32">
            <view class="bottom-popup">
                <view class="title">选择租车类型</view>
                <view class="item-wrap">
                    <view 
                        v-for="(item, index) in LEASE_TYPE_ARR" 
                        :class="['item', leaseType == item.value && 'checked']"
                        :key="index"
                        @click="leaseType = item.value"
                    >
                        {{ item.label }}
                    </view>
                    <view class="item" style="opacity: 0;"></view>
                </view>
                <view class="options-wrap">
                    <view class="btn cancle" @click="showLeaseType = false">取消</view>
                    <view class="btn confirm" @click="chooseLeaseType">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { LEASE_TYPE_ARR } from '@/common/constant.js'
import UpdateReservationHireCar from '../ReservationHireCar'
export default {
    props: {
        top: {
            type: Number,
            default: 0
        }
    },
    components: { UpdateReservationHireCar },
    data () {
        return {
            LEASE_TYPE_ARR,
            popupHeight: 'auto',
            showLeaseType: false,
            showUpdateInfoPopup: false,
            leaseType: 4,
            infoData: {}
        }
    },
    methods: {
        open(data) {
            this.infoData = { ...data }
            this.showUpdateInfoPopup = true
            this.$nextTick(() => {
                this.$refs.UpdateReservation.setDataInfo(data)
            })
        },
        getLeaseType(val) {
            const obj = this.LEASE_TYPE_ARR.find(v => v.value === val)
            return obj.label
        },
        showLeaseTypeHandle() {
            this.showLeaseType = true
            this.leaseType = this.infoData['duration_unit']
        },
        chooseLeaseType() {
            this.showLeaseType = false
            this.$refs.UpdateReservation.duration_unit = this.leaseType
        },
        closeUpdateInfoPopup(obj) {
            this.showUpdateInfoPopup = false
            if (obj) {
                this.$emit('updateInfo', obj)
            }
        },
        calendarChange(val) {
            this.popupHeight = val
        }
    }
}
</script>

<style lang="scss" scoped>
.carDemand-container {
    background: #fff;
    width: 100%;
    padding: 10rpx 32rpx;
    .input-wrap {
        background: #F4F5F6;
        border-radius: 36rpx;
        .content {
            display: flex;
            justify-content: space-between;
            padding: 20rpx 30rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #5E6F90;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            .img {
                width: 32rpx;
                height: 32rpx;
                margin-left: 20rpx;
            }
            .address-txt {
                width: 140rpx;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .takeCar {
            display: flex;
            &::before, &::after {
                content: "";
                width: 2px;
                height: 28rpx;
                background: #E9EBED;
                position: relative;
            }
            &::before {
              left: -16rpx;
            }
            &::after {
              right: -16rpx;
            }
        }
    }
    .bottom-popup {
        padding: 40rpx 32rpx 32rpx 32rpx;
        padding-bottom: env(safe-area-inset-bottom);
        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 40rpx;
            color: #2A3A5A;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 48rpx;
        }
        .item-wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 36rpx;
                width: 220rpx;
                height: 64rpx;
                background: #FFFFFF;
                border-radius: 38rpx;
                border: 2px solid #E7EAEE;
                box-sizing: border-box;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 30rpx;
                color: #8997B1;
                text-align: center;
                font-style: normal;
            }
            .checked {
                background: #EDF5FF;
                color: #0074FF;
                border: 2px solid #0074FF;
            }
        }
        .options-wrap {
            display: flex;
            justify-content: space-between;
            .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 334rpx;
                height: 80rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                line-height: 32rpx;
                text-align: center;
                font-style: normal;
                border-radius: 40rpx;
                
            }
            .cancle {
                background: #E5F1FF;
                color: #0074FF;
            }
            .confirm {
                background: #0074FF;
                color: #FFFFFF;
            }
        }
    }
}
</style>