crm-app-vue3/pages/orderDetailNew/components/CustomModal.vue

<template>
    <u-modal :show="visible" :show-cancel-button="false" :show-confirm-button="false">
        <view class="modal-content">
            <view class="modal-header">
                <text class="modal-title">{{ title }}</text>
            </view>
            <view class="modal-body">
                <u-input v-model="localValue" :placeholder="placeholder" class="modal-input"></u-input>
            </view>
            <view class="modal-footer">
                <text @click="handleCancel" class="btn cancel-btn">取消</text>
                <text @click="handleConfirm" class="btn confirm-btn">确定</text>
            </view>
        </view>
    </u-modal>
</template>

<script>
export default {
    name: 'CustomModal',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            localValue: this.value
        }
    },
    watch: {
        value(newVal) {
            this.localValue = newVal
        },
        visible(newVal) {
            if (newVal) {
                this.localValue = this.value
            }
        }
    },
    methods: {

        handleCancel() {
            this.$emit('cancel')
        },
        handleConfirm() {
            this.$emit('confirm', this.localValue)
        }
    }
}
</script>

<style scoped>
.modal-content {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    padding: 20rpx;
}

.modal-header {
    display: flex;
    justify-content: center;
    padding: 10rpx 0;
}

.modal-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.modal-body {
    padding: 10rpx 0;
}

.modal-input {
    border: 2rpx solid #e0e0e0;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
    padding: 10rpx 0;
}

.btn {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    font-weight: 500;
}

.cancel-btn {
    background-color: #f5f5f5;
    color: #666;
}

.confirm-btn {
    background-color: blueviolet;
    color: white;
}
</style>