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="body">
      <div class="flex flex-wrap">
        <Product
          v-for="product in products"
          :key="product.id"
          class="mt-20px ml-20px"
          :product="product"
          @refresh="getProductList"
        />
      </div>
      <a-empty 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>
      <a-empty 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="less">
.body {
  padding-left: 4px !important;
  :deep(> div > .title) {
    padding-left: 20px;
  }
}
</style>