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="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="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" v-show="shouldShowProduct(product)">
            <!-- 标题 -->
            <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="openConsultDialog(product, thrMenu)">
                立即咨询
              </div>
            </div>
          </div>
        </template>
      </template>
    </div>

    <!-- 产品咨询弹窗 -->
    <ProductConsultDialog :visible.sync="showConsultDialog" :platform-name="platformName" :qr-code="qrCode"
      :default-form-data="consultFormData" :submit-api="submitConsultApi" @success="handleConsultSuccess"
      @close="handleDialogClose" />
  </div>
</template>

<script>
import { reqNavList } from '@/api/H5/index'
import ProductConsultDialog from '../H5_dialog/index.vue'
import { reqProductConsult } from '@/api/H5/index'

export default {
  components: {
    ProductConsultDialog
  },

  data() {
    return {
      cloudData: {},
      activeSupplierIndex: 0, // 默认选中第一个供应商
      searchValue: '', // 搜索关键词
      isSearching: false, // 是否正在搜索

      // 咨询弹窗相关
      showConsultDialog: false,
      platformName: '开元云',
      qrCode: '',
      consultFormData: {
        content: '',
        custom_type: '1',
        name: '',
        phone: '',
        company: '',
        email: '',
        checked: false
      },
      currentProduct: null,
      currentCategory: null
    }
  },
  created() {
    this.getCloudData()
  },
  methods: {
    async getCloudData() {
      const res = await reqNavList({ url_link: window.location.href })
      if (res.status == true) {
        this.cloudData = res.data.product_service[3]
        // 确保有数据时选中第一个
        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
          this.activeSupplierIndex = 0
        }
      }
    },

    // 处理搜索
    handleSearch() {
      this.isSearching = !!this.searchValue.trim()
      console.log('搜索关键词:', this.searchValue)
    },

    // 判断产品是否应该显示
    shouldShowProduct(product) {
      if (!this.isSearching) {
        return true
      }
      // 模糊搜索：检查产品名称或分类名称中是否包含搜索关键词
      const keyword = this.searchValue.toLowerCase().trim()
      return (
        (product.name && product.name.toLowerCase().includes(keyword)) ||
        (this.currentCategory && this.currentCategory.thrTitle && this.currentCategory.thrTitle.toLowerCase().includes(keyword))
      )
    },

    // 选择供应商
    selectSupplier(index) {
      this.activeSupplierIndex = index
    },

    // 打开咨询弹窗
    openConsultDialog(product, category) {
      this.currentProduct = product
      this.currentCategory = category

      // 设置咨询表单的预填内容
      this.consultFormData = {
        ...this.consultFormData,
        content: `我想咨询关于【${product.name}】的产品信息\n产品分类：${category.thrTitle}\n产品类型：AI应用`
      }

      this.showConsultDialog = true
    },

    // 提交咨询API
    async submitConsultApi(data) {
      // 如果有额外的产品信息，可以添加到提交数据中
      const submitData = {
        ...data,
        product_name: this.currentProduct?.name || '',
        product_category: this.currentCategory?.thrTitle || '',
        product_label: 'AI应用',
        supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
        page_type: 'product_list'
      }

      return await reqProductConsult(submitData)
    },

    // 咨询成功回调
    handleConsultSuccess(response) {
      console.log('咨询提交成功:', response)
      // 显示成功提示
      this.$message.success('咨询提交成功，我们将尽快联系您！')
    },

    // 弹窗关闭回调
    handleDialogClose() {
      this.currentProduct = null
      this.currentCategory = null
      // 重置表单数据
      this.consultFormData = {
        content: '',
        custom_type: '1',
        name: '',
        phone: '',
        company: '',
        email: '',
        checked: false
      }
    }
  }
}
</script>

<style>
html,
body {
  height: 100%;
  overflow-y: auto;
}
</style>
<style lang="less" scoped>
@import url('../less/all/index.less');
</style>