From a14b81318b9428fcfd1b3d12e9719dad53927409 Mon Sep 17 00:00:00 2001 From: hrx <18603305412@163.com> Date: Mon, 29 Sep 2025 18:01:09 +0800 Subject: [PATCH] uptada --- f/web-kboss/src/router/index.js | 2 +- f/web-kboss/src/utils/language.js | 36 ++ .../src/views/customer/orderDetil/index.vue | 3 +- .../views/customer/orderManagement/index.vue | 134 +++-- .../homePage/components/topBox/index.vue | 24 +- .../src/views/homePage/mainPage/index.vue | 468 ++++++++++++++---- 6 files changed, 495 insertions(+), 172 deletions(-) create mode 100644 f/web-kboss/src/utils/language.js diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js index bfd47cd..0fa9c7a 100644 --- a/f/web-kboss/src/router/index.js +++ b/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: "资源概览", diff --git a/f/web-kboss/src/utils/language.js b/f/web-kboss/src/utils/language.js new file mode 100644 index 0000000..659f073 --- /dev/null +++ b/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() diff --git a/f/web-kboss/src/views/customer/orderDetil/index.vue b/f/web-kboss/src/views/customer/orderDetil/index.vue index 842dca9..41c12e9 100644 --- a/f/web-kboss/src/views/customer/orderDetil/index.vue +++ b/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; + } } diff --git a/f/web-kboss/src/views/customer/orderManagement/index.vue b/f/web-kboss/src/views/customer/orderManagement/index.vue index 38199e4..a1b9a1f 100644 --- a/f/web-kboss/src/views/customer/orderManagement/index.vue +++ b/f/web-kboss/src/views/customer/orderManagement/index.vue @@ -5,25 +5,25 @@ + size="small"> - - - - - + + + + + + - + -
+
+ start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
@@ -41,34 +41,32 @@ + width="130px" size="small"> - - - - - + + + + + - -
+ +
+ start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
重置 + @click="set">重置 支付总金额: -
- - ¥ {{ all_price }} -
+
+ + ¥ {{ all_price }} +
@@ -76,23 +74,31 @@ - - - + + + + + + + + + + - + - + - + - - + + + + + +
+ + +
- diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue index 5c059cc..838f0d6 100644 --- a/f/web-kboss/src/views/homePage/components/topBox/index.vue +++ b/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'); - if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) { - this.language = savedLanguage; - } + // 监听语言变化事件 + languageBus.$on('language-changed', (lang) => { + this.language = lang + }) }, 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'; - localStorage.setItem('language', this.language); + const newLanguage = this.language === 'zh' ? 'en' : 'zh'; + languageStore.setLanguage(newLanguage) }, // 初始化Logo信息 init() { diff --git a/f/web-kboss/src/views/homePage/mainPage/index.vue b/f/web-kboss/src/views/homePage/mainPage/index.vue index 243e30f..f6c0ce9 100644 --- a/f/web-kboss/src/views/homePage/mainPage/index.vue +++ b/f/web-kboss/src/views/homePage/mainPage/index.vue @@ -3,7 +3,7 @@ - {{ logoInfoNew.home.bannerTitle || "" }} + {{ getBannerTitle() }} - 您身边的AI管家 + {{ translations[language].aiButler }}
    -
  • 全 球 领 先 的 AI 服 务 运 营 商
    • +
  • {{ translations[language].slogan }}
- 4090 裸金属 + {{ translations[language].product1Name }} ￥ 6000 - /台/月 + /{{ translations[language].month }} - 云资源 + {{ translations[language].product2Name }} - 直降 + {{ translations[language].discount }} 20% @@ -50,18 +50,18 @@
- 云筑 - 企业基座 + {{ translations[language].baseTitle1 }} + {{ translations[language].baseTitle2 }} - 多云融合 让上云更简单 + {{ translations[language].baseSubtitle }}
  • {{ menu.name }} @@ -74,10 +74,10 @@ :style="{ backgroundImage: 'url(' + baseItem.bgImgUrl + ')' }" class="itemContent" > - {{ baseItem.title }} -

    {{ baseItem.description }}

    + {{ getBaseItemTitle() }} +

    {{ getBaseItemDescription() }}

      -
    • +
    • - 立即购买 + {{ translations[language].buyNow }} >
      - 查看详情  > + {{ translations[language].viewDetails }}  >
      - 官网折扣 + {{ translations[language].officialDiscount }} {{ baseItem.discount }}折
@@ -115,18 +115,18 @@
- 智算 - 未来征程 + {{ translations[language].suanTitle1 }} + {{ translations[language].suanTitle2 }} - 多元异构 灵活短租 + {{ translations[language].suanSubtitle }}
@@ -311,7 +311,7 @@
- + @@ -336,23 +336,23 @@ :before-close="handleClose" width="30%" > - 官方申明 -

尊敬用户：

-

您好~~

-

本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。

+ {{ translations[language].officialStatement }} +

{{ translations[language].dearUser }}：

+

{{ translations[language].greeting }}

+

{{ translations[language].statement1 }}

- 特别说明：云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。{{ translations[language].statement2 }}

-

请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。

+

{{ translations[language].statement3 }}

- 客服热线 + {{ translations[language].customerService }} 4006150805
- 2025年6月30日 + {{ translations[language].currentDate }}
@@ -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: [ - { title: '云筑企业基座', ref: 'baseSection' }, - { title: '智算未来征程', ref: 'suanSection' }, - { title: '网织智能经纬', ref: 'netSection' }, - ] + // 从共享状态获取语言 + language: languageStore.getLanguage(), + translations: { + zh: { + // 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) =>{ - - // console.log("滚动条事件",e.target.scrollTop); - if (e.target.scrollTop > 500) { - document.getElementById('sticky').style.display = 'block' - } else { - document.getElementById('sticky').style.display = 'none' - } - + if (e.target.scrollTop > 500) { + document.getElementById('sticky').style.display = 'block' + } 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' }); - } } - }, + } }) + + - - - -