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

<template>
  <div class="purchaser-index-warp">
    <common current-name="purchaser">
      <template #main>
        <el-row class="purchaser-top">
          <el-col :span="12">
            <div class="purchaser-top-title">行情动态</div>
            <div class="purchaser-charts"></div>
          </el-col>
          <el-col :span="12">
            <div class="purchaser-top-title">近7天热门产品</div>
            <div class="purchaser-charts"></div>
          </el-col>
        </el-row>
        <filtertop :list="treeList"></filtertop>
      </template>
    </common>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import filtertop from './components/filtertop.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';

let treeList = reactive([
  {
    id: '01',
    title: '农产品',
    children: [
      {
        pId: '01',
        id: '0101',
        title: '植物性农产品',
        children: [
          { pId: '0101', id: '010101', title: '谷物' },
          { pId: '0101', id: '010102', title: '蔬菜' },
          { pId: '0101', id: '010103', title: '水果' },
          { pId: '0101', id: '010104', title: '坚果与油料作物' },
          { pId: '0101', id: '010105', title: '糖料作物' },
          { pId: '0101', id: '010106', title: '纤维作物' },
          { pId: '0101', id: '010107', title: '茶叶' },
          { pId: '0101', id: '010108', title: '咖啡' },
          { pId: '0101', id: '010109', title: '香料' },
        ],
      },
      {
        pId: '01',
        id: '0102',
        title: '动物性农产品',
        children: [
          { pId: '0102', id: '010201', title: '肉类' },
          { pId: '0102', id: '010202', title: '奶制品' },
          { pId: '0102', id: '010203', title: '蛋类' },
          { pId: '0102', id: '010204', title: '蜂蜜' },
          { pId: '0102', id: '010205', title: '水产品' },
        ],
      },
      {
        pId: '01',
        id: '0103',
        title: '特殊农产品',
        children: [
          { pId: '0103', id: '010301', title: '花卉与苗木' },
          { pId: '0103', id: '010302', title: '药材' },
          { pId: '0103', id: '010303', title: '菌类' },
        ],
      },
      {
        pId: '01',
        id: '0104',
        title: '其他',
        children: [{ pId: '0104', id: '010401', title: '饲料' }],
      },
    ],
  },
  {
    id: '02',
    title: '种子种苗',
    children: [
      {
        pId: '02',
        id: '0101',
        title: '花卉种子种苗',
        children: [
          { pId: '0101', id: '010101', title: '草本花卉' },
          { pId: '0101', id: '010102', title: '木本花卉' },
          { pId: '0101', id: '010103', title: '野生花卉' },
        ],
      },
      {
        pId: '02',
        id: '0102',
        title: '蔬菜种子种苗',
        children: [
          { pId: '0102', id: '010201', title: '叶菜类' },
          { pId: '0102', id: '010202', title: '根茎类' },
          { pId: '0102', id: '010203', title: '果实类' },
          { pId: '0102', id: '010204', title: '豆类' },
          { pId: '0102', id: '010205', title: '瓜类' },
        ],
      },
      {
        pId: '02',
        id: '0103',
        title: '果树种苗',
        children: [
          { pId: '0103', id: '010301', title: '柑橘类' },
          { pId: '0103', id: '010302', title: '仁果类' },
          { pId: '0103', id: '010303', title: '核果类' },
          { pId: '0103', id: '010304', title: '浆果类' },
        ],
      },
      {
        pId: '02',
        id: '0104',
        title: '药材种子与种苗',
        children: [
          { pId: '0104', id: '010401', title: '寒地龙药' },
          { pId: '0104', id: '010402', title: '常见中药材' },
        ],
      },
      {
        pId: '02',
        id: '0105',
        title: '其他作物',
        children: [
          { pId: '0105', id: '010501', title: '牧草' },
          { pId: '0105', id: '010502', title: '经济作物' },
          { pId: '0105', id: '010503', title: '观赏树木' },
        ],
      },
    ],
  },
]);
</script>
<style lang="scss" scoped>
.purchaser-index-warp {
  width: 100%;
  .purchaser-top {
    width: 100%;
    margin-bottom: 16px;
    background: $color-fff;
    border-radius: 16px;
    overflow: hidden;
    padding: 10px;
    .purchaser-top-title {
      width: 100%;
      text-align: left;
      font-size: 18px;
    }
    .purchaser-charts {
      width: 100%;
    }
  }
}
</style>