hulai-website/pages/contact.vue

<template>
  <div class="page-contact">
    <LayoutPageHero
      :title="seo.h1"
      subtitle="选择最方便的方式联系我们"
      :breadcrumbs="[{ text: '联系我们' }]"
    />

    <!-- TL;DR -->
    <section class="page-tldr" aria-label="联系我们摘要">
      <div class="container">
        <div class="page-tldr-inner">
          <p>联系呼籁旅行：微信扫码加客服，或拨打电话咨询。定制师工作日2小时内回复，节假日24小时内回复。预订旺季行程（7月）建议提前2-3个月联系。</p>
        </div>
      </div>
    </section>

    <!-- 主要联系方式：微信 + 电话 -->
    <section class="section">
      <div class="container">
        <div class="contact-primary">
          <!-- 微信客服 -->
          <div class="contact-wechat">
            <span class="contact-badge">推荐</span>
            <h2 class="contact-title">微信客服</h2>
            <p class="contact-desc">添加微信，定制师一对一沟通行程需求</p>
            <CommonQRCodeBlock
              v-if="wechatChannel"
              :image="wechatChannel.qrImage"
              label="扫码添加微信"
              size="large"
            />
          </div>
          <!-- 电话 -->
          <div class="contact-phone" v-if="phoneChannel">
            <h2 class="contact-title">电话咨询</h2>
            <p class="contact-phone-number">{{ phoneChannel.value }}</p>
            <p class="contact-desc">{{ phoneChannel.description }}</p>
          </div>
        </div>

        <!-- 其他联系方式 -->
        <div class="contact-secondary">
          <div v-for="ch in secondaryChannels" :key="ch.type" class="contact-info-item">
            <h3 class="contact-info-label">{{ ch.label }}</h3>
            <p class="contact-info-value">{{ ch.value }}</p>
            <p v-if="ch.description" class="contact-info-desc">{{ ch.description }}</p>
          </div>
        </div>

        <!-- 安全提示 -->
        <div class="contact-security">
          <p>{{ contact.securityNotice }}</p>
        </div>
      </div>
    </section>

    <!-- 长辈定制提示 -->
    <section class="section section--gray">
      <div class="container" style="max-width: 640px; text-align: center;">
        <p style="font-size: 15px; color: #5a6b5e; line-height: 1.8;">想给爸妈安排一趟草原旅行？联系定制师时告知「牵手草原」长辈行程，我们会根据长辈的身体状况和偏好，定制节奏更缓、住宿更舒适的专属方案。也支持爸妈和朋友一起组团出发。</p>
      </div>
    </section>

    <!-- 内链闭环 -->
    <CommonSectionCTA
      title="还有疑问？"
      description="查看常见问题的详细解答"
      :links="[{ to: '/faq', text: '查看呼伦贝尔亲子游常见问答' }]"
      bg="gray"
    />
  </div>
</template>

<script setup>
import contact from '~/data/contact.json'
import brand from '~/data/brand.json'
import { useOrganizationSchema, useBreadcrumbSchema, useContactPageSchema } from '~/composables/useJsonLd'

const visibleChannels = contact.channels.filter(ch => !ch.hidden)
const wechatChannel = visibleChannels.find(ch => ch.type === 'wechat')
const phoneChannel = visibleChannels.find(ch => ch.type === 'phone')
const secondaryChannels = visibleChannels.filter(ch => ch.type !== 'wechat' && ch.type !== 'phone')

const seo = useSEO('contact')
useOrganizationSchema(brand, contact)
useContactPageSchema(brand, contact)
useBreadcrumbSchema([
  { text: '首页', to: '/' },
  { text: '联系我们' },
])
</script>

<style lang="less" scoped>
.contact-primary {
  display: flex;
  gap: @space-2xl;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto @space-2xl;

  @media (max-width: 640px) {
    flex-direction: column;
    align-items: center;
    gap: @space-xl;
  }
}

.contact-wechat {
  text-align: center;
  flex: 1;
}

.contact-phone {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-badge {
  display: inline-block;
  padding: @space-xs @space-md;
  font-size: @font-size-xs;
  font-weight: @font-weight-medium;
  color: #fff;
  background: @color-primary;
  border-radius: @border-radius-full;
  margin-bottom: @space-sm;
}

.contact-title {
  font-size: @font-size-lg;
  color: @color-primary;
  margin-bottom: @space-xs;
}

.contact-desc {
  font-size: @font-size-sm;
  color: @color-text-muted;
  margin-bottom: @space-md;
}

.contact-phone-number {
  font-size: @font-size-2xl;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
  letter-spacing: 1px;
}

.contact-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: @space-md;
  max-width: 700px;
  margin: 0 auto @space-xl;

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.contact-info-item {
  padding: @space-md @space-lg;
  background: @color-bg-gray;
  border-radius: @border-radius-md;
}

.contact-info-label {
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
}

.contact-info-value {
  font-size: @font-size-sm;
  color: @color-primary;
  word-break: break-all;
  margin-bottom: 2px;
}

.contact-info-desc {
  font-size: @font-size-xs;
  color: @color-text-muted;
}

.contact-security {
  max-width: 700px;
  margin: 0 auto;
  padding: @space-md @space-lg;
  background: @color-bg-warm;
  border-radius: @border-radius-md;
  text-align: center;

  p {
    font-size: @font-size-sm;
    color: @color-text-secondary;
  }
}
</style>