用uniapp写一个提示框，里面的文字有 "驳回理由"，"驳回理由"后面可以自定义输入文字，下方有取消和确定两个按钮。当没有任何输入时确定按钮不可点击

<template>
<div class="modal" v-show="show">
<div class="modal__content">
<div class="modal__title">驳回理由</div>
<div class="modal__input">
<input type="text" placeholder="请输入驳回理由" v-model="reason" />
</div>
<div class="modal__buttons">
<div class="modal__button" @click="cancel">取消</div>
<div class="modal__button modal__button--primary" :class="{ 'disabled': !reason }" @click="confirm">确定</div>
</div>
</div>
</div>
</template>

<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
},
data() {
return {
reason: '',
};
},
methods: {
cancel() {
this.$emit('cancel');
},
confirm() {
if (this.reason) {
this.$emit('confirm', this.reason);
}
},
},
};
</script>

<style>
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}

.modal__content {
background-color: #fff;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.modal__title {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}

.modal__input {
width: 100%;
margin-bottom: 20px;
}

.modal__input input {
width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
font-size: 16px;
}

.modal__buttons {
display: flex;
justify-content: space-between;
width: 100%;
}

.modal__button {
width: 100%;
height: 50px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
cursor: pointer;
}

.modal__button--primary {
margin-left: 10px;
color: #fff;
background-color: #007aff;
}

.disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>