feat(mpuniapp): 实现移动微官网 Bento 首页骨架与 Hero 身份区 (Task 33)
这个提交包含在：
wikiboss
335
backend/test/mpuniapp/portal.test.ts
普通文件
335
backend/test/mpuniapp/portal.test.ts
普通文件
@@ -0,0 +1,335 @@
|
||||
/**
|
||||
* OmniCard AI (CRMmp) - mpuniapp 微官网 Bento 首页与 Hero 身份区测试套件 (TDD Red -> Green)
|
||||
*
|
||||
* 严格按照 AGENTS.md 3.3、4.3、5.1 规范与 PRD 3.1、5.1 设计编写
|
||||
*/
|
||||
|
||||
describe('OmniCard AI 用户端微官网 Bento 首页与 Hero 业务逻辑测试 (usePortal.uts)', () => {
|
||||
let storageMap: Map<string, string>;
|
||||
let toastCalls: Array<{ title: string; icon?: string }>;
|
||||
let makePhoneCallParam: { phoneNumber: string } | null;
|
||||
let clipboardText: string;
|
||||
let audioContextMock: any;
|
||||
let mockRequestResponse: {
|
||||
statusCode?: number;
|
||||
data?: any;
|
||||
failError?: any;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
storageMap = new Map();
|
||||
toastCalls = [];
|
||||
makePhoneCallParam = null;
|
||||
clipboardText = '';
|
||||
|
||||
audioContextMock = {
|
||||
src: '',
|
||||
play: jest.fn(),
|
||||
pause: jest.fn(),
|
||||
stop: jest.fn(),
|
||||
destroy: jest.fn(),
|
||||
onPlay: jest.fn((cb: () => void) => {
|
||||
audioContextMock._onPlayCb = cb;
|
||||
}),
|
||||
onEnded: jest.fn((cb: () => void) => {
|
||||
audioContextMock._onEndedCb = cb;
|
||||
}),
|
||||
onError: jest.fn((cb: (err: any) => void) => {
|
||||
audioContextMock._onErrorCb = cb;
|
||||
}),
|
||||
_onPlayCb: null,
|
||||
_onEndedCb: null,
|
||||
_onErrorCb: null,
|
||||
};
|
||||
|
||||
mockRequestResponse = {
|
||||
statusCode: 200,
|
||||
data: {
|
||||
code: 1000,
|
||||
message: 'success',
|
||||
data: {
|
||||
id: 'card-101',
|
||||
name: 'Alex Vance',
|
||||
title: 'Managing Director & Global Partner',
|
||||
company: 'Nexus Tech Global Ltd',
|
||||
timezone: 'Dubai UTC+4',
|
||||
audioPronunciationUrl: 'https://cdn.omnicard.ai/audio/alex.mp3',
|
||||
phone: '+971501234567',
|
||||
email: 'alex.vance@nexustech.global',
|
||||
whatsapp: '+971501234567',
|
||||
linkedin: 'https://linkedin.com/in/alexvance',
|
||||
status: 'published',
|
||||
bentoBlocks: [
|
||||
{
|
||||
id: 1,
|
||||
cardId: 'card-101',
|
||||
type: 'hero',
|
||||
colSpan: 2,
|
||||
rowSpan: 1,
|
||||
sortOrder: 0,
|
||||
title: 'Hero Block',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
cardId: 'card-101',
|
||||
type: 'case',
|
||||
colSpan: 2,
|
||||
rowSpan: 1,
|
||||
sortOrder: 1,
|
||||
title: 'Middle East Energy Hub',
|
||||
content: 'Built scalable renewable energy microgrid in UAE.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
cardId: 'card-101',
|
||||
type: 'article',
|
||||
colSpan: 1,
|
||||
rowSpan: 1,
|
||||
sortOrder: 2,
|
||||
title: 'The Future of Cross-Border Trade',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
cardId: 'card-101',
|
||||
type: 'social',
|
||||
colSpan: 1,
|
||||
rowSpan: 1,
|
||||
sortOrder: 3,
|
||||
title: 'Global Social Matrix',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 构造全局 uni 运行时 Mock 环境
|
||||
(global as any).uni = {
|
||||
getStorageSync: (key: string) => storageMap.get(key) || '',
|
||||
setStorageSync: (key: string, val: string) => storageMap.set(key, val),
|
||||
removeStorageSync: (key: string) => storageMap.delete(key),
|
||||
showToast: (options: { title: string; icon?: string }) => {
|
||||
toastCalls.push(options);
|
||||
},
|
||||
reLaunch: jest.fn(),
|
||||
makePhoneCall: (options: { phoneNumber: string }) => {
|
||||
makePhoneCallParam = options;
|
||||
},
|
||||
setClipboardData: (options: { data: string; success?: () => void }) => {
|
||||
clipboardText = options.data;
|
||||
options.success?.();
|
||||
},
|
||||
createInnerAudioContext: () => audioContextMock,
|
||||
request: (options: any) => {
|
||||
setTimeout(() => {
|
||||
if (mockRequestResponse.failError) {
|
||||
options.fail?.(mockRequestResponse.failError);
|
||||
} else {
|
||||
options.success?.({
|
||||
statusCode: mockRequestResponse.statusCode ?? 200,
|
||||
data: mockRequestResponse.data,
|
||||
header: {},
|
||||
});
|
||||
}
|
||||
options.complete?.();
|
||||
}, 0);
|
||||
return {
|
||||
abort: jest.fn(),
|
||||
};
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
delete (global as any).uni;
|
||||
});
|
||||
|
||||
describe('1. 访客标识识别与生成 (getOrCreateVisitorId)', () => {
|
||||
it('1.1 若本地无 visitorId，则自动生成持久化并返回', () => {
|
||||
// @ts-ignore
|
||||
const { getOrCreateVisitorId } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
const id = getOrCreateVisitorId();
|
||||
expect(id).toBeDefined();
|
||||
expect(id.startsWith('vis_')).toBe(true);
|
||||
expect(storageMap.get('omni_visitor_id')).toBe(id);
|
||||
});
|
||||
|
||||
it('1.2 若本地已有 visitorId，则直接复用', () => {
|
||||
// @ts-ignore
|
||||
const { getOrCreateVisitorId } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
storageMap.set('omni_visitor_id', 'vis_existing_7788');
|
||||
const id = getOrCreateVisitorId();
|
||||
expect(id).toBe('vis_existing_7788');
|
||||
});
|
||||
});
|
||||
|
||||
describe('2. 微官网数据拉取与雷达初次触碰上报 (loadCardPortal)', () => {
|
||||
it('2.1 成功拉取名片聚合详情并自动上报首次雷达轨迹', async () => {
|
||||
// @ts-ignore
|
||||
const { createPortalState, loadCardPortal } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const state = createPortalState();
|
||||
expect(state.loading).toBe(false);
|
||||
expect(state.card).toBeNull();
|
||||
|
||||
const loadPromise = loadCardPortal(state, 'card-101', 'qr');
|
||||
expect(state.loading).toBe(true);
|
||||
|
||||
const result = await loadPromise;
|
||||
expect(state.loading).toBe(false);
|
||||
expect(state.errorMessage).toBe('');
|
||||
expect(result).not.toBeNull();
|
||||
expect(state.card?.id).toBe('card-101');
|
||||
expect(state.card?.name).toBe('Alex Vance');
|
||||
expect(state.touchType).toBe('qr');
|
||||
});
|
||||
|
||||
it('2.2 网络异常或404时正确设置错误提示并结束 loading', async () => {
|
||||
// @ts-ignore
|
||||
const { createPortalState, loadCardPortal } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
mockRequestResponse = {
|
||||
statusCode: 404,
|
||||
data: {
|
||||
code: 404,
|
||||
message: '名片不存在或未公开',
|
||||
},
|
||||
};
|
||||
|
||||
const state = createPortalState();
|
||||
const result = await loadCardPortal(state, 'non-existing-id');
|
||||
|
||||
expect(state.loading).toBe(false);
|
||||
expect(result).toBeNull();
|
||||
expect(state.card).toBeNull();
|
||||
expect(state.errorMessage).toContain('名片不存在');
|
||||
});
|
||||
});
|
||||
|
||||
describe('3. 访客雷达停留时长与深度上报 (reportPortalStay)', () => {
|
||||
it('3.1 页面停留后上报有效停留毫秒数与滚动深度', async () => {
|
||||
// @ts-ignore
|
||||
const { createPortalState, loadCardPortal, reportPortalStay } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const state = createPortalState();
|
||||
await loadCardPortal(state, 'card-101', 'link');
|
||||
|
||||
// 模拟停留 500ms
|
||||
state.enterTime = Date.now() - 500;
|
||||
|
||||
const track = await reportPortalStay(state, 85);
|
||||
expect(track).toBeDefined();
|
||||
});
|
||||
|
||||
it('3.2 若名片尚未成功加载，上报应安全返回 null 而不抛出异常', async () => {
|
||||
// @ts-ignore
|
||||
const { createPortalState, reportPortalStay } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const state = createPortalState();
|
||||
const track = await reportPortalStay(state, 0);
|
||||
expect(track).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('4. 名字发音试听控制 (toggleAudioPronunciation)', () => {
|
||||
it('4.1 成功创建音频上下文并播放，更新 isPlayingAudio 状态', () => {
|
||||
// @ts-ignore
|
||||
const { createPortalState, toggleAudioPronunciation } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const state = createPortalState();
|
||||
const audioUrl = 'https://cdn.omnicard.ai/audio/alex.mp3';
|
||||
|
||||
toggleAudioPronunciation(state, audioUrl);
|
||||
expect(audioContextMock.src).toBe(audioUrl);
|
||||
expect(audioContextMock.play).toHaveBeenCalled();
|
||||
expect(state.isPlayingAudio).toBe(true);
|
||||
|
||||
// 再次点击应触发暂停/停止
|
||||
toggleAudioPronunciation(state, audioUrl);
|
||||
expect(audioContextMock.stop).toHaveBeenCalled();
|
||||
expect(state.isPlayingAudio).toBe(false);
|
||||
});
|
||||
|
||||
it('4.2 音频播放完毕或异常回调时自动复位 isPlayingAudio 状态', () => {
|
||||
// @ts-ignore
|
||||
const { createPortalState, toggleAudioPronunciation } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const state = createPortalState();
|
||||
toggleAudioPronunciation(state, 'https://cdn.omnicard.ai/audio/alex.mp3');
|
||||
expect(state.isPlayingAudio).toBe(true);
|
||||
|
||||
// 触发 onEnded 回调
|
||||
audioContextMock._onEndedCb?.();
|
||||
expect(state.isPlayingAudio).toBe(false);
|
||||
});
|
||||
|
||||
it('4.3 若未提供 audioUrl，安全退出不创建上下文', () => {
|
||||
// @ts-ignore
|
||||
const { createPortalState, toggleAudioPronunciation } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const state = createPortalState();
|
||||
toggleAudioPronunciation(state, '');
|
||||
expect(audioContextMock.play).not.toHaveBeenCalled();
|
||||
expect(state.isPlayingAudio).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('5. 快捷动作条触发与呼出交互 (triggerQuickAction)', () => {
|
||||
it('5.1 点击电话直接调用原生 makePhoneCall', () => {
|
||||
// @ts-ignore
|
||||
const { triggerQuickAction } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const ok = triggerQuickAction('phone', '+971501234567');
|
||||
expect(ok).toBe(true);
|
||||
expect(makePhoneCallParam?.phoneNumber).toBe('+971501234567');
|
||||
});
|
||||
|
||||
it('5.2 点击 WhatsApp 或 LinkedIn 将安全处理并提示', () => {
|
||||
// @ts-ignore
|
||||
const { triggerQuickAction } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const okWa = triggerQuickAction('whatsapp', '+971501234567');
|
||||
expect(okWa).toBe(true);
|
||||
|
||||
const okIn = triggerQuickAction('linkedin', 'https://linkedin.com/in/alexvance');
|
||||
expect(okIn).toBe(true);
|
||||
});
|
||||
|
||||
it('5.3 字段为空时给出清晰 Toast 提示而不报错', () => {
|
||||
// @ts-ignore
|
||||
const { triggerQuickAction } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const ok = triggerQuickAction('phone', '');
|
||||
expect(ok).toBe(false);
|
||||
expect(toastCalls.length).toBeGreaterThan(0);
|
||||
expect(toastCalls[0].title).toContain('未设置');
|
||||
});
|
||||
});
|
||||
|
||||
describe('6. Bento Grid 跨列与数据过滤规则 (getBentoColSpanClass & filterVisibleBentoBlocks)', () => {
|
||||
it('6.1 colSpan 计算：1 为半宽，2 为全宽', () => {
|
||||
// @ts-ignore
|
||||
const { getBentoColSpanClass } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
expect(getBentoColSpanClass(1)).toBe('bento-col-1');
|
||||
expect(getBentoColSpanClass(2)).toBe('bento-col-2');
|
||||
// 默认/兜底
|
||||
expect(getBentoColSpanClass(0 as any)).toBe('bento-col-1');
|
||||
});
|
||||
|
||||
it('6.2 过滤 Hero 类型的块，并按 sortOrder 升序排列其余 Bento 块', () => {
|
||||
// @ts-ignore
|
||||
const { filterVisibleBentoBlocks } = require('../../../mpuniapp/pages/portal/usePortal.uts');
|
||||
|
||||
const rawBlocks = [
|
||||
{ id: 1, type: 'hero', sortOrder: 0, title: 'Hero' },
|
||||
{ id: 4, type: 'social', sortOrder: 3, title: 'Social' },
|
||||
{ id: 2, type: 'case', sortOrder: 1, title: 'Case' },
|
||||
{ id: 3, type: 'article', sortOrder: 2, title: 'Article' },
|
||||
];
|
||||
|
||||
const visible = filterVisibleBentoBlocks(rawBlocks as any);
|
||||
expect(visible.length).toBe(3);
|
||||
expect(visible.map((b: any) => b.type)).toEqual(['case', 'article', 'social']);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -12,6 +12,14 @@
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/portal/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "数字微官网",
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColorContent": "#F7F8FA"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/component",
|
||||
"style": {
|
||||
|
||||
574
mpuniapp/pages/portal/index.uvue
普通文件
574
mpuniapp/pages/portal/index.uvue
普通文件
@@ -0,0 +1,574 @@
|
||||
<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>
|
||||
256
mpuniapp/pages/portal/usePortal.uts
普通文件
256
mpuniapp/pages/portal/usePortal.uts
普通文件
@@ -0,0 +1,256 @@
|
||||
/**
|
||||
* OmniCard AI (CRMmp) - 微官网 Bento 首页与 Hero 身份区业务驱动层
|
||||
* 严格遵循 uts 强类型规范与 AGENTS.md 约束
|
||||
*/
|
||||
|
||||
import {
|
||||
CardPortalDetail,
|
||||
BentoBlockPublic,
|
||||
RadarTrack,
|
||||
} from '../../common/types.uts';
|
||||
import {
|
||||
fetchPortalCard,
|
||||
recordRadarTrack,
|
||||
} from '../../common/api.uts';
|
||||
|
||||
export type PortalState = {
|
||||
card: CardPortalDetail | null;
|
||||
loading: boolean;
|
||||
errorMessage: string;
|
||||
visitorId: string;
|
||||
enterTime: number;
|
||||
touchType: string;
|
||||
isPlayingAudio: boolean;
|
||||
audioContext: any | null;
|
||||
};
|
||||
|
||||
const VISITOR_STORAGE_KEY = 'omni_visitor_id';
|
||||
|
||||
/**
|
||||
* 获取或初始化访客唯一识别码 (持久化在本地 Storage)
|
||||
*/
|
||||
export function getOrCreateVisitorId(): string {
|
||||
let visitorId = '';
|
||||
try {
|
||||
visitorId = uni.getStorageSync(VISITOR_STORAGE_KEY) as string;
|
||||
} catch (e) {
|
||||
visitorId = '';
|
||||
}
|
||||
|
||||
if (!visitorId || visitorId.trim() === '') {
|
||||
const randomPart = Math.random().toString(36).substring(2, 10);
|
||||
visitorId = `vis_${Date.now()}_${randomPart}`;
|
||||
try {
|
||||
uni.setStorageSync(VISITOR_STORAGE_KEY, visitorId);
|
||||
} catch (e) {}
|
||||
}
|
||||
return visitorId;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建微官网响应式状态初始对象
|
||||
*/
|
||||
export function createPortalState(): PortalState {
|
||||
return {
|
||||
card: null,
|
||||
loading: false,
|
||||
errorMessage: '',
|
||||
visitorId: getOrCreateVisitorId(),
|
||||
enterTime: Date.now(),
|
||||
touchType: 'link',
|
||||
isPlayingAudio: false,
|
||||
audioContext: null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载微官网名片聚合数据并上报首次触碰
|
||||
*/
|
||||
export async function loadCardPortal(
|
||||
state: PortalState,
|
||||
cardIdOrSlug: string,
|
||||
source: string = 'link'
|
||||
): Promise<CardPortalDetail | null> {
|
||||
state.loading = true;
|
||||
state.errorMessage = '';
|
||||
state.touchType = source;
|
||||
state.enterTime = Date.now();
|
||||
|
||||
try {
|
||||
const cardData = await fetchPortalCard(cardIdOrSlug);
|
||||
state.card = cardData;
|
||||
state.loading = false;
|
||||
|
||||
// 首次载入成功后上报雷达初次触碰轨迹
|
||||
if (cardData && cardData.id) {
|
||||
recordRadarTrack({
|
||||
cardId: cardData.id,
|
||||
visitorId: state.visitorId,
|
||||
touchType: state.touchType,
|
||||
stayDurationMs: 0,
|
||||
scrollDepth: 0,
|
||||
}).catch((_e: any) => {
|
||||
// 轨迹上报容错，不阻断主流程
|
||||
});
|
||||
}
|
||||
|
||||
return cardData;
|
||||
} catch (err: any) {
|
||||
state.loading = false;
|
||||
state.card = null;
|
||||
state.errorMessage = err?.message || '获取名片微官网详情失败';
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上报访客停留时长与阅读深度
|
||||
*/
|
||||
export async function reportPortalStay(
|
||||
state: PortalState,
|
||||
scrollDepth: number = 0
|
||||
): Promise<RadarTrack | null> {
|
||||
if (!state.card || !state.card.id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const stayDurationMs = Math.max(0, Date.now() - state.enterTime);
|
||||
try {
|
||||
const track = await recordRadarTrack({
|
||||
cardId: state.card.id,
|
||||
visitorId: state.visitorId,
|
||||
touchType: state.touchType,
|
||||
stayDurationMs,
|
||||
scrollDepth,
|
||||
});
|
||||
return track;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 名字语音发音试听控制
|
||||
*/
|
||||
export function toggleAudioPronunciation(state: PortalState, audioUrl?: string): void {
|
||||
if (!audioUrl || audioUrl.trim() === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.isPlayingAudio && state.audioContext) {
|
||||
try {
|
||||
state.audioContext.stop();
|
||||
} catch (e) {}
|
||||
state.isPlayingAudio = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!state.audioContext) {
|
||||
state.audioContext = uni.createInnerAudioContext();
|
||||
state.audioContext.onPlay(() => {
|
||||
state.isPlayingAudio = true;
|
||||
});
|
||||
state.audioContext.onEnded(() => {
|
||||
state.isPlayingAudio = false;
|
||||
});
|
||||
state.audioContext.onError(() => {
|
||||
state.isPlayingAudio = false;
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
state.audioContext.src = audioUrl;
|
||||
state.audioContext.play();
|
||||
state.isPlayingAudio = true;
|
||||
} catch (e) {
|
||||
state.isPlayingAudio = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 快捷动作条呼出处理
|
||||
*/
|
||||
export function triggerQuickAction(
|
||||
type: 'whatsapp' | 'linkedin' | 'email' | 'phone',
|
||||
value?: string
|
||||
): boolean {
|
||||
if (!value || value.trim() === '') {
|
||||
uni.showToast({
|
||||
title: '未设置该联系方式',
|
||||
icon: 'none',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (type === 'phone') {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: value,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
if (type === 'whatsapp') {
|
||||
const cleanNumber = value.replace(/[^0-9+]/g, '');
|
||||
const waUrl = `https://wa.me/${cleanNumber.replace('+', '')}`;
|
||||
uni.setClipboardData({
|
||||
data: waUrl,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制 WhatsApp 链接',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
if (type === 'linkedin') {
|
||||
uni.setClipboardData({
|
||||
data: value,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制 LinkedIn 链接',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
if (type === 'email') {
|
||||
uni.setClipboardData({
|
||||
data: value,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制邮箱地址',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 colSpan 计算 Bento Grid 列宽样式类
|
||||
*/
|
||||
export function getBentoColSpanClass(colSpan: number): string {
|
||||
if (colSpan === 2) {
|
||||
return 'bento-col-2';
|
||||
}
|
||||
return 'bento-col-1';
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤非 Hero 的 Bento 卡片并按 sortOrder 升序排列
|
||||
*/
|
||||
export function filterVisibleBentoBlocks(blocks?: BentoBlockPublic[]): BentoBlockPublic[] {
|
||||
if (!blocks || !Array.isArray(blocks)) {
|
||||
return [];
|
||||
}
|
||||
return blocks
|
||||
.filter((b) => b.type !== 'hero')
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder);
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户