0ae0bd0fdf
- 新增首页推荐组件 HomeRecommend，用于展示趋势数据 - 新增推荐相关 API 接口 recommend.ts 及类型定义 - 优化 YlTable 组件，添加类型定义文件，支持 emptyText 和 width 属性 - 修改 Home 页面，添加首页推荐组件的展示 - 优化 Survey 页面代码结构，修复加载逻辑 - 添加响应类型定义，规范 API 返回数据格式
52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { recommend } from '@/hooks/request/recommend';
|
|
import { ref } from 'vue';
|
|
import YlTable from '@/components/YlTable/Index.vue';
|
|
|
|
// 外部获取的数据
|
|
const { data } = recommend({});
|
|
|
|
const props = ref<TablePropsType[]>([
|
|
{
|
|
prop: 'rank',
|
|
label: '排名',
|
|
width: '55'
|
|
},
|
|
{
|
|
prop: 'trend_name',
|
|
label: '趋势名称',
|
|
width: '85'
|
|
},
|
|
{
|
|
prop: 'growth_ring_ratio',
|
|
label: '声量增长环比',
|
|
width: '113'
|
|
},
|
|
{
|
|
prop: 'sales_growth_ring_ratio',
|
|
label: '销量增长环比',
|
|
width: '113'
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<van-cell class="home_recommend">
|
|
<template #extra>
|
|
<div style="width: 88vw">
|
|
<yl-table :data="data?.surveyTrendDataVOS" :props="props" />
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '@/assets/css/theme' as *;
|
|
|
|
.home_recommend {
|
|
border-radius: $card-radius;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|