防抖
This commit is contained in:
Leo_Ding
parent
f6ece66b1a
commit
9e6da05991
2
.env.dev
2
.env.dev
@ -2,5 +2,5 @@
|
||||
NODE_ENV=development
|
||||
|
||||
# api
|
||||
VITE_API_BASIC="http://10.10.1.30:8888"
|
||||
VITE_API_BASIC="http://10.10.1.11:8888"
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>GxDL算力云</title>
|
||||
<title>FAST亼算云</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
7
src/utils/debounce.js
Normal file
7
src/utils/debounce.js
Normal file
@ -0,0 +1,7 @@
|
||||
export function debounce(func, delay = 500) {
|
||||
let timer;
|
||||
return function (...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => func.apply(this, args), delay);
|
||||
};
|
||||
}
|
||||
@ -199,6 +199,7 @@ import {
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { debounce } from '@/utils/debounce.js'
|
||||
const router = useRouter()
|
||||
// 实例卡片的开关状态
|
||||
const switch1 = ref(true)
|
||||
@ -246,10 +247,14 @@ const fetchUserAssets = () => {
|
||||
// 生成邀请链接
|
||||
const generateInviteLink = () => {
|
||||
// 这里应该是调用API生成邀请链接的逻辑
|
||||
message.success('邀请链接生成成功！')
|
||||
debouncedSubmit()
|
||||
// 实际开发中应该调用API，然后显示生成的链接
|
||||
// const link = await api.generateInviteLink()
|
||||
}
|
||||
const debouncedSubmit = debounce(() => {
|
||||
message.success('邀请链接生成成功！')
|
||||
}, 800)
|
||||
|
||||
|
||||
// 新增：跳转到活动规则页面
|
||||
const goToRules = () => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="gx_layout">
|
||||
<div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header">
|
||||
<div class="logo">GxDL算力云</div>
|
||||
<div class="logo">FAST亼算云</div>
|
||||
</div>
|
||||
<div style="height: 60px;width: 100%;"></div>
|
||||
<div class="gx_layout_content">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</div>
|
||||
<div class="one">
|
||||
<div v-for="item in oneList" style="display: flex;justify-content: center;align-items: center;cursor: pointer;"
|
||||
@click="router.push(item.path)">
|
||||
@click="router.push(item.link_url)">
|
||||
<div style="margin-right: 10px;"><img :src="item.img" alt="" srcset="" width="50" height="50"></div>
|
||||
<div>
|
||||
<h3>{{ item.title }}</h3>
|
||||
@ -179,39 +179,39 @@ const fetchBannerList = async () => {
|
||||
};
|
||||
// 请求轮播
|
||||
const getOneList = async () => {
|
||||
try {
|
||||
const res: any = await getApiOneList();
|
||||
// 处理返回的数据
|
||||
if (res && Array.isArray(res) && res.length > 0) {
|
||||
oneList.value = res;
|
||||
} else {
|
||||
// API返回空数据或无效数据，使用默认图片
|
||||
oneList.value = [{ id: 0, image_url: defaultBanner }];
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('轮播图请求失败:', error);
|
||||
// try {
|
||||
// const res: any = await getApiOneList();
|
||||
// // 处理返回的数据
|
||||
// if (res && Array.isArray(res) && res.length > 0) {
|
||||
// oneList.value = res;
|
||||
// } else {
|
||||
// // API返回空数据或无效数据，使用默认图片
|
||||
// oneList.value = [{ id: 0, image_url: defaultBanner }];
|
||||
// }
|
||||
// } catch (error: any) {
|
||||
// console.error('轮播图请求失败:', error);
|
||||
// 请求失败时使用默认图片
|
||||
oneList.value = [
|
||||
{
|
||||
img: youhuiquan,
|
||||
title: '算力免费领',
|
||||
description: '完成认证/问卷获得算力券',
|
||||
path: '/active/newUser'
|
||||
link_url: '/active/newUser'
|
||||
},
|
||||
{
|
||||
img: yaoqinghaoyou,
|
||||
title: '邀约优算友',
|
||||
description: '邀请好友可获得算力券',
|
||||
path: '/active/invite'
|
||||
link_url: '/active/invite'
|
||||
},
|
||||
{
|
||||
img: goumaijilu,
|
||||
title: '开业重磅福利',
|
||||
description: '购算力，享豪礼',
|
||||
path: '/active/newUser'
|
||||
link_url: '/active/newUser'
|
||||
}
|
||||
]
|
||||
}
|
||||
// }
|
||||
};
|
||||
// 请求GPU列表
|
||||
const getGPUList = async () => {
|
||||
@ -231,17 +231,17 @@ const getAdvantageList = async () => {
|
||||
const res: any = await getAdvantage();
|
||||
const list = res || [];
|
||||
// 给每个 item 添加 img 字段
|
||||
// list.forEach((item: any, index: number) => {
|
||||
// if (index === 0) {
|
||||
// item.img = one;
|
||||
// } else if (index === 1) {
|
||||
// item.img = two;
|
||||
// } else if (index === 2) {
|
||||
// item.img = three;
|
||||
// } else {
|
||||
// item.img = firth;
|
||||
// }
|
||||
// });
|
||||
list.forEach((item: any, index: number) => {
|
||||
if (index === 0) {
|
||||
item.img = one;
|
||||
} else if (index === 1) {
|
||||
item.img = two;
|
||||
} else if (index === 2) {
|
||||
item.img = three;
|
||||
} else {
|
||||
item.img = firth;
|
||||
}
|
||||
});
|
||||
|
||||
advantageList.value = list;
|
||||
} catch (error: any) {
|
||||
|
||||
@ -23,7 +23,15 @@
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-item" v-if="billingType != 'PayOnTime'">
|
||||
<span class="filter-label">租用时长<span style="color: #ff4d4f;margin: 0 2px">*</span>:</span>
|
||||
<div class="filter-content">
|
||||
<a-select ref="select" v-model:value="priceCount" style="width: 300px">
|
||||
<a-select-option v-for="item in priceCounts" :value="item.id">{{ item.label
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- GPU数量 -->
|
||||
<div class="filter-item">
|
||||
<span class="filter-label">GPU数量<span
|
||||
@ -160,6 +168,7 @@ const voucherList = ref<any[]>([])
|
||||
const instanceName = ref('')
|
||||
const checked = ref(false)
|
||||
const totalMoney = ref(0)
|
||||
const priceCount = ref(1)
|
||||
const voucherId = ref('')
|
||||
// 响应式数据
|
||||
const billingType = ref('PayOnTime')
|
||||
@ -204,14 +213,26 @@ async function fetchTotalCost() {
|
||||
const res: any = await getTotalCost({
|
||||
billingMethod: billingType.value,
|
||||
gpuNum: gpuCount.value,
|
||||
host_id: HostId.value
|
||||
host_id: HostId.value,
|
||||
price_count:priceCount.value
|
||||
})
|
||||
totalMoney.value = res.amount
|
||||
computingPowerPoint.value = res.computingPowerPoint
|
||||
}
|
||||
|
||||
const dayList = ref([{ id: 1, label: '1日' }, { id: 2, label: '2日' }, { id: 3, label: '3日' }, { id: 4, label: '4日' }, { id: 5, label: '5日' }, { id: 6, label: '6日' }])
|
||||
const weekList = ref([{ id: 1, label: '1周' }, { id: 2, label: '2周' }, { id: 3, label: '3周' }])
|
||||
const weekMonth = ref([{ id: 1, label: '1个月' }, { id: 2, label: '2个月' }, { id: 3, label: '3个月' }, { id: 3, label: '4个月' }, { id: 3, label: '5个月' }, { id: 3, label: '6个月' }, { id: 3, label: '7个月' }, { id: 3, label: '8个月' }, { id: 3, label: '9个月' }, { id: 3, label: '10个月' }, { id: 3, label: '11个月' }])
|
||||
const priceCounts = computed(() => {
|
||||
if (billingType.value === 'PayOnDay') {
|
||||
return dayList.value
|
||||
} else if (billingType.value === 'PayOnWeek') {
|
||||
return weekList.value
|
||||
} else if (billingType.value === 'PayOnMonth') {
|
||||
return weekMonth.value
|
||||
}
|
||||
})
|
||||
// 监听依赖项变化
|
||||
watch([billingType, gpuCount], () => {
|
||||
watch([billingType, gpuCount,priceCount], () => {
|
||||
fetchTotalCost()
|
||||
getSingleHost()
|
||||
}) // 组件加载时也执行一次
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="gx_layout">
|
||||
<div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header">
|
||||
<div class="logo">GxDL算力云</div>
|
||||
<div class="logo">FAST亼算云</div>
|
||||
<div class="menu">
|
||||
<a-menu v-model:selectedKeys="current" :class="isHome ? 'custom-menu' : ''" mode="horizontal"
|
||||
:items="leftRoutes" @click="({ key }) => handleMenuClick(key)" />
|
||||
|
||||
@ -21,7 +21,7 @@ export default defineConfig({
|
||||
open: true, // 可选：启动时自动打开浏览器
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://10.10.1.34:8888', // 目标服务器的地址
|
||||
target: 'http://10.10.1.11:8888', // 目标服务器的地址
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user