128 lines
4.0 KiB
Vue
128 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="hot-search">
|
|
<div class="hot-search-type">
|
|
<el-button :type="activeType === 'ai' ? 'primary' : 'default'" @click="handleFilter('ai')">AI
|
|
热榜</el-button>
|
|
<el-button :type="activeType === 'low' ? 'primary' : 'default'"
|
|
@click="handleFilter('low')">低粉高爆</el-button>
|
|
<el-button :type="activeType === 'create' ? 'primary' : 'default'"
|
|
@click="handleFilter('create')">创作榜单</el-button>
|
|
</div>
|
|
<div class="hot-search-filter">
|
|
<span>关键词</span>
|
|
<el-input v-model="query.keyword" placeholder="关键词搜索" style="width: 200px;" />
|
|
<span>阅读量</span>
|
|
<el-select v-model="query.readCount" placeholder="请选择阅读量" style="width: 200px;">
|
|
<el-option label="1000-10000" value="1000-10000"></el-option>
|
|
<el-option label="10000-100000" value="10000-100000"></el-option>
|
|
<el-option label="100000-1000000" value="100000-1000000"></el-option>
|
|
</el-select>
|
|
<span>发布时间</span>
|
|
<el-date-picker style="width: 300px;" v-model="date" type="daterange" range-separator="至"
|
|
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
|
|
@change="handleDateChange" />
|
|
<el-button type="primary" @click="handleFilter">搜索</el-button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<el-table :data="tableData" style="width: 100%;">
|
|
<el-table-column label="序号" type="index" width="80" />
|
|
<el-table-column prop="title" label="标题" />
|
|
<el-table-column prop="" label="领域" />
|
|
<el-table-column prop="readCount" label="阅读量" />
|
|
<el-table-column prop="publishTime" label="发布时间" />
|
|
<el-table-column prop="action" label="操作" width="150">
|
|
<template #default="scope">
|
|
<el-link type="primary" @click="handleEdit(scope.row)">AI 改写</el-link>
|
|
<el-link type="primary" @click="handleEdit(scope.row)">查看原文</el-link>
|
|
<el-link type="primary" @click="handleEdit(scope.row)">创作灵感</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination background v-model:current-page="query.page" v-model:page-size="query.pageSize"
|
|
:page-sizes="[100, 200, 300, 400]" :size="query.pageSize" :disabled="disabled" :background="background"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
|
const activeType = ref('ai');
|
|
|
|
const handleFilter = (type) => {
|
|
activeType.value = type;
|
|
};
|
|
|
|
const query = reactive({
|
|
page: 1,
|
|
pageSize: 10,
|
|
keyword: '',
|
|
readCount: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
});
|
|
|
|
const handleDateChange = (value) => {
|
|
query.startDate = value[0];
|
|
query.endDate = value[1];
|
|
};
|
|
|
|
const handleSizeChange = (size) => {
|
|
pageSize.value = size;
|
|
};
|
|
|
|
const handleCurrentChange = (page) => {
|
|
query.page = page;
|
|
};
|
|
|
|
onMounted(() => {
|
|
handleFilter(activeType.value);
|
|
});
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.hot-search {
|
|
|
|
.hot-search-type {
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
.hot-search-filter {
|
|
line-height: 36px;
|
|
|
|
span {
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-input {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.el-select {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.el-button {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-table {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.el-pagination {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.el-link+ .el-link {
|
|
margin-left: 10px;
|
|
}
|
|
</style> |