yoe-shop-web/src/views/plan/guide.vue

<template>
  <div class="solve">
    <div class="solve-head">
      <div class="head-bos">
        <div class="nav-bos flex-row-start">
          <div
            @click="onNav(item)"
            v-for="(item, index) in navList"
            :key="index"
            class="nav-list"
            :class="item.id == httpObj.tweetCategory ? 'hig' : ''"
          >
            {{ item.categoryName }}
          </div>
        </div>
        <div class="filter-bos">
          <div v-for="(item1, index1) in filterListy" :key="index1" class="filter-list flex-row-start">
            <div class="filter-title">{{ item1.title }}</div>
            <div
              @click="onFilter(item1, item2)"
              v-for="(item2, index2) in item1.list"
              :key="index2"
              class="filter-item"
              :class="item1.id == item2.id ? 'hig' : ''"
            >
              {{ item2.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据 -->
    <div class="data-bos">
      <div v-for="(item, index) in dataList" :key="index" class="data-list" @click="onPath('/plan_info/guide?id=' + item.id)">
        <el-image class="data-img" :src="item.coverImage" fit="cover" />
        <div class="data-box flex-column-between">
          <div>
            <div class="title ellipsis">{{ item.title }}</div>
            <div class="info ellipsis">{{ item.releaseTime }}</div>
          </div>
          <div class="text flex-row-start">
            <div>了解详情</div>
            <el-icon color="#e7000b" size="14" style="margin: 0 0 0 10px">
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="flex-row-center w100%" v-if="dataList.length === 0">
        <el-empty description="暂无数据" />
      </div>
    </div>
    <!-- 游标分页控制 -->
    <div class="table-pagination flex-row-between">
      <div></div>
      <TablePagination v-model:page="httpObj.pageNum" v-model:page-size="httpObj.pageSize" :total="total" @change="getList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import {
  getPurchaseGuideList,
  getPurchaseCategoryList,
  getAdaptSceneList,
  getCustomerIndustry,
  getPriceRangeList,
  getCustomerTag
} from '@/api/plan/index';
import Pagination from '@/components/Pagination/index.vue';
const httpObj = ref<any>({
  tweetCategory: '',
  adaptNo: '',
  adaptIndustry: '',
  price: '',
  lable: '',
  pageSize: 10,
  pageNum: 1
});
const dataList = ref<any>([]);
const hasMore = ref(true); // 是否还有更多数据
const total = ref(0);

const navList = ref<any>([
  { title: '专题分类' },
  { title: '大中型企业采购' },
  { title: '政府&公共采购' },
  { title: '营销福利' },
  { title: '商用工程' },
  { title: '中小型企业采购' }
]);
const filterListy = ref<any>([
  {
    title: '适配场景',
    key: 'adaptNo',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  },
  {
    title: '适配行业',
    key: 'adaptIndustry',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  },
  {
    title: '价格区间',
    key: 'price',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  },
  {
    title: '推荐标签',
    key: 'lable',
    id: '',
    list: [
      {
        id: '',
        title: '全部'
      }
    ]
  }
]);

onMounted(() => {
  // 采购分类列表
  getPurchaseCategoryList({}).then((res) => {
    if (res.code == 200) {
      res.data.unshift({
        id: '',
        categoryName: '全部'
      });
      navList.value = res.data;
      httpObj.value.tweetCategory = '';
    }
  });

  // 适配场景列表
  getAdaptSceneList({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.sceneName;
        filterListy.value[0].list.push(item);
      });
    }
  });

  //适配行业
  getCustomerIndustry({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.industryCategoryName;
        filterListy.value[1].list.push(item);
      });
    }
  });

  // 获取价格区间列表
  getPriceRangeList({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.minPrice + '-' + item.maxPrice;
        item.id = item.minPrice + '-' + item.maxPrice;
        filterListy.value[2].list.push(item);
      });
    }
  });

  // 推荐标签
  getCustomerTag({}).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
        item.title = item.tagName;
        filterListy.value[3].list.push(item);
      });
    }
  });
  getList();
});
const getList = () => {
  getPurchaseGuideList(httpObj.value).then((res) => {
    if (res.code == 200) {
      dataList.value = res.rows;
      total.value = res.total;
    }
  });
};

const onNav = (item: any) => {
  httpObj.value.tweetCategory = item.id;
  getList();
};

const onFilter = (item1: any, item2: any) => {
  item1.id = item2.id;
  httpObj.value[item1.key] = item2.id;
  getList();
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
// 定义响应式容器 Mixin
@mixin responsive-container {
  width: 100%;
  min-width: 1200px;
  max-width: 1500px;
  margin: 0 auto;
  box-sizing: border-box;
}
.solve {
  width: 100%;

  .solve-head {
    width: 100%;
    background: #ffffff;

    .head-bos {
      width: 100%;
      min-width: 1200px;
      max-width: 1500px;
      margin: 0 auto;
      padding-bottom: 20px;
    }
  }

  .nav-bos {
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
    min-width: 1200px;
    max-width: 1500px;

    .nav-list {
      height: 32px;
      padding: 0 12px;
      background: #f7f8fa;
      border-radius: 2px 2px 2px 2px;
      font-size: 14px;
      color: #4e5969;
      margin-right: 8px;
      margin-bottom: 10px; // 换行时的间距
      line-height: 32px;
      cursor: pointer;

      &.hig {
        background: #ffe8e8;
        color: #e7000b;
      }

      &:hover {
        color: #e7000b;
      }
    }
  }

  .filter-bos {
    .filter-list {
      margin-top: 20px;

      .filter-title {
        font-size: 14px;
        color: #101828;
        margin-right: 40px;
      }

      .filter-item {
        font-size: 14px;
        color: #364153;
        margin-right: 30px;
        cursor: pointer;

        &.hig {
          color: #e7000b;
        }

        &:hover {
          color: var(--el-color-primary);
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  // 数据列表
  .data-bos {
    @include responsive-container;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 0 40px 0;
    justify-content: space-between; // 均匀分布

    .data-list {
      // 计算宽度：每行3个。 (100% - 2个间隙 * 20px) / 3
      width: calc((100% - 40px) / 3);
      height: 302px;
      background: #ffffff;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        .title {
          color: #e7000b !important;
        }
      }

      .data-img {
        width: 100%;
        height: 200px;
        object-fit: cover; // 保持图片比例填充
      }

      .data-box {
        flex: 1; // 占据剩余高度
        width: 100%;
        padding: 12px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
          line-height: 1.4;
        }

        .info {
          font-size: 12px;
          color: #364153;
          margin-top: 4px;
          line-height: 1.4;
          // 限制显示两行，超出省略
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .text {
          font-size: 14px;
          color: #e7000b;
          margin-top: auto; // 推到底部
        }
      }
    }
  }
  .table-pagination {
    @include responsive-container;
    padding-bottom: 30px;
  }
}
</style>