feat(comparison): 实现产品对比功能

- 新增 compare 函数以获取产品对比数据
- 实现热门产品获取和展示
- 添加产品对比表格数据处理逻辑- 优化表格组件,支持动态列和数据绑定
This commit is contained in:
陈昱达
2025-06-13 10:13:06 +08:00
parent 1a6b0fc3b4
commit c9a9444b4e
4 changed files with 68 additions and 35 deletions

View File

@@ -37,7 +37,6 @@ export function chat(data) {
return getUrl('/hasl/chat')
}
export function audioToText(data) {
//聊天获取产品百宝箱
// 聊天框输入内容以“百宝箱”结尾时,调用这个接口
@@ -47,3 +46,13 @@ export function audioToText(data) {
data,
})
}
export function compare(data) {
//聊天获取产品百宝箱
// 聊天框输入内容以“百宝箱”结尾时,调用这个接口
return request({
url: getUrl('/hasl/product/compare'),
method: 'post',
data,
})
}

View File

@@ -42,6 +42,8 @@
</template>
<script>
import { compare } from '@/api/generatedApi'
export default {
name: 'ComparisonTable',
props: {

View File

@@ -50,6 +50,7 @@
<script>
import { Tab, Tabs, Cell, CellGroup, Icon } from 'vant'
import Comparsion from '@/views/comparison/table.vue'
import { compare, haslProducts } from '@/api/generatedApi/index'
export default {
name: 'ComparisonTab',
@@ -67,13 +68,7 @@ export default {
list: [
{
title: '重疾',
list: [
{ id: 1, title: '恒安标准一生无忧庆典版重度恶性肿瘤疾病保险' },
{ id: 2, title: '恒安标准中老年恶性肿瘤疾病保险6.0版)' },
{ id: 3, title: '恒安标准恒鑫世家终身寿险(分红型)' },
{ id: 4, title: '恒安标准幸福到老长寿2.0养老年金保险(分红型)' },
{ id: 5, title: '恒安标准恒盈慧选年金保险(分红型)' },
],
list: [],
},
{
title: '年金',
@@ -86,7 +81,26 @@ export default {
showComparison: false,
}
},
mounted() {
this.getHotProducts()
},
methods: {
async getHotProducts() {
const res = await haslProducts()
this.list = [
{
title: '热门产品',
list: res.content.map((item) => {
return {
...item,
id: item.productId,
title: item.productName,
}
}),
},
]
},
cellClick(item) {
const exists = this.comparisonMap.some((it) => it.id === item.id)
if (!exists) {

View File

@@ -8,13 +8,15 @@
<el-table-column v-for="(item, index) in list" :key="index" :label="item.title" width="150">
<template #default="scope">
<!-- 根据 item.id 映射对应的字段名比如 b1b2b3 -->
{{ formatValue(scope.row['b' + item.id]) }}
{{ formatValue(scope.row[item.id]) }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { compare } from '@/api/generatedApi'
export default {
props: {
list: {
@@ -25,35 +27,41 @@ export default {
data() {
return {
// 表格数据(每行是一个指标,列是各个产品值)
tableData: [
{
rowTitle: '保费',
b1: 1200,
b2: 1500,
b3: 900,
b4: 1800,
b5: 1300,
},
{
rowTitle: '保额',
b1: 100000,
b2: 80000,
b3: 500000,
b4: 300000,
b5: 200000,
},
{
rowTitle: '保障期限',
b1: '终身',
b2: '1年',
b3: '终身',
b4: '至80岁',
b5: '至70岁',
},
],
tableData: [],
}
},
watch: {
list: {
handler(val) {
console.log(val)
this.getCompare()
},
deep: true,
immediate: true,
},
},
methods: {
getCompare() {
let ids = this.list.map((item) => {
return item.id
})
compare(ids).then((res) => {
if (res) {
res.content.fieldNames.map((item) => {
this.tableData.push({
rowTitle: item,
})
})
res.content.productResults.map((item, index) => {
for (let keys in item.knowledge) {
let obj = this.tableData.find((it) => keys === it.rowTitle)
obj[item.productId] = item.knowledge[keys]
}
})
console.log(this.tableData)
}
})
},
formatValue(val) {
if (typeof val === 'number') {
return val.toFixed(2)