198 lines
7.6 KiB
Vue
198 lines
7.6 KiB
Vue
<template>
|
||
<view class="page" :class="{ big: isH5 }">
|
||
<view class="panel">
|
||
<view class="title">测评列表</view>
|
||
<view class="subtitle">分页展示测评记录，可按状态筛选。</view>
|
||
</view>
|
||
|
||
<view class="panel">
|
||
<view class="filters">
|
||
<view class="chip" :class="{ active: query.status === '' }" @click="setStatus('')">全部</view>
|
||
<view class="chip" :class="{ active: query.status === '0' }" @click="setStatus('0')">进行中</view>
|
||
<view class="chip" :class="{ active: query.status === '1' }" @click="setStatus('1')">已完成</view>
|
||
<view class="chip" :class="{ active: query.status === '3' }" @click="setStatus('3')">已暂停</view>
|
||
<view class="chip" :class="{ active: query.status === '2' }" @click="setStatus('2')">已作废</view>
|
||
</view>
|
||
<view v-if="errorMsg" class="error">{{ errorMsg }}</view>
|
||
</view>
|
||
|
||
<view v-if="loading" class="placeholder">加载中...</view>
|
||
<view v-else class="list">
|
||
<view v-if="rows.length === 0" class="placeholder">暂无数据</view>
|
||
<view v-else>
|
||
<view class="item" v-for="row in rows" :key="row.assessmentId" @click="openDetail(row)">
|
||
<view class="row">
|
||
<view class="badge" :class="statusBadge(row.status)">{{ statusText(row.status) }}</view>
|
||
<view class="item-title">测评ID {{ row.assessmentId }}</view>
|
||
</view>
|
||
<view class="item-desc">量表：{{ row.scaleName || row.scaleId || '-' }}</view>
|
||
<view class="item-desc">用户：{{ row.userName || row.nickName || row.userId || '-' }}</view>
|
||
<view class="item-foot">
|
||
开始：{{ formatTime(row.startTime) }} · 提交：{{ formatTime(row.submitTime) }}
|
||
</view>
|
||
</view>
|
||
<view v-if="hasMore" class="load-more">上拉加载更多…</view>
|
||
<view v-else class="load-more">没有更多了</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { listAssessment } from '../../api/psychology/assessment'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isH5: false,
|
||
loading: false,
|
||
errorMsg: '',
|
||
rows: [],
|
||
total: 0,
|
||
query: { pageNum: 1, pageSize: 10, status: '' }
|
||
}
|
||
},
|
||
onLoad() {
|
||
try {
|
||
const info = uni.getSystemInfoSync()
|
||
const p = info ? (info.uniPlatform || info.platform) : ''
|
||
this.isH5 = p === 'web' || p === 'h5'
|
||
} catch (e) {
|
||
this.isH5 = false
|
||
}
|
||
this.refresh()
|
||
},
|
||
onPullDownRefresh() {
|
||
this.refresh().finally(() => uni.stopPullDownRefresh())
|
||
},
|
||
onReachBottom() {
|
||
if (this.loading || !this.hasMore) return
|
||
this.query.pageNum += 1
|
||
this.fetchList(true)
|
||
},
|
||
computed: {
|
||
hasMore() {
|
||
return this.rows.length < (this.total || 0)
|
||
}
|
||
},
|
||
methods: {
|
||
setStatus(status) {
|
||
if (this.loading) return
|
||
this.query.status = status
|
||
this.refresh()
|
||
},
|
||
refresh() {
|
||
this.query.pageNum = 1
|
||
this.rows = []
|
||
this.total = 0
|
||
return this.fetchList(false)
|
||
},
|
||
fetchList(append) {
|
||
this.errorMsg = ''
|
||
this.loading = true
|
||
const params = { pageNum: this.query.pageNum, pageSize: this.query.pageSize }
|
||
if (this.query.status) params.status = this.query.status
|
||
|
||
return listAssessment(params)
|
||
.then((res) => {
|
||
this.loading = false
|
||
const data = res && res.data ? res.data : null
|
||
if (!data || data.code !== 200) {
|
||
this.errorMsg = (data && data.msg) ? data.msg : '加载失败'
|
||
return
|
||
}
|
||
const list = data.rows || []
|
||
this.total = data.total || 0
|
||
this.rows = append ? this.rows.concat(list) : list
|
||
})
|
||
.catch((e) => {
|
||
this.loading = false
|
||
this.errorMsg = e && e.message ? e.message : '网络错误'
|
||
})
|
||
},
|
||
openDetail(row) {
|
||
if (!row || !row.assessmentId) return
|
||
const url = `/pages/assessment/detail?assessmentId=${encodeURIComponent(row.assessmentId)}`
|
||
uni.navigateTo({ url })
|
||
},
|
||
statusText(status) {
|
||
const map = { '0': '进行中', '1': '已完成', '2': '已作废', '3': '已暂停' }
|
||
return map[String(status)] || '未知'
|
||
},
|
||
statusBadge(status) {
|
||
const s = String(status)
|
||
if (s === '1') return 'ok'
|
||
if (s === '0') return 'warn'
|
||
if (s === '3') return 'info'
|
||
if (s === '2') return 'danger'
|
||
return 'info'
|
||
},
|
||
formatTime(val) {
|
||
if (!val) return '—'
|
||
try {
|
||
const d = new Date(val)
|
||
if (isNaN(d.getTime())) return '—'
|
||
const y = d.getFullYear()
|
||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||
const day = String(d.getDate()).padStart(2, '0')
|
||
const hh = String(d.getHours()).padStart(2, '0')
|
||
const mm = String(d.getMinutes()).padStart(2, '0')
|
||
return `${y}-${m}-${day} ${hh}:${mm}`
|
||
} catch (e) {
|
||
return '—'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page { min-height: 100vh; padding: 32rpx; box-sizing: border-box; background: #f6f7fb; }
|
||
.page.big {
|
||
padding: 14rpx 14rpx 120rpx;
|
||
background-image:
|
||
radial-gradient(1100rpx 520rpx at 50% 14%, rgba(43, 107, 255, 0.30) 0%, rgba(6, 16, 40, 0.0) 65%),
|
||
linear-gradient(180deg, rgba(5, 11, 24, 0.90) 0%, rgba(8, 20, 45, 0.85) 42%, rgba(6, 16, 40, 0.92) 100%),
|
||
url('/static/bg.png');
|
||
background-size: auto, auto, cover;
|
||
background-position: center, center, center;
|
||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||
}
|
||
.panel { background: #fff; border-radius: 20rpx; padding: 24rpx; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 24rpx; }
|
||
.page.big .panel,
|
||
.page.big .item,
|
||
.page.big .placeholder {
|
||
border: 1px solid rgba(116, 216, 255, 0.22);
|
||
background: linear-gradient(180deg, rgba(10, 18, 38, 0.75) 0%, rgba(5, 10, 22, 0.55) 100%);
|
||
box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.35);
|
||
}
|
||
.title { font-size: 36rpx; font-weight: 700; color: #1f2329; }
|
||
.subtitle { margin-top: 10rpx; font-size: 24rpx; color: #646a73; line-height: 36rpx; }
|
||
.page.big .title { color: rgba(235, 248, 255, 0.92); }
|
||
.page.big .subtitle,
|
||
.page.big .item-desc,
|
||
.page.big .item-foot,
|
||
.page.big .load-more { color: rgba(201, 242, 255, 0.65); }
|
||
.filters { display: flex; flex-wrap: wrap; }
|
||
.chip { padding: 10rpx 18rpx; border-radius: 999rpx; font-size: 24rpx; color: #646a73; background: #f7f8fa; margin-right: 14rpx; margin-bottom: 10rpx; }
|
||
.chip.active { color: #1677ff; background: rgba(22,119,255,0.12); }
|
||
.page.big .chip { color: rgba(201, 242, 255, 0.70); background: rgba(10, 18, 38, 0.65); border: 1px solid rgba(116, 216, 255, 0.20); }
|
||
.page.big .chip.active { color: #0b1226; background: linear-gradient(90deg, rgba(116, 216, 255, 0.95) 0%, rgba(43, 107, 255, 0.90) 100%); border-color: rgba(116, 216, 255, 0.5); }
|
||
.list { margin-top: 8rpx; }
|
||
.item { background: #fff; border-radius: 20rpx; padding: 24rpx; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 18rpx; }
|
||
.row { display: flex; align-items: center; }
|
||
.badge { font-size: 22rpx; padding: 6rpx 14rpx; border-radius: 999rpx; margin-right: 14rpx; color: #fff; background: #8f959e; }
|
||
.badge.ok { background: #52c41a; }
|
||
.badge.warn { background: #faad14; }
|
||
.badge.info { background: #1677ff; }
|
||
.badge.danger { background: #ff4d4f; }
|
||
.item-title { font-size: 28rpx; font-weight: 700; color: #1f2329; }
|
||
.page.big .item-title { color: rgba(235, 248, 255, 0.92); }
|
||
.item-desc { margin-top: 10rpx; font-size: 24rpx; color: #646a73; }
|
||
.item-foot { margin-top: 10rpx; font-size: 22rpx; color: #8f959e; }
|
||
.placeholder { height: 240rpx; border-radius: 20rpx; background: #fff; border: 1px dashed rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; color: #8f959e; font-size: 24rpx; }
|
||
.page.big .placeholder { color: rgba(201, 242, 255, 0.65); border-style: solid; }
|
||
.load-more { text-align: center; color: #8f959e; font-size: 22rpx; padding: 20rpx 0 6rpx; }
|
||
.error { margin-top: 14rpx; font-size: 24rpx; color: #ff4d4f; line-height: 36rpx; }
|
||
</style>
|