jude-user-recharge/web/src/views/frontend/components/AddMemberDialog.vue

<template>
  <el-dialog title="邮箱添加人员" :model-value="props.visible" @update:model-value="(val) => emit('update:visible', val)"
    width="480px" :close-on-click-modal="false" :close-on-press-escape="true" class="add-member-dialog"
    @close="handleClose">
    <div class="add-member-form">
      <div class="form-item">
        <div class="input-with-button">
          <el-input v-model="form.email" placeholder="请输入邮箱地址" clearable :disabled="searching"
            @keyup.enter="handleSearch" @clear="handleClear">
            <template #prefix>
              <el-icon class="input-prefix">
                <Message />
              </el-icon>
            </template>
          </el-input>
          <el-button type="primary" :loading="searching" :disabled="!form.email || !form.email.trim()"
            class="search-btn" @click="handleSearch">
            <el-icon v-if="!searching" class="search-icon">
              <Search />
            </el-icon>
            <span>{{ searching ? '搜索中...' : '搜索' }}</span>
          </el-button>
        </div>
        <div v-if="form.email && !isValidEmail" class="error-tip">
          <el-icon class="error-icon">
            <WarningFilled />
          </el-icon>
          <span>请输入正确的邮箱格式</span>
        </div>
      </div>

      <transition name="fade-slide">
        <div v-if="searchedUser" class="form-item member-info">
          <div class="label">
            <el-icon class="label-icon">
              <User />
            </el-icon>
            <span>人员信息</span>
          </div>
          <div class="member-card">
            <div class="member-avatar">
              <el-icon class="member-avatar-icon">
                <UserFilled />
              </el-icon>
            </div>
            <div class="member-details">
              <div class="member-name">
                <span class="name-label">姓名：</span>
                <span class="name-value">{{ searchedUser.name }}</span>
              </div>
              <div class="member-email">
                <span class="email-label">邮箱：</span>
                <span class="email-value">{{ form.email }}</span>
              </div>
            </div>
            <div class="member-status">
              <el-icon class="status-icon">
                <SuccessFilled />
              </el-icon>
            </div>
          </div>
        </div>
      </transition>

      <div v-if="!searchedUser && form.email && isValidEmail && !searching" class="empty-state">
        <el-icon class="empty-icon">
          <Search />
        </el-icon>
        <p>点击搜索按钮查找用户</p>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="handleCancel">取消</el-button>
        <el-button type="primary" size="small" :loading="submitting" :disabled="!searchedUser" @click="handleSubmit">
          <span>{{ submitting ? '添加中...' : '确认添加' }}</span>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch } from 'vue'
import { Message, Search, SuccessFilled, User, UserFilled, WarningFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { searchEmail, addMember } from '/@/api/frontend/me'

defineOptions({ name: 'AddMemberDialog' })

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  companyId: {
    type: [Number, String],
    default: null
  }
})

const emit = defineEmits(['update:visible', 'success', 'close'])

const form = reactive({
  email: ''
})
const searchedUser = ref(null)
const searching = ref(false)
const submitting = ref(false)

const isValidEmail = computed(() => {
  if (!form.email || !form.email.trim()) {
    return true
  }
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(form.email.trim())
})

watch(
  () => props.visible,
  newVal => {
    if (newVal) {
      resetForm()
    } else {
      resetForm()
    }
  }
)

const resetForm = () => {
  form.email = ''
  searchedUser.value = null
  searching.value = false
  submitting.value = false
}

const handleClear = () => {
  searchedUser.value = null
}

const handleSearch = async () => {
  if (!form.email || !form.email.trim()) {
    ElMessage.warning('请输入邮箱')
    return
  }

  if (!isValidEmail.value) {
    ElMessage.error('邮箱格式不正确')
    return
  }

  searching.value = true
  try {
    const response = await searchEmail({
      keyword: form.email.trim()
    })

    searchedUser.value = response.data[0]
    ElMessage.success('搜索成功')
  } catch (error) {
    ElMessage.error('搜索用户失败，请稍后重试')
    searchedUser.value = null
  } finally {
    searching.value = false
  }
}

