daimp-front/sub-operation-service/src/views/ecommerce/supplier.vue

<template>
  <div>
    <common current-name="supplier">
      <template #main>
        <banner name="supplier" :imglist="bannerList"></banner>
        <filtertop :list="treeList" @select="selected"></filtertop>
        <div class="goods-list-warp">
          <div class="goods-list">
            <template v-for="(n, index) in list" :key="n.id">
              <div class="goods-item">
                <goodsItem :data="n"></goodsItem>
              </div>
            </template>
          </div>
          <el-pagination
            :current-page="pagination.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </template>
    </common>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import banner from './components/banner.vue';
import filtertop from './components/filtertop.vue';
import goodsItem from './components/goodsItem.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { agriculturalList, transaction } from '@/apis/supplier.js';
let treeList = reactive([
  // {
  //   id: '2',
  //   name: '投入品',
  //   children: [
  //     {
  //       id: '201',
  //       parentId: '2',
  //       name: '化肥',
  //       children: [
  //         { parentId: '201', id: '20101', name: '有机肥' },
  //         { parentId: '201', id: '20102', name: '水溶肥' },
  //         { parentId: '201', id: '20103', name: '天然肥料' },
  //       ],
  //     },
  //     {
  //       id: '202',
  //       name: '农药',
  //       parentId: '2',
  //       children: [
  //         { parentId: '202', id: '20201', name: '杀虫剂' },
  //         { parentId: '202', id: '20202', name: '杀菌剂' },
  //         { parentId: '202', id: '20203', name: '除草剂' },
  //         { parentId: '202', id: '20204', name: '杀螨剂' },
  //       ],
  //     },
  //     {
  //       id: '203',
  //       name: '种子/种苗',
  //       parentId: '2',
  //       children: [
  //         { parentId: '203', id: '20301', name: '蔬菜种子' },
  //         { parentId: '203', id: '20302', name: '中草药种子' },
  //         { parentId: '203', id: '20303', name: '水果种苗' },
  //       ],
  //     },
  //   ],
  // },
  // {
  //   id: '1',
  //   name: '产出品',
  //   children: [
  //     {
  //       id: '101',
  //       parentId: '1',
  //       name: '水果',
  //       children: [
  //         {
  //           parentId: '101',
  //           id: '10101',
  //           name: '甘蔗',
  //           children: [],
  //         },
  //       ],
  //     },
  //     {
  //       id: '102',
  //       name: '中药材',
  //       parentId: '1',
  //       children: [
  //         {
  //           parentId: '102',
  //           id: '10201',
  //           name: '石斛',
  //           children: [],
  //         },
  //       ],
  //     },
  //     {
  //       id: '103',
  //       name: '蔬菜',
  //       parentId: '1',
  //       children: [
  //         {
  //           parentId: '103',
  //           id: '10301',
  //           name: '豆菜类',
  //           children: [],
  //         },
  //         {
  //           parentId: '103',
  //           id: '10302',
  //           name: '根茎菜类',
  //           children: [],
  //         },
  //         {
  //           parentId: '103',
  //           id: '10303',
  //           name: '叶菜类',
  //           children: [],
  //         },
  //         {
  //           parentId: '103',
  //           id: '10304',
  //           name: '茄果菜类',
  //           children: [],
  //         },
  //         {
  //           parentId: '103',
  //           id: '10305',
  //           name: '葱姜蒜类',
  //           children: [],
  //         },
  //         {
  //           parentId: '103',
  //           id: '10306',
  //           name: '食用菌',
  //           children: [],
  //         },
  //       ],
  //     },
  //   ],
  // },
]);

