Browse Source

feat(合作伙伴模块): 实现动态获取合作伙伴数据功能

- 移除静态数据,改为从API动态获取合作伙伴列表
- 添加加载状态显示
- 更新模板以匹配新的数据结构
前端-胡立永 1 week ago
parent
commit
9b32ff930b
1 changed files with 31 additions and 35 deletions
  1. +31
    -35
      src/components/about/PartnersModule.vue

+ 31
- 35
src/components/about/PartnersModule.vue View File

@ -1,40 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { queryPartnerList, type PartnerItem } from '@/api';
const { t } = useI18n(); const { t } = useI18n();
// //
const partners = ref([
{
id: 1,
name: 'ABC区块链基金会',
description: '专注于区块链技术发展和应用推广的非营利组织,为MOSE提供技术支持和生态扩展。',
logo: '/LOGO.png',
url: 'https://example.com/partner1'
},
{
id: 2,
name: 'DEF科技集团',
description: '全球领先的科技集团,与MOSE共同推进区块链在企业级应用的落地和推广。',
logo: '/LOGO.png',
url: 'https://example.com/partner2'
},
{
id: 3,
name: 'GHI金融服务',
description: '创新型金融科技公司,与MOSE合作开发基于区块链的金融产品和服务。',
logo: '/LOGO.png',
url: 'https://example.com/partner3'
},
{
id: 4,
name: 'JKL研究院',
description: '专注于密码学和分布式系统研究的学术机构,为MOSE提供理论研究支持。',
logo: '/LOGO.png',
url: 'https://example.com/partner4'
const partners = ref<PartnerItem[]>([]);
const loading = ref(false);
//
const fetchPartnerList = async () => {
try {
loading.value = true;
const data = await queryPartnerList();
partners.value = data;
} catch (error) {
console.error('获取合作伙伴列表数据失败:', error);
} finally {
loading.value = false;
} }
]);
};
//
onMounted(() => {
fetchPartnerList();
});
</script> </script>
<template> <template>
@ -44,7 +35,12 @@ const partners = ref([
{{ t('about.partners.title') }} {{ t('about.partners.title') }}
</h2> </h2>
<div class="space-y-8">
<!-- 加载状态 -->
<div v-if="loading" class="flex justify-center py-10">
<div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-primary"></div>
</div>
<div v-else class="space-y-8">
<div <div
v-for="(partner, index) in partners" v-for="(partner, index) in partners"
:key="partner.id" :key="partner.id"
@ -57,15 +53,15 @@ const partners = ref([
> >
<!-- 合作伙伴Logo --> <!-- 合作伙伴Logo -->
<div class="md:w-1/3 p-8 flex items-center justify-center bg-background-light"> <div class="md:w-1/3 p-8 flex items-center justify-center bg-background-light">
<img :src="partner.logo" :alt="partner.name" class="max-w-full max-h-24 object-contain" />
<img :src="partner.image" :alt="partner.title" class="max-w-full max-h-24 object-contain" />
</div> </div>
<!-- 合作伙伴信息 --> <!-- 合作伙伴信息 -->
<div class="md:w-2/3 p-6"> <div class="md:w-2/3 p-6">
<h3 class="text-xl font-bold text-text mb-3">{{ partner.name }}</h3>
<p class="text-text-secondary mb-4">{{ partner.description }}</p>
<h3 class="text-xl font-bold text-text mb-3">{{ partner.title }}</h3>
<p class="text-text-secondary mb-4" v-html="partner.description"></p>
<a <a
:href="partner.url"
href="#"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="inline-flex items-center text-primary-light hover:text-primary-dark transition-colors" class="inline-flex items-center text-primary-light hover:text-primary-dark transition-colors"


Loading…
Cancel
Save