const handleSubmit = async () => {
  if (!searchedUser.value) {
    ElMessage.warning('请先搜索用户')
    return
  }

  if (!props.companyId) {
    ElMessage.error('企业ID不能为空')
    return
  }

  if (!form.email || !form.email.trim()) {
    ElMessage.error('邮箱不能为空')
    return
  }

  // 获取用户姓名，如果搜索返回的数据中没有name，使用email作为默认值
  const userName = searchedUser.value.name || searchedUser.value.email || form.email.trim()

  submitting.value = true
  try {
    await addMember({
      company_id: String(props.companyId),
      email: form.email.trim(),
      name: userName
    })

    ElMessage.success('添加成员成功')
    emit('success', searchedUser.value)
    emit('update:visible', false)
  } catch (error) {
    ElMessage.error('添加成员失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

const handleCancel = () => {
  emit('update:visible', false)
}

const handleClose = () => {
  resetForm()
  emit('close')
}
</script>

<style scoped lang="scss">
::v-deep .add-member-dialog {

  .label-icon,
  .input-prefix,
  .search-icon,
  .error-icon,
  .member-avatar-icon,
  .status-icon,
  .empty-icon,
  .submit-icon {
    font-size: 16px;
  }

  .member-avatar-icon {
    font-size: 20px;
  }

  .status-icon {
    color: #67c23a;
  }

  .error-icon {
    color: #f56c6c;
  }

  .empty-icon {
    font-size: 22px;
    color: #909399;
  }

  .el-dialog {
    border-radius: 8px;
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #409eff 0%, #2563eb 100%);
    color: #fff;
    border-bottom: none;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
    }

    .el-dialog__close {
      color: #fff;
      font-size: 20px;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  .el-dialog__body {
    padding: 24px;
  }

  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid #ebeef5;
    background: #fafafa;
  }
}

.add-member-form {
  .form-item {
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }

    &.member-info {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid #ebeef5;
    }
  }

  .label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #303133;
    font-weight: 500;

    i {
      margin-right: 6px;
      font-size: 16px;
      color: #409eff;
    }

    span {
      line-height: 1;
    }
  }

  .input-with-button {
    display: flex;
    gap: 12px;
    align-items: flex-start;

    .el-input {
      flex: 1;

      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        transition: all 0.3s ease;
      }
    }

    .search-btn {
      flex-shrink: 0;
      min-width: 100px;
      height: 40px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);

      &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
      }

      &:active:not(:disabled) {
        transform: translateY(0);
      }

      i {
        margin-right: 4px;
      }
    }
  }

  .error-tip {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: #f56c6c;

    i {
      margin-right: 4px;
      font-size: 14px;
    }
  }

  .member-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 8px;
    border: 1px solid #e4e7ed;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .member-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #409eff 0%, #2563eb 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);

      i {
        font-size: 24px;
        color: #fff;
      }
    }

    .member-details {
      flex: 1;
      min-width: 0;

      .member-name,
      .member-email {
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        font-size: 14px;

        &:last-child {
          margin-bottom: 0;
        }

        .name-label,
        .email-label {
          color: #606266;
          margin-right: 4px;
          font-weight: 400;
        }

        .name-value {
          font-weight: 600;
          color: #303133;
          font-size: 15px;
        }

        .email-value {
          color: #606266;
          word-break: break-all;
        }
      }
    }

    .member-status {
      margin-left: 12px;
      flex-shrink: 0;

      .status-icon {
        font-size: 24px;
        color: #67c23a;
        animation: scaleIn 0.3s ease;
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #909399;

    i {
      font-size: 48px;
      margin-bottom: 12px;
      color: #c0c4cc;
    }

    p {
      font-size: 14px;
      margin: 0;
    }
  }
}

// 过渡动画
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .el-button {
    min-width: 100px;
    height: 40px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;

    &.el-button--primary {
      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);

      &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
      }

      &:active:not(:disabled) {
        transform: translateY(0);
      }
    }

    i {
      margin-right: 4px;
    }
  }
}

// 动画
@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
</style>