health-front/pages_order/product/tabNutrient/nutrientRecommendSwiper.vue

<template>
  <view>
    <swiper 
      class="swiper" 
      :current="current"
      :autoplay="false"
      :display-multiple-items="1.8"
      @change="onChange"
    >
      <swiper-item v-for="item in list" :key="item.id" style="display: inline-block;">
        <view class="swiper-item">
          <productCard 
            :data="item"
            cardStyle="width: 100%; height: 228px;"
            imgStyle="width: 100%; height: 130px;"
          ></productCard>
        </view>
      </swiper-item>
      <swiper-item style="display: inline-block;">
        <view class="swiper-item"></view>
      </swiper-item>
    </swiper>

    <indicator :current="current" :length="list.length" @click="current = $event"></indicator>
  </view>
</template>

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

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

				}
			},
      onChange(e) {
        this.current = e.detail.current
      }
		},
  }
</script>

<style scoped lang="scss">

.swiper {
  width: 100vw;
  height: 230px;
  margin-bottom: 24rpx;

  &-item {
    height: 460rpx;
    padding-left: 32rpx;
  }
}

</style>