health-front/pages_order/report/recommendTest.vue

<template>
  <view>
    <view class="flex header">
      <view class="title">推荐检测</view>
      <button class="btn flex"><text style="margin-right: 4rpx;">查看全部</text><uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon></button>
    </view>
    <view class="content">
      <view v-for="item in list" :key="item.id" style="min-width: 0;">
        <productCard :data="item"></productCard>
      </view>
    </view>
  </view>
</template>

<script>
  import productCard from '@/pages_order/product/productCard.vue'

  export default {
    components: {
      productCard,
    },
    data() {
      return {
        list: [],
      }
    },
		created() {
      this.getData()
		},
    methods: {
			async getData() {
				try {
          const queryParams = {
            pageNo: 1,
            // todo: check
            pageSize: 6,
            type: 1, // 产品类型（0营养剂，1预约，2课程）
            homeRecommend: 'Y',
          }
					let records = (await this.$fetch('getProductList', queryParams))?.records || []

          this.list = records.map(item => {
            delete item.sold
            return item
          })
				} catch (err) {

				}
			},
    },
  }
</script>

<style scoped lang="scss">
.header {
  justify-content: space-between;

  .title {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    line-height: 1.2;
    color: #252545;
  }

  .btn {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    line-height: 1.4;
    color: #A8A8A8;
  }
}

.content {
  margin-top: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 32rpx;
}

</style>