ykt-wxapp/pages/message/components/reject-reason-modal.vue

<template>
  <view v-if="visible" class="modal-overlay" @click="handleCancel">
    <view class="modal-container" @click.stop>
      <view class="modal-header">
        <text class="modal-title">选择暂不接受咨询原因，供患者知晓</text>
      </view>

      <view class="modal-content">
        <!-- 预设原因选项 -->
        <view class="reason-options">
          <view
            v-for="(option, index) in reasonOptions"
            :key="index"
            class="reason-option"
            :class="{ active: selectedReason === option }"
            @click="selectReason(option)"
          >
            <text class="option-text">{{ option }}</text>
            <view class="option-icon" :class="{ checked: selectedReason === option }">
              <text v-if="selectedReason === option" class="check-mark">✓</text>
            </view>
          </view>

          <!-- 自定义输入选项 -->
          <view
            class="reason-option custom-option"
            :class="{ active: isCustomInput }"
            @click="selectCustomInput"
          >
            <text class="option-text">填写拒诊理由</text>
            <view class="option-icon arrow">
              <text class="arrow-icon">›</text>
            </view>
          </view>
        </view>

        <!-- 自定义输入框 -->
        <view v-if="isCustomInput" class="custom-input-container">
          <textarea
            class="custom-textarea"
            v-model="customReason"
            placeholder="请输入理由，供患者知晓"
            maxlength="200"
            :auto-height="true"
          />
          <text class="char-count">{{ customReason.length }}/200</text>
        </view>
      </view>

      <view class="modal-footer">
        <button class="btn-cancel" @click="handleCancel">取消</button>
        <button class="btn-confirm" @click="handleConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['confirm', 'cancel']);

// 预设的拒绝原因选项
const reasonOptions = ref([
  '临时有紧急事务',
  '患者病情复杂，需线下就诊',
]);

const selectedReason = ref('');
const isCustomInput = ref(false);
const customReason = ref('');

// 选择预设原因
const selectReason = (option) => {
  selectedReason.value = option;
  isCustomInput.value = false;
  customReason.value = '';
};

// 选择自定义输入
const selectCustomInput = () => {
  selectedReason.value = '';
  isCustomInput.value = true;
};

// 取消
const handleCancel = () => {
  // 重置状态
  selectedReason.value = '';
  isCustomInput.value = false;
  customReason.value = '';
  emit('cancel');
};

// 确定
const handleConfirm = () => {
  let reason = '';
  
  if (isCustomInput.value) {
    reason = customReason.value.trim();
    if (!reason) {
      uni.showToast({
        title: '请输入拒绝原因',
        icon: 'none',
      });
      return;
    }
  } else {
    reason = selectedReason.value;
    if (!reason) {
      uni.showToast({
        title: '请选择拒绝原因',
        icon: 'none',
      });
      return;
    }
  }

  emit('confirm', reason);
  
  // 重置状态
  selectedReason.value = '';
  isCustomInput.value = false;
  customReason.value = '';
};
</script>

<style scoped lang="scss">
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-container {
  width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  padding: 32rpx 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
}

.modal-content {
  padding: 24rpx 32rpx;
  max-height: 600rpx;
  overflow-y: auto;
}

.reason-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.reason-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s;

  &.active {
    background-color: #e6f4ff;
    border-color: #1677ff;
  }
}

.option-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.option-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  &.checked {
    background-color: #1677ff;
    border-color: #1677ff;
  }

  &.arrow {
    border: none;
  }
}

.check-mark {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
}

.arrow-icon {
  font-size: 40rpx;
  color: #999;
  font-weight: 300;
}

.custom-input-container {
  margin-top: 16rpx;
  padding: 16rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.custom-textarea {
  width: 100%;
  min-height: 120rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  background-color: transparent;
  border: none;
  outline: none;
  box-sizing: border-box;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.modal-footer {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 32rpx 32rpx;
  border-top: 1rpx solid #f0f0f0;
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.btn-cancel::after {
  border: none;
}

.btn-confirm {
  background-color: #1677ff;
  color: #fff;
}

.btn-confirm::after {
  border: none;
}
</style>