89 lines
3.8 KiB
Vue
89 lines
3.8 KiB
Vue
<template>
|
||
<div>
|
||
<el-form inline>
|
||
<el-form-item label="家长ID">
|
||
<el-input-number v-model="filterParent" :min="0" style="width: 140px" />
|
||
</el-form-item>
|
||
<el-button type="primary" @click="load">查询</el-button>
|
||
</el-form>
|
||
|
||
<el-table :data="list" v-loading="loading" border stripe>
|
||
<el-table-column prop="id" label="ID" width="70" />
|
||
<el-table-column prop="parent_id" label="家长ID" width="80" />
|
||
<el-table-column prop="nickname" label="昵称" min-width="120" />
|
||
<el-table-column label="头像" width="70">
|
||
<template #default="{ row }">
|
||
<el-avatar v-if="row.avatar" :src="row.avatar" :size="36" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="age_group" label="年龄段" width="80" />
|
||
<el-table-column prop="points" label="积分" width="70" />
|
||
<el-table-column prop="daily_limit_minutes" label="每日上限(分)" width="110" />
|
||
<el-table-column prop="perfect_count" label="完美关" width="80" />
|
||
<el-table-column label="成长等级" width="140">
|
||
<template #default="{ row }">{{ row.level_title }}（Lv{{ row.level }}）</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="70">
|
||
<template #default="{ row }"><el-tag :type="statusTag(row.status)" size="small">{{ statusText(row.status) }}</el-tag></template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="90" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button link type="primary" @click="showDetail(row)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-dialog v-model="dialogVisible" title="孩子详情" width="720px">
|
||
<template v-if="detail">
|
||
<el-descriptions :column="3" border>
|
||
<el-descriptions-item label="昵称">{{ detail.child.nickname }}</el-descriptions-item>
|
||
<el-descriptions-item label="积分">{{ detail.child.points }}</el-descriptions-item>
|
||
<el-descriptions-item label="成长等级">{{ detail.child.level_title }}</el-descriptions-item>
|
||
<el-descriptions-item label="通关">{{ detail.passed }}</el-descriptions-item>
|
||
<el-descriptions-item label="完美">{{ detail.perfect }}</el-descriptions-item>
|
||
<el-descriptions-item label="星星">{{ detail.stars }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-table :data="detail.progress" border size="small" style="margin-top: 12px" max-height="400">
|
||
<el-table-column prop="level_title" label="关卡" min-width="150" />
|
||
<el-table-column prop="strategy_name" label="计策" min-width="120" />
|
||
<el-table-column prop="stars" label="星星" width="70" />
|
||
<el-table-column label="完美" width="70">
|
||
<template #default="{ row }">{{ row.perfect ? '是' : '否' }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="content_version" label="内容版本" width="90" />
|
||
<el-table-column prop="completed_at" label="完成时间" width="170" />
|
||
</el-table>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import request from '../request'
|
||
import { statusTag, statusText } from '../constants'
|
||
|
||
const list = ref([])
|
||
const loading = ref(false)
|
||
const filterParent = ref(0)
|
||
const dialogVisible = ref(false)
|
||
const detail = ref(null)
|
||
|
||
const load = async () => {
|
||
loading.value = true
|
||
try {
|
||
const d = await request.get('/child/list', { params: filterParent.value ? { parent_id: filterParent.value } : {} })
|
||
list.value = (d && d.list) || []
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
load()
|
||
|
||
const showDetail = async (row) => {
|
||
detail.value = null
|
||
dialogVisible.value = true
|
||
detail.value = await request.get('/child/detail', { params: { child_id: row.id } })
|
||
}
|
||
</script>
|