yoe-shop-web/src/views/plan_info/index.vue

<template>
  <div class="solve-page">
    <div class="solve-bos">
      <el-image class="solve-img" :src="dataInfo.coverImage" fit="cover" />
      <div v-for="(item, index) in dataList" :key="index">
        <!-- 标题 -->
        <div class="solve-title">
          <div class="title1">{{ item.title }}</div>
          <div class="title2">{{ item.subtitle }}</div>
        </div>
        <!-- 数据 -->
        <div class="data-bos">
          <div class="data-box">
            <div
              v-for="(item1, index1) in item.list"
              :key="index1"
              class="data-list"
              @click="onPath('/item?id=' + item1.id + '&productNo=' + item1.productNo)"
            >
              <el-image class="data-img" :src="item1.productImage" fit="cover" />
              <div class="data-title ellipsis">{{ item1.itemName }}</div>
              <div class="money">
                <span class="money1">¥{{ item1.memberPrice }}</span>
                <span class="money2">¥{{ item1.marketPrice }}</span>
              </div>
              <div class="data-cat" @click.stop="onCart(item1)">加入购物车</div>
            </div>
          </div>
          <div class="flex-row-center w100%" v-if="item.list.length === 0">
            <el-empty description="暂无数据" />
          </div>
          <!-- 游标分页控制 -->
          <TablePagination v-model:page="item.pageNum" v-model:page-size="item.pageSize" :total="item.total" @change="getList(item)" />
        </div>
      </div>
      <div class="flex-row-center w100%" v-if="dataList.length === 0">
        <el-empty description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { getProcurementProgramDetail, getProcurementProgramGroupList, getProcurementProgramGroupProductList } from '@/api/plan/index';
import { addProductShoppingCart } from '@/api/goods/index';
const id = ref<any>(null);
const dataInfo = ref<any>({});
const dataList = ref<any>({});
const route = useRoute();

onMounted(() => {
  id.value = route.query.id;
  getInfo();
});

const getInfo = async () => {
  try {
    // 获取采购计划详情
    const detailRes = await getProcurementProgramDetail(id.value);
    if (detailRes.code === 200) {
      dataInfo.value = detailRes.data;
    }

    // 获取采购计划分组列表
    const groupRes = await getProcurementProgramGroupList(id.value);
    if (groupRes.code === 200) {
      // 使用 Promise.all 等待所有 onGoods 异步操作完成
      const updatedData = await Promise.all(
        groupRes.data.map(async (item: any) => {
          item.pageSize = 10;
          item.pageNum = 1;
          item.hasMore = false;
          const productList: any = await onGoods(item); // 等待每个分组的商品列表加载完成
          item.total = productList.total;
          return {
            ...item,
            list: productList.rows // 将商品列表赋值给 item.List
          };
        })
      );
      dataList.value = updatedData; // 更新 dataList
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 修改 onGoods 返回 Promise
const onGoods = async (item: any) => {
  try {
    const res = await getProcurementProgramGroupProductList({ groupId: item.id, pageSize: item.pageSize, pageNum: item.pageNum });
    if (res.code === 200) {
      return res; // 返回商品列表
    }
    return []; // 如果请求失败，返回空数组
  } catch (error) {
    console.error('获取商品列表失败:', error);
    return []; // 异常情况下也返回空数组
  }
};

const getList = (row: any) => {
  getProcurementProgramGroupProductList({ groupId: row.id, pageSize: row.pageSize, pageNum: row.pageNum }).then((res) => {
    if (res.code == 200) {
      row.list = res.rows;
      row.total = res.total;
    }
  });
};

import { cartStore } from '@/store/modules/cart';
const cart = cartStore();
//加入购物车
const onCart = (row: any) => {
  addProductShoppingCart({
    productId: row.id,
    productNum: 1
  }).then((res) => {
    if (res.code == 200) {
      cart.onCartCount();
      ElMessage.success('加入购物车成功');
    }
  });
};
</script>

<style lang="scss" scoped>
.solve-page {
  width: 100%;
  background-color: #ffffff;

  .solve-bos {
    width: 100%;
    min-width: 1200px;
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 30px;
    .solve-img {
      width: 100%;
      aspect-ratio: 1200 / 360;
      // height: 380px;
      border-radius: 5px;
    }

    .solve-title {
      width: 100%;
      margin-top: 10px;
      .title1 {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .title2 {
        font-size: 14px;
        color: #666666;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 10px;
      }
    }

    //数据
    .data-bos {
      margin-top: 15px;
      .data-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        .data-list {
          flex: 0 0 calc((100% - 80px) / 5);
          width: 0;
          background: #f4f4f4;
          border-radius: 5px;
          padding: 20px 20px 22px 20px;
          cursor: pointer;
          transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
          display: flex;
          flex-direction: column;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            .data-title {
              color: #e7000b !important;
            }
          }
          .data-img {
            width: 100%;
            aspect-ratio: 1;
            // height: 184px;
            border-radius: 5px;
            margin-bottom: 10px;
          }
          .data-title {
            margin-top: 4px;
            font-size: 14px;
            color: #101828;
            height: 40px;
          }
          .money {
            margin-top: 4px;
            .money1 {
              font-size: 16px;
              color: #e7000b;
            }
            .money2 {
              font-size: 12px;
              color: #99a1af;
              text-decoration: line-through;
              padding-left: 6px;
            }
          }
          .data-cat {
            width: 86px;
            height: 26px;
            background: #e7000b;
            border-radius: 2px;
            font-size: 14px;
            color: #ffffff;
            line-height: 26px;
            text-align: center;
            margin-top: 16px;
          }
        }
      }
    }
  }
}
</style>