congsh
148 lines
3.2 KiB
Vue
148 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useGroupStore } from '@/stores/group'
|
|
import { getGroup, joinGroup } from '@/api/groups'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
}>()
|
|
|
|
const groupStore = useGroupStore()
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val)
|
|
})
|
|
|
|
const groupId = ref('')
|
|
const groupInfo = ref<any>(null)
|
|
const loading = ref(false)
|
|
const joining = ref(false)
|
|
|
|
async function searchGroup() {
|
|
if (!groupId.value.trim()) {
|
|
ElMessage.warning('请输入群组 ID')
|
|
return
|
|
}
|
|
loading.value = true
|
|
try {
|
|
groupInfo.value = await getGroup(groupId.value.trim())
|
|
} catch (error) {
|
|
groupInfo.value = null
|
|
ElMessage.error('未找到该群组')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function handleJoin() {
|
|
if (!groupInfo.value) return
|
|
joining.value = true
|
|
try {
|
|
await joinGroup(groupInfo.value.id)
|
|
await groupStore.loadGroups()
|
|
visible.value = false
|
|
groupId.value = ''
|
|
groupInfo.value = null
|
|
ElMessage.success('已申请加入群组，等待群主审核')
|
|
} catch (error: any) {
|
|
ElMessage.error(error.message || '加入群组失败')
|
|
} finally {
|
|
joining.value = false
|
|
}
|
|
}
|
|
|
|
function reset() {
|
|
groupId.value = ''
|
|
groupInfo.value = null
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog v-model="visible" title="加入群组" width="440px" @close="reset">
|
|
<div class="join-form">
|
|
<div class="form-field">
|
|
<label>群组 ID</label>
|
|
<div class="search-row">
|
|
<el-input v-model="groupId" placeholder="输入群主分享的群组 ID" />
|
|
<el-button type="primary" :loading="loading" @click="searchGroup">查找</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="groupInfo" class="group-preview">
|
|
<div class="preview-header">
|
|
<h3 class="preview-name">{{ groupInfo.name }}</h3>
|
|
<span class="preview-members">{{ groupInfo.members?.length || 0 }} / {{ groupInfo.maxMembers }} 人</span>
|
|
</div>
|
|
<p v-if="groupInfo.description" class="preview-desc">{{ groupInfo.description }}</p>
|
|
<el-button type="primary" :loading="joining" @click="handleJoin" style="width:100%; margin-top: 12px;">
|
|
申请加入
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.join-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-field label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.search-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.search-row .el-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.group-preview {
|
|
padding: 16px;
|
|
background: var(--gg-bg-card);
|
|
border: 1px solid var(--gg-border);
|
|
border-radius: var(--gg-radius-md);
|
|
}
|
|
|
|
.preview-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-name {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.preview-members {
|
|
font-size: 13px;
|
|
color: var(--gg-text-secondary);
|
|
}
|
|
|
|
.preview-desc {
|
|
margin: 8px 0 0;
|
|
font-size: 14px;
|
|
color: var(--gg-text-secondary);
|
|
}
|
|
</style>
|