575 行
14 KiB
Plaintext
575 行
14 KiB
Plaintext
<template>
|
|
<view class="portal-page">
|
|
<scroll-view class="portal-scroll" :scroll-y="true">
|
|
<!-- 骨架加载态 -->
|
|
<view v-if="state.loading" class="portal-skeleton">
|
|
<view class="skeleton-avatar"></view>
|
|
<view class="skeleton-line line-title"></view>
|
|
<view class="skeleton-line line-subtitle"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
|
|
<!-- 异常提示态 -->
|
|
<view v-else-if="state.errorMessage" class="portal-error-card">
|
|
<text class="error-title">微官网暂不可用</text>
|
|
<text class="error-desc">{{ state.errorMessage }}</text>
|
|
<button class="retry-btn" @click="reloadPortal">
|
|
<text class="retry-btn-text">重新加载</text>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 核心微官网内容区 -->
|
|
<view v-else-if="state.card != null" class="portal-content">
|
|
<!-- 品牌标识 (若配置) -->
|
|
<view v-if="state.card!.brandKit && state.card!.brandKit!.logoUrl" class="brand-bar">
|
|
<image class="brand-logo" :src="state.card!.brandKit!.logoUrl" mode="heightFix" />
|
|
</view>
|
|
|
|
<!-- 1. Hero 身份区 -->
|
|
<view class="hero-card">
|
|
<view class="hero-top-row">
|
|
<image
|
|
class="hero-avatar"
|
|
:src="state.card!.avatarUrl || defaultAvatar"
|
|
mode="aspectFill"
|
|
/>
|
|
<view v-if="state.card!.timezone" class="hero-timezone-pill">
|
|
<text class="hero-timezone-text">{{ state.card!.timezone }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 姓名与发音试听 -->
|
|
<view class="hero-name-row">
|
|
<text class="hero-name">{{ state.card!.name }}</text>
|
|
<view
|
|
v-if="state.card!.audioPronunciationUrl"
|
|
class="pronounce-pill"
|
|
:class="{ 'pronounce-pill-active': state.isPlayingAudio }"
|
|
@click="handleAudioToggle"
|
|
>
|
|
<text class="pronounce-icon">{{ state.isPlayingAudio ? '■' : '▶' }}</text>
|
|
<text class="pronounce-label">{{ state.isPlayingAudio ? '播放中' : '发音' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 头衔与所属公司 -->
|
|
<text class="hero-title">{{ state.card!.title }}</text>
|
|
<view class="hero-company-row" @click="handleCompanyClick">
|
|
<text class="hero-company-name">{{ state.card!.company }}</text>
|
|
<text class="hero-company-arrow">↗</text>
|
|
</view>
|
|
|
|
<!-- 个人签名 Slogan -->
|
|
<text v-if="state.card!.slogan" class="hero-slogan">{{ state.card!.slogan }}</text>
|
|
</view>
|
|
|
|
<!-- 2. 快捷动作条 (触控区 >= 44x44) -->
|
|
<view class="quick-action-bar">
|
|
<view class="action-item" @click="handleAction('whatsapp')">
|
|
<view class="action-icon-box">
|
|
<text class="action-icon-text">WA</text>
|
|
</view>
|
|
<text class="action-item-label">WhatsApp</text>
|
|
</view>
|
|
|
|
<view class="action-item" @click="handleAction('linkedin')">
|
|
<view class="action-icon-box">
|
|
<text class="action-icon-text">IN</text>
|
|
</view>
|
|
<text class="action-item-label">LinkedIn</text>
|
|
</view>
|
|
|
|
<view class="action-item" @click="handleAction('email')">
|
|
<view class="action-icon-box">
|
|
<text class="action-icon-text">@</text>
|
|
</view>
|
|
<text class="action-item-label">邮件</text>
|
|
</view>
|
|
|
|
<view class="action-item" @click="handleAction('phone')">
|
|
<view class="action-icon-box">
|
|
<text class="action-icon-text">TEL</text>
|
|
</view>
|
|
<text class="action-item-label">电话呼出</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 3. Bento Grid 网格展厅 -->
|
|
<view class="bento-grid">
|
|
<view
|
|
v-for="block in visibleBlocks"
|
|
:key="block.id"
|
|
class="bento-card"
|
|
:class="getColClass(block.colSpan)"
|
|
@click="handleBlockClick(block)"
|
|
>
|
|
<!-- 卡片类型标签 -->
|
|
<view class="bento-tag">
|
|
<text class="bento-tag-text">{{ getBlockTypeLabel(block.type) }}</text>
|
|
</view>
|
|
|
|
<!-- 卡片多媒体封面 (若有) -->
|
|
<image
|
|
v-if="block.mediaUrl"
|
|
class="bento-cover"
|
|
:src="block.mediaUrl"
|
|
mode="aspectFill"
|
|
/>
|
|
|
|
<!-- 卡片标题与内容 -->
|
|
<text v-if="block.title" class="bento-title">{{ block.title }}</text>
|
|
<text v-if="block.content" class="bento-content">{{ block.content }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 页面底部安全垫高，避免被常驻主 CTA 遮挡 -->
|
|
<view class="portal-bottom-spacer"></view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 4. 单屏唯一定位主 CTA (保存到通讯录) -->
|
|
<view v-if="state.card != null" class="portal-cta-bar">
|
|
<button class="primary-cta-btn" @click="handleSaveContact">
|
|
<text class="primary-cta-btn-text">保存到手机通讯录</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import {
|
|
BentoBlockPublic,
|
|
} from '../../common/types.uts';
|
|
import {
|
|
createPortalState,
|
|
loadCardPortal,
|
|
reportPortalStay,
|
|
toggleAudioPronunciation,
|
|
triggerQuickAction,
|
|
getBentoColSpanClass,
|
|
filterVisibleBentoBlocks,
|
|
} from './usePortal.uts';
|
|
import { saveToContacts } from '../../common/vcard-export.uts';
|
|
|
|
const defaultAvatar = 'https://cdn.omnicard.ai/assets/default-avatar.png';
|
|
|
|
// 页面响应式状态
|
|
const state = reactive(createPortalState());
|
|
const currentCardId = ref('');
|
|
|
|
// 计算过滤后的 Bento 块
|
|
const visibleBlocks = computed((): BentoBlockPublic[] => {
|
|
if (!state.card || !state.card!.bentoBlocks) {
|
|
return [];
|
|
}
|
|
return filterVisibleBentoBlocks(state.card!.bentoBlocks);
|
|
});
|
|
|
|
// 样式类映射
|
|
function getColClass(colSpan: number): string {
|
|
return getBentoColSpanClass(colSpan);
|
|
}
|
|
|
|
// 块类型显示标签
|
|
function getBlockTypeLabel(type: string): string {
|
|
if (type === 'case') return '精选案例';
|
|
if (type === 'article') return '深度洞见';
|
|
if (type === 'social') return '社媒矩阵';
|
|
if (type === 'video') return '展会视频';
|
|
return '微官网内容';
|
|
}
|
|
|
|
// 播放发音
|
|
function handleAudioToggle(): void {
|
|
if (state.card && state.card!.audioPronunciationUrl) {
|
|
toggleAudioPronunciation(state, state.card!.audioPronunciationUrl);
|
|
}
|
|
}
|
|
|
|
// 快捷动作
|
|
function handleAction(type: 'whatsapp' | 'linkedin' | 'email' | 'phone'): void {
|
|
if (!state.card) return;
|
|
let targetVal = '';
|
|
if (type === 'whatsapp') targetVal = state.card!.whatsapp || '';
|
|
if (type === 'linkedin') targetVal = state.card!.linkedin || '';
|
|
if (type === 'email') targetVal = state.card!.email || '';
|
|
if (type === 'phone') targetVal = state.card!.phone || '';
|
|
triggerQuickAction(type, targetVal);
|
|
}
|
|
|
|
// 公司反向链接点击
|
|
function handleCompanyClick(): void {
|
|
if (!state.card) return;
|
|
uni.showToast({
|
|
title: state.card!.company,
|
|
icon: 'none',
|
|
});
|
|
}
|
|
|
|
// Bento 卡片点击
|
|
function handleBlockClick(block: BentoBlockPublic): void {
|
|
if (block.linkUrl && block.linkUrl!.trim() !== '') {
|
|
uni.setClipboardData({
|
|
data: block.linkUrl!,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '已复制链接',
|
|
icon: 'none',
|
|
});
|
|
},
|
|
});
|
|
} else if (block.title) {
|
|
uni.showToast({
|
|
title: block.title!,
|
|
icon: 'none',
|
|
});
|
|
}
|
|
}
|
|
|
|
// 保存至通讯录
|
|
function handleSaveContact(): void {
|
|
if (!state.card) return;
|
|
saveToContacts(state.card as any);
|
|
}
|
|
|
|
// 重新加载
|
|
function reloadPortal(): void {
|
|
if (currentCardId.value) {
|
|
loadCardPortal(state, currentCardId.value, state.touchType);
|
|
}
|
|
}
|
|
|
|
onLoad((options: any) => {
|
|
const queryId = (options && (options.id || options.slug)) ? String(options.id || options.slug) : 'default';
|
|
const querySource = (options && options.source) ? String(options.source) : 'link';
|
|
currentCardId.value = queryId;
|
|
loadCardPortal(state, queryId, querySource);
|
|
});
|
|
|
|
onUnload(() => {
|
|
reportPortalStay(state, 100);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.portal-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: #F7F8FA;
|
|
}
|
|
|
|
.portal-scroll {
|
|
flex: 1;
|
|
}
|
|
|
|
.portal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* 品牌栏 */
|
|
.brand-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.brand-logo {
|
|
height: 28px;
|
|
}
|
|
|
|
/* 骨架屏 */
|
|
.portal-skeleton {
|
|
padding: 24px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.skeleton-avatar {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 36px;
|
|
background-color: #E3E7ED;
|
|
margin-bottom: 16px;
|
|
}
|
|
.skeleton-line {
|
|
height: 16px;
|
|
background-color: #E3E7ED;
|
|
border-radius: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.line-title {
|
|
width: 60%;
|
|
height: 24px;
|
|
}
|
|
.line-subtitle {
|
|
width: 40%;
|
|
}
|
|
.skeleton-card {
|
|
height: 180px;
|
|
background-color: #E3E7ED;
|
|
border-radius: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* 异常提示 */
|
|
.portal-error-card {
|
|
margin: 40px 16px;
|
|
padding: 24px;
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #E3E7ED;
|
|
border-radius: 16px;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.error-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #101828;
|
|
margin-bottom: 8px;
|
|
}
|
|
.error-desc {
|
|
font-size: 14px;
|
|
color: #667085;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
.retry-btn {
|
|
height: 40px;
|
|
padding: 0 24px;
|
|
background-color: #0B5CFF;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.retry-btn-text {
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 1. Hero 身份卡片 */
|
|
.hero-card {
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #E3E7ED;
|
|
border-radius: 16px;
|
|
padding: 24px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 16px;
|
|
}
|
|
.hero-top-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
}
|
|
.hero-avatar {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 36px;
|
|
border: 1px solid #E3E7ED;
|
|
background-color: #F7F8FA;
|
|
}
|
|
.hero-timezone-pill {
|
|
padding: 4px 10px;
|
|
background-color: #F7F8FA;
|
|
border: 1px solid #E3E7ED;
|
|
border-radius: 12px;
|
|
}
|
|
.hero-timezone-text {
|
|
font-size: 12px;
|
|
color: #667085;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hero-name-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
.hero-name {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #101828;
|
|
margin-right: 12px;
|
|
}
|
|
.pronounce-pill {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
background-color: #EAF1FF;
|
|
}
|
|
.pronounce-pill-active {
|
|
background-color: #0B5CFF;
|
|
}
|
|
.pronounce-icon {
|
|
font-size: 10px;
|
|
color: #0B5CFF;
|
|
margin-right: 4px;
|
|
}
|
|
.pronounce-pill-active .pronounce-icon {
|
|
color: #FFFFFF;
|
|
}
|
|
.pronounce-label {
|
|
font-size: 12px;
|
|
color: #0B5CFF;
|
|
font-weight: 500;
|
|
}
|
|
.pronounce-pill-active .pronounce-label {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 15px;
|
|
color: #667085;
|
|
margin-bottom: 6px;
|
|
line-height: 1.4;
|
|
}
|
|
.hero-company-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.hero-company-name {
|
|
font-size: 14px;
|
|
color: #101828;
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
}
|
|
.hero-company-arrow {
|
|
font-size: 12px;
|
|
color: #0B5CFF;
|
|
}
|
|
.hero-slogan {
|
|
font-size: 13px;
|
|
color: #667085;
|
|
line-height: 1.5;
|
|
border-top: 1px solid #F7F8FA;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* 2. 快捷动作条 */
|
|
.quick-action-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.action-item {
|
|
flex: 1;
|
|
min-height: 52px;
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #E3E7ED;
|
|
border-radius: 12px;
|
|
margin: 0 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 4px;
|
|
}
|
|
.action-icon-box {
|
|
margin-bottom: 2px;
|
|
}
|
|
.action-icon-text {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #0B5CFF;
|
|
}
|
|
.action-item-label {
|
|
font-size: 11px;
|
|
color: #101828;
|
|
}
|
|
|
|
/* 3. Bento Grid 网格 */
|
|
.bento-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.bento-card {
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #E3E7ED;
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
.bento-col-1 {
|
|
width: 48.5%;
|
|
}
|
|
.bento-col-2 {
|
|
width: 100%;
|
|
}
|
|
.bento-tag {
|
|
align-self: flex-start;
|
|
padding: 2px 8px;
|
|
background-color: #F7F8FA;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.bento-tag-text {
|
|
font-size: 11px;
|
|
color: #667085;
|
|
font-weight: 500;
|
|
}
|
|
.bento-cover {
|
|
width: 100%;
|
|
height: 120px;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
background-color: #F7F8FA;
|
|
}
|
|
.bento-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #101828;
|
|
margin-bottom: 6px;
|
|
line-height: 1.3;
|
|
}
|
|
.bento-content {
|
|
font-size: 13px;
|
|
color: #667085;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 底部垫高与常驻主 CTA */
|
|
.portal-bottom-spacer {
|
|
height: 80px;
|
|
}
|
|
.portal-cta-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 12px 16px 24px 16px;
|
|
background-color: #FFFFFF;
|
|
border-top: 1px solid #E3E7ED;
|
|
}
|
|
.primary-cta-btn {
|
|
height: 48px;
|
|
background-color: #0B5CFF;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
.primary-cta-btn-text {
|
|
color: #FFFFFF;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|