feat(contact): 重构“联系我们”页面及表单交互体验

- 重新设计页面布局，增加顶部横幅及联系方式版块
- 优化在线咨询表单，增加字段并调整样式和验证规则
- 替换旧的提交逻辑为新异步模拟提交，提示更友好
- 移除旧二维码和联系卡片，增加温馨提示信息
- 添加详细样式，提升页面视觉效果和响应式布局
- 更新会员服务联系信息区，增加按钮链接和服务时间
- 会员服务列表使用模拟数据，支持按类型过滤展示
- 登录页左侧风格调整，突出广西决策咨询中心品牌形象
- 修改数值统计及底部版权声明，更新背景渐变颜色和按钮样式

app/pages/contact.vue

@@ -1,228 +1,328 @@
 <template>
-  <div class="mx-auto max-w-screen-xl px-4 py-12">
+  <div class="contact-page">
-    <a-typography-title :level="1" class="!mb-2">联系我们</a-typography-title>
+    <div class="contact-banner">
-    <a-typography-paragraph class="!text-gray-600 !mb-8">
+      <div class="mx-auto max-w-screen-xl px-4 py-16 text-center">
-      填写需求后我们将尽快联系你，为你规划产品套餐、交付开通链路与部署方案（SaaS/私有化）。
+        <h1 class="banner-title">联系我们</h1>
-    </a-typography-paragraph>
+        <p class="banner-desc">广西决策咨询中心期待与您交流合作</p>
+      </div>
+    </div>
 
-    <a-row :gutter="[24, 24]">
+    <div class="mx-auto max-w-screen-xl px-4 py-12">
-      <a-col :xs="24" :lg="14">
+      <a-row :gutter="[48, 48]">
-        <a-card title="需求表单">
+        <!-- 左侧：联系信息 -->
-          <a-form layout="vertical" :model="form" :rules="rules" @finish="onSubmit">
+        <a-col :xs="24" :md="8">
-            <a-form-item label="需求描述" name="need">
+          <div class="contact-info">
-              <a-textarea
+            <h2 class="info-title">联系信息</h2>
-                  v-model:value="form.need"
+
-                  :rows="5"
+            <div class="info-item">
-                  placeholder="例如：参考美宜佳小程序，开发一套连锁便利店点餐/会员/配送小程序；需要商品管理、订单、优惠券、会员积分等功能；门店数量约 50 家；希望 SaaS 部署，1 个月内上线"
+              <div class="info-icon">📍</div>
-              />
+              <div class="info-content">
-            </a-form-item>
+                <div class="info-label">办公地址</div>
+                <div class="info-value">广西·南宁·良庆区 五象大道401号 五象航洋城3号楼</div>
+              </div>
+            </div>
+
+            <div class="info-item">
+              <div class="info-icon">📞</div>
+              <div class="info-content">
+                <div class="info-label">联系电话</div>
+                <div class="info-value">0771-5386339</div>
+              </div>
+            </div>
+
+            <div class="info-item">
+              <div class="info-icon">📧</div>
+              <div class="info-content">
+                <div class="info-label">电子邮箱</div>
+                <div class="info-value">gxjzxzx@126.com</div>
+              </div>
+            </div>
+
+            <div class="info-item">
+              <div class="info-icon">⏰</div>
+              <div class="info-content">
+                <div class="info-label">服务时间</div>
+                <div class="info-value">周一至周五 9:00-17:00</div>
+              </div>
+            </div>
+
+            <div class="info-item">
+              <div class="info-icon">📮</div>
+              <div class="info-content">
+                <div class="info-label">邮政编码</div>
+                <div class="info-value">530200</div>
+              </div>
+            </div>
+
+            <div class="info-divider"></div>
+
+            <div class="social-section">
+              <div class="social-title">关注我们</div>
+              <div class="social-items">
+                <a-tooltip title="微信公众号">
+                  <div class="social-item">📱</div>
+                </a-tooltip>
+              </div>
+            </div>
+          </div>
+        </a-col>
+
+        <!-- 右侧：咨询表单 -->
+        <a-col :xs="24" :md="16">
+          <div class="contact-form-panel">
+            <h2 class="form-title">在线咨询</h2>
+            <p class="form-desc">请填写您的咨询内容，我们将尽快与您联系</p>
+
+            <a-form
+              layout="vertical"
+              :model="form"
+              :rules="rules"
+              class="contact-form"
+            >
               <a-row :gutter="16">
