feat: 添加二阶评估表单数据支持与显示
- 新增 `secondStageInfo` 响应式变量用于存储和展示二阶表单数据 - 在 `fetchAndCheckExternalContact` 函数中解析并存储第二个表单的答案 - 在模板中添加二阶评估信息的显示区域,使用垂直堆叠布局 - 当存在二阶数据时,隐藏“发送二阶评估表”按钮 - 添加对应的 CSS 样式以支持垂直排列的问答项
This commit is contained in:
@@ -80,6 +80,20 @@ const customerInfo = ref<CustomerInfo | null>((() => {
|
|||||||
return null
|
return null
|
||||||
})())
|
})())
|
||||||
|
|
||||||
|
const secondStageInfo = ref<CustomerInfo | null>((() => {
|
||||||
|
const stored = localStorage.getItem('second_stage_info')
|
||||||
|
if (stored && stored !== 'undefined') {
|
||||||
|
try {
|
||||||
|
return JSON.parse(stored) as CustomerInfo
|
||||||
|
} catch (error) {
|
||||||
|
console.error('解析二阶信息失败:', error)
|
||||||
|
localStorage.removeItem('second_stage_info')
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
})())
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
// -------------------------------------------------------------------
|
||||||
// 2. JS-SDK 初始化 和 签名获取
|
// 2. JS-SDK 初始化 和 签名获取
|
||||||
// -------------------------------------------------------------------
|
// -------------------------------------------------------------------
|
||||||
@@ -301,14 +315,29 @@ const fetchAndCheckExternalContact = async () => {
|
|||||||
if (externalUserId.value) {
|
if (externalUserId.value) {
|
||||||
const result = await checkFormExists(externalUserId.value)
|
const result = await checkFormExists(externalUserId.value)
|
||||||
if (result.data.code && result.data.form_content && result.data.form_content.length > 0) {
|
if (result.data.code && result.data.form_content && result.data.form_content.length > 0) {
|
||||||
const rawAnswers = result.data.form_content[0].answers as RawAnswerItem[];
|
// 一阶表单
|
||||||
console.log('原始答案:', rawAnswers);
|
const rawAnswers1 = result.data.form_content[0].answers as RawAnswerItem[];
|
||||||
const mappedCustomerInfo = mapAnswersToCustomerInfo(rawAnswers);
|
console.log('一阶原始答案:', rawAnswers1);
|
||||||
|
const mappedCustomerInfo = mapAnswersToCustomerInfo(rawAnswers1);
|
||||||
customerInfo.value = mappedCustomerInfo;
|
customerInfo.value = mappedCustomerInfo;
|
||||||
localStorage.setItem('customer_info', JSON.stringify(mappedCustomerInfo));
|
localStorage.setItem('customer_info', JSON.stringify(mappedCustomerInfo));
|
||||||
|
|
||||||
|
// 二阶表单
|
||||||
|
if (result.data.form_content.length > 1) {
|
||||||
|
const rawAnswers2 = result.data.form_content[1].answers as RawAnswerItem[];
|
||||||
|
console.log('二阶原始答案:', rawAnswers2);
|
||||||
|
const mappedSecondStage = mapAnswersToCustomerInfo(rawAnswers2);
|
||||||
|
secondStageInfo.value = mappedSecondStage;
|
||||||
|
localStorage.setItem('second_stage_info', JSON.stringify(mappedSecondStage));
|
||||||
|
} else {
|
||||||
|
secondStageInfo.value = null;
|
||||||
|
localStorage.removeItem('second_stage_info');
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
customerInfo.value = null
|
customerInfo.value = null
|
||||||
localStorage.removeItem('customer_info')
|
localStorage.removeItem('customer_info')
|
||||||
|
secondStageInfo.value = null
|
||||||
|
localStorage.removeItem('second_stage_info')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
@@ -365,13 +394,27 @@ const handleSmartReply = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-if="secondStageInfo" class="second-stage-section">
|
||||||
|
<h2 style="margin-top: 20px; border-top: 1px dashed #eee; padding-top: 20px;">
|
||||||
|
<span class="card-icon green">📋</span> 二阶评估信息
|
||||||
|
</h2>
|
||||||
|
<div class="qa-section">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item, index) in secondStageInfo.additional_info" :key="index" class="qa-item qa-item-stacked">
|
||||||
|
<span class="question">{{ index + 1 }}. {{ item.topic }} :</span>
|
||||||
|
<span class="answer">{{ item.answer }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card-meta">
|
<div class="card-meta">
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<!-- 快捷跳转按钮:虽然顶部有Tab,但这里的按钮也是很好的引导 -->
|
<!-- 快捷跳转按钮:虽然顶部有Tab,但这里的按钮也是很好的引导 -->
|
||||||
<button class="card-button smart-reply-button" @click="handleSmartReply">
|
<button class="card-button smart-reply-button" @click="handleSmartReply">
|
||||||
🤖 智能回复
|
🤖 智能回复
|
||||||
</button>
|
</button>
|
||||||
<button class="card-button" @click="handleButtonClick" :disabled="isLoading">
|
<button v-if="!secondStageInfo" class="card-button" @click="handleButtonClick" :disabled="isLoading">
|
||||||
<span v-if="isLoading">处理中...</span>
|
<span v-if="isLoading">处理中...</span>
|
||||||
<span v-else>📧 发送二阶评估表</span>
|
<span v-else>📧 发送二阶评估表</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -617,6 +660,30 @@ const handleSmartReply = () => {
|
|||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
/* 确保普通回答也能换行 */
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 二阶表单垂直排列样式 */
|
||||||
|
.qa-item-stacked {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-item-stacked .question {
|
||||||
|
white-space: normal; /* 允许换行 */
|
||||||
|
margin-bottom: 6px; /* 题目和答案之间的间距 */
|
||||||
|
width: 100%;
|
||||||
|
word-wrap: break-word; /* 防止长单词溢出 */
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-item-stacked .answer {
|
||||||
|
width: 100%;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 手机号输入界面样式 */
|
/* 手机号输入界面样式 */
|
||||||
|
|||||||
Reference in New Issue
Block a user