feat(mpuniapp): 实现移动微官网 Bento 首页骨架与 Hero 身份区 (Task 33)
这个提交包含在：
wikiboss
@@ -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);
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户