kboss/f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue

<script>
import Vue from 'vue'
import { reqPublishProductSearchFirstPage, reqEnterpriseAuditInfoSearch, reqHomepageProductCategory, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch'
import { mapGetters, mapState } from "vuex";
export default Vue.extend({
  name: "mainPage",
  components: {
    sendProduct: () => import('./sendProduct/index.vue'),
    productCard: () => import('./productCard/index.vue'),
    search: () => import('../search/index.vue'),
    menuAside: () => import('./menuAside/index.vue')
  },
  created() {
    this.getHomepageProductCategory()

  },
  data() {
    return {
      boxLoading: false,
      selectedCategory: "",
      showTip: false,
      total: 0,
      publish_type: null,
      sendProductVisible: false,
      currentHotMenu: "",
      product: [],
      hotProductList: [
        // {
        //   id: 1,
        //   name: 'NVIDIA-4090',
        //   image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
        //   price: 6000,
        //   cpu: 'AMD EPYC 7542 32 C * 2',
        //   memory: '64G DDR4-3200 * 8',
        //   gpu: 'NVIDIA-4090-24GB * 8',
        //   sys_disk: '960G SATA SSD * 2 (Raid)',
        //   data_disk: '3.84T U.2 NVMe SSD * 1',
        //   net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
        // },
        // {
        //   id: 2,
        //   name: 'NVIDIA-4090',
        //   image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
        //   price: 6000,
        //   cpu: 'AMD EPYC 7542 32 C * 2',
        //   memory: '64G DDR4-3200 * 8',
        //   gpu: 'NVIDIA-4090-24GB * 8',
        //   sys_disk: '960G SATA SSD * 2 (Raid)',
        //   data_disk: '3.84T U.2 NVMe SSD * 1',
        //   net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
        // }
      ],
      hotMenuList: [
        {
          id: "hot",
          name: "热门推荐",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png")
        },
        {
          id: "hlzx",
          name: "互联网专线",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        },
        {
          id: "SDWAN",
          name: "SDWAN",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        },
        {
          id: "DCI",
          name: "DCI",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        },
        {
          id: "AI",
          name: "AI专线",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        }
      ],
      searchKeyword: '',
      hotSearchKeywords: [
        '昆仑芯-P800',
        '天垓-150',
        '4090',
        '云服务器-GPU',
        '人脸识别',
        'SDWAN',
        '互联网专线',
        'DCI',
        'AI专线',
        '对象存储',
        '智慧医疗',
        '智慧客服',
        'A800',
        'A100',
        '910B'
      ],
      topNavItems: [
        { name: '早十好价', icon: '10', color: 'red' },
        { name: '司法拍卖', icon: '⚖️', color: 'red' },
        { name: '企业购', icon: '🏢', color: 'blue' },
        { name: '京东新品', icon: '🎁', color: 'blue' },
        { name: '男装馆', icon: '👔', color: 'blue' },
        { name: '黑色星期五', icon: '🍃', color: 'green' },
        { name: '服饰美妆', icon: '👗', color: 'purple' },
        { name: '清洁馆', icon: '💧', color: 'blue' },
        { name: '五金城', icon: '⚙️', color: 'red' },
        { name: '全部频道', icon: '📱', color: 'rainbow' }
      ],
      categories: [
        { name: '云', icon: require('./img/cloud.png'), product_list: ['百度云'] },
        { name: '国产算力', icon: require('./img/computing.png'), product_list: ['昇腾910B', 'P800', '其他'] },
        { name: 'NVIDIA', icon: require('./img/nvidia.png'), product_list: ['3090', '4090', '5080', '5090'] },
        { name: '网', icon: require('./img/net.png'), product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
        { name: '一体机', icon: require('./img/computer.png'), product_list: ['昆仑芯', '天数智芯'] },
        { name: '硬件', icon: require('./img/ying.png'), product_list: ['机器人', 'AR眼镜'] },
        { name: 'AI应用', icon: require('./img/aiApp.png'), product_list: ['数字人', '智慧医疗', '智能客服'] },
      ],
      current_page: 1,
      page_size: 8,

    }
  },
  computed: {

    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState({
      isShowPanel: (state) => state.product.showHomeNav,
      navIndex: (state) => state.product.navIndex,
      gridObj: state => state.operationAnalysis.gridObj,
      mybalance: state => state.user.mybalance,
      logoutUrl: state => state.login.logoutUrl,
      loginStateVuex: state => state.login.loginState,
      logoInfoNew: state => state.product.logoInfoNew,
    }),
    loginState() {
      const userId = sessionStorage.getItem('userId');
      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
    },
  },
  methods: {
    getHomepageProductCategory() {
      reqHomepageProductCategory({
        url_link: window.location.href,
        publish_type: "1"
      }).then(res => {
        if (res.status) {
          this.categories = res.data
          this.product = res.data
          this.currentHotMenu = res.data[0].id
          this.selectedCategory = res.data[0].id
          this.initData()
        }
      })
    },
    goInfo() {
      this.showTip = false
      this.$router.push('/customer/approve')

    },
    handleCurrentChange(val) {
      this.current_page = val
      this.initData()
      // this.init_product_list()
    },
    sendInfo(type) {
      if (this.loginState) {
        reqEnterpriseAuditInfoSearch({
          url_link: window.location.href,
        }).then(res => {
          const dataList = res && res.data && res.data.data
          const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
          const roles = sessionStorage.getItem('jueseNew')
          const isCustomer = roles ? roles.includes('客户') : true

          // 安全检查：确保 data[0] 存在
          if (hasAuditInfo && dataList[0]) {
            const auditStatus = dataList[0].audit_status

            if (auditStatus === 'pending') {
              this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
            } else if (auditStatus === 'rejected') {
              this.$message.warning('您的审核状态为驳回，请重新提交~')
            } else {
              // 审核通过或其他状态，允许发布
              this.publish_type = type
              this.sendProductVisible = true
            }
          } else if (!isCustomer) {
            // 非客户角色，允许发布
            this.publish_type = type
            this.sendProductVisible = true
          } else {
            // 没有审核信息且是客户角色，显示提示
            this.showTip = true
          }
        })


      } else {
        this.$router.push('/login')
      }
    },
    initData() {
      this.boxLoading = true
      let ploay = {
        product_category: this.selectedCategory,
        to_page: "first_page",
        url_link: window.location.href,
        page_size: this.page_size,
        current_page: this.current_page,
        publish_type: "1"
      }
      reqGetSupplyAndDemandSquareList(ploay).then(res => {
        this.boxLoading = false
        if (res.status) {
          if (res.data.length === 0) {
            this.hotProductList = []
            this.total = 0
          } else {
            this.hotProductList = res.data[0].product_list
            this.total = res.data[0].total_count
          }

        }
      })

    },
    init_product_list() {
      reqPublishProductSearchFirstPage({ publish_type: "1", url_link: window.location.href, to_page: 'first_page', page_size: this.page_size, current_page: this.current_page, product_type: this.currentHotMenu }).then(res => {
        if (res.status) {
          if (res.data.length > 0) {
            this.currentHotMenu = res.data[0].id
            this.hotProductList = res.data[0].product_list
            this.product = res.data
            this.total = res.data[0].total_count
          }

        }
      })
    },
    sendProductSuccess() {
      this.sendProductVisible = false; // 关闭弹窗
      this.init_product_list()
    },
    clickNetMenu(menu) {
      this.current_page = 1
      this.currentHotMenu = menu.id;
      this.selectedCategory = menu.id
      this.initData()
      // this.hotProductList = menu.product_list || [];
    },
    handleSearch() {
      console.log('搜索:1', this.searchKeyword)

    },
    goFavorite() {
      if (this.loginState) {
        this.$router.push('/ncmatchHome/favoriteBox')
      } else {
        this.$router.push('/login')
      }
    },
    goHistory() {
      if (this.loginState) {
        this.$router.push('/ncmatchHome/historyBox')
      } else {
        this.$router.push('/login')
      }
    }
  }
})
</script>

<template>
  <div class="jd-homepage">
    <!-- 顶部Header -->
    <!-- <header class="header">
      <div class="header-content">


      </div>
    </header> -->
    <!-- 主内容区域 -->
    <main class="main-content">
      <div class="content-wrapper">

        <menuAside></menuAside>
        <!-- 中间主内容 -->
        <section class="main-section">
          <!-- 顶部促销横幅 -->
          <div id="banner" class="banner">
            <div class="centerBox">
              <span style="margin-top: 100px" class="title">
                <span class="leftText">
                  NCMatch &nbsp;&nbsp;
                </span>
                <span class="rightText" style="margin-left: 10px;"> 算力供需对接平台</span>
              </span>
              <!--        <span class="description">支持模型训练、推理和数据处理，灵活配置，助您高效释放AI潜能</span>-->
              <ul style="margin-top: 50px" class="tagUl">
                <li>海量资源 <span style="display: inline-block;margin: 0 15px;"></span> 物美价廉</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 右侧用户信息栏 -->
        <aside class="user-sidebar" style="background-color: #f8fbfe;padding: 10px;padding-top: 20px;">
          <span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')"> 算力供需广场</span>
          <span class="publish-goods" @click="sendInfo('2')">发布需求</span>
          <span class="publish-goods" @click="sendInfo('1')">发布商品</span>

          <ul class="userBtn">
            <li @click="goHistory"><img style="width: 26px;height: 26px;" src="./img/eye.png" alt="">浏览记录</li>
            <li @click="goFavorite"><img style="width: 26px;height: 26px;" src="./img/collect.png" alt="">我的收藏</li>
            <!-- <li><img src="./img/like.png" alt="">关注需求</li> -->
          </ul>
        </aside>
      </div>
    </main>
    <div class="productList">
      <ul class="myTab">
        <li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
          :key="menu.name">
          <!-- <img :src="currentHotMenu === menu.id ? menu.activeIcon : menu.icon" alt="" /> -->
          <span class="tab-text">{{ menu.product_category }}</span>
        </li>
      </ul>


      <productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
      <el-pagination style="background-color: white;" @current-change="handleCurrentChange" :page-size="page_size"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
      <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
        :visible.sync="sendProductVisible">
        <sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
        </sendProduct>
      </el-dialog>
      <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
        <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
        <span slot="footer" class="dialog-footer">

          <span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
              @click="goInfo">信息完善</el-button></span>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.userBtn {
  margin-top: 40px !important;
  display: flex;
  justify-content: space-around;
  align-items: center;

  li {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    * {
      img {
        width: 20px !important;
        height: 20px !important;
      }
    }

    &:hover {
      transition: all 0.3s;
      cursor: pointer;
      color: #2c96fc;

      svg {

        path {
          fill: #2c96fc !important;
        }
      }
    }

    img {
      width: 16px;
      height: 16px;
    }
  }
}



.productList {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  // padding-bottom: 45px;
}

.publish-goods {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 10px;
  background: url('./img//btnBg.png');
  background-size: cover;
  background-position: top;
  color: #222F60 !important;
  font-size: 18px;
  font-weight: 900;

  &:hover {
    cursor: pointer;
    // background: #2EBDFA;
  }
}

.banner {
  border-radius: 10px;
  background: url("../../newImg/banner.png");
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  height: 100%;

  .centerBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 35%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);

    .title {
      color: #222F60;
      font-size: 42px;
      display: flex;

      .leftText {
        background: linear-gradient(to right, #275AFF, #2EBDFA);
        /* 渐变方向颜色 */
        -webkit-background-clip: text;
        /* 关键属性：裁剪背景到文字 */
        background-clip: text;
        color: transparent;
        /* 文字颜色透明 */
        display: inline-block;
        /* 确保渐变生效 */
      }
    }


    .description {
      margin: 15px 0;
      color: #7A82A0;
      font-size: 24px;
      height: 75px;
      line-height: 1.6;
    }

    .tagUl {
      color: #222F60;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;

      li {
        padding: 0 30px;
        margin-top: 25px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:not(:last-child) {
          border-right: 2px solid #D2D7E6;
        }
      }
    }
  }
}

.myTab {
  width: 100%;
  font-size: 18px;
  border-radius: 16px;
  background: #f7f8fc;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  .activeMenu {
    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
    color: white;
  }

  li {
    transition: all .2s ease-in-out;
    z-index: 2;
    padding: 10px 20px;
    margin-right: 45px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      cursor: pointer !important;
    }

    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }
  }
}


