sannongzixunwang_web/pages/topic/index.vue

<template>
    <div>
        <!-- 页面头部 -->
         <AdvertisingHead></AdvertisingHead>
        <div class="topicBox">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="getTopicsList">
                <el-tab-pane :label="item.label" :name="item.value" v-for="item in typeList" >
                    <div class="topicList">
                        
                    </div>
                    <!-- <div class="topicInner">
                        <el-table :data="listData" border row-key="id">
                            <el-table-column prop="title" label="话题"/>
                            <el-table-column prop="user_name" label="作者"/>
                            <el-table-column label="状态">
                                <template #default="{row}">
                                    <span v-if="row.status == '1'" style="color: #666;">未审核</span>
                                    <span v-if="row.status == '2'" style="color: green;">已通过</span>
                                    <span v-if="row.status == '3'" style="color: red;">已拒绝</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="created_at" label="创建时间"/>
                            <el-table-column prop="updated_at" label="更新时间"/>
                            <el-table-column label="操作">
                                <template #default="{ row }">
                                    <NuxtLink :to="`/topic/${row.id}`">详情</NuxtLink>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div> -->
                    <div class="paginationBox">
                        <el-pagination background layout="prev, pager, next" :total="currentPage" />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 页面底部 -->
        <AdvertisingFoot></AdvertisingFoot>
    </div>
</template>

<script setup>
    //1.引用模块 start ---------------------------------------->
    //使用ref和reactive动态变量
    import { ref, reactive,onMounted  } from 'vue'
    //使用官方ssr请求模块
    import { useNuxtApp,useFetch } from '#app'
    //使用element-plus组件
    import { ElTabs, ElTabPane, ElTable, ElTableColumn, ElPagination } from 'element-plus';
    import request from '@/api/api';
    //1.引用模块 end ---------------------------------------->

    //2.页面数据 start ---------------------------------------->
    const activeName = ref(1)
    const listData = ref([])//商圈列表
    const typeList= ref([])//商圈分类
    const statusList = ref([])//商圈状态
    const currentPage = ref(0)
    //2.页面数据 end ---------------------------------------->

    //3.请求商圈列表 start ---------------------------------------->
    const searchApi = reactive({
        title:"",//标题
        type:"",//课题分类
        nickname:"",//作者
        status:"",//审核状态
        page:1,//当前是第几页
        page_size:10,//一共多少条
    });
    const getTopicsList = () => {
        searchApi.type = activeName;
        
        request('chat/getTopicsList',searchApi).then(res=>{
            listData.value = res._rawValue.data.data;
            currentPage.value = res._rawValue.data.total;
        })
    }
    getTopicsList();
    //3.请求商圈列表 end ---------------------------------------->

    
    //4.获取分类和状态 start ---------------------------------------->
    const topicType = () => {
        request('chat/topicType').then(res=>{
            typeList.value = res._rawValue.data;
        })
    }
    topicType();
  
    const topicStatus = () => {
        request('chat/topicStatus').then(res=>{
            statusList.value = res._rawValue.data;
        })
    }
    topicStatus();
    //4.获取分类和状态 end ---------------------------------------->


    //回复商圈
    // axios.post(`/chat/addReply`).then(response=>{
    //     // console.log(response.data.rows);
    //     newsList.value = response.data.rows;
    // }).catch(error => {
    //     console.error(error);
    // })

</script>

<style lang="less" scoped>
    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
    .topicBox {
        width: 1200px;
        margin: 40px auto;
       
    }
    .paginationBox {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
</style>