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="procure-bos">
      <div v-for="(item, index) in dataList" :key="index" class="procure-list" @click="onPath('/plan_info/guide?id=' + item.id)">
        <img :src="item.coverImage" alt="" />
        <div class="procure1">{{ item.title }}</div>
        <div class="procure2">{{ item.releaseTime }}</div>
      </div>
    </div>
    <!-- 游标分页控制 -->
    <div class="pagination-bos flex-row-between">
      <div></div>
      <pagination
        v-show="dataList.length > 0"
        v-model:page="httpObj.pageNum"
        v-model:limit="httpObj.pageSize"
        v-model:way="way"
        :cursor-mode="true"
        :has-more="hasMore"
        @pagination="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 way = ref<any>(1);

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: '全部'
      }
    ]
  }
]);
const navIndex = ref(0);
const router = useRouter();

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;
      // 判断是否还有更多数据
      hasMore.value = res.total > httpObj.value.pageSize * httpObj.value.pageNum;
    }
  });
};

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>
.solve {
  width: 100%;

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

    .head-bos {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 20px;
    }
  }

  .nav-bos {
    border-bottom: 1px solid #e5e7eb;
    width: 1200px;
    padding-bottom: 20px;

    .nav-list {
      height: 32px;
      padding: 0 12px;
      background: #f7f8fa;
      border-radius: 2px 2px 2px 2px;
      font-size: 14px;
      color: #4e5969;
      margin-right: 8px;
      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;
        }
      }
    }
  }

  // 采购指南
  .procure-bos {
    display: flex;
    width: 1200px;
    margin-top: 12px;
    gap: 15px;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 22px 0 40px 0;
    .procure-list {
      width: 390px;
      height: 268px;
      background: #ffffff;
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 390px;
        height: 200px;
      }
      .procure1 {
        padding: 12px 0 4px 20px;
        font-weight: 600;
        font-size: 14px;
        color: #101828;
      }
      .procure2 {
        padding-left: 20px;
        font-size: 12px;
        color: #364153;
      }
    }
  }

  //分页
  .pagination-bos {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
    :deep(.el-select__wrapper) {
      background: #f4f4f4;
      box-shadow: 0 0 0 1px #e5e6eb inset;
      border-radius: 2px;
    }
    :deep(.el-select__placeholder) {
      color: #1d2129;
    }
    :deep(.el-input__wrapper) {
      background: #f4f4f4;
      box-shadow: 0 0 0 1px #e5e6eb inset;
      border-radius: 2px;
    }
    :deep(.el-input__inner) {
      color: #1d2129;
    }

    :deep(.btn-prev) {
      background: #f4f4f4;
      border: 1px solid #e5e6eb;
      margin-right: 8px;
    }
    :deep(.btn-next) {
      background: #f4f4f4;
      border: 1px solid #e5e6eb;
      margin-left: 8px;
    }
    :deep(.el-pager) {
      gap: 0 8px;
      li {
        background: #f4f4f4;
        border: 1px solid #e5e6eb;
        color: #1d2129;
      }
    }
  }
}
</style>