sannongzixunwang_web/pages/topic/index.vue

<template>
    <div>
        <!-- 页面头部 -->
        <HomePageHead></HomePageHead>
        <HomePageNavigation1></HomePageNavigation1>

        <div class="topicBox">
            <div class="inner">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="getTopicsList">
                    <el-tab-pane label="推荐" name="">
                        <!-- 列表 -->
                        <NuxtLink :to="`/topic/${item.id}`" v-for="item in listData" :key="index">
                            <div class="topicList">
                                <div class="listHead">
                                    <div class="left">
                                        <div class="one" v-if="item.type == 1">科研</div>
                                        <div class="two" v-else-if="item.type == 2">维权</div>
                                        <div class="three" v-else-if="item.type == 3">讨论</div>
                                    </div>
                                    <div class="right">{{ item.created_at }}</div>
                                </div>
                                <div class="listFoot">
                                    <div class="left">
                                        <h2>{{ item.title }}</h2>
                                        <p>
                                            <img v-if='item.avatar' :src="item.avatar" alt="">
                                            <img v-else src='../../static/topic/Rectangle.png' alt="">
                                            <span> {{ item.nickname }}</span>
                                            <img src="../../static/topic/Chat.png" alt="">
                                            <span> {{ item.num ? item.num : 0 }}</span>
                                        </p>
                                    </div>
                                    <div class="right" v-show="item.group_name">
                                        <img src="../../static/topic/Chat1.png" alt="">
                                        <span>{{ item.group_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </NuxtLink>
                        <div class="adEmpty" v-show="!currentPage">
                            <img src="../../static/topic/Blogs_empty.png" alt="">
                            <span>暂无商圈列表~</span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="item.label" :name="item.value" v-for="item in typeList">
                        <!-- 列表 -->
                        <NuxtLink :to="`/topic/${item.id}`" target="_blank" v-for="item in listData">
                            <div class="topicList">
                                <div class="listHead">
                                    <div class="left">
                                        <div class="one" v-if="item.type == 1">科研</div>
                                        <div class="two" v-else-if="item.type == 2">维权</div>
                                        <div class="three" v-else-if="item.type == 3">讨论</div>
                                    </div>
                                    <div class="right">{{ item.created_at }}</div>
                                </div>
                                <div class="listFoot">
                                    <div class="left">
                                        <h2>{{ item.title }}</h2>
                                        <p>
                                            <img :src="item.avatar" alt="">
                                            <!-- <img v-else src='../../static/topic/Rectangle.png' alt=""> -->
                                            <span> {{ item.nickname }}</span>
                                            <img src="../../static/topic/Chat.png" alt="">
                                            <span> {{ item.num ? item.num : 0 }}</span>
                                        </p>
                                    </div>
                                    <div class="right" v-show="item.group_name">
                                        <img src="../../static/topic/Chat1.png" alt="">
                                        <span>{{ item.group_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </NuxtLink>
                        <div class="adEmpty" v-show="!currentPage">
                            <img src="../../static/topic/Blogs_empty.png" alt="">
                            <span>暂无商圈列表~</span>
                        </div>
                    </el-tab-pane>
                </el-tabs>

                <!-- 分页 -->
                <div class="paginationBox"  v-show="currentPage">
                    <el-pagination background layout="prev, pager, next" :total="currentPage" prev-text="上一页"
                        next-text="下一页" @change="pageChage" />
                </div>
            </div>
        </div>
        <!-- 页面底部 -->
        <HomeFoot1></HomeFoot1>

    </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';

// axios请求
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;
//1.引用模块 end ---------------------------------------->

// 定义响应式数据
const seoData = ref({
    title: '商圈',
    description: '默认描述',
    keywords: '默认关键词',
    image: 'https://example.com/default-image.jpg'
});

// 在 onMounted 钩子中获取数据
onMounted(()=>{
    seoData.value.title = '商圈';
    seoData.value.description = '默认描述';
    seoData.value.keywords = '默认关键词';
})

//2.页面数据 start ---------------------------------------->
const activeName = useState("activeName", () => '')
const listData = useState("listData", () => [])//商圈列表
const typeList = useState("typeList", () => [])//商圈分类
const statusList = useState("statusList", () => [])//商圈状态
// 分页相关
const currentPage = useState("currentPage", () => 0)
const pageSize = useState("pageSize", () => 10)
const page = useState("page", () => 1)

//2.页面数据 end ---------------------------------------->

//3.分页 start ---------------------------------------->
const pageChage = (val) => {
    page.value = val
    getTopicsList()
}
//3.分页 start ---------------------------------------->

//4.请求商圈列表 start ---------------------------------------->
const getTopicsList = () => {

    console.log('activeName', activeName.value);
    let data = new FormData()
    data.append('page', page.value)
    data.append('page_size', pageSize.value)
    data.append('status', 2)
    data.append('type', activeName.value)

    axios.post('chat/getTopicsList', data).then(response => {
        console.log("response", response);
        listData.value = response.data.data;
        currentPage.value = response.data.total;
    })
}

const getTopicsList1 = () => {

    console.log('activeName', activeName.value);
    let data = new FormData()
    data.append('page', page.value)
    data.append('page_size', pageSize.value)
    data.append('status', 2)
    // data.append('type', activeName.value)

    axios.post('chat/getTopicsList', data).then(response => {
        // console.log(response);
        listData.value = response.data.data;
        currentPage.value = response.data.total;
    })
}
onMounted(() => {
    getTopicsList1();
})

//4.请求商圈列表 end ---------------------------------------->


//5.获取分类和状态 start ---------------------------------------->
const topicType = () => {
    axios.post('/chat/topicType').then(response => {
        // console.log(response.data);
        // console.log(1);
        typeList.value = response.data;
    })
}

const topicStatus = () => {
    axios.post('chat/topicStatus').then(response => {
        console.log(response);
    })
}

onMounted(() => {
    //分类
    topicType();
    //状态
    topicStatus();
})

//5.获取分类和状态 end ---------------------------------------->


</script>

<style lang="less" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.topicBox {
    margin-bottom: 30px;

    .inner {
        width: 1200px;
        margin: 0 auto;

        :deep(.el-tabs__header) {
            width: 1200px;
            margin: 0 auto;
        }

        :deep(.el-tabs__item) {
            padding: 0 100px 0 20px;
            font-size: 16px;
            height: 60px;
        }

        :deep(.el-tabs__item.is-active),
        :deep(.el-tabs__item:hover) {
            color: #33b023;
        }

        :deep(.el-tabs__active-bar) {
            background-color: #33b023;
            height: 0;
        }

        :deep(.el-tabs__nav) {
            height: 60px;
        }

        .adEmpty {
            margin: 150px auto;
            text-align: center;

            img {
                width: 78px;
                height: 78px;
                vertical-align: -28px;
                margin-right: 10px;
            }

            span {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                font-size: 26px;
                color: #CCCCCC;
                line-height: 30px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }
    }

    .topicList {
        margin-top: 30px;
        height: 200px;
        border: 1px solid #e7e7e7;

        .listHead {
            height: 60px;
            padding: 15px 24px 15px 50px;
            border-bottom: 1px solid #e7e7e7;
            box-sizing: border-box;
            background-color: #fafafa;

            .left {
                div {
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFAA33;
                    background-color: #fbebd5;
                    padding: 5px 17px;
                }

                .one {
                    color: #FFAA33;
                    background-color: #fbebd5;
                }

                .two {
                    color: #33B023;
                    background-color: #d5ecd2;
                }

                .three {
                    color: #666;
                    background-color: #ebebeb;
                }
            }

            .right {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                font-size: 16px;
                color: #333333;
                padding: 5px 0;
            }
        }

        .listFoot {
            margin: 30px 50px;

            .left {
                h2 {
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: bold;
                    font-size: 20px;
                    color: #333333;
                }

                p {
                    margin-top: 30px;

                    img {
                        width: 24px;
                        height: 24px;
                        vertical-align: middle;
                        margin-right: 10px;
                    }

                    span {
                        margin-right: 40px;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #333333;
                    }
                }
            }

            .right {
                color: #139602;
                margin-top: 27px;

                img {
                    width: 24px;
                    height: 24px;
                    vertical-align: middle;
                    margin-right: 10px;
                }

                span {
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                }
            }
        }
    }
}

//分页样式
.paginationBox {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 90px;

    // 鼠标移入后字体颜色
    :deep(.el-pagination:hover) {
        color: #139609;
    }

    :deep(.el-pagination.is-background .btn-next),
    :deep(.el-pagination.is-background .btn-prev) {
        width: 70px;
        height: 34px;
        margin: 0px 10px;
        border-radius: 4px;
    }

    :deep(.el-pagination.is-background .el-pager li) {
        margin: 0px 10px;
        width: 38px;
        height: 34px;
        border-radius: 4px;
    }

    :deep(.el-pagination.is-background .btn-next.is-active),
    :deep(.el-pagination.is-background .btn-prev.is-active),
    :deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #028e21;
        color: #fff;
    }
}
</style>