-              <a-col :xs="24" :md="24">
+                <a-col :xs="24" :md="12">
-                <a-form-item label="单位名称" name="company">
-                  <a-input v-model:value="form.company" placeholder="请填写公司名称单位名称" />
-                </a-form-item>
-              </a-col>
-              <a-col :xs="24" :md="24">
-                <a-form-item label="手机号" name="phone">
-                  <a-input v-model:value="form.phone" placeholder="请填写手机号" />
-                </a-form-item>
-              </a-col>
-              <a-col :xs="24" :md="24">
                   <a-form-item label="姓名" name="name">
-                  <a-input v-model:value="form.name" placeholder="请填写联系人姓名" />
+                    <a-input v-model:value="form.name" placeholder="请输入您的姓名" size="large" />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="联系电话" name="phone">
+                    <a-input v-model:value="form.phone" placeholder="请输入联系电话" size="large" />
                   </a-form-item>
                 </a-col>
               </a-row>
 
               <a-row :gutter="16">
                 <a-col :xs="24" :md="12">
-                <a-form-item label="交付方式" name="delivery">
+                  <a-form-item label="单位/组织" name="organization">
-                  <a-select v-model:value="form.delivery" placeholder="请选择">
+                    <a-input v-model:value="form.organization" placeholder="请输入单位或组织名称" size="large" />
-                    <a-select-option value="saas">SaaS（云端）</a-select-option>
+                  </a-form-item>
-                    <a-select-option value="private">私有化部署</a-select-option>
+                </a-col>
-                    <a-select-option value="hybrid">混合部署</a-select-option>
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="咨询类型" name="type">
+                    <a-select v-model:value="form.type" placeholder="请选择咨询类型" size="large">
+                      <a-select-option value="consult">咨询服务</a-select-option>
+                      <a-select-option value="expert">专家申请</a-select-option>
+                      <a-select-option value="member">会员申请</a-select-option>
+                      <a-select-option value="cooperation">商务合作</a-select-option>
+                      <a-select-option value="other">其他</a-select-option>
                     </a-select>
                   </a-form-item>
                 </a-col>
               </a-row>
 
+              <a-form-item label="咨询内容" name="content">
+                <a-textarea
+                  v-model:value="form.content"
+                  :rows="5"
+                  placeholder="请详细描述您的咨询内容..."
+                  :maxlength="1000"
+                  show-count
+                  size="large"
+                />
+              </a-form-item>
+
+              <a-form-item>
                 <a-space>
-              <a-button type="primary" html-type="submit" :loading="submitting">提交</a-button>
+                  <a-button type="primary" size="large" @click="handleSubmit" :loading="submitting">
-              <a-button @click="reset" :disabled="submitting">重置</a-button>
+                    提交咨询
+                  </a-button>
+                  <a-button size="large" @click="handleReset">
+                    重置
+                  </a-button>
                 </a-space>
+              </a-form-item>
             </a-form>
-        </a-card>
-      </a-col>
 
