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

<template>
  <div class="purchaser-detail-warp">
    <common current-name="purchaser">
      <template #main>
        <div class="purchaser-detail-top">
          <div class="top-title">
            <div class="father-title">采购商服务</div>
            <div class="current-title">采购详情</div>
          </div>
          <div class="purchaser-info">
            <el-row :gutter="16">
              <el-col :span="16">
                <div class="purchaser-info-l">
                  <div class="img">
                    <el-image :src="getAssetsFile('images/ecommerce/' + 'test01.png')" fit="cover" />
                  </div>
                  <div class="content">
                    <div class="title-warp">
                      <div class="txt txt-ellipsis clamp2">耿马县勐简乡飘云生态农业耿马县勐简乡飘云生态农业</div>
                      <div class="icon-warp">
                        <div class="iconfont icon-level"></div>
                        <div class="iconfont icon-auth"></div>
                      </div>
                    </div>
                    <div class="is-auth">
                      <span>已实名认证</span>
                    </div>
                    <div class="settled-time">
                      <span>入驻时间：37天</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="purchaser-info-r">
                  <div class="addr">
                    {{ '南省临沧市耿马傣族佤族自治县耿马县勐简乡' }}
                    <div class="iconfont icon-location"></div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="56" class="purchase-info-total">
              <el-col :span="12">
                <div class="info-total-item">
                  <div class="label">采购品种：</div>
                  <div class="val">西红柿</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-total-item">
                  <div class="label">采购数量：</div>
                  <div class="val">5000kg</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-total-item">
                  <div class="label">期望货源地：</div>
                  <div class="val">耿马县·贺派乡</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-total-item">
                  <div class="label">浏览次数：</div>
                  <div class="val">188次</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-total-item">
                  <div class="label">期望货源地：</div>
                  <div class="val">耿马县·贺派乡</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-total-item">
                  <div class="label">更新时间：</div>
                  <div class="val">2025.01.01 12:15:18</div>
                </div>
              </el-col>
            </el-row>
            <el-row class="contant-wrap">
              <el-col :span="24">
                <div class="contant-btn">
                  <div class="iconfont icon-bg-chat"></div>
                  <span>在线联系</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="hot-list-warp">
          <div class="block-title">热门采购</div>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData" style="width: 100%" height="320">
                <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 purchaserPopup from './components/purchaserPopup.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';

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

const handleClick = () => {
  popupQuote.value && popupQuote.value.doShow();
};

onMounted(() => {
  console.info('onMounted');
});
</script>
<style lang="scss" scoped>
.purchaser-detail-warp {
  width: 100%;
  .block-title {
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    padding: 8px 0;
  }
  .purchaser-detail-top {
    width: 100%;
    margin-bottom: 16px;
    background: $color-fff;
    border-radius: 16px;
    overflow: hidden;
    padding: 10px;
    .top-title {
      width: 100%;
      text-align: left;
      .father-title,
      .current-title {
        display: inline-block;
        vertical-align: middle;
        font-weight: 700;
      }
      .father-title {
        font-size: 18px;
      }
      .current-title {
        font-size: 16px;
        color: $color-main;
        position: relative;
        padding: 0 8px;
        margin-left: 8px;
      }
      .current-title::before {
        content: '.';

        position: absolute;
        left: 0;
        top: 30%;
        transform: translateY(-50%);
      }
    }

    .purchaser-info {
      margin: 16px 0;
      .purchaser-info-l {
        display: inline-flex;
        justify-content: flex-start;
        width: 100%;
        text-align: left;
        .img,
        .content {
          display: inline-block;
          vertical-align: top;
        }
        .img {
          width: 160px;
          height: 160px;
          border-radius: 8px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          width: calc(100% - 160px);
          padding-left: 16px;
          .title-warp {
            width: 100%;
            .txt,
            .icon-warp {
              vertical-align: top;
            }
            .txt {
              width: calc(100% - 80px);
              font-size: 24px;
              font-weight: 500;
            }
            .icon-warp {
              display: inline-block;

              width: 80px;
              .iconfont {
                display: inline-block;
                margin-top: 6px;
                &.icon-level {
                  font-size: 26px;
                  color: $color-main;
                }
                &.icon-auth {
                  font-size: 28px;
                  color: $color-warning;
                }
              }
            }
          }
          .is-auth {
            width: 100%;
            margin: 16px 0;
            span {
              background: $color-main-table-header;
              border: 1px solid $color-main-border;
              border-radius: 8px;
              padding: 0 16px;
              color: $color-main;
              line-height: 32px;
              height: 32px;
              display: inline-block;
              font-size: 16px;
              font-weight: 400;
            }
          }
          .settled-time {
            width: 100%;
            span {
              font-size: 20px;
              color: $color-999;
              font-weight: 500;
            }
          }
        }
      }
      .purchaser-info-r {
        .addr {
          text-align: left;
          width: 100%;
          font-size: 18px;
          font-weight: 500;
          color: $color-666;
          .iconfont {
            display: inline-block;
            font-size: 26px;
            vertical-align: middle;
          }
        }
      }

      .purchase-info-total {
        .info-total-item {
          display: inline-flex;
          width: 100%;
          justify-content: space-between;
          margin: 8px 0;
          .label,
          .val {
            display: -webkit-inline-box;
            vertical-align: top;
          }
          .label {
            color: $color-999;
            font-size: 18px;
            max-width: 180px;
          }
          .val {
            font-size: 20px;
            max-width: calc(100% - 180px);
            color: $color-666;
            text-align: right;
          }
        }
      }

      .contant-wrap {
        width: 100%;
        text-align: center;
        margin-top: 16px;
        .contant-btn {
          background: $color-main;
          padding: 0 16px;
          line-height: 48px;
          height: 48px;
          border-radius: 16px;
          color: $color-fff;
          display: inline-block;
          .iconfont,
          span {
            display: inline-block;
            vertical-align: middle;
          }
          .iconfont {
            font-size: 26px;
          }
          span {
            padding-left: 8px;
            font-size: 20px;
          }
        }
      }
    }
  }

  .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>