shop-app/src/components/product-list/product-list.vue

<template>
  <view class="product-list-container">
    <ProductItem v-for="item in productList" :key="item.id" :product="item"></ProductItem>
  </view>
</template>

<script lang="ts" setup>
  import { ProductSimpleType } from '@/types/product-type'
  import data from './data.json'
  import ProductItem from './product-item.vue'

  defineOptions({
    name: 'ProductList',
  })

  const productList = ref<ProductSimpleType[]>(data)
</script>

<style lang="scss" scoped>
  .product-list-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 32rpx;
  }
</style>