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

<template>
  <div class="solve-page">
    <div class="solve-bos">
      <img class="solve-img" :src="dataInfo.coverImage" alt="" />
      <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)">
              <img class="data-img" :src="item1.productImage" alt="" />
              <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>
          <!-- 游标分页控制 -->
          <pagination
            v-show="item.list.length > 0"
            v-model:page="item.pageNum"
            v-model:limit="item.pageSize"
            :cursor-mode="true"
            :has-more="item.hasMore"
            @pagination="getList(item)"
          />
        </div>
      </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.hasMore = productList.total > item.pageSize * item.pageNum;
          return {
            ...item,
            list: productList.rows // 将商品列表赋值给 item.List
          };
        })
      );
      dataList.value = updatedData; // 更新 dataList
      console.log(dataList.value);
    }
  } 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.hasMore = res.total > row.pageSize * row.pageNum;
    }
  });
};

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%;

  .solve-bos {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
    .solve-img {
      width: 1200px;
      height: 380px;
      border-radius: 10px;
      margin-top: 20px;
    }

    .solve-title {
      width: 1200px;
      padding: 10px 20px;
      background-color: #ffffff;
      border-radius: 10px;
      margin-top: 20px;
      .title1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .title2 {
        background-color: #f2f2f2;
        padding: 17px 20px;
        font-size: 14px;
        color: #666666;
        border-radius: 10px;
      }
    }

    //数据
    .data-bos {
      background-color: #ffffff;
      padding: 20px 20px;
      margin-top: 20px;
      border-radius: 10px;
      .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: 10px;
          padding: 20px 20px 22px 20px;
          cursor: pointer;
          .data-img {
            width: 184px;
            height: 184px;
            border-radius: 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;
          }
        }
      }
    }

    .title {
      font-weight: 600;
      font-size: 20px;
      color: #101828;
      margin-top: 20px;
    }
    .info {
      font-size: 14px;
      color: #364153;
      margin-top: 8px;
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 20px;
    }
    .filter-bos {
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e7eb;
      .filter-list {
        margin-top: 20px;

        .filter-title {
          font-size: 14px;
          color: #101828;
          margin-right: 40px;
        }

        .filter-item {
          font-size: 14px;
          color: #364153;
          margin-right: 30px;
          cursor: pointer;

          &.hig {
            color: #e7000b;
          }
        }
      }
    }
    .nav-bos {
      width: 1200px;
      padding: 20px 0;

      .nav-list {
        height: 32px;
        padding: 0 12px;
        background: #f7f8fa;
        border-radius: 2px 2px 2px 2px;
        font-size: 14px;
        color: #4e5969;
        margin-right: 8px;
        line-height: 32px;
        cursor: pointer;

        &.hig {
          background: #ffe8e8;
          color: #e7000b;
        }

        &:hover {
          color: #e7000b;
        }
      }
    }
  }
}
</style>