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">
              <marketCharts></marketCharts>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="purchaser-top-title">近7天热门产品</div>
            <div class="purchaser-charts">
              <hotGoodsWordClould></hotGoodsWordClould>
            </div>
          </el-col>
        </el-row>
        <filtertop :list="treeList"></filtertop>

        <div class="hot-list-warp">
          <el-row :gutter="10">
            <el-col :span="8" align="left">
              <el-cascader :options="typeTree" :props="treeOption" clearable :placeholder="'请选择地区'" />
            </el-col>
            <el-col :span="16" align="left">
              <el-radio-group v-model="filter.time">
                <el-radio v-for="(n, index) in dateList" :key="index" :value="n.value">{{ n.label }}</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData" style="width: 100%" height="320" @row-click="rowClick">
                <el-table-column prop="title" label="采购品种" />
                <el-table-column prop="region" label="收货地" />
                <el-table-column prop="buyer" label="采购方" />
                <el-table-column prop="buyNum" label="采购量(kg)" />
                <el-table-column prop="buyer" label="采购时间" />
                <el-table-column fixed="right" label="操作">
                  <template #default>
                    <el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </template>
    </common>

    <purchaserPopup ref="popupQuote" :list="treeList"></purchaserPopup>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import filtertop from './components/filtertop.vue';
import hotGoodsWordClould from './components/hotGoodsWordClould.vue';
import marketCharts from './components/marketCharts.vue';
import purchaserPopup from './components/purchaserPopup.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { getRegion } from '@/apis/index';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

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: '观赏树木' },
        ],
      },
    ],
  },
]);

let popupQuote = ref(null);

const typeTree = ref([]);
const treeOption = ref({
  children: 'areaChildVOS',
  label: 'areaName',
});

const getTree = () => {
  console.info('getTree');
  getRegion().then((res) => {
    if (res.code === 200) {
      const { code, data } = res;
      typeTree.value = data;
      console.info('区域信息', typeTree.value);
    }
  });
};

const handleClick = () => {
  popupQuote.value && popupQuote.value.doShow();
};
const dateList = reactive([
  { label: '近7天发布', value: 7 },
  { label: '近30天发布', value: 30 },
]);
let filter = ref({
  region: '',
  time: 7,
});

let tableData = reactive([
  { id: '01', title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
  { id: '02', title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
  { id: '03', title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
  { id: '04', title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
  { id: '05', title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
  { id: '06', title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
  { id: '07', title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
  { id: '08', title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
]);

const rowClick = (data) => {
  router.push('/sub-operation-service/ecommerce-purchaserDetail?id=' + data.id);
};

onMounted(() => {
  console.info('onMounted');
  getTree();
});
</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%;
    }
  }

  .hot-list-warp {
    background: $color-fff;
    padding: 16px;
    border-radius: 16px;
    margin: 16px 0;

    ::v-deep() {
      thead {
        border-radius: 16px;
        overflow: hidden;
      }
      thead th {
        background: $color-main-table-header;
        color: $color-999 !important;
        border: none !important;
        padding: 16px 0;
      }
      thead th:first-child {
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
      }
      thead th:last-child {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
      }
      table {
        margin-top: 16px !important;
      }
      tbody td {
        border: none !important;
      }
      .el-table__inner-wrapper::before {
        display: none !important;
      }
    }
  }
}
</style>