|
|
@ -2,8 +2,21 @@ |
|
|
|
<div class="author-content"> |
|
|
|
<div class="page-header"> |
|
|
|
<div class="header-title">读者成就设置</div> |
|
|
|
<el-button type="primary" class="submit-btn" :disabled="isPending" @click="handleSubmit"> |
|
|
|
{{ isPending ? '设置审核中' : '提交申请' }} |
|
|
|
<div class="status-info" v-if="form.status !== undefined"> |
|
|
|
<el-tag |
|
|
|
:type="getStatusType(form.status)" |
|
|
|
:class="'status-tag status-' + form.status" |
|
|
|
> |
|
|
|
{{ getStatusText(form.status) }} |
|
|
|
</el-tag> |
|
|
|
</div> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="submit-btn" |
|
|
|
:disabled="!canSubmit" |
|
|
|
@click="handleSubmit" |
|
|
|
> |
|
|
|
{{ getSubmitButtonText() }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
@ -18,7 +31,7 @@ |
|
|
|
<el-input |
|
|
|
v-model="form[keys[index] + 'Name']" |
|
|
|
placeholder="请输入成就名称" |
|
|
|
:disabled="isPending" |
|
|
|
:disabled="!canEdit" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="achievement-stats" v-if="form[keys[index] + 'Num']"> |
|
|
@ -27,23 +40,84 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 驳回原因显示 --> |
|
|
|
<div v-if="form.status === 2 && form.rejectReason" class="reject-reason"> |
|
|
|
<el-alert |
|
|
|
title="驳回原因" |
|
|
|
:description="form.rejectReason" |
|
|
|
type="error" |
|
|
|
show-icon |
|
|
|
:closable="false" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { defineComponent, ref, reactive, onMounted } from 'vue'; |
|
|
|
import { defineComponent, ref, reactive, onMounted, computed } from 'vue'; |
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
import { achievementApi } from '@/api/bookshelf'; |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
name: 'ReadersManagement', |
|
|
|
setup() { |
|
|
|
const isPending = ref(false); |
|
|
|
const keys = ['one', 'two', 'three']; |
|
|
|
const form = reactive({}); |
|
|
|
const form = reactive({ |
|
|
|
status: undefined |
|
|
|
}); |
|
|
|
const achievements = ref([]); |
|
|
|
|
|
|
|
// 计算属性:是否可以编辑 |
|
|
|
const canEdit = computed(() => { |
|
|
|
return form.status === undefined || form.status === 2; // 未设置或驳回状态可编辑 |
|
|
|
}); |
|
|
|
|
|
|
|
// 计算属性:是否可以提交 |
|
|
|
const canSubmit = computed(() => { |
|
|
|
return canEdit.value && !isSubmitting.value; |
|
|
|
}); |
|
|
|
|
|
|
|
const isSubmitting = ref(false); |
|
|
|
|
|
|
|
// 获取状态类型 |
|
|
|
const getStatusType = (status) => { |
|
|
|
switch (status) { |
|
|
|
case 0: return 'warning'; // 待审核 |
|
|
|
case 1: return 'success'; // 已通过 |
|
|
|
case 2: return 'danger'; // 驳回 |
|
|
|
default: return 'info'; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取状态文本 |
|
|
|
const getStatusText = (status) => { |
|
|
|
switch (status) { |
|
|
|
case 0: return '待审核'; |
|
|
|
case 1: return '已通过'; |
|
|
|
case 2: return '已驳回'; |
|
|
|
default: return '未设置'; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取提交按钮文本 |
|
|
|
const getSubmitButtonText = () => { |
|
|
|
if (isSubmitting.value) { |
|
|
|
return '提交中...'; |
|
|
|
} |
|
|
|
if (form.status === 0) { |
|
|
|
return '审核中'; |
|
|
|
} |
|
|
|
if (form.status === 1) { |
|
|
|
return '已通过'; |
|
|
|
} |
|
|
|
if (form.status === 2) { |
|
|
|
return '重新提交'; |
|
|
|
} |
|
|
|
return '提交申请'; |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取成就列表 |
|
|
|
const getAchievementList = async () => { |
|
|
|
try { |
|
|
@ -61,9 +135,9 @@ export default defineComponent({ |
|
|
|
const getAchievementDetail = async () => { |
|
|
|
try { |
|
|
|
const response = await achievementApi.getAchievement(); |
|
|
|
if (response.success) { |
|
|
|
if (response.success && response.result) { |
|
|
|
response.result.status = parseInt(response.result.status) |
|
|
|
Object.assign(form, response.result); |
|
|
|
isPending.value = response.result.status === 0; |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('获取成就设置失败:', error); |
|
|
@ -80,17 +154,38 @@ export default defineComponent({ |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
// 如果状态是已通过,不允许重复提交 |
|
|
|
if (form.status === 1) { |
|
|
|
ElMessage.warning('成就设置已通过,无需重复提交'); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
try { |
|
|
|
const response = await achievementApi.setAchievementName(form); |
|
|
|
isSubmitting.value = true; |
|
|
|
|
|
|
|
let data = { |
|
|
|
oneName: form.oneName, |
|
|
|
twoName: form.twoName, |
|
|
|
threeName: form.threeName, |
|
|
|
} |
|
|
|
|
|
|
|
if(form.id){ |
|
|
|
data.id = form.id; |
|
|
|
} |
|
|
|
|
|
|
|
const response = await achievementApi.setAchievementName(data); |
|
|
|
if (response.success) { |
|
|
|
ElMessage.success('提交成功'); |
|
|
|
isPending.value = true; |
|
|
|
ElMessage.success('提交成功,请等待审核'); |
|
|
|
// 重新获取详情以更新状态 |
|
|
|
await getAchievementDetail(); |
|
|
|
} else { |
|
|
|
ElMessage.error(response.message || '提交失败'); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('提交成就设置失败:', error); |
|
|
|
ElMessage.error('提交失败,请稍后重试'); |
|
|
|
} finally { |
|
|
|
isSubmitting.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
@ -103,7 +198,12 @@ export default defineComponent({ |
|
|
|
achievements, |
|
|
|
form, |
|
|
|
keys, |
|
|
|
isPending, |
|
|
|
canEdit, |
|
|
|
canSubmit, |
|
|
|
isSubmitting, |
|
|
|
getStatusType, |
|
|
|
getStatusText, |
|
|
|
getSubmitButtonText, |
|
|
|
handleSubmit |
|
|
|
}; |
|
|
|
} |
|
|
@ -129,6 +229,31 @@ export default defineComponent({ |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.status-info { |
|
|
|
.status-tag { |
|
|
|
font-size: 14px; |
|
|
|
padding: 6px 12px; |
|
|
|
|
|
|
|
&.status-0 { |
|
|
|
background-color: #fdf6ec; |
|
|
|
color: #e6a23c; |
|
|
|
border-color: #f5dab1; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-1 { |
|
|
|
background-color: #f0f9ff; |
|
|
|
color: #67c23a; |
|
|
|
border-color: #b3e19d; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-2 { |
|
|
|
background-color: #fef0f0; |
|
|
|
color: #f56c6c; |
|
|
|
border-color: #fbc4c4; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.submit-btn { |
|
|
|
background-color: #0A2463; |
|
|
@ -140,8 +265,9 @@ export default defineComponent({ |
|
|
|
} |
|
|
|
|
|
|
|
&.is-disabled { |
|
|
|
background-color: #807a7a; |
|
|
|
border-color: #807a7a; |
|
|
|
background-color: #c0c4cc; |
|
|
|
border-color: #c0c4cc; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -157,6 +283,7 @@ export default defineComponent({ |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-around; |
|
|
|
gap: 40px; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
.achievement-item { |
|
|
|
display: flex; |
|
|
@ -208,6 +335,14 @@ export default defineComponent({ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.reject-reason { |
|
|
|
margin-top: 20px; |
|
|
|
padding: 16px; |
|
|
|
background-color: #fef0f0; |
|
|
|
border-radius: 6px; |
|
|
|
border-left: 4px solid #f56c6c; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |