1117 lines
30 KiB
Vue
1117 lines
30 KiB
Vue
<template>
|
||
<view class="naming-screen">
|
||
<view class="naming-bg"></view>
|
||
|
||
|
||
|
||
<!-- 头部占位 -->
|
||
<view class="naming-header-placeholder"></view>
|
||
|
||
<!-- 主体 -->
|
||
<scroll-view scroll-y class="naming-scroll">
|
||
<!-- 表单 -->
|
||
<view v-if="step === 'form'" class="naming-form">
|
||
<!-- 顶部模式切换 -->
|
||
<view class="naming-mode-switch">
|
||
<view class="naming-mode-switch-bg">
|
||
<view class="naming-mode-switch-slider"
|
||
:style="{ left: mode === 'personal' ? '4px' : '50%', width: '50%' }" />
|
||
<view class="naming-mode-btn" :class="mode === 'personal' ? 'naming-mode-btn-active' : ''"
|
||
@click="mode = 'personal'">个人起名</view>
|
||
<view class="naming-mode-btn" :class="mode === 'company' ? 'naming-mode-btn-active' : ''"
|
||
@click="mode = 'company'">
|
||
公司起名</view>
|
||
</view>
|
||
</view>
|
||
<view class="naming-form-header">
|
||
<view class="naming-form-title">
|
||
{{ mode === 'personal' ? '赐子千金' : '名扬四海' }}
|
||
</view>
|
||
<view class="naming-form-subtitle">
|
||
{{ mode === 'personal' ? '不如赐子好名' : '好商号是企业成功第一步' }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 个人表单 -->
|
||
<view v-if="mode === 'personal'" class="naming-form-section">
|
||
<view class="naming-row-inner">
|
||
<text class="naming-row-label">姓氏</text>
|
||
<input v-model="personal.lastName" placeholder="请输入姓氏" class="naming-input" />
|
||
</view>
|
||
<view class="naming-row-inner naming-row-inner-radio">
|
||
<text class="naming-row-label">性别</text>
|
||
<view class="naming-radio-group">
|
||
<view class="naming-radio" @click="personal.gender = 'male'">
|
||
<view class="naming-radio-outer" :class="personal.gender === 'male' ? 'naming-radio-outer-active' : ''">
|
||
<view v-if="personal.gender === 'male'" class="naming-radio-inner"></view>
|
||
</view>
|
||
<text class="naming-radio-text">男</text>
|
||
</view>
|
||
<view class="naming-radio" @click="personal.gender = 'female'">
|
||
<view class="naming-radio-outer"
|
||
:class="personal.gender === 'female' ? 'naming-radio-outer-active' : ''">
|
||
<view v-if="personal.gender === 'female'" class="naming-radio-inner"></view>
|
||
</view>
|
||
<text class="naming-radio-text">女</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="naming-row-inner" @click="activeDateField = 'personal'">
|
||
<text class="naming-row-label">生辰</text>
|
||
<view class="naming-picker-text" :class="{ 'naming-picker-text-filled': personal.birthDateDisplay }">
|
||
{{ personal.birthDateDisplay || '请选择生辰' }}
|
||
</view>
|
||
</view>
|
||
<view class="naming-row-inner">
|
||
<text class="naming-row-label">出生地</text>
|
||
<input v-model="personal.birthPlace" placeholder="请填写出身地" class="naming-input" />
|
||
</view>
|
||
<view class="naming-row-inner" @click="showStylePicker = true">
|
||
<text class="naming-row-label">偏好</text>
|
||
<view class="naming-picker-text naming-picker-text-filled">
|
||
{{ personal.styleLabel }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="naming-subsection">
|
||
<text class="naming-subsection-title">家族信息 (选填)</text>
|
||
<view class="naming-row-inner">
|
||
<text class="naming-row-label naming-form-label-alt">家谱字辈</text>
|
||
<input v-model="personal.familyBook" placeholder="中间字/末尾字" class="naming-input naming-input-sm" />
|
||
</view>
|
||
<view class="naming-two-col">
|
||
<view class="naming-two-col-left">
|
||
<text class="naming-two-col-left-label">父亲</text>
|
||
<input v-model="personal.fatherName" placeholder="姓名" class="naming-two-col-left-input" />
|
||
</view>
|
||
<view class="naming-two-col-right" @click="activeDateField = 'father'">
|
||
<view class="naming-date-trigger"
|
||
:class="{ 'naming-date-trigger-filled': personal.fatherBirthDateDisplay }">
|
||
{{ personal.fatherBirthDateDisplay || '选择生辰' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="naming-two-col">
|
||
<view class="naming-two-col-left">
|
||
<text class="naming-two-col-left-label">母亲</text>
|
||
<input v-model="personal.motherName" placeholder="姓名" class="naming-two-col-left-input" />
|
||
</view>
|
||
<view class="naming-two-col-right" @click="activeDateField = 'mother'">
|
||
<view class="naming-date-trigger"
|
||
:class="{ 'naming-date-trigger-filled': personal.motherBirthDateDisplay }">
|
||
{{ personal.motherBirthDateDisplay || '选择生辰' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 公司表单 -->
|
||
<view v-else class="naming-form-section">
|
||
<view class="naming-row-inner">
|
||
<text class="naming-row-label">所属行业</text>
|
||
<input v-model="company.industry" placeholder="如：科技、餐饮、贸易" class="naming-input" />
|
||
</view>
|
||
<view class="naming-row-inner">
|
||
<text class="naming-row-label">所在城市</text>
|
||
<input v-model="company.city" placeholder="如：北京" class="naming-input" />
|
||
</view>
|
||
|
||
<view class="naming-subsection">
|
||
<view class="naming-subsection-header">
|
||
<text class="naming-subsection-title">核心成员</text>
|
||
<text class="naming-subsection-tip">创始人必填，合伙人选填</text>
|
||
</view>
|
||
|
||
<!-- 创始人 -->
|
||
<view class="naming-member-item">
|
||
<view class="naming-member-tag">创始人</view>
|
||
<input v-model="company.founderName" placeholder="姓名" class="naming-member-name" />
|
||
<view class="naming-member-date" @click="activeDateField = 'founder'">
|
||
<text :class="{ 'naming-member-date-filled': company.founderBirthDisplay }">
|
||
{{ company.founderBirthDisplay || '选择生辰' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 合伙人列表 -->
|
||
<view v-for="(partner, idx) in company.partners" :key="idx" class="naming-member-item">
|
||
<view class="naming-member-tag naming-member-tag-partner">合伙人{{ Number(idx) + 1 }}</view>
|
||
<input v-model="partner.name" placeholder="姓名" class="naming-member-name" />
|
||
<view class="naming-member-date" @click="activeDateField = `partner-${idx}`">
|
||
<text :class="{ 'naming-member-date-filled': partner.birthDisplay }">
|
||
{{ partner.birthDisplay || '选择生辰' }}
|
||
</text>
|
||
</view>
|
||
<view class="naming-member-remove" @click="removePartner(idx)">×</view>
|
||
</view>
|
||
|
||
<!-- 添加合伙人按钮 -->
|
||
<view v-if="company.partners.length < 5" class="naming-add-partner" @click="addPartner">
|
||
<text class="naming-add-partner-icon">+</text>
|
||
<text class="naming-add-partner-text">添加合伙人 ({{ company.partners.length }}/5)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="naming-submit-btn" @click="start">
|
||
<PenToolIcon :size="16" class="naming-submit-icon" />
|
||
<text class="naming-submit-btn-text">{{ mode === 'personal' ? '立即起名' : '商号推演' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Loading -->
|
||
<view v-else-if="step === 'loading'" class="naming-loading">
|
||
<MysticCompass :title="mode === 'personal' ? '命盘推演中' : '商号推演中'"
|
||
:subtitle="mode === 'personal' ? '正在解析三才五格与流年运势...' : '正在分析五行生克与行业契合度...'" @back="handleLoadingBack" />
|
||
</view>
|
||
|
||
<!-- 结果 -->
|
||
<NamingResult v-else :data="results" :category="mode" :pay-business-id="reportId || undefined"
|
||
@reset="step = 'form'" @showDetail="handleShowDetail" />
|
||
</scroll-view>
|
||
|
||
<!-- 日期选择器 -->
|
||
<MysticDatePicker :is-open="!!activeDateField" :title="activeDateField === 'personal' ? '请择良辰' : '选择生辰'"
|
||
:default-value="currentDateValue" @close="activeDateField = null" @confirm="handleDateConfirm" />
|
||
|
||
<!-- 偏好选择器 -->
|
||
<MysticSelect :is-open="showStylePicker" title="选择偏好" tip="根据您的喜好推荐合适的名字风格" :options="styleOptions"
|
||
:default-value="personal.style" @close="showStylePicker = false" @confirm="handleStyleConfirm" />
|
||
|
||
<!-- 支付弹窗 -->
|
||
<view v-if="false" class="naming-modal" @click="showPay = false">
|
||
<view class="naming-modal-content" @click.stop>
|
||
<button class="naming-modal-close" @click="showPay = false">×</button>
|
||
<view class="naming-modal-header">
|
||
<text class="naming-modal-header-title">天机解锁</text>
|
||
<text class="naming-modal-header-subtitle">
|
||
{{ mode === 'personal' ? '个人年度财运深度解析' : '企业年度商业运程报告' }}
|
||
</text>
|
||
</view>
|
||
<view class="naming-modal-body">
|
||
<text class="naming-modal-item">• 流年运势 + 五行喜忌 + 开运色彩</text>
|
||
<text class="naming-modal-item">• PDF 报告 & 名字全维测评</text>
|
||
<text class="naming-modal-item">• 一对一线上解读（赠）</text>
|
||
<view class="naming-modal-price">
|
||
¥{{ mode === 'personal' ? '666' : '888' }} <text class="naming-modal-price-unit">/次</text>
|
||
</view>
|
||
<button class="naming-modal-pay-btn" @click="pay">立即解锁深度解析</button>
|
||
<text class="naming-modal-note">支付后自动生成并发送</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, ref, computed, onUnmounted } from "vue";
|
||
import MysticDatePicker from '../MysticDatePicker.vue';
|
||
import MysticSelect, { type SelectOption } from '../MysticSelect.vue';
|
||
import MysticCompass from '../MysticCompass.vue';
|
||
import PenToolIcon from '../icons/PenToolIcon.vue';
|
||
import NamingResult, { type GeneratedName } from '../NamingResult.vue';
|
||
import { namingApi } from '../../api/naming';
|
||
import { wxPay } from "@/utils/payment";
|
||
import { pollSolutionDetailUntilReady, pollUntilSolutionIdFromScoring } from '../../utils/poll-test-solution-detail';
|
||
|
||
type Mode = "personal" | "company";
|
||
type Step = "form" | "loading" | "result";
|
||
|
||
const mode = ref<Mode>("personal");
|
||
const step = ref<Step>("form");
|
||
const showPay = ref(false);
|
||
let pollAbort: AbortController | null = null;
|
||
|
||
// 日期选择器状态
|
||
const activeDateField = ref<string | null>(null);
|
||
|
||
// 下拉选择器状态
|
||
const showStylePicker = ref(false);
|
||
|
||
const personal = reactive({
|
||
lastName: "",
|
||
gender: "male",
|
||
birthDateDisplay: "",
|
||
birthDateApi: "", // 接口格式: "1990-04-05 09:00:00"
|
||
birthPlace: "",
|
||
style: "典雅",
|
||
styleLabel: "典雅古风",
|
||
fatherName: "",
|
||
fatherBirthDateDisplay: "",
|
||
fatherBirthDateApi: "",
|
||
motherName: "",
|
||
motherBirthDateDisplay: "",
|
||
motherBirthDateApi: "",
|
||
familyBook: "",
|
||
});
|
||
|
||
const styleOptions: SelectOption[] = [
|
||
{ value: "典雅", label: "典雅古风", desc: "诗词歌赋，古韵悠长" },
|
||
{ value: "大气", label: "大气磅礴", desc: "气势恢宏，志存高远" },
|
||
{ value: "新颖", label: "新颖独特", desc: "别具一格，独树一帜" },
|
||
{ value: "温婉", label: "温婉贤淑", desc: "温柔似水，贤良淑德" },
|
||
];
|
||
|
||
// 获取当前日期选择器的默认值
|
||
const currentDateValue = computed(() => {
|
||
if (!activeDateField.value) return '';
|
||
if (activeDateField.value === 'personal') return personal.birthDateDisplay;
|
||
if (activeDateField.value === 'father') return personal.fatherBirthDateDisplay;
|
||
if (activeDateField.value === 'mother') return personal.motherBirthDateDisplay;
|
||
if (activeDateField.value === 'founder') return company.founderBirthDisplay;
|
||
// 合伙人日期
|
||
if (activeDateField.value.startsWith('partner-')) {
|
||
const idx = parseInt(activeDateField.value.split('-')[1]);
|
||
return company.partners[idx]?.birthDisplay || '';
|
||
}
|
||
return '';
|
||
});
|
||
|
||
const handleDateConfirm = (displayVal: string, apiVal: string) => {
|
||
if (!activeDateField.value) return;
|
||
|
||
if (activeDateField.value === 'personal') {
|
||
personal.birthDateDisplay = displayVal;
|
||
personal.birthDateApi = apiVal;
|
||
} else if (activeDateField.value === 'father') {
|
||
personal.fatherBirthDateDisplay = displayVal;
|
||
personal.fatherBirthDateApi = apiVal;
|
||
} else if (activeDateField.value === 'mother') {
|
||
personal.motherBirthDateDisplay = displayVal;
|
||
personal.motherBirthDateApi = apiVal;
|
||
} else if (activeDateField.value === 'founder') {
|
||
company.founderBirthDisplay = displayVal;
|
||
company.founderBirthApi = apiVal;
|
||
} else if (activeDateField.value.startsWith('partner-')) {
|
||
const idx = parseInt(activeDateField.value.split('-')[1]);
|
||
if (company.partners[idx]) {
|
||
company.partners[idx].birthDisplay = displayVal;
|
||
company.partners[idx].birthApi = apiVal;
|
||
}
|
||
}
|
||
activeDateField.value = null;
|
||
};
|
||
|
||
const handleStyleConfirm = (option: SelectOption) => {
|
||
personal.style = option.value;
|
||
personal.styleLabel = option.label;
|
||
showStylePicker.value = false;
|
||
};
|
||
|
||
interface Partner {
|
||
name: string;
|
||
birthDisplay: string;
|
||
birthApi: string; // 接口格式: "1990-04-05 09:00:00"
|
||
}
|
||
|
||
const company = reactive({
|
||
industry: "",
|
||
city: "",
|
||
founderName: "",
|
||
founderBirthDisplay: "",
|
||
founderBirthApi: "", // 接口格式
|
||
partners: [] as Partner[],
|
||
});
|
||
|
||
// 添加合伙人
|
||
const addPartner = () => {
|
||
if (company.partners.length < 5) {
|
||
company.partners.push({ name: "", birthDisplay: "", birthApi: "" });
|
||
}
|
||
};
|
||
|
||
// 删除合伙人
|
||
const removePartner = (index: number) => {
|
||
company.partners.splice(index, 1);
|
||
};
|
||
|
||
const results = ref<GeneratedName[]>([]);
|
||
const reportId = ref<number | null>(null);
|
||
|
||
const subscribeTemplateId = '5LLf7oDiXp0s8U99B8HkEhrFa0RzwETBRNu5iW-T-hc';
|
||
|
||
// Mini-program specific subscription removed for H5
|
||
const requestSubscribeMessage = async () => {
|
||
// Not applicable in H5 environment
|
||
return Promise.resolve();
|
||
};
|
||
|
||
const promptSubscribeMessage = async () => {
|
||
// Subscription not applicable in H5 environment
|
||
return Promise.resolve();
|
||
};
|
||
|
||
const start = async () => {
|
||
results.value = [];
|
||
reportId.value = null;
|
||
pollAbort?.abort();
|
||
pollAbort = new AbortController();
|
||
const signal = pollAbort.signal;
|
||
|
||
if (mode.value === "personal" && !personal.lastName) {
|
||
uni.showToast({ title: "请填写姓氏", icon: "none" });
|
||
return;
|
||
}
|
||
if (mode.value === "personal") {
|
||
if (!personal.birthDateDisplay) {
|
||
uni.showToast({ title: "请选择生辰", icon: "none" });
|
||
return;
|
||
}
|
||
if (!personal.birthPlace) {
|
||
uni.showToast({ title: "请填写出生地", icon: "none" });
|
||
return;
|
||
}
|
||
}
|
||
if (mode.value === "company") {
|
||
if (!company.industry) {
|
||
uni.showToast({ title: "请填写行业", icon: "none" });
|
||
return;
|
||
}
|
||
if (!company.city) {
|
||
uni.showToast({ title: "请填写所在城市", icon: "none" });
|
||
return;
|
||
}
|
||
if (!company.founderName) {
|
||
uni.showToast({ title: "请填写创始人姓名", icon: "none" });
|
||
return;
|
||
}
|
||
if (!company.founderBirthDisplay) {
|
||
uni.showToast({ title: "请选择创始人生辰", icon: "none" });
|
||
return;
|
||
}
|
||
}
|
||
|
||
await promptSubscribeMessage();
|
||
|
||
step.value = "loading";
|
||
const loadingStartTime = Date.now();
|
||
const waitMinLoading = async () => {
|
||
const elapsed = Date.now() - loadingStartTime;
|
||
const minLoadingTime = 1700;
|
||
const remainingTime = Math.max(0, minLoadingTime - elapsed);
|
||
if (remainingTime > 0) {
|
||
await new Promise<void>((resolve) => setTimeout(resolve, remainingTime));
|
||
}
|
||
};
|
||
|
||
if (mode.value === "personal") {
|
||
try {
|
||
const response: any = await namingApi.personalNaming({
|
||
last_name: String(personal.lastName || '').trim(),
|
||
gender: String(personal.gender || '').trim(),
|
||
birth_date: personal.birthDateApi || personal.birthDateDisplay,
|
||
birth_place: String(personal.birthPlace || '').trim(),
|
||
style_label: String(personal.styleLabel || personal.style || '').trim(),
|
||
father_name: String(personal.fatherName || '').trim() || undefined,
|
||
father_birth_date: personal.fatherBirthDateApi || undefined,
|
||
mother_name: String(personal.motherName || '').trim() || undefined,
|
||
mother_birth_date: personal.motherBirthDateApi || undefined,
|
||
family_book: String(personal.familyBook || '').trim() || undefined,
|
||
});
|
||
|
||
reportId.value = Number(response?.report_id) || null;
|
||
|
||
const solutionId = await pollUntilSolutionIdFromScoring(response, {
|
||
intervalMs: 5000,
|
||
signal,
|
||
});
|
||
const detail = await pollSolutionDetailUntilReady(solutionId, {
|
||
intervalMs: 5000,
|
||
signal,
|
||
});
|
||
await waitMinLoading();
|
||
emit("showDetail", detail as any, mode.value);
|
||
} catch (error) {
|
||
if (String((error as any)?.message || "") === "aborted") return;
|
||
console.error('个人起名接口调用失败:', error);
|
||
await waitMinLoading();
|
||
const msg = (error as any)?.msg || (error as any)?.message || '接口请求失败';
|
||
uni.showToast({ title: msg, icon: 'none' });
|
||
step.value = 'form';
|
||
}
|
||
} else {
|
||
// 公司起名调用真实接口
|
||
try {
|
||
// 构建核心成员列表（直接使用API格式的日期）
|
||
const coreMembers = [
|
||
{
|
||
name: company.founderName,
|
||
birthday: company.founderBirthApi,
|
||
},
|
||
...company.partners
|
||
.filter((p: Partner) => p.name && p.birthApi)
|
||
.map((p: Partner) => ({
|
||
name: p.name,
|
||
birthday: p.birthApi,
|
||
})),
|
||
];
|
||
|
||
const response: any = await namingApi.companyNaming({
|
||
industry: company.industry,
|
||
address: company.city,
|
||
core_members: coreMembers,
|
||
});
|
||
|
||
reportId.value = Number(response?.report_id) || null;
|
||
|
||
const solutionId = await pollUntilSolutionIdFromScoring(response, {
|
||
intervalMs: 5000,
|
||
signal,
|
||
});
|
||
const detail = await pollSolutionDetailUntilReady(solutionId, {
|
||
intervalMs: 5000,
|
||
signal,
|
||
});
|
||
await waitMinLoading();
|
||
emit("showDetail", detail as any, mode.value);
|
||
} catch (error) {
|
||
if (String((error as any)?.message || "") === "aborted") return;
|
||
console.error('公司起名接口调用失败:', error);
|
||
await waitMinLoading();
|
||
const msg = (error as any)?.msg || (error as any)?.message || '接口请求失败';
|
||
uni.showToast({ title: msg, icon: 'none' });
|
||
step.value = "form";
|
||
}
|
||
}
|
||
};
|
||
|
||
const pay = () => {
|
||
(async () => {
|
||
if (!reportId.value) {
|
||
uni.showToast({ title: '缺少报告ID，无法发起支付', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const amount = mode.value === 'personal' ? 666 : 888;
|
||
const result = await wxPay({
|
||
description: mode.value === 'personal' ? '个人年度财运深度解析' : '企业年度商业运程报告',
|
||
total_amount: amount,
|
||
business_type: 'naming_report',
|
||
business_id: reportId.value,
|
||
});
|
||
|
||
if (result.success) {
|
||
showPay.value = false;
|
||
uni.showToast({ title: '支付成功', icon: 'success' });
|
||
return;
|
||
}
|
||
|
||
uni.showToast({ title: result.msg || '支付失败', icon: 'none' });
|
||
} catch (e: any) {
|
||
uni.showToast({ title: e?.msg || '支付失败', icon: 'none' });
|
||
}
|
||
})();
|
||
};
|
||
|
||
// 定义emit
|
||
const emit = defineEmits<{
|
||
showDetail: [data: any, mode: Mode];
|
||
}>();
|
||
|
||
// 处理显示详情
|
||
const handleShowDetail = async (data: GeneratedName) => {
|
||
if (mode.value === 'company') {
|
||
emit("showDetail", data, mode.value);
|
||
} else {
|
||
// 个人模式：直接跳转
|
||
emit("showDetail", data, mode.value);
|
||
}
|
||
};
|
||
|
||
// 处理 loading 页面的返回按钮
|
||
const handleLoadingBack = () => {
|
||
pollAbort?.abort();
|
||
uni.showToast({
|
||
title: '测算结果可在"我的方案"中查看',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
step.value = 'form';
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
pollAbort?.abort();
|
||
});
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.naming-screen {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
|
||
background-color: #f0efe9;
|
||
}
|
||
|
||
/* 固定头部容器 */
|
||
.naming-fixed-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: #f0efe9;
|
||
}
|
||
|
||
/* 状态栏占位 */
|
||
.status-bar-placeholder {
|
||
height: var(--status-bar-height, 0);
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 头部占位 */
|
||
.naming-header-placeholder {
|
||
height: calc(var(--status-bar-height, 0) + 67px);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.naming-header {
|
||
padding: 16px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #eaddcf;
|
||
}
|
||
|
||
.naming-header-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #2c2c2c;
|
||
letter-spacing: 0.3em;
|
||
}
|
||
|
||
.naming-header-spacer {
|
||
width: 32px;
|
||
}
|
||
|
||
.naming-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
opacity: 0.3;
|
||
background-image: url("https://www.transparenttextures.com/patterns/rice-paper.png");
|
||
}
|
||
|
||
.naming-mode-switch {
|
||
padding: 0 0 20px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.naming-mode-switch-bg {
|
||
background-color: #eaddcf;
|
||
padding: 4px;
|
||
border-radius: 999px;
|
||
position: relative;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.naming-mode-switch-slider {
|
||
position: absolute;
|
||
top: 4px;
|
||
bottom: 4px;
|
||
border-radius: 999px;
|
||
background-color: #8b2323;
|
||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||
z-index: 0;
|
||
transition: left 0.25s ease;
|
||
}
|
||
|
||
.naming-mode-btn {
|
||
flex: 1;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 12px 0;
|
||
border: none;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
color: #5a5a5a;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.naming-mode-btn-active {
|
||
color: #f2e6d8;
|
||
}
|
||
|
||
.naming-scroll {
|
||
flex: 1;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.naming-form {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
padding: 20px 20px 54px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.naming-form-header {
|
||
text-align: center;
|
||
}
|
||
|
||
.naming-form-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #2c2c2c;
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.naming-form-subtitle {
|
||
font-size: 12px;
|
||
color: #5a5a5a;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.naming-form-section {
|
||
background-color: #f9f7f2;
|
||
border-top: 1px solid #dcd3c9;
|
||
border-bottom: 1px solid #dcd3c9;
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.naming-row-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.naming-row-inner-radio {
|
||
padding-bottom: 17px;
|
||
}
|
||
|
||
.naming-row-label {
|
||
width: 80px;
|
||
font-weight: 700;
|
||
color: #8b2323;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.naming-form-label-alt {
|
||
color: #5a5a5a;
|
||
}
|
||
|
||
.naming-input {
|
||
flex: 1;
|
||
border: none;
|
||
background: transparent;
|
||
outline: none;
|
||
padding: 12px 6px;
|
||
font-size: 14px;
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-input-sm {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.naming-picker-text {
|
||
flex: 1;
|
||
color: #dcd3c9;
|
||
padding: 12px 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.naming-picker-text-filled {
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-date-trigger {
|
||
font-size: 12px;
|
||
color: #dcd3c9;
|
||
padding: 6px 0;
|
||
}
|
||
|
||
.naming-date-trigger-filled {
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-core-date {
|
||
flex: 1;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
padding: 8px 3px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.naming-core-date-filled {
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-radio-group {
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.naming-radio {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 3px 0;
|
||
}
|
||
|
||
.naming-radio-outer {
|
||
width: 19px;
|
||
height: 19px;
|
||
border-radius: 50%;
|
||
border: 1px solid #5a5a5a;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.naming-radio-outer-active {
|
||
border-color: #8b2323;
|
||
}
|
||
|
||
.naming-radio-inner {
|
||
width: 11px;
|
||
height: 11px;
|
||
border-radius: 50%;
|
||
background-color: #8b2323;
|
||
}
|
||
|
||
.naming-radio-text {
|
||
font-size: 14px;
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-subsection {
|
||
padding-top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.naming-subsection-title {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #8b2323;
|
||
border-left: 2px solid #8b2323;
|
||
padding-left: 6px;
|
||
}
|
||
|
||
.naming-two-col {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.naming-two-col-left {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 40%;
|
||
}
|
||
|
||
.naming-two-col-left-label {
|
||
width: 54px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #5a5a5a;
|
||
}
|
||
|
||
.naming-two-col-left-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-two-col-right {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.naming-two-col-right-input {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 12px;
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-core-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.naming-core-input-name {
|
||
width: 30%;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
padding: 8px 3px;
|
||
font-size: 14px;
|
||
color: #2c2c2c;
|
||
background: transparent;
|
||
outline: none;
|
||
}
|
||
|
||
.naming-core-input-date {
|
||
flex: 1;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
padding: 8px 3px;
|
||
font-size: 14px;
|
||
color: #2c2c2c;
|
||
background: transparent;
|
||
outline: none;
|
||
}
|
||
|
||
.naming-submit-btn {
|
||
width: 100%;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 18px 0;
|
||
background-color: #8b2323;
|
||
color: #f2e6d8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8px 12px -5px rgba(139, 35, 35, 0.35);
|
||
position: relative;
|
||
overflow: hidden;
|
||
gap: 12px;
|
||
}
|
||
|
||
.naming-submit-icon {
|
||
width: 21px;
|
||
height: 21px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.naming-submit-btn-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.naming-submit-btn-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
/* Loading */
|
||
.naming-loading {
|
||
height: 100%;
|
||
min-height: 80vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
|
||
}
|
||
|
||
.naming-modal {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 50;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.naming-modal-content {
|
||
background-color: #f9f7f2;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.naming-modal-close {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
border: none;
|
||
background: transparent;
|
||
color: #5a5a5a;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.naming-modal-header {
|
||
background-color: #8b2323;
|
||
padding: 32px;
|
||
text-align: center;
|
||
}
|
||
|
||
.naming-modal-header-title {
|
||
color: #d4af37;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 6px;
|
||
display: block;
|
||
}
|
||
|
||
.naming-modal-header-subtitle {
|
||
color: rgba(242, 230, 216, 0.8);
|
||
font-size: 12px;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.naming-modal-body {
|
||
padding: 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
font-size: 14px;
|
||
color: #5a5a5a;
|
||
}
|
||
|
||
.naming-modal-item {
|
||
display: block;
|
||
}
|
||
|
||
.naming-modal-price {
|
||
text-align: center;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #8b2323;
|
||
}
|
||
|
||
.naming-modal-price-unit {
|
||
font-size: 14px;
|
||
color: #5a5a5a;
|
||
}
|
||
|
||
.naming-modal-pay-btn {
|
||
width: 100%;
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 16px 0;
|
||
background-color: #d4af37;
|
||
color: #2c2c2c;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.naming-modal-note {
|
||
text-align: center;
|
||
font-size: 10px;
|
||
color: #999;
|
||
}
|
||
|
||
/* 核心成员样式 */
|
||
.naming-subsection-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.naming-subsection-tip {
|
||
font-size: 10px;
|
||
color: #8a8a8a;
|
||
}
|
||
|
||
.naming-member-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.naming-member-tag {
|
||
font-size: 10px;
|
||
padding: 4px 8px;
|
||
background: #8b2323;
|
||
color: #fff;
|
||
border-radius: 3px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.naming-member-tag-partner {
|
||
background: #5a5a5a;
|
||
}
|
||
|
||
.naming-member-name {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-member-name::placeholder {
|
||
color: #dcd3c9;
|
||
}
|
||
|
||
.naming-member-date {
|
||
font-size: 12px;
|
||
color: #dcd3c9;
|
||
padding: 6px 12px;
|
||
background: #fcfaf5;
|
||
border: 1px solid #eaddcf;
|
||
border-radius: 3px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.naming-member-date-filled {
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.naming-member-remove {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
font-size: 16px;
|
||
border-radius: 50%;
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.naming-add-partner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding: 14px;
|
||
margin-top: 12px;
|
||
border: 1px dashed #dcd3c9;
|
||
border-radius: 6px;
|
||
color: #8a8a8a;
|
||
}
|
||
|
||
.naming-add-partner-icon {
|
||
font-size: 16px;
|
||
color: #8b2323;
|
||
}
|
||
|
||
.naming-add-partner-text {
|
||
font-size: 12px;
|
||
}
|
||
</style>
|