eec259a3a7
- 模块一: 出海案例作品集、博客动态发布、人名发音语音条、RTL阿语多语言切换 - 模块二: AI顾问人设配置、行业术语库润色、RAG切片沙盒调试、流式会话与意向留资卡片 - 模块三: 全球访客雷达大屏、多维加权意向算分、外部CRM对接推送、团队公海池流转 - 模块四: 移动端NFC安全挂失、NFC动态路由规则配置、动态防伪验签、展会制卡Zip批量导出 - 模块五: 组织架构与名片分配、移动端个人中心设置、离职交接与历史线索迁移、安全审计日志 - 模块六: Stripe国际信用卡订阅Webhook、独立二级域名与SSL检测、坐席配额预警、多币种发票 - 模块七: 纸质名片OCR解析入库、国际商务日程RFC 5545 ICS日历、微官网离线SWR预加载、展会实时排行榜大屏 - 模块八: 全球出海SEO OpenGraph元标签注入与社交爬虫探测、30点端到端全链路业务流集成测试套件
347 行
8.4 KiB
Plaintext
347 行
8.4 KiB
Plaintext
<template>
|
|
<view class="card-edit-page" :style="pageTheme">
|
|
<view v-if="state.missingId || state.empty" class="card-empty">
|
|
<text class="card-empty-text">{{ emptyMessage }}</text>
|
|
<button class="primary-cta-btn" @click="handleBack">
|
|
<text class="primary-cta-btn-text">{{ t('back') }}</text>
|
|
</button>
|
|
</view>
|
|
|
|
<view v-else-if="state.loading" class="card-skeleton">
|
|
<view class="skeleton-line skeleton-title"></view>
|
|
<view class="skeleton-card"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
|
|
<view v-else class="card-body">
|
|
<scroll-view class="card-scroll" :scroll-y="true">
|
|
<view class="card-form">
|
|
<text class="card-heading">{{ t('heading') }}</text>
|
|
|
|
<view class="field">
|
|
<text class="field-label">{{ t('name') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
v-model="state.name"
|
|
:placeholder="t('name')"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
|
|
<view class="field">
|
|
<text class="field-label">{{ t('jobTitle') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
v-model="state.title"
|
|
:placeholder="t('jobTitle')"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
|
|
<view class="field">
|
|
<text class="field-label">{{ t('company') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
v-model="state.company"
|
|
:placeholder="t('company')"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
|
|
<view class="field">
|
|
<text class="field-label">{{ t('phone') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
v-model="state.phone"
|
|
:placeholder="t('phone')"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
|
|
<view class="field">
|
|
<text class="field-label">{{ t('email') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
v-model="state.email"
|
|
:placeholder="t('email')"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
|
|
<view class="field">
|
|
<text class="field-label">{{ t('whatsapp') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
v-model="state.whatsapp"
|
|
:placeholder="t('whatsapp')"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
|
|
<view class="field">
|
|
<text class="field-label">{{ t('linkedin') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
v-model="state.linkedin"
|
|
:placeholder="t('linkedin')"
|
|
:disabled="state.saving"
|
|
/>
|
|
</view>
|
|
|
|
<view v-if="state.errorMessage !== ''" class="card-error">
|
|
<text class="card-error-text">{{ state.errorMessage }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="card-bottom-spacer"></view>
|
|
</scroll-view>
|
|
|
|
<view class="card-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 {
|
|
applyCardEditOptions,
|
|
createCardEditState,
|
|
goBackFromCardEdit,
|
|
refreshCardEdit,
|
|
resolveCardEditText,
|
|
submitCardEdit,
|
|
CardEditCopyKey,
|
|
CardEditPageOptions,
|
|
} from './useCardEdit.uts';
|
|
|
|
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(createCardEditState());
|
|
|
|
const emptyMessage = computed((): string => {
|
|
if (state.missingId) {
|
|
return resolveCardEditText('missingId');
|
|
}
|
|
if (state.errorMessage !== '') {
|
|
return state.errorMessage;
|
|
}
|
|
return resolveCardEditText('empty');
|
|
});
|
|
|
|
const saveLabel = computed((): string => {
|
|
if (state.saving) {
|
|
return resolveCardEditText('loading');
|
|
}
|
|
return resolveCardEditText('save');
|
|
});
|
|
|
|
function t(key: CardEditCopyKey): string {
|
|
return resolveCardEditText(key);
|
|
}
|
|
|
|
function handleBack(): void {
|
|
goBackFromCardEdit();
|
|
}
|
|
|
|
async function handleSave(): Promise<void> {
|
|
const ok = await submitCardEdit(state);
|
|
if (ok) {
|
|
uni.showToast({
|
|
title: getOmniText(getCurrentLocale(), 'common.save'),
|
|
icon: 'none',
|
|
});
|
|
}
|
|
}
|
|
|
|
onLoad((options: CardEditPageOptions) => {
|
|
const ready = applyCardEditOptions(state, options);
|
|
if (ready) {
|
|
refreshCardEdit(state);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card-edit-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.card-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;
|
|
}
|
|
|
|
.card-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);
|
|
}
|
|
|
|
.card-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);
|
|
}
|
|
|
|
.card-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.card-scroll {
|
|
flex: 1;
|
|
}
|
|
|
|
.card-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: var(--oc-space-16, 16px);
|
|
padding: var(--oc-space-24, 24px) 20px;
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
}
|
|
|
|
.card-heading {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-24, 24px);
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 14px;
|
|
color: var(--oc-text, #101828);
|
|
font-weight: 600;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.field-input {
|
|
height: 44px;
|
|
padding-inline: 12px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
font-size: 14px;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.card-error {
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.card-error-text {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.card-bottom-spacer {
|
|
height: 80px;
|
|
}
|
|
|
|
.card-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>
|