kboss/f/web-kboss/src/views/H5/use/index.vue

<template>
  <div>
    <!-- 标题 -->
    <div class="top-tit">
      开元云
    </div>
    <!-- 搜索 -->
    <div class="search">
      <div class="search-box">
        <div class="input">
          <input type="text" placeholder="请输入产品名称" v-model="searchValue" @keyup.enter="handleSearch" />
        </div>
        <div class="search-btn" @click="handleSearch">
          搜索
        </div>
      </div>
    </div>

    <!-- 搜索提示 -->
    <div v-if="isSearching && searchValue" class="search-tip">
      搜索关键词: "{{ searchValue }}"
      <span class="clear-search" @click="clearSearch">× 清空搜索</span>
    </div>

    <!-- 供应商（只在非搜索模式显示） -->
    <div v-if="!isSearching && cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
      <div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
        <div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
          {{ value.secTitle }}
        </div>
      </div>
    </div>

    <!-- 云产品 -->
    <div class="box">
      <!-- 搜索模式：显示搜索结果 -->
      <template v-if="isSearching && searchResults.length > 0">
        <div v-for="product in searchResults" :key="product.id" class="box-item">
          <!-- 标题 -->
          <div class="item-tit">
            {{ product.name }}
          </div>
          <!-- 详情 -->
          <div class="item-detail">
            {{ product.description || '产品描述' }}
          </div>
          <!-- 描述 -->
          <div class="item-desc">
            AI应用
          </div>
          <!-- 查看详情 -->
          <div class="item-btn">
            <div class="btn" @click="goToDetail(product)">
              查看详情
            </div>
          </div>
        </div>
      </template>

      <!-- 搜索模式：无结果 -->
      <div v-else-if="isSearching && searchResults.length === 0" class="no-data">
        未找到与"{{ searchValue }}"相关的产品
      </div>

      <!-- 正常模式：显示当前供应商的产品 -->
      <template v-else-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
        <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
          <!-- 循环每个分类下的产品 -->
          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
            <!-- 标题 -->
            <div class="item-tit">
              {{ product.name }}
            </div>
            <!-- 详情 -->
            <div class="item-detail">
              {{ thrMenu.thrTitle || '产品分类' }}
            </div>
            <!-- 描述 -->
            <div class="item-desc">
              AI应用
            </div>
            <!-- 查看详情 -->
            <div class="item-btn">
              <div class="btn" @click="goToDetail(product)">
                查看详情
              </div>
            </div>
          </div>
        </template>
      </template>

      <!-- 正常模式：无数据 -->
      <div v-else-if="!isSearching && (!cloudData.secMenu || cloudData.secMenu.length === 0)" class="no-data">
        暂无产品数据
      </div>
    </div>

  </div>
</template>

<script>
import { reqNavList } from '@/api/H5/index'

export default {
  data() {
    return {
      cloudData: {},
      activeSupplierIndex: 0, // 默认选中第一个供应商
      searchValue: '', // 搜索关键词
      isSearching: false, // 是否正在搜索
      searchResults: [], // 搜索结果
    }
  },
  created() {
    this.getCloudData()
  },
  methods: {
    async getCloudData(keyword) {
      try {
        const params = {
          url_link: window.location.href,
          ...(keyword && { keyword: keyword.trim() })
        }

        const res = await reqNavList(params)
        if (res.status == true) {
          if (keyword) {
            // 搜索模式：返回的是产品数组
            this.isSearching = true
            this.searchResults = Array.isArray(res.data) ? res.data : []
            console.log('搜索结果:', this.searchResults)
          } else {
            // 正常模式：返回的是嵌套结构
            this.isSearching = false
            this.searchResults = []
            this.cloudData = res.data.product_service[3] || {}
            console.log('正常数据:', this.cloudData)

            // 确保有数据时选中第一个供应商
            if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
              this.activeSupplierIndex = 0
            }
          }
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.isSearching = false
        this.searchResults = []
      }
    },

    // 处理搜索
    handleSearch() {
      const keyword = this.searchValue.trim()
      if (keyword) {
        this.getCloudData(keyword)
      } else {
        // 如果搜索框为空，返回正常模式
        this.clearSearch()
      }
    },

    // 清空搜索
    clearSearch() {
      this.isSearching = false
      this.searchValue = ''
      this.searchResults = []
      this.getCloudData() // 重新加载正常数据
    },

    // 选择供应商（只在非搜索模式可用）
    selectSupplier(index) {
      if (!this.isSearching) {
        this.activeSupplierIndex = index
      }
    },

    // 跳转到详情页
    goToDetail(product) {
      if (product && product.name === '灵医智能体') {
        this.$router.push({
          path: '/h5HomePage/useDetail',
        })
      } else {
        this.$router.push({
          path: '/h5HomePage/service',
        })
      }
    },
  }
}
</script>

<style>
html,
body {
  height: 100%;
  overflow-y: auto;
}
</style>

<style lang="less" scoped>
@import url('../less/all/index.less');

/* 搜索提示样式 */
.search-tip {
  padding: 10px 20px;
  background-color: #f5f7fa;
  color: #666;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e4e7ed;
}

.clear-search {
  color: #409EFF;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  transition: all 0.3s;
}

.clear-search:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}

/* 无数据样式 */
.no-data {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
  font-size: 14px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin: 20px;
}
</style>