425 行
10 KiB
Plaintext
425 行
10 KiB
Plaintext
<template>
|
|
<view class="lead-detail-page" :style="pageTheme">
|
|
<view v-if="state.missingId || state.empty" class="lead-empty">
|
|
<text class="lead-empty-text">{{ emptyMessage }}</text>
|
|
<button class="primary-cta-btn" @click="handleBack">
|
|
<text class="primary-cta-btn-text">{{ backLabel }}</text>
|
|
</button>
|
|
</view>
|
|
|
|
<view v-else-if="state.loading" class="lead-skeleton">
|
|
<view class="skeleton-line skeleton-title"></view>
|
|
<view class="skeleton-card"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
|
|
<view v-else class="lead-body">
|
|
<view class="lead-profile">
|
|
<text class="lead-name">{{ state.name }}</text>
|
|
<text class="lead-company">{{ state.company }}</text>
|
|
<view class="lead-meta">
|
|
<text class="lead-score">{{ scoreLabel }} {{ state.intentScore }}</text>
|
|
<text class="lead-status">{{ statusText }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="lead-section">
|
|
<text class="section-title">{{ timelineLabel }}</text>
|
|
<scroll-view class="timeline" :scroll-y="true">
|
|
<view v-if="state.tracks.length === 0" class="timeline-empty">
|
|
<text class="timeline-empty-text">{{ t('empty') }}</text>
|
|
</view>
|
|
<view
|
|
v-for="item in state.tracks"
|
|
:key="item.id"
|
|
class="timeline-item"
|
|
>
|
|
<text class="timeline-place">{{ formatPlace(item.country, item.city) }}</text>
|
|
<text class="timeline-touch">{{ item.touchType }}</text>
|
|
<view class="timeline-metrics">
|
|
<text class="timeline-metric">{{ t('stay') }} {{ formatStayMs(item.stayDurationMs) }}</text>
|
|
<text class="timeline-metric">{{ t('depth') }} {{ formatDepthPct(item.scrollDepth) }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="lead-section notes-section">
|
|
<text class="section-title">{{ notesLabel }}</text>
|
|
<text v-if="state.existingNotes !== ''" class="existing-notes">{{ state.existingNotes }}</text>
|
|
<textarea
|
|
class="notes-input"
|
|
v-model="state.nextNote"
|
|
:placeholder="notesPlaceholder"
|
|
:disabled="state.saving"
|
|
/>
|
|
<view class="notes-attachments">
|
|
<image-uploader
|
|
v-model="state.attachments"
|
|
:multiple="true"
|
|
:maxCount="6"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="state.errorMessage !== ''" class="lead-error">
|
|
<text class="lead-error-text">{{ state.errorMessage }}</text>
|
|
</view>
|
|
|
|
<view class="lead-cta-bar">
|
|
<button
|
|
class="primary-cta-btn"
|
|
:class="{ 'primary-cta-btn-disabled': state.saving }"
|
|
:disabled="state.saving"
|
|
@click="handleSave"
|
|
>
|
|
<text class="primary-cta-btn-text">{{ saveLabel }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getCurrentLocale, getOmniText } from '../../common/locale.uts';
|
|
import { utsLightColors, utsRadius, utsSpacing } from '../../common/tokens.uts';
|
|
import {
|
|
applyLeadDetailOptions,
|
|
createLeadDetailState,
|
|
formatTrackDepth,
|
|
formatTrackPlace,
|
|
formatTrackStay,
|
|
goBackFromLeadDetail,
|
|
refreshLeadDetail,
|
|
resolveLeadDetailText,
|
|
statusLabelOf,
|
|
submitLeadNote,
|
|
LeadDetailCopyKey,
|
|
LeadDetailPageOptions,
|
|
} from './useLeadDetail.uts';
|
|
import ImageUploader from '../../components/image-uploader/image-uploader.uvue';
|
|
|
|
const pageTheme: Record<string, string> = {
|
|
'--oc-primary': utsLightColors.primary,
|
|
'--oc-primary-soft': utsLightColors.primarySoft,
|
|
'--oc-bg': utsLightColors.bg,
|
|
'--oc-surface': utsLightColors.surface,
|
|
'--oc-border': utsLightColors.border,
|
|
'--oc-text': utsLightColors.text,
|
|
'--oc-text-2': utsLightColors.text2,
|
|
'--oc-radius-btn': utsRadius.button,
|
|
'--oc-radius-card': utsRadius.card,
|
|
'--oc-space-8': utsSpacing.space8,
|
|
'--oc-space-12': utsSpacing.space12,
|
|
'--oc-space-16': utsSpacing.space16,
|
|
'--oc-space-24': utsSpacing.space24,
|
|
};
|
|
|
|
const state = reactive(createLeadDetailState());
|
|
const scoreLabel = ref(getOmniText(getCurrentLocale(), 'radar.lead_score'));
|
|
const timelineLabel = ref(getOmniText(getCurrentLocale(), 'radar.visitor_trace'));
|
|
const notesLabel = ref(getOmniText(getCurrentLocale(), 'crm.follow_up'));
|
|
const notesPlaceholder = ref(resolveLeadDetailText('notesPlaceholder'));
|
|
const backLabel = ref(resolveLeadDetailText('back'));
|
|
|
|
const emptyMessage = computed((): string => {
|
|
if (state.missingId) {
|
|
return resolveLeadDetailText('missingId');
|
|
}
|
|
if (state.errorMessage !== '') {
|
|
return state.errorMessage;
|
|
}
|
|
return resolveLeadDetailText('empty');
|
|
});
|
|
|
|
const statusText = computed((): string => {
|
|
return statusLabelOf(state.status);
|
|
});
|
|
|
|
const saveLabel = computed((): string => {
|
|
if (state.saving) {
|
|
return resolveLeadDetailText('loading');
|
|
}
|
|
return resolveLeadDetailText('save');
|
|
});
|
|
|
|
function t(key: LeadDetailCopyKey): string {
|
|
return resolveLeadDetailText(key);
|
|
}
|
|
|
|
function formatPlace(country?: string, city?: string): string {
|
|
return formatTrackPlace(country, city);
|
|
}
|
|
|
|
function formatStayMs(ms: number): string {
|
|
return formatTrackStay(ms);
|
|
}
|
|
|
|
function formatDepthPct(depth: number): string {
|
|
return formatTrackDepth(depth);
|
|
}
|
|
|
|
function handleBack(): void {
|
|
goBackFromLeadDetail();
|
|
}
|
|
|
|
async function handleSave(): Promise<void> {
|
|
const ok = await submitLeadNote(state);
|
|
if (ok) {
|
|
uni.showToast({
|
|
title: getOmniText(getCurrentLocale(), 'common.save'),
|
|
icon: 'none',
|
|
});
|
|
}
|
|
}
|
|
|
|
onLoad((options: LeadDetailPageOptions) => {
|
|
const ready = applyLeadDetailOptions(state, options);
|
|
if (ready) {
|
|
refreshLeadDetail(state);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.lead-detail-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.lead-empty {
|
|
flex: 1;
|
|
margin: 40px var(--oc-space-16, 16px);
|
|
padding: var(--oc-space-24, 24px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.lead-empty-text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-24, 24px);
|
|
}
|
|
|
|
.lead-skeleton {
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 16px;
|
|
width: 40%;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: 8px;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.skeleton-title {
|
|
width: 56%;
|
|
height: 24px;
|
|
}
|
|
|
|
.skeleton-card {
|
|
height: 72px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.lead-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-16, 16px);
|
|
padding-block-end: 88px;
|
|
}
|
|
|
|
.lead-profile {
|
|
padding: var(--oc-space-16, 16px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.lead-name {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.lead-company {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.lead-meta {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.lead-score {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.lead-status {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.lead-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.timeline {
|
|
max-height: 240px;
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
}
|
|
|
|
.timeline-empty {
|
|
padding: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.timeline-empty-text {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.timeline-item {
|
|
padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
|
|
border-bottom: 1px solid var(--oc-border, #E3E7ED);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.timeline-place {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.timeline-touch {
|
|
font-size: 12px;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.timeline-metrics {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.timeline-metric {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-inline-end: 12px;
|
|
}
|
|
|
|
.notes-section {
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.existing-notes {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
padding: var(--oc-space-12, 12px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
}
|
|
|
|
.notes-input {
|
|
min-height: 120px;
|
|
padding: var(--oc-space-12, 12px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
font-size: 14px;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.notes-attachments {
|
|
margin-top: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.lead-error {
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.lead-error-text {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.lead-cta-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 12px var(--oc-space-16, 16px) var(--oc-space-24, 24px) var(--oc-space-16, 16px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border-top: 1px solid var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.primary-cta-btn {
|
|
height: 48px;
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.primary-cta-btn-disabled {
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.primary-cta-btn-text {
|
|
color: var(--oc-bg, #FFFFFF);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.primary-cta-btn-disabled .primary-cta-btn-text {
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
</style>
|