health-front/pages/index/report.vue

<template>
	<view class="page__view">
    
		<navbar bgColor="#FFFFFF" >
			<image class="nav-icon" :src="configList.icon_nav_dark" mode="widthFix"></image>
		</navbar>

		<view class="content">
      <report-summary :data="summaryData"></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.type ? 'is-active' : '']"
						@click="onSelectFilter(item.value)"
					>
						{{ item.label }}
					</view>
				</view>
				<view>
					<report-record-card v-for="item in list" :key="item.id" :data="item" :type="queryParams.type"></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 {
				summaryData: {},
				// type 类型（0已完成，1未完成）
        filters: [
          { value: 0, label: '已完成的检测' },
          { value: 1, label: '未完成的检测' },
        ],
        queryParams: {
          pageNo: 1,
          pageSize: 10,
					type: 0,
        },
				mixinsListApi: 'getPaperList',
      }
    },
		onShow() {
			console.log('onShow')
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
				this.fetchRecentReport()
				this.getData()
			}
		},
    methods: {
			async fetchRecentReport() {
				try {
					const result = await this.$fetch('getRecentReport')
					const [currentReport, lastReport] = result
					
					let change = 0

					if (lastReport) {
						change = parseInt(currentReport.score - lastReport.score)
					}
					
					this.summaryData = {
						id: currentReport.id,
						paperId: currentReport.paperId,
						score: parseInt(currentReport.score),
						change,
					}
					console.log('summaryData', this.summaryData)
				} catch (err) {

				}
			},
			onSelectFilter(val) {
        // type 类型【选填】（0已完成，1未完成）
				this.queryParams.type = val
				this.getData()
			},
    },
  }
</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>