health-front/pages/index/report.vue

<template>
	<view class="page__view">
    
		<navbar bgColor="#FFFFFF" >
			<image class="nav-icon" src="@/static/image/icon-nav.png" mode="widthFix"></image>
		</navbar>

		<view class="content">
      <report-summary></report-summary>

			<view class="section">
        <recommend-test></recommend-test>
      </view>

			<view class="section">
				<view class="filter">
					<view class="filter-item" 
						v-for="item in filters" 
						:key="item.value" 
						:class="['filter-item', item.value === queryParams.status ? 'is-active' : '']"
						@click="onSelectFilter(item.value)"
					>
						{{ item.label }}
					</view>
				</view>
				<view>
					<report-record-card v-for="item in list" :key="item.id" :data="item"></report-record-card>
				</view>
      </view>
    </view>

		<tabber select="report" />

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
	import reportSummary from '@/pages_order/report/reportSummary/index.vue'
	import recommendTest from '@/pages_order/report/recommendTest.vue'
	import reportRecordCard from '@/pages_order/report/reportRecordCard.vue'

  export default {
		mixins: [mixinsList],
		components: {
      reportSummary,
      recommendTest,
			reportRecordCard,
      tabber,
    },
    data() {
      return {
        filters: [
          { value: 1, label: '已完成的检测' },
          { value: 0, label: '未完成的检测' },
        ],
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          // todo
          status: 1,
        },
        // todo
				mixinsListApi: '',
      }
    },
    methods: {
			onSelectFilter(val) {
				this.queryParams.status = val
				this.getData()
			},
			// todo: delete
			getData() {
				console.log('getData')
				let arr0 = [
					{ id: '001', createTime: '2025-05-21', status: 0, score: null, change: null, tag: null },
					{ id: '002', createTime: '2025-05-20', status: 0, score: null, change: null, tag: null },
					{ id: '003', createTime: '2025-05-19', status: 0, score: null, change: null, tag: null },
				]

				let arr1 = [
					{ id: '001', createTime: '2025-05-21', status: 1, score: 65, change: 0.2, tag: '正常' },
					{ id: '002', createTime: '2025-05-20', status: 1, score: 65, change: 0.2, tag: '正常' },
					{ id: '003', createTime: '2025-05-19', status: 1, score: 65, change: 0.2, tag: '正常' },
				]

				this.list = this.queryParams.status == 1 ? arr1 : arr0
			},
    },
  }
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;
	}

	.nav-icon {
		width: 200rpx;
		height: auto;
		vertical-align: top;
	}

  .content {
    padding: 0 32rpx 32rpx 32rpx;
  }

  .section {
    margin-top: 48rpx;
  }

	.filter {
		&-item {
			display: inline-block;
			padding: 12rpx 40rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
			line-height: 1.5;
			font-family: PingFang SC;
			font-weight: 400;
			color: #252545;
			background: #E5E4EB;

			& + & {
				margin-left: 32rpx;
			}

			&.is-active {
				font-weight: 600;
				color: #FFFFFF;
				background: #252545;
			}
		}
	}
</style>