sannongshichangwang/pages/topic/index.vue

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

        <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">
                                        <span v-for="i in typeList" :key="index">
                                            <span v-if="item.type == i.value" class="one">{{ i.label }}</span>
                                        </span>
                                    </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='http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Rectangle.png'
                                                alt="">
                                            <span> {{ item.nickname }}</span>
                                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat.png"
                                                alt="">
                                            <span> {{ item.num ? item.num : 0 }}</span>
                                        </p>
                                    </div>
                                    <div class="right" v-show="item.group_name">
                                        <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat1.png" alt="">
                                        <span>{{ item.group_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </NuxtLink>
                        <div class="adEmpty" v-show="!currentPage">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/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}`" v-for="item in listData">
                            <div class="topicList">
                                <div class="listHead">
                                    <div class="left">
                                        <span v-for="i in typeList" :key="index">
                                            <span v-if="item.type == i.value" class="one">{{ i.label }}</span>
                                        </span>
                                    </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="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat.png"
                                                alt="">
                                            <span> {{ item.num ? item.num : 0 }}</span>
                                        </p>
                                    </div>
                                    <div class="right" v-show="item.group_name">
                                        <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat1.png" alt="">
                                        <span>{{ item.group_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </NuxtLink>
                        <div class="adEmpty" v-show="!currentPage">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/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(8899)
        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(111222333)
        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 ---------------------------------------->

//seo
useSeoMeta({
    title: "商圈" + "_" + "三农资讯网_全国政务信息一体化应用平台",
    meta: [
        { name: 'description', content: "三农资讯网以服务于党和国家各级职能部门三农政务资讯发布及政务公开信息公示为基点，为全国县级以上各级党政机关及其职能部门配置各自公开独立网络发布平台。主要频道有：三农政务资讯，农科资讯，农资购销，农产购销，农贸资讯，三农致富信息，农村文化生活，三农政策法规，三农之窗，三农调查，三农服务，三农知识，农民工，打假维权等。三农资讯网打造最具影响力的三农信息发布平台，并成为最具权威的三农资讯网。_三农资讯网-测试专用_全国政务信息一体化应用平台", tagPriority: 10 },
        { name: 'keywords', content: "三农资讯,农业,三农,三农在线,农业新闻,三农资讯网_三农资讯网-测试专用_全国政务信息一体化应用平台", tagPriority: 10 }
    ]
});
</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;
                    display: block;
                    padding: 5px 17px;
                }

                .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>