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 id="paperList" 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() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
				this.initData()
			}
		},
    methods: {
			async initData() {
				try {
					const result = await this.$fetch('getRecentReport')

					if (result?.length) {
						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,
						}

						this.getData()
						return
					}

					this.queryParams.type = 1 // 未完成

					await this.getData()

					this.summaryData = {
						id: null,
						paperId: this.list[0]?.id,
						score: 0,
						change: 0,
					}
					
					this.$nextTick(() => {
						uni.pageScrollTo({
							// scrollTop: 600,       // 滚动到页面的顶部
							duration: 300,      // 动画时长（单位 ms）
							selector: '#paperList' // 通过选择器指定滚动目标（H5 端支持）
						})
					})

				} 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>