gubersail-platform-ui/src/views/search/comprehensive.vue

<template>
  <div class="comprehensive-search">
    <basic-container>
      <div class="search-header">
        <h2>综合搜索</h2>
        <p>选择您需要查询的功能模块</p>
      </div>

      <div class="search-modules">
        <el-row :gutter="20">
          <el-col :span="6" v-for="module in searchModules" :key="module.key">
            <el-card
              class="search-module-card"
              :body-style="{ padding: '20px' }"
              @click.native="openModule(module)"
            >
              <div class="module-icon">
                <i :class="module.icon"></i>
              </div>
              <div class="module-info">
                <h3>{{ module.title }}</h3>
                <p>{{ module.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </basic-container>
  </div>
</template>

<script>
export default {
  name: 'ComprehensiveSearch',
  data() {
    return {
      searchModules: [
        {
          key: 'shipment-status',
          title: '发货状态查询',
          description: '查询订单发货状态、物流跟踪信息',
          icon: 'el-icon-truck',
          path: '/search/shipment-status'
        },
        {
          key: 'invoice',
          title: '发票及开票信息查询',
          description: '查询发票信息、开票信息',
          icon: 'el-icon-document',
          path: '/search/invoice'
        },
        {
          key: 'claim-query',
          title: '理赔信息查询',
          description: '查询理赔信息',
          icon: 'el-icon-box',
          path: '/claim/index'
        },
        // {
        //   key: 'customer-query',
        //   title: '客户查询',
        //   description: '查询客户信息、客户订单',
        //   icon: 'el-icon-user',
        //   path: '/search/customer-query'
        // }
      ]
    }
  },

  methods: {
    openModule(module) {
        console.log(module.key)
      if (module.key === 'shipment-status') {
        this.$router.push('/search/shipment-status')
      } else if (module.key === 'invoice') {
        this.$router.push('/search/invoice')
      } else if (module.key === 'claim-query') {
        this.$router.push('/claim/index')
      } else {
        this.$message.info(`${module.title}功能开发中...`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.comprehensive-search {
  padding: 20px;
}

.search-header {
  text-align: center;
  margin-bottom: 40px;

  h2 {
    color: #303133;
    margin-bottom: 10px;
  }

  p {
    color: #909399;
    font-size: 14px;
  }
}

.search-modules {
  max-width: 1200px;
  margin: 0 auto;
}

.search-module-card {
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .module-icon {
    text-align: center;
    margin-bottom: 15px;

    i {
      font-size: 48px;
      color: #409EFF;
    }
  }

  .module-info {
    text-align: center;

    h3 {
      color: #303133;
      margin-bottom: 8px;
      font-size: 16px;
    }

    p {
      color: #909399;
      font-size: 12px;
      line-height: 1.4;
    }
  }
}
</style>