20260831223203

code/link-site/link-nuxt/app/pages/company/[slug]/contact.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { Company } from '~/data/mock'
+
+const company = inject<Company>('company')!
+
+const contacts = computed(() => [
+  { icon: 'i-lucide-phone', label: '联系电话', value: company.contact.phone },
+  { icon: 'i-lucide-mail', label: '电子邮箱', value: company.contact.email },
+  { icon: 'i-lucide-map-pin', label: '办公地址', value: company.contact.address },
+  { icon: 'i-lucide-clock', label: '工作时间', value: company.contact.hours }
+])
+
+useSeoMeta({
+  title: `${company.name} - 联系方式 - 链通物流`,
+  description: `联系${company.name}：电话 ${company.contact.phone}，地址 ${company.contact.address}。`
+})
+</script>
+
+<template>
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <!-- 联系信息 -->
+    <div class="lg:col-span-2 rounded-lg bg-elevated ring ring-default p-6">
+      <h2 class="font-semibold text-highlighted mb-5">
+        联系方式
+      </h2>
+      <div class="space-y-5">
+        <div
+          v-for="item in contacts"
+          :key="item.label"
+          class="flex items-start gap-3"
+        >
+          <div class="flex items-center justify-center size-9 rounded-lg bg-primary/10 shrink-0">
+            <UIcon
+              :name="item.icon"
+              class="size-4.5 text-primary"
+            />
+          </div>
+          <div>
+            <p class="text-sm text-dimmed">
+              {{ item.label }}
+            </p>
+            <p class="text-default font-medium">
+              {{ item.value }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 在线沟通（示例） -->
+    <div class="rounded-lg bg-elevated ring ring-default p-6 flex flex-col">
+      <h2 class="font-semibold text-highlighted mb-3">
+        在线沟通
+      </h2>
+      <p class="text-sm text-muted leading-relaxed">
+        登录后可通过站内私信与该企业直接沟通，咨询航线报价、服务方案与合作事宜。
+      </p>
+      <UBadge
+        color="warning"
+        variant="soft"
+        icon="i-lucide-clock"
+        class="mt-4 self-start"
+      >
+        示例阶段未开放
+      </UBadge>
+
+      <div class="flex flex-col gap-2 mt-auto pt-6">
+        <UButton
+          label="发私信"
+          icon="i-lucide-message-circle"
+          disabled
+          block
+        />
+        <UButton
+          label="加入行业群聊"
+          icon="i-lucide-messages-square"
+          color="neutral"
+          variant="outline"
+          disabled
+          block
+        />
+      </div>
+    </div>
+  </div>
+</template>