Merge branch 'main' of https://git.opencomputing.cn/yumoqing/kboss

f/web-kboss/src/router/index.js

@@ -314,7 +314,7 @@ export const asyncRoutes = [
     children: [
       {
         path: "overview",
-        component: () => import('@/views/product/productHome/productIndex/index.vue'),
+        component: () => import('../views/customer/orderManagement/index.vue'),
         name: 'ProductOverview',
         meta: {
           title: "资源概览",

f/web-kboss/src/utils/language.js

@@ -0,0 +1,36 @@
+// src/utils/language.js
+import Vue from 'vue'
+
+// 创建一个事件总线用于组件通信
+export const languageBus = new Vue()
+
+// 语言状态管理
+export const languageStore = {
+  state: {
+    language: 'zh'
+  },
+
+  setLanguage(lang) {
+    if (lang === 'zh' || lang === 'en') {
+      this.state.language = lang
+      localStorage.setItem('language', lang)
+      // 触发语言改变事件
+      languageBus.$emit('language-changed', lang)
+    }
+  },
+
+  getLanguage() {
+    return this.state.language
+  },
+
+  init() {
+    const savedLanguage = localStorage.getItem('language')
+    if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) {
+      this.state.language = savedLanguage
+    }
+    return this.state.language
+  }
+}
+
+// 初始化
+languageStore.init()

f/web-kboss/src/views/customer/orderDetil/index.vue

@@ -452,7 +452,7 @@ export default {
   padding-top: 25px;
   //margin-top: -20px;
   display: flex;
-  justify-content: flex-start;
+  justify-content: center ;
   align-items: center;
   //margin-right: 25%;
   list-style: none;
@@ -516,6 +516,7 @@ export default {
   }
   .itemMobile {
     height: auto !important;
+
   }
 }
 

f/web-kboss/src/views/customer/orderManagement/index.vue

@@ -1,124 +1,219 @@
 <template>
   <div class="orderManagement">
-    <!-- 搜索框 -->
+    <!-- 移动端搜索框 -->
     <el-card class="mobileCaed" v-if="isMobile">
       <el-row :span="24">
         <el-col :span="24" class="search">
           <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
-                     size="small">
+            size="small">
-            <!-- <el-option label="全部" value="all" /> -->
+            <el-option label="订单号" value="id" />
-            <el-option label="订单号" value="id"/>
+            <el-option label="订单日期" value="order_date" />
-            <el-option label="订单日期" value="order_date"/>
+            <el-option label="订单状态:未支付" value="0" />
-            <el-option label="订单状态:未支付" value="0"/>
+            <el-option label="订单状态:已支付" value="1" />
-            <el-option label="订单状态:已支付" value="1"/>
+            <el-option label="订单状态:已取消" value="3" />
-            <el-option label="订单状态:已取消" value="3"/>
           </el-select>
-          <el-input size="small" v-show="this.select=='id'" placeholder="请输入内容" class="input-with-select"
+          <el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select"
-                    @input="input" v-model="searchValue" clearable></el-input>
+            @input="input" v-model="searchValue" clearable></el-input>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24" style="margin-top:5px;">
-          <div v-if="select=='order_date'">
+          <div v-if="select == 'order_date'">
             <div class="datePicker">
               <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
-                              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日"
+                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
-                              value-format="yyyy-MM-dd">
               </el-date-picker>
             </div>
           </div>
         </el-col>
       </el-row>
+
+      <!-- 筛选状态显示 -->
+      <el-row v-if="hasActiveFilters" style="margin-top: 5px;">
+        <el-col :span="24">
+          <div class="filter-status">
+            <span class="filter-label">当前筛选: </span>
+            <el-tag v-if="businessOpFilter" size="small" closable @close="clearBusinessOpFilter">
+              {{ getOrderTypeConfig(businessOpFilter).text }}
+            </el-tag>
+            <el-tag v-if="orderStatusFilter" size="small" closable @close="clearOrderStatusFilter"
+                    :type="orderStatusFilter === '1' ? 'success' : orderStatusFilter === '0' ? 'danger' : 'info'">
+              {{ getOrderStatusText(orderStatusFilter) }}
+            </el-tag>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 移动端类型筛选 -->
+      <el-row style="margin-top: 10px;">
+        <el-col :span="24">
+          <div class="mobile-filter">
+            <span class="filter-label">类型:</span>
+            <el-button
+              v-for="(config, type) in orderTypes"
+              :key="type"
+              size="mini"
+              :type="businessOpFilter === type ? config.buttonType : ''"
+              @click="handleBusinessOpFilter(type)">
+              {{ config.text }}
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 移动端状态筛选 -->
+      <el-row style="margin-top: 5px;">
+        <el-col :span="24">
+          <div class="mobile-filter">
+            <span class="filter-label">状态:</span>
+            <el-button
+              v-for="status in orderStatuses"
+              :key="status.value"
+              size="mini"
+              :type="orderStatusFilter === status.value ? status.buttonType : ''"
+              @click="handleOrderStatusFilter(status.value)">
+              {{ status.text }}
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+
       <el-row class="allPrice">
         <el-col :span="24">
           <span class="price" style="font-size: 18px">支付总金额:¥ {{ all_price }}</span>
-          <el-button type="primary" class="searchSelectIcon" @click="set">重置</el-button>
+          <el-button type="primary" class="searchSelectIcon" @click="resetAllFilters">重置</el-button>
         </el-col>
       </el-row>
     </el-card>
 
-    <el-card class="pcCard" v-else style="height:80px;display: flex;justify-content: flex-start;align-items: center;">
+    <!-- PC端头部 -->
-      <el-row :span="24">
+    <el-card class="pcCard" v-else>
-        <el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center">
+      <div class="header-container">
-          <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
+        <div class="search-group">
-                     width="130px" size="small">
+          <el-select v-model="select" filterable @change="selectSearch" class="search-select" placeholder="请选择"
-            <!-- <el-option label="全部" value="all" /> -->
+            size="small" style="width: 100px">
-            <el-option label="订单号" value="id"/>
+            <el-option label="订单号" value="id" />
-            <el-option label="订单日期" value="order_date"/>
+            <el-option label="订单日期" value="order_date" />
-            <el-option label="订单状态:未支付" value="0"/>
+            <!-- <el-option label="订单状态:未支付" value="0" />
-            <el-option label="订单状态:已支付" value="1"/>
+            <el-option label="订单状态:已支付" value="1" />
-            <el-option label="订单状态:已取消" value="3"/>
+            <el-option label="订单状态:已取消" value="3" /> -->
           </el-select>
-          <el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select=='id'"
+
-                    placeholder="请输入内容" class="input-with-select" @input="input" v-model="searchValue"
+          <el-input size="small" v-show="select == 'id'" placeholder="请输入内容" class="search-input" @input="input"
-                    clearable></el-input>
+            v-model="searchValue" clearable style="width: 180px; margin-left: 10px">
-          <div v-if="select=='order_date'">
+          </el-input>
-            <div style="display:flex;margin-left:10px;">
+
-              <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
+          <div v-if="select == 'order_date'" class="date-picker-container">
-                              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日"
+            <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
-                              value-format="yyyy-MM-dd">
+              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
-              </el-date-picker>
+              style="width: 240px; margin-left: 10px">
+            </el-date-picker>
+          </div>
+        </div>
+
+        <!-- 筛选状态显示 -->
+        <div v-if="hasActiveFilters" class="filter-status-pc">
+          <span class="filter-label">当前筛选: </span>
+          <el-tag v-if="businessOpFilter" size="small" closable @close="clearBusinessOpFilter">
+            {{ getOrderTypeConfig(businessOpFilter).text }}
+          </el-tag>
+          <el-tag v-if="orderStatusFilter" size="small" closable @close="clearOrderStatusFilter"
+                  :type="orderStatusFilter === '1' ? 'success' : orderStatusFilter === '0' ? 'danger' : 'info'">
+            {{ getOrderStatusText(orderStatusFilter) }}
+          </el-tag>
+        </div>
+
+        <div class="stats-group">
+          <div class="stat-item">
+            <span class="stat-label">累计支付总金额:</span>
+            <div class="stat-value">
+              <el-skeleton animated v-if="all_price_show" :rows="1" style="width: 80px" />
+              <span v-else class="price-text">¥ {{ all_price || '0.00' }}</span>
             </div>
           </div>
-          <el-button type="primary" style="padding: 0 5px;height: 30px; margin-left:10px;" class="searchSelectIcon"
+          <div class="stat-item">
-                     @click="set">重置
+            <span class="stat-label">累计优惠总金额:</span>
-          </el-button>
+            <div class="stat-value">
-          <span
+              <el-skeleton animated v-if="all_price_show" :rows="1" style="width: 80px" />
-            style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
+              <span v-else class="price-text">¥ {{ all_discount || '0.00' }}</span>
-   <div style="width: 250px;line-height: 36px">
+            </div>
-              <el-skeleton animated v-if="all_price_show" rows="2"/>
+          </div>
-          <span v-else> ¥ {{ all_price }}</span>
+        </div>
-   </div>
 
-          </span>
+        <!-- 类型筛选 -->
-        </el-col>
+        <div class="type-filter">
-      </el-row>
+          <span>订单类型筛选：</span>
+          <el-button
+            v-for="(config, type) in orderTypes"
+            :key="type"
+            :type="businessOpFilter === type ? config.buttonType : ''"
+            @click="handleBusinessOpFilter(type)">
+            {{ config.text }}
+          </el-button>
+        </div>
+
+        <!-- 状态筛选 -->
+        <div class="status-filter">
+          <span>订单状态筛选：</span>
+          <el-button
+            v-for="status in orderStatuses"
+            :key="status.value"
+            :type="orderStatusFilter === status.value ? status.buttonType : ''"
+            @click="handleOrderStatusFilter(status.value)">
+            {{ status.text }}
+          </el-button>
+        </div>
+
+        <!-- 重置按钮 -->
+        <div class="reset">
+          <el-button type="primary" size="small" class="reset-btn" @click="resetAllFilters"
+            style="margin-left: 10px; padding: 7px 15px">
+            重置
+          </el-button>
+        </div>
+      </div>
     </el-card>
-    <!-- 表格 -->
+
+    <!-- 表格部分 -->
     <el-card class="orderList">
-      <el-table border :data="tableData" class="table" height="calc(100vh - 200px)" v-loading="all_price_show">
+      <el-table border :data="tableData" class="table" height="calc(100vh - 264px)" v-loading="all_price_show">
-        <el-table-column min-width="200" align="center" header-align="center" prop="id"
+        <el-table-column label="序号" width="180">
-                         label="订单号"></el-table-column>
-        <el-table-column min-width="80" align="center" header-align="center" label="原价">
           <template slot-scope="scope">
-            <!--                <div style="padding-left: 35px">-->
+            {{ (pagination.page - 1) * pagination.size + scope.$index + 1 }}
-            ￥{{ scope.row.countprice }}
-            <!--                </div>-->
           </template>
         </el-table-column>
-        <el-table-column min-width="80" align="center" header-align="center" label="折后实付价">
+        <el-table-column align="center" min-width="180" header-align="center" prop="product_name" label="产品名称">
+        </el-table-column>
+        <el-table-column align="center" min-width="180" header-align="center" prop="id" label="订单号"></el-table-column>
+        <el-table-column align="center" header-align="center" label="订单原价" prop="list_price">
+          <template slot-scope="scope">
+            ￥{{ scope.row.list_price }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" header-align="center" label="订单折后价">
           <template slot-scope="scope">
             {{ scope.row.amount ? "￥" + scope.row.amount : "-" }}
           </template>
-          
         </el-table-column>
-        <el-table-column min-width="80" align="center" header-align="center" label="订单类型">
+        <el-table-column align="center" header-align="center" label="订单类型">
           <template slot-scope="scope">
-            <!--            {{ orderTypeMap(scope.row.business_op) }}-->
+            <el-tag :style="{ padding: '0 8px' }" :type="getOrderTypeConfig(scope.row.business_op).type">
-            <el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type">
+              {{ getOrderTypeConfig(scope.row.business_op).text }}
-              {{ orderTypeMap(scope.row.business_op).text }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column min-width="150" align="center" header-align="center" prop="order_date"
+        <el-table-column align="center" header-align="center" label="订单状态">
-                         label="订单日期"></el-table-column>
-        <el-table-column min-width="150" align="center" header-align="center" label="订单状态">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.order_status==='0'" style="padding: 0 5px" type="warning" effect="dark">
+            <el-tag :style="{ padding: '0 5px' }" :type="getOrderStatusConfig(scope.row.order_status).tagType" effect="dark">
-              {{ getResult(scope.row.order_status) }}
+              {{ getOrderStatusConfig(scope.row.order_status).text }}
-            </el-tag>
-            <el-tag v-else-if="scope.row.order_status==='1'" style="padding: 0 5px" type="success" effect="dark">
-              {{ getResult(scope.row.order_status) }}
-            </el-tag>
-            <el-tag v-else style="padding: 0 5px" type="info" effect="dark">
-              {{ getResult(scope.row.order_status) }}
             </el-tag>
           </template>
         </el-table-column>
+        <el-table-column align="center" header-align="center" prop="order_date" label="订单日期"></el-table-column>
         <el-table-column align="center" header-align="center" label="操作">
           <template slot-scope="scope">
-            <el-button size="small" v-if="scope.row.order_status==='0'" type="primary" @click="orderDetails(scope.row)"
+            <el-button size="small" v-if="scope.row.order_status === '0'" type="primary"
-                       style="padding: 8px 15px">去支付
+              @click="orderDetails(scope.row)" style="padding: 8px 15px">去支付
             </el-button>
             <el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px">
               查看详情
@@ -126,22 +221,35 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- 分页 -->
+      <div class="page">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="pagination.page" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.size"
+          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+        </el-pagination>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script>
-import {getOrderAPI} from "@/api/product/product";
+import { getOrderAPI } from "@/api/product/product";
 
 export default {
+  name: 'OrderManagement',
   data() {
     return {
-      all_price_show: true,//金额显示骨架屏
+      pagination: {
-      // 获取用户代理字P串
+        page: 1,
+        size: 10,
+        total: 0
+      },
+      all_price_show: true,
       userAgent: window.navigator.userAgent,
-      // 判断是否为移动设备
       isMobile: false,
       all_price: '',
+      all_discount: '0.00',
       showDate: false,
       pickerOptions: {
         shortcuts: [{
@@ -173,11 +281,30 @@ export default {
       value1: '',
       select: "",
       tableData: [],
-      page: 1,
       searchValue: null,
       order_status_select: null,
       userId: sessionStorage.getItem("userId"),
       dialogVisible: false,
+
+      // 订单类型筛选
+      businessOpFilter: null,
+      // 订单状态筛选
+      orderStatusFilter: null,
+
+      // 订单类型配置
+      orderTypes: {
+        'BUY_REVERSE': { text: '退费', type: 'danger', buttonType: 'danger' },
+        'RENEW': { text: '续费', type: 'primary', buttonType: 'primary' },
+        'BUY': { text: '购买', type: 'success', buttonType: 'success' }
+      },
+
+      // 订单状态配置
+      orderStatuses: [
+        { value: '1', text: '已支付', buttonType: 'success', tagType: 'success' },
+        { value: '0', text: '未支付', buttonType: 'danger', tagType: 'warning' },
+        { value: '3', text: '已取消', buttonType: 'info', tagType: 'info' }
+      ],
+
       orderDetail: {
         order_goods: [
           {
@@ -192,81 +319,31 @@ export default {
       },
     };
   },
+  computed: {
+    // 检查是否有活跃的筛选条件
+    hasActiveFilters() {
+      return this.businessOpFilter || this.orderStatusFilter;
+    }
+  },
   created() {
     this.getOrder();
     this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
   },
   methods: {
-    orderTypeMap(type) {
+    // 获取订单类型配置
-      switch (type) {
+    getOrderTypeConfig(type) {
-        case 'BUY_REVERSE':
+      return this.orderTypes[type] || { text: "-", type: "primary", buttonType: "" };
-          // return <el-tag type="danger"></el-tag>;
-          return {text: "退款", type: "danger"};
-        case 'RENEW':
-          return {text: "续费", type: "primary"};
-        case 'BUY':
-          return {text: "购买", type: "success"};
-        default:
-          return {text: "-", type: "primary"};
-      }
     },
-    getOrder(data) {//获取订单
-      let params = {};
-      if (this.select) {
-        if (this.select === 'id' && this.searchValue) {
-          params['type'] = '200'
-          params['id'] = this.searchValue
-        }
-        if (this.select === 'order_date' && this.value1) {
-          params['start_time'] = data[0]
-          params['end_time'] = data[1]
-          params['type'] = '200'
-        }
-        if (this.select == '0') {
-          params['type'] = '200'
-          params['order_status'] = '0'
-        }
-        if (this.select == '1') {
-          params['type'] = '200'
-          params['order_status'] = '1'
-        }
-        if (this.select == '3') {
-          params['type'] = '200'
-          params['order_status'] = '3'
-        }
-      }
-      getOrderAPI(params).then((res) => {
-        this.all_price_show = false
-        if (res.status == true) {
-          this.tableData = res.data;
-          this.all_price = res.all_price
-        }
-      });
-    },
-    change(e) {//选择时间
-      this.value1 = e
-      this.getOrder(e)
-    },
-    set() {//重置
-      this.value1 = null
-      this.searchValue = null
-      this.select = null
-      this.getOrder()
 
+    // 获取订单状态配置
+    getOrderStatusConfig(status) {
+      const statusConfig = this.orderStatuses.find(s => s.value === status);
+      return statusConfig || { text: this.getOrderStatusText(status), tagType: 'info' };
     },
-    selectSearch(e) { //下拉搜索事件
+
-      this.select = e
+    // 获取订单状态文本
-      this.getOrder(e)
+    getOrderStatusText(status) {
-    },
+      switch (status) {
-    input(e) {//input事件
-      this.searchValue = e
-      this.getOrder(e)
-    },
-    orderDetails(row) {  //查看订单详情
-      this.$router.push({name: "orderDetil", query: {id: row.id}});
-    },
-    getResult(data) {
-      switch (data) {
         case "0":
           return "未支付";
         case "1":
@@ -277,31 +354,197 @@ export default {
           return "已取消";
         case "4":
           return "后付费";
+        default:
+          return "未知状态";
       }
     },
-  },
+
+    // 处理订单类型筛选
+    handleBusinessOpFilter(type) {
+      console.log("订单类型筛选:", type, this.getOrderTypeConfig(type).text);
+
+      // 如果点击已经选中的按钮，则取消筛选
+      if (this.businessOpFilter === type) {
+        this.businessOpFilter = null;
+      } else {
+        this.businessOpFilter = type;
+      }
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 清除订单类型筛选
+    clearBusinessOpFilter() {
+      this.businessOpFilter = null;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 处理订单状态筛选
+    handleOrderStatusFilter(status) {
+      console.log("订单状态筛选:", status, this.getOrderStatusText(status));
+
+      // 如果点击已经选中的按钮，则取消筛选
+      if (this.orderStatusFilter === status) {
+        this.orderStatusFilter = null;
+      } else {
+        this.orderStatusFilter = status;
+      }
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 清除订单状态筛选
+    clearOrderStatusFilter() {
+      this.orderStatusFilter = null;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 重置所有筛选条件
+    resetAllFilters() {
+      this.value1 = null;
+      this.searchValue = null;
+      this.select = null;
+      this.businessOpFilter = null;
+      this.orderStatusFilter = null;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 获取订单数据
+    getOrder() {
+      let params = {
+        page: this.pagination.page,
+        size: this.pagination.size,
+        type: '200' // 确保始终传递type参数
+      };
+
+      // 订单号搜索
+      if (this.select === 'id' && this.searchValue) {
+        params['id'] = this.searchValue;
+      }
+
+      // 日期范围搜索
+      if (this.select === 'order_date' && this.value1) {
+        params['start_time'] = this.value1[0];
+        params['end_time'] = this.value1[1];
+      }
+
+      // 下拉选择的状态筛选
+      if (['0', '1', '3'].includes(this.select)) {
+        params['order_status'] = this.select;
+      }
+
+      // 按钮状态筛选 - 优先级高于下拉选择
+      if (this.orderStatusFilter) {
+        params['order_status'] = this.orderStatusFilter;
+      }
+
+      // 订单类型筛选
+      if (this.businessOpFilter) {
+        params['business_op'] = this.businessOpFilter;
+      }
+
+      console.log("API请求参数:", params);
+
+      this.all_price_show = true;
+      getOrderAPI(params).then((res) => {
+        this.all_price_show = false;
+        console.log("API响应数据:", res);
+
+        if (res.status === true || res.code === 200) {
+          this.tableData = res.data || [];
+          this.all_price = res.all_price || '0.00';
+          this.all_discount = res.all_discount || '0.00';
+
+          // 修复分页总数设置
+          if (res.pagination && res.pagination.total !== undefined) {
+            this.pagination.total = res.pagination.total;
+          } else if (res.total !== undefined) {
+            this.pagination.total = res.total;
+          } else {
+            this.pagination.total = this.tableData.length;
+          }
+
+          // 调试信息：显示筛选后的数据
+          if (this.businessOpFilter) {
+            const filteredData = this.tableData.filter(item => item.business_op === this.businessOpFilter);
+            console.log(`类型筛选结果: ${this.getOrderTypeConfig(this.businessOpFilter).text}`, filteredData);
+          }
+        } else {
+          this.$message.error(res.message || '获取数据失败');
+        }
+      }).catch(error => {
+        console.error("获取订单数据失败:", error);
+        this.all_price_show = false;
+        this.$message.error('请求失败，请检查网络连接');
+      });
+    },
+
+    handleSizeChange(val) {
+      this.pagination.size = val;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    handleCurrentChange(val) {
+      this.pagination.page = val;
+      this.getOrder();
+    },
+
+    change(e) {
+      this.value1 = e;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    selectSearch(e) {
+      this.select = e;
+      // 当选择状态选项时，直接触发搜索
+      if (['0', '1', '3'].includes(e)) {
+        this.getOrder();
+      } else {
+        // 对于其他选项（如订单号、日期），清空其他搜索条件
+        if (e !== 'order_date') {
+          this.value1 = null;
+        }
+        if (e !== 'id') {
+          this.searchValue = null;
+        }
+      }
+    },
+
+    input(e) {
+      this.searchValue = e;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    orderDetails(row) {
+      this.$router.push({ name: "orderDetil", query: { id: row.id } });
+    }
+  }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
-* {
-  padding: 0;
-  margin: 0;
-}
-
 .orderManagement {
-  height: 100%;
+  height: calc(100vh - 180px);
 
   .mobileCaed {
-    height: 100px;
+    height: auto;
     display: flex;
+    flex-direction: column;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
+    padding: 10px;
 
     .search {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      width: 100%;
 
       .searchSelect {
         width: 150px;
@@ -313,13 +556,52 @@ export default {
       }
     }
 
+    .filter-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+
+      .filter-label {
+        font-size: 14px;
+        color: #606266;
+        white-space: nowrap;
+      }
+
+      .el-tag {
+        cursor: pointer;
+      }
+    }
+
+    .mobile-filter {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      .filter-label {
+        margin-right: 8px;
+        font-size: 14px;
+        color: #606266;
+        white-space: nowrap;
+      }
+
+      .el-button {
+        margin-right: 5px;
+        padding: 4px 8px;
+        font-size: 12px;
+      }
+    }
+
     .allPrice {
-      margin-top: 5px;
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
       .searchSelectIcon {
         padding: 0 5px;
         height: 20px;
-        margin-left: 10px;
       }
 
       .price {
@@ -335,40 +617,167 @@ export default {
     }
   }
 
+  // PC端优化样式
   .pcCard {
-    .search {
+    margin-bottom: 10px;
-      text-align: left;
 
-      .input-with-select {
+    .header-container {
-        width: 60%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      // height: 60px;
+      flex-wrap: wrap;
 
-        .searchSelect {
+      .search-group {
-          width: 150px;
+        display: flex;
+        align-items: center;
+
+        .search-select {
+          width: 130px;
         }
 
-        .searchSelectIcon {
+        .search-input {
-          width: 30px;
+          width: 180px;
+        }
+
+        .date-picker-container {
+          display: flex;
+          align-items: center;
         }
       }
-    }
 
-    .orderList {
+      .filter-status-pc {
-      margin-top: 5px;
+        display: flex;
-      height: calc(100vh - 180px);
+        align-items: center;
+        gap: 8px;
+        margin-left: 8px;
 
-      .table {
+        .filter-label {
-        width: 100%;
+          font-size: 14px;
+          color: #606266;
+          white-space: nowrap;
+        }
+
+        .el-tag {
+          cursor: pointer;
+        }
+      }
+
+      .stats-group {
+        display: flex;
+        align-items: center;
+
+        .stat-item {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          margin-left: 10px;
+          .stat-label {
+            color: #606266;
+            margin-right: 8px;
+            white-space: nowrap;
+          }
+
+          .stat-value {
+            min-width: 80px;
+
+            .price-text {
+              color: #e6a23c;
+              font-weight: 600;
+              font-size: 16px;
+            }
+          }
+        }
+      }
+
+      .type-filter, .status-filter {
+        display: flex;
+        align-items: center;
+        margin-left: 20px;
+
+        span {
+          margin-right: 8px;
+          font-size: 14px;
+          color: #606266;
+          white-space: nowrap;
+        }
+
+        .el-button {
+          margin-right: 5px;
+          padding: 7px 12px;
+        }
+      }
+
+      .reset {
+        display: flex;
+        align-items: center;
       }
     }
   }
+
+  .orderList {
+    margin-top: 10px;
+    height: calc(100vh - 180px);
+
+    .table {
+      width: 100%;
+    }
+  }
 }
-</style>
+
-<style>
+.page {
-.el-table .el-table__header {
+  text-align: center;
+  margin: 20px;
+}
+
+// 全局样式调整
+::v-deep .el-table .el-table__header {
   background-color: #d0cff8;
 }
 
 ::v-deep .el-tag {
   padding: 0 8px !important;
 }
+
+// 响应式调整
+@media screen and (max-width: 1200px) {
+  .pcCard .header-container {
+    height: auto;
+    padding: 10px 0;
+
+    .search-group,
+    .stats-group,
+    .type-filter,
+    .status-filter,
+    .reset {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+// 按钮选中状态优化
+::v-deep .el-button--primary:focus,
+::v-deep .el-button--primary:hover,
+::v-deep .el-button--success:focus,
+::v-deep .el-button--success:hover,
+::v-deep .el-button--danger:focus,
+::v-deep .el-button--danger:hover {
+  opacity: 0.8;
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .mobile-filter {
+    flex-wrap: wrap;
+
+    .filter-label {
+      width: 100%;
+      margin-bottom: 5px;
+    }
+
+    .el-button {
+      margin-bottom: 5px;
+    }
+  }
+}
 </style>

f/web-kboss/src/views/homePage/components/topBox/index.vue

@@ -268,6 +268,9 @@ import { reqApplyChannel } from "@/api/customer/channel";
 import store from "@/store";
 // 导入工具函数
 import { getHomePath } from '@/views/setting/tools'
+// 导入语言管理
+import { languageStore, languageBus } from '@/utils/language'
+
 export default Vue.extend({
   name: "TopBox",
   data() {
@@ -287,7 +290,7 @@ export default Vue.extend({
       threeData: [], // 三级菜单数据
       fourData: [], // 四级菜单数据（未使用）
       product_service: [], // 产品服务数据
-      language: 'zh', // 默认语言
+      language: languageStore.getLanguage(), // 从共享状态获取语言
       translations: {
         zh: {
           home: '首页',
@@ -336,11 +339,10 @@ export default Vue.extend({
     // 初始化组件
     this.init()
 
-    // 尝试从本地存储获取语言设置
+    // 监听语言变化事件
-    const savedLanguage = localStorage.getItem('language');
+    languageBus.$on('language-changed', (lang) => {
-    if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) {
+      this.language = lang
-      this.language = savedLanguage;
+    })
-    }
   },
   mounted() {
     // 组件挂载时，从sessionStorage获取用户名
@@ -361,6 +363,10 @@ export default Vue.extend({
     // 初始化导航数据
     this.initData()
   },
+  beforeDestroy() {
+    // 移除事件监听
+    languageBus.$off('language-changed')
+  },
   computed: {
     // 判断当前是否为ncmatchHome页面
     isNcmatchHome() {
@@ -404,10 +410,10 @@ export default Vue.extend({
         this.$router.push('/operation/supplierManagement')
       }
     },
-    // 切换语言
+    // 切换语言 - 修改为使用共享状态
     toggleLanguage() {
-      this.language = this.language === 'zh' ? 'en' : 'zh';
+      const newLanguage = this.language === 'zh' ? 'en' : 'zh';
-      localStorage.setItem('language', this.language);
+      languageStore.setLanguage(newLanguage)
     },
     // 初始化Logo信息
     init() {

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

@@ -3,7 +3,7 @@
     <!-- 粘性导航组件 -->
     <HomePageSticky
       ref="stickyNav"
-      :sections="stickySections"
+      :sections="getStickySections()"
       @navigate="handleNavigation"
       :show-threshold-element-selector="'.tagUl'"
       :show-offset="0"
@@ -14,30 +14,30 @@
       <div class="centerBox">
         <span style="margin-top: 100px" class="title">
           <span v-if="JSON.stringify(logoInfoNew) !== '{}'" class="leftText">
-            {{ logoInfoNew.home.bannerTitle || "" }}
+            {{ getBannerTitle() }}
           </span>
-          <span class="rightText"> 您身边的AI管家</span>
+          <span class="rightText"> {{ translations[language].aiButler }}</span>
         </span>
         <!-- 当滚动到这个元素位置时，显示粘性导航 -->
         <ul style="margin-top: 50px" class="tagUl">
-          <li>全 球 领 先 的 AI 服 务 运 营 商</li>
+          <li>{{ translations[language].slogan }}</li>
         </ul>
       </div>
 
       <div style="cursor: pointer" class="tag">
         <span @click="openTalk" class="product">
-          <span class="productName">4090 裸金属</span>
+          <span class="productName">{{ translations[language].product1Name }}</span>
           <span class="price">
             <span class="smallText">￥</span>
             <span class="bigText">6000</span>
-            <span class="smallText">/台/月</span>
+            <span class="smallText">/{{ translations[language].month }}</span>
           </span>
         </span>
         <span @click="goBaiduFn" style="top: 180px" class="product">
-          <span class="productName">云资源</span>
+          <span class="productName">{{ translations[language].product2Name }}</span>
           <span class="price">
             <span style="margin-top: 15px" class="smallText">
-              直降
+              {{ translations[language].discount }}
               <span style="font-size: 30px; display: inline-block" class="bigText">20%</span>
             </span>
           </span>
@@ -50,18 +50,18 @@
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
-          <span>云筑</span>
+          <span>{{ translations[language].baseTitle1 }}</span>
-          <span class="commonTextColor">企业基座</span>
+          <span class="commonTextColor">{{ translations[language].baseTitle2 }}</span>
         </span>
-        <span class="bottomText">多云融合 让上云更简单</span>
+        <span class="bottomText">{{ translations[language].baseSubtitle }}</span>
       </div>
 
       <ul class="myTab">
         <li
-          v-for="menu in baseMenu"
+          v-for="menu in getBaseMenu()"
           :class="currentBaseMenu === menu.id ? 'activeMenu' : ''"
           @click="clickBaseMenu(menu)"
-          :key="menu.name"
+          :key="menu.id"
         >
           <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
           {{ menu.name }}
@@ -74,10 +74,10 @@
           :style="{ backgroundImage: 'url(' + baseItem.bgImgUrl + ')' }"
           class="itemContent"
         >
-          <span class="title">{{ baseItem.title }}</span>
+          <span class="title">{{ getBaseItemTitle() }}</span>
-          <p style="line-height: 2" class="description">{{ baseItem.description }}</p>
+          <p style="line-height: 2" class="description">{{ getBaseItemDescription() }}</p>
           <ul class="itemContentTag">
-            <li v-for="(item, index) in baseItem.list" :key="index">
+            <li v-for="(item, index) in getBaseItemList()" :key="index">
               <img :src="item.icon" alt="" />
               <span
                 v-if="item.name"
@@ -95,16 +95,16 @@
           </span>
           <div class="twoBtn">
             <div class="butStyle" @click="goBaiduFn(baseItem)">
-              立即购买
+              {{ translations[language].buyNow }}
               <span style="display: inline-block; margin-left: 5px; color: white">></span>
             </div>
             <div v-show="false" class="lookDetailStyle">
-              查看详情&nbsp;&nbsp;>
+              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
               <span style="display: inline-block; margin-left: 5px;"></span>
             </div>
           </div>
           <span class="discountStyle">
-            <span style="font-size: 18px">官网折扣</span>
+            <span style="font-size: 18px">{{ translations[language].officialDiscount }}</span>
             <span style="font-size: 24px">{{ baseItem.discount }}折</span>
           </span>
         </div>
@@ -115,18 +115,18 @@
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
-          <span>智算</span>
+          <span>{{ translations[language].suanTitle1 }}</span>
-          <span class="commonTextColor">未来征程</span>
+          <span class="commonTextColor">{{ translations[language].suanTitle2 }}</span>
         </span>
-        <span class="bottomText">多元异构 灵活短租</span>
+        <span class="bottomText">{{ translations[language].suanSubtitle }}</span>
       </div>
 
       <ul class="myTab">
         <li
-          v-for="menu in suanMenu"
+          v-for="menu in getSuanMenu()"
           :class="currentSuanMenu === menu.id ? 'activeMenu' : ''"
           @click="clickSuanMenu(menu)"
-          :key="menu.name"
+          :key="menu.id"
         >
           <img :src="currentSuanMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
           {{ menu.name }}
@@ -135,9 +135,9 @@
 
       <transition name="slide-fade" mode="out-in">
         <div :key="currentSuanMenu" class="itemContentSuan">
-          <span class="title">{{ suanItem.title }}</span>
+          <span class="title">{{ getSuanItemTitle() }}</span>
           <ul class="itemContentTag">
-            <li v-for="(item, index) in suanItem.list" :key="index">
+            <li v-for="(item, index) in getSuanItemList()" :key="index">
               <img :src="item.icon" alt="" />
               <span
                 v-if="item.name"
@@ -153,16 +153,16 @@
             <span style="font-weight: bold;">￥</span>
             <span style="font-weight: bold; font-size: 48px">{{ suanItem.price }}</span>
             <span style="color: #7a82a0">/{{ suanItem.price_unit }}</span>
-            <span style="color: #222f60">（可短租）</span>
+            <span style="color: #222f60">（{{ translations[language].shortRent }}）</span>
           </span>
 
           <div style="margin-top: 10px !important;" class="twoBtn">
             <div class="butStyle" @click="openTalk">
-              立即咨询
+              {{ translations[language].consultNow }}
               <span style="display: inline-block; margin-left: 5px; color: white">></span>
             </div>
             <div v-show="false" class="lookDetailStyle">
-              查看详情&nbsp;&nbsp;>
+              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
               <span style="display: inline-block; margin-left: 5px;"></span>
             </div>
           </div>
@@ -174,17 +174,17 @@
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
-          <span>网织</span>
+          <span>{{ translations[language].netTitle1 }}</span>
-          <span class="commonTextColor">智能经纬</span>
+          <span class="commonTextColor">{{ translations[language].netTitle2 }}</span>
         </span>
-        <span class="bottomText">云算网融合 让连接更简单</span>
+        <span class="bottomText">{{ translations[language].netSubtitle }}</span>
       </div>
       <ul class="myTab">
         <li
-          v-for="menu in netMenu"
+          v-for="menu in getNetMenu()"
           :class="currentNetMenu === menu.id ? 'activeMenu' : ''"
           @click="clickNetMenu(menu)"
-          :key="menu.name"
+          :key="menu.id"
         >
           <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
           {{ menu.name }}
@@ -193,29 +193,29 @@
 
       <transition name="slide-fade" mode="out-in">
         <div :key="currentNetMenu" class="itemContentNet">
-          <span style="margin-bottom: 15px" class="title">{{ netItem.title }}</span>
+          <span style="margin-bottom: 15px" class="title">{{ getNetItemTitle() }}</span>
           <p style="line-height: 2; margin-bottom: 15px" class="description">
-            {{ netItem.description }}
+            {{ getNetItemDescription() }}
           </p>
-          <span class="subTitle">产品优势</span>
+          <span class="subTitle">{{ translations[language].productAdvantage }}</span>
           <ul class="itemContentTag">
-            <li v-for="(item, index) in netItem.advantageList" :key="index">
+            <li v-for="(item, index) in getNetAdvantageList()" :key="index">
               <img :src="item.icon" alt="" />
               <span style="width: fit-content !important;" class="tagTitle">{{ item.name }}</span>
               <span class="tagContent">{{ item.content }}</span>
             </li>
           </ul>
-          <span class="subTitle">应用场景</span>
+          <span class="subTitle">{{ translations[language].applicationScenario }}</span>
           <ul class="netTagUl">
-            <li v-for="(i, d) in netItem.tagList" :key="d">{{ i.name }}</li>
+            <li v-for="(i, d) in getNetTagList()" :key="d">{{ i.name }}</li>
           </ul>
           <div class="twoBtn">
             <div @click="openTalk" class="butStyle">
-              立即咨询
+              {{ translations[language].consultNow }}
               <span style="display: inline-block; margin-left: 5px; color: white">></span>
             </div>
             <div @click="goDetail(netItem.id)" class="lookDetailStyle">
-              查看详情&nbsp;&nbsp;>
+              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
               <span style="display: inline-block; margin-left: 5px;"></span>
             </div>
           </div>
@@ -225,7 +225,7 @@
       <div style="margin-top: 80px; margin-bottom: 50px" class="itemTitle">
         <span class="topText">
           <span></span>
-          <span class="commonTextColor">合作伙伴</span>
+          <span class="commonTextColor">{{ translations[language].partners }}</span>
         </span>
       </div>
       <div
@@ -239,31 +239,31 @@
       <div class="bg"></div>
       <div style="margin-top: 140px" class="itemTitle">
         <span class="topText">
-          <span>算力</span>
+          <span>{{ translations[language].resourcesTitle1 }}</span>
-          <span class="commonTextColor">资源</span>
+          <span class="commonTextColor">{{ translations[language].resourcesTitle2 }}</span>
         </span>
       </div>
       <div class="mapBox">
         <div style="display: flex; justify-content: space-around; width: 100%;">
           <div class="map">
             <span class="mapItem" style="top: 130px; right: 149px">
-              <span class="title">北京</span>
+              <span class="title">{{ translations[language].beijing }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 154px; right: 124px">
-              <span class="title">天津</span>
+              <span class="title">{{ translations[language].tianjin }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 278px; right: 310px">
-              <span class="title">四川</span>
+              <span class="title">{{ translations[language].sichuan }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 291px; right: 136px">
-              <span class="title">上海</span>
+              <span class="title">{{ translations[language].shanghai }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 261px; right: 174px">
-              <span class="title">江苏</span>
+              <span class="title">{{ translations[language].jiangsu }}</span>
               <img src="./img/map.png" alt="" />
             </span>
           </div>
@@ -274,7 +274,7 @@
                   8
                   <span class="mapTag">+</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">算力中心接入</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computeCenters }}</span>
               </div>
             </li>
             <li>
@@ -283,7 +283,7 @@
                   2000
                   <span style="right: -35px" class="mapTag">P+</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">算力</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computingPower }}</span>
               </div>
             </li>
             <li>
@@ -292,7 +292,7 @@
                   10
                   <span style="right: -35px" class="mapTag">ms</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">实时算力响应</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].realTimeResponse }}</span>
               </div>
             </li>
             <li>
@@ -301,7 +301,7 @@
                   100,000
                   <span class="mapTag">+</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">注册用户</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].registeredUsers }}</span>
               </div>
             </li>
           </ul>
@@ -311,7 +311,7 @@
 
     <div class="tiyan">
       <div>
-        <el-input v-model="phone" placeholder="请输入您的手机号" class="custom-input">
+        <el-input v-model="phone" :placeholder="translations[language].phonePlaceholder" class="custom-input">
           <template #append>
             <span
               @click="
@@ -321,7 +321,7 @@
                 })
               "
               class="experience-btn"
-              >立即体验</span
+              >{{ translations[language].experienceNow }}</span
             >
           </template>
         </el-input>
@@ -336,23 +336,23 @@
       :before-close="handleClose"
       width="30%"
     >
-      <span class="title">官方申明</span>
+      <span class="title">{{ translations[language].officialStatement }}</span>
-      <p>尊敬用户：</p>
+      <p>{{ translations[language].dearUser }}：</p>
-      <p>您好~~</p>
+      <p>{{ translations[language].greeting }}</p>
-      <p>本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。</p>
+      <p>{{ translations[language].statement1 }}</p>
       <p>
-        特别说明：<span style="color: #7a82a0 !important;"
+        {{ translations[language].specialNote }}：<span style="color: #7a82a0 !important;"
-          >云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。</span
+          >{{ translations[language].statement2 }}</span
         >
       </p>
-      <p>请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。</p>
+      <p>{{ translations[language].statement3 }}</p>
       <div style="margin-top: 85px" class="footerBox">
         <div class="item">
-          <span style="margin-bottom: 10px">客服热线</span>
+          <span style="margin-bottom: 10px">{{ translations[language].customerService }}</span>
           <span style="color: #7a82a0 !important;">4006150805</span>
         </div>
         <div style="margin-right: 50px" class="item">
-          <span>2025年6月30日</span>
+          <span>{{ translations[language].currentDate }}</span>
         </div>
       </div>
     </el-dialog>
@@ -368,6 +368,8 @@ import { mapState } from "vuex";
 import IndexTwo from "@/views/homePage/mainPage/logoG/indexTwo.vue";
 
 import HomePageSticky from "@/components/HomePageSticky/index.vue";
+// 导入语言管理
+import { languageStore, languageBus } from '@/utils/language'
 
 export default Vue.extend({
   name: "mainPage",
@@ -379,55 +381,195 @@ export default Vue.extend({
       currentBaseMenu: "hot",
       currentNetMenu: "hot",
       currentSuanMenu: 'hot',
-      suanMenu: [
-        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
-        { id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
-        { id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
-        { id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
-      ],
-      baseMenu: [
-        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "computing", name: "计算", icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
-        { id: "storage", name: "存储", icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
-        { id: "database", name: "数据库", icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
-        { id: "container", name: "人脸识别", icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
-      ],
-      netMenu: [
-        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "hlzx", name: "互联网专线", icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
-        { id: "SDWAN", name: "SDWAN", icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
-        { id: "DCI", name: "DCI", icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
-        { id: "AI", name: "AI专线", icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
-      ],
       base: {},
       baseItem: {},
       net: {},
       netItem: {},
       suan: {},
       suanItem: {},
-      // 定义导航项数据，传递给子组件
+      // 从共享状态获取语言
-      stickySections: [
+      language: languageStore.getLanguage(),
-        { title: '云筑企业基座', ref: 'baseSection' },
+      translations: {
-        { title: '智算未来征程', ref: 'suanSection' },
+        zh: {
-        { title: '网织智能经纬', ref: 'netSection' },
+          // Banner 区域
-      ]
+          aiButler: '您身边的AI管家',
+          slogan: '全 球 领 先 的 AI 服 务 运 营 商',
+          product1Name: '4090 裸金属',
+          product2Name: '云资源',
+          month: '台/月',
+          discount: '直降',
+
+          // 基础产品区域
+          baseTitle1: '云筑',
+          baseTitle2: '企业基座',
+          baseSubtitle: '多云融合 让上云更简单',
+
+          // 智算区域
+          suanTitle1: '智算',
+          suanTitle2: '未来征程',
+          suanSubtitle: '多元异构 灵活短租',
+          shortRent: '可短租',
+
+          // 网络区域
+          netTitle1: '网织',
+          netTitle2: '智能经纬',
+          netSubtitle: '云算网融合 让连接更简单',
+          productAdvantage: '产品优势',
+          applicationScenario: '应用场景',
+          partners: '合作伙伴',
+
+          // 资源区域
+          resourcesTitle1: '算力',
+          resourcesTitle2: '资源',
+          beijing: '北京',
+          tianjin: '天津',
+          sichuan: '四川',
+          shanghai: '上海',
+          jiangsu: '江苏',
+          computeCenters: '算力中心接入',
+          computingPower: '算力',
+          realTimeResponse: '实时算力响应',
+          registeredUsers: '注册用户',
+
+          // 按钮文本
+          buyNow: '立即购买',
+          consultNow: '立即咨询',
+          viewDetails: '查看详情',
+          experienceNow: '立即体验',
+          officialDiscount: '官网折扣',
+
+          // 输入框
+          phonePlaceholder: '请输入您的手机号',
+
+          // 弹窗内容
+          officialStatement: '官方申明',
+          dearUser: '尊敬用户',
+          greeting: '您好~~',
+          statement1: '本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。',
+          specialNote: '特别说明',
+          statement2: '云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。',
+          statement3: '请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。',
+          customerService: '客服热线',
+          currentDate: '2025年6月30日',
+
+          // 菜单项
+          hotRecommend: '热门推荐',
+          computing: '计算',
+          storage: '存储',
+          database: '数据库',
+          container: '人脸识别',
+          internetLine: '互联网专线',
+          sdwan: 'SDWAN',
+          dci: 'DCI',
+          aiLine: 'AI专线',
+
+          // 粘性导航
+          stickyBase: '云筑企业基座',
+          stickySuan: '智算未来征程',
+          stickyNet: '网织智能经纬'
+        },
+        en: {
+          // Banner 区域
+          aiButler: 'Your AI Butler',
+          slogan: 'Leading AI Service Operator Worldwide',
+          product1Name: '4090 Bare Metal',
+          product2Name: 'Cloud Resources',
+          month: 'unit/month',
+          discount: 'Off',
+
+          // 基础产品区域
+          baseTitle1: 'Cloud Build',
+          baseTitle2: 'Enterprise Foundation',
+          baseSubtitle: 'Multi-cloud integration makes cloud migration easier',
+
+          // 智算区域
+          suanTitle1: 'Intelligent Computing',
+          suanTitle2: 'Future Journey',
+          suanSubtitle: 'Multi-source heterogeneous Flexible short-term rental',
+          shortRent: 'Short rent available',
+
+          // 网络区域
+          netTitle1: 'Network Weaving',
+          netTitle2: 'Smart Framework',
+          netSubtitle: 'Cloud-computing-network integration makes connection easier',
+          productAdvantage: 'Product Advantages',
+          applicationScenario: 'Application Scenarios',
+          partners: 'Partners',
+
+          // 资源区域
+          resourcesTitle1: 'Computing',
+          resourcesTitle2: 'Resources',
+          beijing: 'Beijing',
+          tianjin: 'Tianjin',
+          sichuan: 'Sichuan',
+          shanghai: 'Shanghai',
+          jiangsu: 'Jiangsu',
+          computeCenters: 'Compute Centers Access',
+          computingPower: 'Computing Power',
+          realTimeResponse: 'Real-time Response',
+          registeredUsers: 'Registered Users',
+
+          // 按钮文本
+          buyNow: 'Buy Now',
+          consultNow: 'Consult Now',
+          viewDetails: 'View Details',
+          experienceNow: 'Experience Now',
+          officialDiscount: 'Official Discount',
+
+          // 输入框
+          phonePlaceholder: 'Please enter your phone number',
+
+          // 弹窗内容
+          officialStatement: 'Official Statement',
+          dearUser: 'Dear User',
+          greeting: 'Hello~~',
+          statement1: 'All product discount activities displayed on this platform are valid and the pricing system strictly follows the principle of transparency.',
+          specialNote: 'Special Note',
+          statement2: 'The prices shown on cloud service product pages are reference prices, and the actual transaction amount shall be subject to the resource list order page.',
+          statement3: 'Please be aware of the above terms and make purchase decisions with confidence. If you have any questions, please contact our official customer service at any time for detailed explanation.',
+          customerService: 'Customer Service',
+          currentDate: 'June 30, 2025',
+
+          // 菜单项
+          hotRecommend: 'Hot Recommend',
+          computing: 'Computing',
+          storage: 'Storage',
+          database: 'Database',
+          container: 'Face Recognition',
+          internetLine: 'Internet Line',
+          sdwan: 'SDWAN',
+          dci: 'DCI',
+          aiLine: 'AI Line',
+
+          // 粘性导航
+          stickyBase: 'Cloud Enterprise Foundation',
+          stickySuan: 'Intelligent Computing Journey',
+          stickyNet: 'Smart Network Framework'
+        }
+      }
     }
   },
+  created() {
+    // 监听语言变化事件
+    languageBus.$on('language-changed', (lang) => {
+      this.language = lang
+    })
+  },
   mounted() {
     // 监听滚动 控制sticky显示隐藏
     document.getElementById("homeOut").addEventListener('scroll', (e) =>{
-
+      if (e.target.scrollTop > 500) {
-      // console.log("滚动条事件",e.target.scrollTop);
+        document.getElementById('sticky').style.display = 'block'
-        if (e.target.scrollTop > 500) {
+      } else {
-          document.getElementById('sticky').style.display = 'block'
+        document.getElementById('sticky').style.display = 'none'
-        } else {
+      }
-          document.getElementById('sticky').style.display = 'none'
-        }
-
     })
     this.initData()
   },
+  beforeDestroy() {
+    // 移除事件监听
+    languageBus.$off('language-changed')
+  },
   computed: {
     ...mapState({
       logoInfoNew: state => state.product.logoInfoNew,
@@ -438,6 +580,120 @@ export default Vue.extend({
     },
   },
   methods: {
+    // 获取粘性导航数据
+    getStickySections() {
+      return [
+        { title: this.translations[this.language].stickyBase, ref: 'baseSection' },
+        { title: this.translations[this.language].stickySuan, ref: 'suanSection' },
+        { title: this.translations[this.language].stickyNet, ref: 'netSection' },
+      ]
+    },
+
+    // 获取基础菜单
+    getBaseMenu() {
+      return [
+        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "computing", name: this.translations[this.language].computing, icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
+        { id: "storage", name: this.translations[this.language].storage, icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
+        { id: "database", name: this.translations[this.language].database, icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
+        { id: "container", name: this.translations[this.language].container, icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
+      ]
+    },
+
+    // 获取智算菜单
+    getSuanMenu() {
+      return [
+        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
+        { id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
+        { id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
+        { id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
+      ]
+    },
+
+    // 获取网络菜单
+    getNetMenu() {
+      return [
+        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "hlzx", name: this.translations[this.language].internetLine, icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
+        { id: "SDWAN", name: this.translations[this.language].sdwan, icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
+        { id: "DCI", name: this.translations[this.language].dci, icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
+        { id: "AI", name: this.translations[this.language].aiLine, icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
+      ]
+    },
+
+    // 获取Banner标题
+    getBannerTitle() {
+      if (this.language === 'en') {
+        // 这里可以根据需要提供英文的banner标题
+        return this.logoInfoNew.home.bannerTitle || ""
+      }
+      return this.logoInfoNew.home.bannerTitle || ""
+    },
+
+    // 获取基础产品标题
+    getBaseItemTitle() {
+      if (this.language === 'en') {
+        // 这里可以根据实际数据结构提供英文标题
+        return this.baseItem.title || ""
+      }
+      return this.baseItem.title || ""
+    },
+
+    // 获取基础产品描述
+    getBaseItemDescription() {
+      if (this.language === 'en') {
+        // 这里可以根据实际数据结构提供英文描述
+        return this.baseItem.description || ""
+      }
+      return this.baseItem.description || ""
+    },
+
+    // 获取基础产品列表
+    getBaseItemList() {
+      // 这里可以处理产品列表的翻译
+      return this.baseItem.list || []
+    },
+
+    // 获取智算产品标题
+    getSuanItemTitle() {
+      if (this.language === 'en') {
+        return this.suanItem.title || ""
+      }
+      return this.suanItem.title || ""
+    },
+
+    // 获取智算产品列表
+    getSuanItemList() {
+      return this.suanItem.list || []
+    },
+
+    // 获取网络产品标题
+    getNetItemTitle() {
+      if (this.language === 'en') {
+        return this.netItem.title || ""
+      }
+      return this.netItem.title || ""
+    },
+
+    // 获取网络产品描述
+    getNetItemDescription() {
+      if (this.language === 'en') {
+        return this.netItem.description || ""
+      }
+      return this.netItem.description || ""
+    },
+
+    // 获取网络产品优势列表
+    getNetAdvantageList() {
+      return this.netItem.advantageList || []
+    },
+
+    // 获取网络产品标签列表
+    getNetTagList() {
+      return this.netItem.tagList || []
+    },
+
     goBaiduFn(item) {
       if (this.loginState) {
         this.$store.commit('setRedirectUrl', item.url)
@@ -507,7 +763,7 @@ export default Vue.extend({
     // 处理来自子组件的导航事件
     handleNavigation(index) {
       console.log('父组件接收到导航事件，索引:', index);
-      const sectionRef = this.stickySections[index]?.ref;
+      const sectionRef = this.getStickySections()[index]?.ref;
       if (sectionRef && this.$refs[sectionRef]) {
         // 使用原生 scrollIntoView 实现平滑滚动
         this.$refs[sectionRef].scrollIntoView({
@@ -515,14 +771,16 @@ export default Vue.extend({
           block: 'start',
           inline: 'start'
         });
-
       }
     }
-  },
+  }
 })
 </script>
 
+
+
 <style scoped lang="scss">
+// 原有的样式保持不变...
 // 添加动画样式
 .slide-fade-enter-active {
   transition: all 0.3s ease;
@@ -1365,7 +1623,3 @@ export default Vue.extend({
 
 }
 </style>
-
-
-
-