.jd-homepage {
  min-height: 100vh;
  background-color: #f8fbfe;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// Header样式
.header {
  padding: 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;

  .header-content {
    width: 100%;
    max-width: 950px;
    // margin: 0 auto;
    margin-top: 15px;
    display: flex;
    align-items: center;
    // gap: 20px;
    position: absolute;
    left: 420px;
  }

  .logo-section {

    margin: 0 50px;

    img {
      height: 70px;
      width: 70px;
    }

    .logo {
      display: flex;
      align-items: center;
      height: 100%;

      .logo-text {
        font-size: 24px;
        font-weight: bold;
        color: #e1251b;
      }

      .logo-mascot {
        font-size: 20px;
      }
    }
  }


  .signin-section {
    .signin-btn {
      background: linear-gradient(45deg, #ffd700, #ff6b35);
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 5px;

      .signin-icon {
        font-weight: bold;
      }
    }
  }
}


// 主内容区域
.main-content {
  // padding: 16px;

  width: 100%;
  max-width: 1600px;
  margin: 20px auto;
  margin-top: 10px;
  margin-bottom: 0;
  border-radius: 10px;
  overflow: visible;
  background-color: white;
  height: 320px;

  .content-wrapper {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 300px 1fr 250px;
    gap: 20px;
  }
}


// 中间主内容区域
.main-section {
  .promo-banner {
    background: linear-gradient(45deg, #52c41a, #73d13d);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    height: 100%;

    .banner-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .banner-text {
        color: white;

        h3 {
          margin: 0 0 10px 0;
          font-size: 24px;
        }

        p {
          margin: 5px 0;
          font-size: 16px;
        }
      }

      .banner-image {
        position: relative;

        .fridge-img {
          width: 120px;
          height: 90px;
          object-fit: cover;
        }

        .flower-decoration {
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 20px;
        }
      }
    }

  }

  .subsidy-section,
  .live-section,
  .seckill-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      h3 {
        margin: 0;
        font-size: 18px;
        color: #333;
      }

      .official-tag,
      .live-tag,
      .seckill-tag {
        background: #e1251b;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }
    }
  }





}

.user-sidebar {
  height: 100%;

  * {
    font-size: 20px !important;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .main-content .content-wrapper {
    grid-template-columns: 180px 1fr 220px;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .main-content .content-wrapper {
    grid-template-columns: 1fr;
  }

  .category-sidebar,
  .user-sidebar {
    display: none;
  }

  .header .header-content {
    flex-direction: column;
    gap: 10px;
  }

  .search-section {
    width: 100%;
  }
}
</style>