mirror of
http://112.124.100.131/ebiz-ai/ebiz-base-ai.git
synced 2025-12-09 10:56:50 +08:00
116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<template>
|
||
<div class="hot-products" :class="[!messagesList.length ? 'show' : 'hide']">
|
||
<h4>你可以这样问我：</h4>
|
||
|
||
<ul>
|
||
<li v-for="(product, index) in commendList" :key="index" :title="product.title" @click="cellClick(product)">
|
||
<a href="javascript:void(0)">{{ product.title }}</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Cell, CellGroup } from 'vant'
|
||
import { haslProducts } from '@/api/generatedApi'
|
||
|
||
export default {
|
||
name: 'HotProducts',
|
||
props: {
|
||
messagesList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
hotProducts: [],
|
||
commendList: [{
|
||
title: '请为我推荐一款重疾险。',
|
||
action: () => {
|
||
console.log('请为我推荐一款重疾险。');
|
||
}
|
||
}, {
|
||
title: "60周岁以上可以投保保险产品吗？",
|
||
action: () => {
|
||
console.log('60周岁以上可以投保保险产品吗？');
|
||
}
|
||
}, {
|
||
title: "普通办公室职员适合投保的产品有哪些？",
|
||
action: () => {
|
||
console.log('普通办公室职员适合投保的产品有哪些？');
|
||
}
|
||
}, {
|
||
title: "年龄: 26岁, 性别: 男, 主要理财目标: 养老保障",
|
||
action: () => {
|
||
console.log('年龄: 26岁, 性别: 男, 主要理财目标: 养老保障');
|
||
}
|
||
}],
|
||
showAll: false, // 控制是否展示全部数据
|
||
}
|
||
},
|
||
created() {
|
||
this.getHotProducts()
|
||
},
|
||
computed: {
|
||
displayedProducts() {
|
||
return this.showAll ? this.hotProducts : this.hotProducts.slice(0, 3)
|
||
},
|
||
},
|
||
methods: {
|
||
cellClick(item) {
|
||
this.$emit('cellClick', item)
|
||
},
|
||
toggleShowAll() {
|
||
this.showAll = !this.showAll
|
||
},
|
||
|
||
async getHotProducts() {
|
||
const res = await haslProducts()
|
||
this.hotProducts = res.content
|
||
this.$emit('getHotList', this.hotProducts)
|
||
},
|
||
},
|
||
components: {
|
||
[Cell.name]: Cell,
|
||
[CellGroup.name]: CellGroup,
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.hot-products {
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
overflow: scroll;
|
||
transition: all .3s ease-in-out;
|
||
|
||
&.hide {
|
||
opacity: 0;
|
||
}
|
||
&.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
h4 {
|
||
color: grey;
|
||
font-weight: normal;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
ul {
|
||
list-style-type: none;
|
||
|
||
li {
|
||
width: fit-content;
|
||
padding: 5px 10px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
color: #2e5ca9;
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|