|
|
@@ -1,5 +1,25 @@
|
|
|
<template>
|
|
|
<view class="list-container">
|
|
|
+ <!-- 成员过滤 -->
|
|
|
+ <view class="member-filter">
|
|
|
+ <scroll-view class="filter-scroll" scroll-x="true" :show-scrollbar="false">
|
|
|
+ <view class="filter-chips">
|
|
|
+ <view class="chip" :class="{ 'chip-active': !selectedMemberId }" @click="selectAllMembers">
|
|
|
+ <text class="chip-text">全部</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="chip"
|
|
|
+ v-for="item in members"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{ 'chip-active': selectedMemberId === item._filterId }"
|
|
|
+ @click="selectMember(item)"
|
|
|
+ >
|
|
|
+ <text class="chip-text">{{ item.nickname || '成员' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 加载状态 -->
|
|
|
<view class="loading-wrap" v-if="loading">
|
|
|
<text class="loading-text">加载中...</text>
|
|
|
@@ -9,7 +29,7 @@
|
|
|
<view class="report-list" v-else-if="reports.length > 0">
|
|
|
<view
|
|
|
class="report-card"
|
|
|
- v-for="item in reports.slice(0, 3)"
|
|
|
+ v-for="item in reports"
|
|
|
:key="item.id"
|
|
|
@click="goToDetail(item.id, item.reportType)"
|
|
|
>
|
|
|
@@ -43,27 +63,63 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getReportList, deleteReport } from '../../utils/api.js'
|
|
|
+import { getReportList, deleteReport, getFamilyMemberList } from '../../utils/api.js'
|
|
|
import { parseDate } from '../../utils/format.js'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
reports: [],
|
|
|
+ members: [],
|
|
|
+ selectedMemberId: null,
|
|
|
loading: false,
|
|
|
memberId: null
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
- // 优先用导航参数传入的 memberId;未传时后端回退到家庭报告列表
|
|
|
+ // 导航参数可带初始 memberId(预选对应成员);未传时默认"全部"
|
|
|
this.memberId = options.memberId ? parseInt(options.memberId) : null
|
|
|
+ this.selectedMemberId = this.memberId
|
|
|
+ this.loadMembers()
|
|
|
this.loadData()
|
|
|
},
|
|
|
methods: {
|
|
|
+ loadMembers() {
|
|
|
+ var self = this
|
|
|
+ getFamilyMemberList({}).then(function(res) {
|
|
|
+ if (res.code === 200 && Array.isArray(res.data)) {
|
|
|
+ // _filterId 预计算,供 :class 内联比较使用(小程序 :class 禁止方法调用)
|
|
|
+ var list = []
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ var m = res.data[i]
|
|
|
+ list.push({
|
|
|
+ id: m.id,
|
|
|
+ nickname: m.nickname,
|
|
|
+ avatar: m.avatar,
|
|
|
+ _filterId: m.id || m.userId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ self.members = list
|
|
|
+ }
|
|
|
+ }).catch(function(e) {
|
|
|
+ console.log('获取家庭成员失败', e)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectAllMembers() {
|
|
|
+ if (this.selectedMemberId === null) return
|
|
|
+ this.selectedMemberId = null
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ selectMember(item) {
|
|
|
+ var filterId = item._filterId
|
|
|
+ if (this.selectedMemberId === filterId) return
|
|
|
+ this.selectedMemberId = filterId
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
loadData() {
|
|
|
var self = this
|
|
|
self.loading = true
|
|
|
- getReportList(self.memberId).then(function(res) {
|
|
|
+ getReportList(self.selectedMemberId).then(function(res) {
|
|
|
self.reports = res.data || []
|
|
|
}).catch(function(e) {
|
|
|
console.log('获取报告列表失败', e)
|
|
|
@@ -135,6 +191,39 @@ export default {
|
|
|
background: #F5F7FA;
|
|
|
}
|
|
|
|
|
|
+/* ===== 成员过滤 ===== */
|
|
|
+.member-filter {
|
|
|
+ background: #F5F7FA;
|
|
|
+ padding: 20rpx 30rpx 4rpx;
|
|
|
+}
|
|
|
+.filter-scroll {
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.filter-chips {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
+.chip {
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: #fff;
|
|
|
+ border: 1rpx solid #E2E8F0;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ padding: 10rpx 30rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+}
|
|
|
+.chip-active {
|
|
|
+ background: #5B9BD5;
|
|
|
+ border-color: #5B9BD5;
|
|
|
+}
|
|
|
+.chip-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #64748B;
|
|
|
+}
|
|
|
+.chip-active .chip-text {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
/* ===== 加载状态 ===== */
|
|
|
.loading-wrap {
|
|
|
display: flex;
|