health-front/pages_order/report/compare/select.vue

<template>
  <view class="page__view">
		<navbar title="选择对比的报告" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />

    <view class="main">
      <reportRecordCard 
        v-for="(item, index) in list" 
        :key="item.id" 
        :data="item"
       @select="onSelect(index, $event)" 
      ></reportRecordCard>
    </view>

    <view class="flex bottom">
      <button class="btn" @click="onCompare">开始对比</button>
    </view>
  </view>
</template>

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

  import reportRecordCard from './reportRecordCard.vue';

  export default {
		mixins: [mixinsList],
    components: {
      reportRecordCard,
    },
    data() {
      return {
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          // todo
          status: 1,
        },
        // todo
				mixinsListApi: '',
      }
    },
    methods: {
			// todo: delete
			getData() {
				console.log('getData')

				this.list = [
					{ 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: '正常' },
					{ id: '004', createTime: '2025-05-18', status: 1, score: 65, change: 0.2, tag: '正常' },
					{ id: '005', createTime: '2025-05-17', status: 1, score: 65, change: 0.2, tag: '正常' },
					{ id: '006', createTime: '2025-05-16', status: 1, score: 65, change: 0.2, tag: '正常' },
					{ id: '007', createTime: '2025-05-15', status: 1, score: 65, change: 0.2, tag: '正常' },
					{ id: '008', createTime: '2025-05-14', status: 1, score: 65, change: 0.2, tag: '正常' },
					{ id: '009', createTime: '2025-05-13', status: 1, score: 65, change: 0.2, tag: '正常' },
				]
			},
      onSelect(index, selected) {
        console.log('onSelect', index, selected)

        this.list[index].selected = selected

        // todo limit two
      },
      onCompare() {
        // todo
        let selectedIds = ['001', '002']
        this.$utils.navigateTo(`/pages_order/report/compare/result?ids=${JSON.stringify(selectedIds)}`)
      },
    },
  }
</script>

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

    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

  .main {
    padding: calc(var(--status-bar-height) + 128rpx) 32rpx 272rpx 32rpx;
  }

  .bottom {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 24rpx 40rpx 92rpx 40rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    column-gap: 16rpx;

    .btn {
      width: 100%;
      padding: 16rpx 0;
      font-family: PingFang SC;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 1;
      color: #FFFFFF;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
      border-radius: 41rpx;
    }
  }

</style>