-      <a-col :xs="24" :lg="10">
+            <div class="form-tip">
-        <div class="flex flex-col gap-4">
+              💡 温馨提示：我们将在1-3个工作日内回复您的咨询，如有紧急事项请直接电话联系。
-
-          <!-- 二维码矩阵 -->
-          <a-card :bordered="false" class="shadow-sm">
-            <template #title>
-              <span class="font-semibold text-base">扫码联系 / 关注我们</span>
-            </template>
-            <div class="grid grid-cols-2 gap-4">
-              <!-- 客户经理微信 -->
-              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-blue-200 hover:bg-blue-50/40 transition-colors">
-                <a-image
-                  src="https://developer-1251422153.cos.ap-guangzhou.myqcloud.com/10001/20210519/60e1528c8a0f13a6bc0b537e99bddbb5.png"
-                  alt="客户经理微信二维码"
-                  :width="96"
-                  :height="96"
-                  class="rounded-lg border border-gray-200 object-cover"
-                />
-                <div class="text-center">
-                  <div class="text-sm font-medium text-gray-400">微信客服</div>
             </div>
           </div>
-
-              <!-- 微信公众号 -->
-              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-green-200 hover:bg-green-50/40 transition-colors">
-                <a-image
-                  src="https://oss.wsdns.cn/20260328/72d21dc85f1a47d8a8d6e1f0082b8ce8.jpg?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
-                  alt="微信公众号二维码"
-                  :width="96"
-                  :height="96"
-                  class="rounded-lg border border-gray-200 object-cover"
-                />
-                <div class="text-center">
-                  <div class="text-sm font-medium text-gray-400">微信公众号</div>
-                </div>
-              </div>
-
-              <!-- 小红书 -->
-              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-red-200 hover:bg-red-50/40 transition-colors">
-                <a-image
-                  src="https://oss.wsdns.cn/20260328/fce4bf99a5844baca70f17d4af678293.png?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
-                  alt="小红书二维码"
-                  :width="96"
-                  :height="96"
-                  class="rounded-lg border border-gray-200 object-cover"
-                />
-                <div class="text-center">
-                  <div class="text-sm font-medium text-gray-400">小红书</div>
-                </div>
-              </div>
-
-              <!-- 企业微信 -->
-              <div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-teal-200 hover:bg-teal-50/40 transition-colors">
-                <a-image
-                  src="https://oss.wsdns.cn/20260328/71d4100fea834953b13a1e11903e6e68.png?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
-                  alt="企业微信二维码"
-                  :width="96"
-                  :height="96"
-                  class="rounded-lg border border-gray-200 object-cover"
-                />
-                <div class="text-center">
-                  <div class="text-sm font-medium text-gray-400">企业微信</div>
-                </div>
-              </div>
-            </div>
-
-<!--            <a-alert-->
-<!--              show-icon-->
-<!--              type="info"-->
-<!--              class="mt-4"-->
-<!--              message="如需更快响应，可添加客户经理微信直接沟通。"-->
-<!--            />-->
-          </a-card>
-
-
-          <!-- 联系方式卡片 -->
-          <a-card :bordered="false" class="shadow-sm">
-            <template #title>
-              <span class="font-semibold text-base">联系我们</span>
-            </template>
-
-            <!-- 工作时间 -->
-            <div class="flex items-center gap-3 py-3 border-b border-gray-100">
-              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-green-50 text-green-500 text-xl">🕘</div>
-              <div>
-                <div class="text-xs text-gray-400 mb-0.5">工作时间</div>
-                <div class="text-sm text-gray-700">周一至周六 · 09:00 – 18:00</div>
-              </div>
-            </div>
-
-            <!-- 邮箱 -->
-            <div class="flex items-center gap-3 py-3 border-b border-gray-100">
-              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-purple-50 text-purple-500 text-xl">✉️</div>
-              <div>
-                <div class="text-xs text-gray-400 mb-0.5">商务邮箱</div>
-                <a href="mailto:hi@websoft.top" class="text-sm text-gray-700 hover:text-blue-600 transition-colors">170083662@qq.com</a>
-              </div>
-            </div>
-
-            <!-- 地址 -->
-<!--            <div class="flex items-center gap-3 py-3">-->
-<!--              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-orange-50 text-orange-500 text-xl">📍</div>-->
-<!--              <div>-->
-<!--                <div class="text-xs text-gray-400 mb-0.5">公司地址</div>-->
-<!--                <div class="text-sm text-gray-700">广东省广州市天河区</div>-->
-<!--              </div>-->
-<!--            </div>-->
-          </a-card>
-        </div>
         </a-col>
       </a-row>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { usePageSeo } from '@/composables/usePageSeo'
