main #34
@ -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: "资源概览",
|
||||
|
||||
36
f/web-kboss/src/utils/language.js
Normal file
36
f/web-kboss/src/utils/language.js
Normal file
@ -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()
|
||||
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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">
|
||||
<!-- <el-option label="全部" value="all" /> -->
|
||||
<el-option label="订单号" value="id"/>
|
||||
<el-option label="订单日期" value="order_date"/>
|
||||
<el-option label="订单状态:未支付" value="0"/>
|
||||
<el-option label="订单状态:已支付" value="1"/>
|
||||
<el-option label="订单状态:已取消" value="3"/>
|
||||
size="small">
|
||||
<el-option label="订单号" value="id" />
|
||||
<el-option label="订单日期" value="order_date" />
|
||||
<el-option label="订单状态:未支付" value="0" />
|
||||
<el-option label="订单状态:已支付" value="1" />
|
||||
<el-option label="订单状态:已取消" value="3" />
|
||||
</el-select>
|
||||
<el-input size="small" v-show="this.select=='id'" placeholder="请输入内容" class="input-with-select"
|
||||
@input="input" v-model="searchValue" clearable></el-input>
|
||||
<el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select"
|
||||
@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 日"
|
||||
value-format="yyyy-MM-dd">
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" 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;">
|
||||
<el-row :span="24">
|
||||
<el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center">
|
||||
<el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
|
||||
width="130px" size="small">
|
||||
<!-- <el-option label="全部" value="all" /> -->
|
||||
<el-option label="订单号" value="id"/>
|
||||
<el-option label="订单日期" value="order_date"/>
|
||||
<el-option label="订单状态:未支付" value="0"/>
|
||||
<el-option label="订单状态:已支付" value="1"/>
|
||||
<el-option label="订单状态:已取消" value="3"/>
|
||||
<!-- PC端头部 -->
|
||||
<el-card class="pcCard" v-else>
|
||||
<div class="header-container">
|
||||
<div class="search-group">
|
||||
<el-select v-model="select" filterable @change="selectSearch" class="search-select" placeholder="请选择"
|
||||
size="small" style="width: 100px">
|
||||
<el-option label="订单号" value="id" />
|
||||
<el-option label="订单日期" value="order_date" />
|
||||
<!-- <el-option label="订单状态:未支付" value="0" />
|
||||
<el-option label="订单状态:已支付" value="1" />
|
||||
<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"
|
||||
clearable></el-input>
|
||||
<div v-if="select=='order_date'">
|
||||
<div style="display:flex;margin-left:10px;">
|
||||
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
|
||||
<el-input size="small" v-show="select == 'id'" placeholder="请输入内容" class="search-input" @input="input"
|
||||
v-model="searchValue" clearable style="width: 180px; margin-left: 10px">
|
||||
</el-input>
|
||||
|
||||
<div v-if="select == 'order_date'" class="date-picker-container">
|
||||
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
|
||||
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"
|
||||
@click="set">重置
|
||||
</el-button>
|
||||
<span
|
||||
style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
|
||||
<div style="width: 250px;line-height: 36px">
|
||||
<el-skeleton animated v-if="all_price_show" rows="2"/>
|
||||
<span v-else> ¥ {{ all_price }}</span>
|
||||
</div>
|
||||
<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_discount || '0.00' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 类型筛选 -->
|
||||
<div class="type-filter">
|
||||
<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-column min-width="200" align="center" header-align="center" prop="id"
|
||||
label="订单号"></el-table-column>
|
||||
<el-table-column min-width="80" align="center" header-align="center" label="原价">
|
||||
<el-table border :data="tableData" class="table" height="calc(100vh - 264px)" v-loading="all_price_show">
|
||||
<el-table-column label="序号" width="180">
|
||||
<template slot-scope="scope">
|
||||
<!-- <div style="padding-left: 35px">-->
|
||||
￥{{ scope.row.countprice }}
|
||||
<!-- </div>-->
|
||||
{{ (pagination.page - 1) * pagination.size + scope.$index + 1 }}
|
||||
</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="orderTypeMap(scope.row.business_op).type">
|
||||
{{ orderTypeMap(scope.row.business_op).text }}
|
||||
<el-tag :style="{ padding: '0 8px' }" :type="getOrderTypeConfig(scope.row.business_op).type">
|
||||
{{ getOrderTypeConfig(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"
|
||||
label="订单日期"></el-table-column>
|
||||
<el-table-column min-width="150" align="center" header-align="center" label="订单状态">
|
||||
<el-table-column 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">
|
||||
{{ getResult(scope.row.order_status) }}
|
||||
</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 :style="{ padding: '0 5px' }" :type="getOrderStatusConfig(scope.row.order_status).tagType" effect="dark">
|
||||
{{ getOrderStatusConfig(scope.row.order_status).text }}
|
||||
</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)"
|
||||
style="padding: 8px 15px">去支付
|
||||
<el-button size="small" v-if="scope.row.order_status === '0'" type="primary"
|
||||
@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,//金额显示骨架屏
|
||||
// 获取用户代理字P串
|
||||
pagination: {
|
||||
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) {
|
||||
case 'BUY_REVERSE':
|
||||
// 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"};
|
||||
}
|
||||
// 获取订单类型配置
|
||||
getOrderTypeConfig(type) {
|
||||
return this.orderTypes[type] || { text: "-", type: "primary", buttonType: "" };
|
||||
},
|
||||
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)
|
||||
},
|
||||
input(e) {//input事件
|
||||
this.searchValue = e
|
||||
this.getOrder(e)
|
||||
},
|
||||
orderDetails(row) { //查看订单详情
|
||||
this.$router.push({name: "orderDetil", query: {id: row.id}});
|
||||
},
|
||||
getResult(data) {
|
||||
switch (data) {
|
||||
|
||||
// 获取订单状态文本
|
||||
getOrderStatusText(status) {
|
||||
switch (status) {
|
||||
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>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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 {
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.input-with-select {
|
||||
width: 60%;
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
// height: 60px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.searchSelect {
|
||||
width: 150px;
|
||||
.search-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-select {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.searchSelectIcon {
|
||||
width: 30px;
|
||||
.search-input {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.date-picker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orderList {
|
||||
margin-top: 5px;
|
||||
height: calc(100vh - 180px);
|
||||
.filter-status-pc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 8px;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
.filter-label {
|
||||
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>
|
||||
.el-table .el-table__header {
|
||||
|
||||
.page {
|
||||
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>
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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 class="commonTextColor">企业基座</span>
|
||||
<span>{{ translations[language].baseTitle1 }}</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>
|
||||
<p style="line-height: 2" class="description">{{ baseItem.description }}</p>
|
||||
<span class="title">{{ getBaseItemTitle() }}</span>
|
||||
<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">
|
||||
查看详情 >
|
||||
{{ translations[language].viewDetails }} >
|
||||
<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 class="commonTextColor">未来征程</span>
|
||||
<span>{{ translations[language].suanTitle1 }}</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">
|
||||
查看详情 >
|
||||
{{ translations[language].viewDetails }} >
|
||||
<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 class="commonTextColor">智能经纬</span>
|
||||
<span>{{ translations[language].netTitle1 }}</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">
|
||||
查看详情 >
|
||||
{{ translations[language].viewDetails }} >
|
||||
<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 class="commonTextColor">资源</span>
|
||||
<span>{{ translations[language].resourcesTitle1 }}</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>
|
||||
<p>尊敬用户：</p>
|
||||
<p>您好~~</p>
|
||||
<p>本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。</p>
|
||||
<span class="title">{{ translations[language].officialStatement }}</span>
|
||||
<p>{{ translations[language].dearUser }}：</p>
|
||||
<p>{{ translations[language].greeting }}</p>
|
||||
<p>{{ translations[language].statement1 }}</p>
|
||||
<p>
|
||||
特别说明：<span style="color: #7a82a0 !important;"
|
||||
>云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。</span
|
||||
{{ translations[language].specialNote }}：<span style="color: #7a82a0 !important;"
|
||||
>{{ 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: [
|
||||
{ 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'
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 原有的样式保持不变...
|
||||
// 添加动画样式
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
@ -1365,7 +1623,3 @@ export default Vue.extend({
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user