uni-admission-fee/components/price-picker/price-picker.vue

<template>
    <u-picker :show="show" :columns="priceColumns" keyName="price" title="请选择价位" @cancel="cancel" @confirm="confirm"
        @change="change" :defaultIndex="defaultIndex">
        <view slot="header">
            <view class="header">价位/人</view>
        </view>
        <view slot="footer">
            <u-transition :show="chooseText === '其他'" mode="fade" duration="900">
                <view class="other">
                    <view class="left">*已选择其他</view>
                    <view class="right">
                        <text>请填需求价位：</text>
                        <u--input type="number" class="input" v-model="value"></u--input>
                        <text>/人</text>
                    </view>
                </view>
            </u-transition>
        </view>
    </u-picker>
</template>
  
<script>
export default {
    data() {
        return {
            priceColumns: [],
            chooseUuid: '',
            chooseText: '',
            value: null,
            defaultIndex: [],
            priceClass: 0
        }
    },
    props: ['show', 'priceList', 'choosePriceClass'],
    watch: {
        priceList: {
            immediate: true,
            handler(newValue) {
                this.priceColumns = [[...newValue, ...[{ uuid: newValue[0]?.uuid, price: '其他', priceClass: 0 }]]]
                // console.log('priceColumns', this.priceColumns)
            },
        },
        chooseText: {
            // immediate: true,
            handler(newValue) {
                this.chooseText = newValue

            },
        },
        // 用来拿到PriceClass的值
        choosePriceClass: {
            handler(newValue) {
                this.priceClass = newValue.split('@')[0]
                const choose = this.priceColumns[0].find((item) => item.priceClass === +this.priceClass)
                console.log(choose)
                this.$emit("onConfirm", { value: this.value, uuid: choose.uuid, price: choose.price, priceClass: choose.priceClass });
            },
        }
    },
    methods: {
        cancel() {
            this.chooseText = '';
            this.defaultIndex = [];
            this.$emit("update:show", false);
        },
        confirm(item) {
            this.defaultIndex = [this.priceColumns[0]?.findIndex((n) => n.price === item.value[0].price)]
            if (this.chooseText === '其他') {
                this.$emit("onConfirm", { value: this.value, uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
                this.$emit("update:show", false);
            } else {
                this.value = null
                this.$emit("onConfirm", { uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
                this.$emit("update:show", false);
            }

        },
        change(item) {
            if (item.value[0].price === '其他') {
                this.chooseText = item.value[0].price;
                this.chooseUuid = item.value[0].uuid
            } else {
                this.chooseText = ''
            }
        }
    },
}
</script>

<style lang="scss">
.header {
    text-align: center;
    border-bottom: 1rpx solid #868686;
    border-top: 1rpx solid #868686;
    font-size: 36rpx;
    font-weight: 600;
    padding: 10rpx 0;
    width: 90%;
    margin: auto;
    color: #1936C9;
}

.other {
    box-sizing: border-box;
    border: 1px solid #1936C9;
    width: 90%;
    padding: 20rpx 30rpx;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 20rpx;
    margin-bottom: 20rpx;

    .left {
        color: #1936C9;
        font-weight: 600;
    }

    .right {
        width: 380rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;

        .input {
            width: 50rpx;
        }

    }
}
</style>