lingji-work-fe/src/views/components/workplace/index.vue

<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-23 21:11:42
-->
<template>
  <div class="m-auto mt-24px max-w-1000px">
    <Container title="推荐产品" class="container-body">
      <div class="grid grid-cols-3 gap-20px">
        <Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" />
      </div>
      <NoData v-if="products.length === 0" />
    </Container>
    <Container title="成功案例" class="body mt-24px">
      <div class="flex flex-wrap">
        <Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
      </div>
      <NoData v-if="cases.length === 0" />
    </Container>
  </div>
</template>
<script setup lang="ts">
import Container from '@/components/container.vue';
import Product from '@/views/components/workplace/modules/product.vue';
import Case from '@/views/components/workplace/modules/case.vue';
import { fetchProductList, fetchSuccessCaseList } from '@/api/all/index';
import { ref, onMounted } from 'vue';

const products = ref([]);
const cases = ref([]);
onMounted(() => {
  getProductList();
  getSuccessCaseList();
});
const getProductList = async () => {
  const { code, data } = await fetchProductList();
  if (code === 200) {
    products.value = data;
  }
};

const getSuccessCaseList = async () => {
  const { code, data } = await fetchSuccessCaseList();
  if (code === 200) {
    cases.value = data;
  }
};
</script>

<style scoped lang="scss">
.container-body {
  padding-left: 24px !important;
  :deep(> div > .title) {
    margin-bottom: 16px;
  }
}
</style>