let list = reactive([
  // {
  //   goodId: '10101',
  //   parentId: '101',
  //   goodUrl: 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/6216cf638fc1407e8ae1b4a65ef594ab.jpg',
  //   title:
  //     '甘蔗富含天然蔗糖,糖分含量达12%-22%，甜度自然纯净，无人工添加剂，是追求健康甜味人群的理想选择。\\r\\n相比加工糖，甘蔗中的糖分更易被人体吸收，且富含矿物质（如钙、铁、磷）和维生素（如维生素B族,营养价值更高',
  //   goodPrice: '25',
  // },
  // {
  //   goodId: '10201',
  //   parentId: '102',
  //   goodUrl: 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/54bf4b3511be4c99bc2cf5b7c6c4a7da.jpg',
  //   title: '正品耿马铁皮石斛 500g产地直发 批发零售 支持代发',
  //   goodPrice: '25',
  // },
  // {
  //   goodId: '1020101',
  //   parentId: '103',
  //   goodUrl: 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/815bc561d19f46a08ef357bb3df4c0d8.jpeg',
  //   title: '【推荐】高端欧冠改良金园大果密本南瓜种子，丰产肉厚甜面招代理',
  //   goodPrice: '16',
  // },
  // {
  //   goodId: '1020102',
  //   parentId: '103',
  //   goodUrl: 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/8819aebd5ae74c88bf7426bbf089acbb.jpeg',
  //   title: '豇豆种子长豆角种子耐热豆角种子翠绿条肉厚无鼠尾不鼓籽南北方',
  //   goodPrice: '25',
  // },
]);
let params = reactive({
  current: 1,
  size: 10,
  parentId: null,
  childrenId: null,
});
let pagination = reactive({
  current: 1,
  size: 10,
  total: 4,
});
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
const getList = () => {
  params.current = pagination.current;
  params.size = pagination.size;
  agriculturalList(params).then((res) => {
    if (res.code === 200) {
      list.splice(0, list.length, ...res.data.records);
      pagination.total = res.data.total;
    }
  });
};

onMounted(() => {
  getList();
  getTree();
});

const handleSizeChange = (val) => {
  pagination.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  pagination.current = val;
  getList();
};

const sortTreeByDescendingId = (nodes) => {
  if (!nodes || !nodes.length) return [];

  // 对当前层级节点排序（BigInt 安全比较）
  const sortedNodes = [...nodes].sort((a, b) => {
    const idA = BigInt(a.id);
    const idB = BigInt(b.id);
    return idA > idB ? -1 : idA < idB ? 1 : 0; // 降序
  });

  // 递归排序每个节点的 children
  sortedNodes.forEach((node) => {
    if (node.children && node.children.length) {
      node.children = sortTreeByDescendingId(node.children);
    }
  });

  return sortedNodes;
};

const getTree = () => {
  transaction().then((res) => {
    if (res.code === 200) {
      // 2. 使用排序函数
      const sortedData = sortTreeByDescendingId(res.data);
      treeList.splice(0, treeList.length, ...sortedData);
      // let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
      // treeList.splice(0, treeList.length, ...a);
      // console.log('treeList', treeList);
    }
  });
};

const selected = (data) => {
  console.log(data);
  params.categoryId = data.id;
  // 获取所有值并转为数组
  // const val = Object.values(data);
  // if (val.length === 1) {
  //   params.parentId = Number(val[0].id);
  // } else {
  //   if (val[0].id === '') {
  //     params.childrenId = '';
  //     params.parentId = null;
  //   } else {
  //     params.childrenId = Number(val[val.length - 1].id);
  //     params.parentId = Number(val[val.length - 1].parentId);
  //   }
  // }
  getList();
};
</script>
<style lang="scss" scoped>
.goods-list-warp {
  margin-top: 16px;
  width: 100%;
  .goods-list {
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    .goods-item {
      display: inline-block;
      overflow: hidden;
      margin-bottom: 16px;
      width: calc((100% - 50px) / 5);
      border-radius: 16px;
      background: $color-fff;
    }
  }

  /* 添加伪元素占位 */
  .goods-list::after {
    content: '';
    flex: auto;
  }
}
</style>