104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<script setup>
|
|
import { computed, defineProps, ref ,watch} from 'vue'
|
|
|
|
|
|
import SectionTitle from '../../../components/SectionTitle.vue'
|
|
import Section from '../../../components/Section.vue'
|
|
|
|
import PeopleLike from './PeopleLike.vue'
|
|
import PeopleDislike from './PeopleDislike.vue'
|
|
import ProductImage from './ProductImage.vue'
|
|
|
|
const props = defineProps({
|
|
report: { type: Object, default: () => Object.assign({}) },
|
|
readonly: { type: Boolean, default: false }
|
|
})
|
|
|
|
|
|
|
|
const activeKey = ref('0')
|
|
|
|
const tabList = ref([])
|
|
|
|
watch(() => props.report, () => {
|
|
tabList.value = [
|
|
{
|
|
key: '0',
|
|
name: '总体',
|
|
canHide: false,
|
|
visible: true,
|
|
tableData: props.report?.chatVOS?.[0] || {},
|
|
},
|
|
{
|
|
key: '1',
|
|
name: '性别',
|
|
canHide: true,
|
|
visible: true,
|
|
tableData: props.report?.chatVOS?.[1] || {},
|
|
},
|
|
{
|
|
key: '2',
|
|
name: '年龄段',
|
|
canHide: true,
|
|
visible: true,
|
|
tableData: props.report?.chatVOS?.[2] || {},
|
|
},
|
|
{
|
|
key: '3',
|
|
name: '家庭月收入',
|
|
canHide: true,
|
|
visible: true,
|
|
tableData: props.report?.chatVOS?.[3] || {},
|
|
},
|
|
{
|
|
key: '4',
|
|
name: '城市级别',
|
|
canHide: true,
|
|
visible: true,
|
|
tableData: props.report?.chatVOS?.[4] || {},
|
|
}
|
|
]
|
|
}, { immediate: true })
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<SectionTitle>概念诊断</SectionTitle>
|
|
<Section class="section">
|
|
<a-tabs v-model:activeKey="activeKey" :animated="false">
|
|
<a-tab-pane v-for="(item) in tabList" :key="item.key" :tab="item.name">
|
|
<div class="tab-container">
|
|
<PeopleLike />
|
|
<PeopleDislike />
|
|
<ProductImage :report="props.report"/>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</Section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.section {
|
|
padding: 0;
|
|
}
|
|
|
|
:deep(.ant-tabs) {
|
|
.ant-tabs-bar {
|
|
margin-bottom: 26px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
|
|
.tab-container {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 6px;
|
|
font-size: 14px;
|
|
color: #B9B9B9;
|
|
}
|
|
</style>
|