-import { submitContactLead } from '@/api/cms/cmsContactLead'
 
-usePageSeo({
+useHead({ title: '联系我们 - 广西决策咨询网' })
-  title: '联系我们 - 预约演示 / 私有化部署 / 产品开通',
+
-  description: '预约演示与咨询：SaaS 平台、私有化部署、模板/插件市场与支付即开通业务链路。',
+const submitting = ref(false)
-  path: '/contact'
-})
 
 const form = reactive({
   name: '',
   phone: '',
-  company: '',
+  organization: '',
-  delivery: undefined as undefined | 'saas' | 'private' | 'hybrid',
+  type: undefined as string | undefined,
-  need: ''
+  content: '',
 })
 
 const rules = {
-  name: [{ required: true, message: '请填写姓名' }],
+  name: [{ required: true, message: '请输入您的姓名' }],
-  phone: [
+  phone: [{ required: true, message: '请输入联系电话' }],
-    { required: true, message: '请填写手机号' },
+  content: [{ required: true, message: '请输入咨询内容' }],
-    { pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号' }
-  ],
-  company: [{ required: true, message: '请填写公司/团队' }],
-  need: [{ required: true, message: '请填写需求描述' }]
 }
 
-const submitting = ref(false)
+async function handleSubmit() {
-
+  if (!form.name || !form.phone || !form.content) {
-async function onSubmit() {
+    message.warning('请填写必填项')
-  try {
+    return
+  }
   submitting.value = true
-    await submitContactLead({
+  try {
-      ...form,
+    // TODO: 接入实际API提交咨询
-      source: typeof window !== 'undefined' ? window.location.href : '/contact'
+    // await submitContact(form)
-    })
+    await new Promise(resolve => setTimeout(resolve, 500))
-    message.success('提交成功！我们会在 1 个工作日内联系您 🎉')
+    message.success('咨询已提交，我们会尽快与您联系！')
-    reset()
+    handleReset()
-  }
+  } catch (e: any) {
-  catch (err: any) {
+    message.error(e?.message || '提交失败')
-    message.error(err?.message || '提交失败，请稍后重试或直接联系我们')
+  } finally {
-  }
-  finally {
     submitting.value = false
   }
 }
 
-function reset() {
+function handleReset() {
-  form.name = ''
+  Object.assign(form, {
-  form.phone = ''
+    name: '',
-  form.company = ''
+    phone: '',
-  form.delivery = undefined
+    organization: '',
-  form.need = ''
+    type: undefined,
+    content: '',
+  })
 }
 </script>
 
+<style scoped>
+.contact-banner {
+  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
+  color: #fff;
+}
+
+.banner-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 12px;
+}
+
+.banner-desc {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.contact-info {
+  background: #fff;
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  height: 100%;
+}
+
+.info-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 28px;
+}
+
+.info-item {
+  display: flex;
+  gap: 14px;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.info-icon {
+  font-size: 22px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.info-content {
+  flex: 1;
+}
+
+.info-label {
+  font-size: 13px;
+  color: #9ca3af;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 15px;
+  color: #374151;
+  line-height: 1.6;
+}
+
+.info-divider {
+  height: 1px;
+  background: #f0f0f0;
+  margin: 24px 0;
+}
+
+.social-section {}
+
+.social-title {
+  font-size: 14px;
+  color: #6b7280;
+  margin-bottom: 12px;
+}
+
+.social-items {
+  display: flex;
+  gap: 12px;
+}
+
+.social-item {
+  width: 40px;
+  height: 40px;
+  background: #f3f4f6;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.social-item:hover {
+  background: #e5e7eb;
+}
+
+.contact-form-panel {
+  background: #fff;
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.form-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 8px;
+}
+
+.form-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin: 0 0 28px;
+}
+
+.contact-form {}
+
+.form-tip {
+  margin-top: 16px;
+  padding: 14px 16px;
+  background: #eff6ff;
+  border-radius: 10px;
+  font-size: 13px;
+  color: #3b82f6;
+  line-height: 1.6;
+}
+</style>

app/pages/login.vue

@@ -12,36 +12,36 @@
       <div class="left-content">
         <!-- 品牌 logo -->
         <div class="brand">
-          <img src="/logo.png" class="brand-logo-img" alt="Websopy" />
+          <div class="brand-logo-text">决策咨询网</div>
-          <div class="brand-site-name">websopy</div>
+          <div class="brand-site-name">GX Decision Consulting</div>
         </div>
 
         <!-- 中央文案 -->
         <div class="hero-text">
-          <div class="hero-tag">{{ $t('login.aiPlatform') }}</div>
+          <div class="hero-tag">广西决策咨询中心</div>
-          <h1 class="hero-title">{{ config?.loginTitle || $t('login.buildNextGen') }}</h1>
+          <h1 class="hero-title">汇聚专家智慧<br>服务政府决策</h1>
-          <p class="hero-desc">{{ $t('login.lowcodeAccess') }}<br />{{ $t('login.fromIdeaToOnline') }}</p>
+          <p class="hero-desc">广西决策咨询网是自治区党委政府决策咨询服务的重要平台<br>汇聚各领域专家学者，提供权威决策咨询服务</p>
           <div class="hero-stats">
             <div class="stat-item">
-              <span class="stat-num">10000+</span>
+              <span class="stat-num">200+</span>
-              <span class="stat-label">{{ $t('login.developers') }}</span>
+              <span class="stat-label">认证专家</span>
             </div>
             <div class="stat-divider" />
             <div class="stat-item">
               <span class="stat-num">500+</span>
-              <span class="stat-label">{{ $t('login.aiApps') }}</span>
+              <span class="stat-label">会员单位</span>
             </div>
             <div class="stat-divider" />
             <div class="stat-item">
-              <span class="stat-num">99.9%</span>
+              <span class="stat-num">1000+</span>
-              <span class="stat-label">{{ $t('login.uptime') }}</span>
+              <span class="stat-label">建言献策</span>
             </div>
           </div>
         </div>
 
         <!-- 底部 -->
         <div class="left-footer">
-          <span>{{ $t('login.copyright') }}</span>
+          <span>© {{ new Date().getFullYear() }} 广西决策咨询中心 保留所有权利</span>
         </div>
       </div>
     </div>
@@ -445,7 +445,7 @@ onUnmounted(() => {
 .login-left {
   flex: 1;
   position: relative;
-  background: linear-gradient(150deg, #0f0c29 0%, #1a1a4e 30%, #24243e 60%, #302b63 100%);
+  background: linear-gradient(150deg, #0d1b2a 0%, #1e3a5f 30%, #2563eb 60%, #1e3a5f 100%);
   background-size: cover;
   background-position: center;
   display: flex;
@@ -457,7 +457,7 @@ onUnmounted(() => {
 .left-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(150deg, rgba(10, 10, 40, 0.75) 0%, rgba(30, 20, 80, 0.55) 100%);
+  background: linear-gradient(150deg, rgba(13, 27, 42, 0.75) 0%, rgba(30, 58, 95, 0.55) 100%);
 }
 
 /* 装饰网格 */
@@ -480,7 +480,7 @@ onUnmounted(() => {
 .dot-1 {
   width: 420px;
   height: 420px;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 65%);
+  background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, transparent 65%);
   top: -120px;
   right: -80px;
 }
@@ -547,6 +547,14 @@ onUnmounted(() => {
   width: auto;
   object-fit: contain;
 }
+/* 品牌文字 logo */
+.brand-logo-text {
+  font-size: 22px;
+  font-weight: 800;
+  color: #fff;
+  letter-spacing: 0.04em;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
 /* site-name 渐变文字，与导航栏保持一致 */
 .brand-site-name {
   color: #fff;
@@ -863,7 +871,7 @@ onUnmounted(() => {
 
 /* 提交按钮 */
 .submit-btn.ant-btn-primary {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%) !important;
   border: none !important;
   border-radius: 10px !important;
   height: 48px !important;

app/pages/membership/index.vue

@@ -38,10 +38,25 @@
     <div class="contact-section">
       <h2>联系我们</h2>
       <p>如有疑问或需要帮助，请随时与我们联系</p>
+      <a-space size="large" direction="vertical">
         <a-space size="large">
-        <span>📞 联系电话：0771-1234567</span>
+          <span>📞</span>
-        <span>📧 邮箱：service@jczxw.org</span>
+          <span>联系电话：0771-5386339</span>
         </a-space>
+        <a-space size="large">
+          <span>📧</span>
+          <span>咨询邮箱：gxjzxzx@126.com</span>
+        </a-space>
+        <a-space size="large">
+          <span>⏰</span>
+          <span>服务时间：周一至周五 9:00-17:00</span>
+        </a-space>
+      </a-space>
+      <div style="margin-top: 20px;">
+        <a-button type="primary" size="large" @click="navigateTo('/about/consultation')">
+          了解咨询服务详情 →
+        </a-button>
+      </div>
     </div>
   </div>
 </template>
@@ -51,16 +66,69 @@ import { message } from 'ant-design-vue'
 
 useHead({ title: '会员服务 - 决策咨询网' })
 
-const router = useRouter()
-
 const activeType = ref((useRoute().query.type as string) || '')
 const loading = ref(false)
 const services = ref<any[]>([])
 
+const mockServices = [
+  {
+    id: 1,
+    type: 'consult',
+    icon: '🏢',
+    title: '企业决策咨询',
+    description: '为企业提供战略规划、政策解读、市场分析等专业决策咨询服务，助力企业把握发展机遇。',
+    tags: ['企业咨询', '战略规划'],
+  },
+  {
+    id: 2,
+    type: 'service',
+    icon: '📊',
+    title: '专题研究报告',
+    description: '提供行业专题研究、政策分析报告、区域发展研究等专业研究成果。',
+    tags: ['研究报告', '深度分析'],
+  },
+  {
+    id: 3,
+    type: 'consult',
+    icon: '🎯',
+    title: '政策合规指导',
+    description: '协助企业理解最新政策法规，确保企业运营符合政策要求，规避合规风险。',
+    tags: ['政策合规', '风险规避'],
+  },
+  {
+    id: 4,
+    type: 'service',
+    icon: '📋',
+    title: '专家论证会',
+    description: '组织相关领域专家为企业重大决策提供专业论证和咨询建议。',
+    tags: ['专家论证', '专业咨询'],
+  },
+  {
+    id: 5,
+    type: 'service',
+    icon: '🌐',
+    title: '数据服务',
+    description: '提供决策所需的经济数据、行业数据、区域数据等专业数据服务（仅限会员）。',
+    tags: ['数据服务', '会员专享'],
+  },
+  {
+    id: 6,
+    type: 'consult',
+    icon: '💼',
+    title: '培训与讲座',
+    description: '为企业及个人提供政策解读、决策方法等专题培训和讲座服务。',
+    tags: ['培训讲座', '能力提升'],
+  },
+]
+
 async function loadServices() {
   loading.value = true
   try {
-    // TODO: 接入实际API
+    // TODO: 接入实际API获取会员服务列表
+    // 暂时使用模拟数据
+    await new Promise(resolve => setTimeout(resolve, 300))
+    const type = activeType.value
+    services.value = type ? mockServices.filter(s => s.type === type) : mockServices
   } catch (e: any) {
     message.error('加载失败')
   } finally {
@@ -73,7 +141,7 @@ function handleTypeChange() {
 }
 
 function handleView(service: any) {
-  router.push(`/membership/${service.id}`)
+  message.info(`服务「${service.title}」详情页开发中，请联系工作人员获取更多信息`)
 }
 
 onMounted(() => {