zizhujianzhan_web/pages/topic/index.vue

<template>
    <div>
        <!-- 页面头部 -->
        <!-- <HomePageHead></HomePageHead>
        <HomePageNavigation1></HomePageNavigation1> -->
        <!-- 头部 -->
        <templateHead></templateHead>
        <!-- 菜单 -->
        <templateMenu></templateMenu>

        <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.author }}</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}`" target="_blank" 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.author }}</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>
        <!-- 页面底部 -->
        <!-- <HomeFoot></HomeFoot> -->
        <templateFoot></templateFoot>
    </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 ---------------------------------------->

//自助建站 start---------------------------------------->
//1.获得自助建站头部底部
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
//2.获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//3.获得该页的皮肤id
const skinId = ref("")
//4.获得站点基本信息
const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    //4.1设置站点基本信息
    templateBaseStore.setWebSiteInfo(responseStatus.data)
    //4.2设置皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
    //4.3设置seo
    useSeoMeta({
        title: "商圈" + "_" + "三农资讯网_全国政务信息一体化应用平台",
        meta: [
            { name: 'description', content: "三农资讯网以服务于党和国家各级职能部门三农政务资讯发布及政务公开信息公示为基点，为全国县级以上各级党政机关及其职能部门配置各自公开独立网络发布平台。主要频道有：三农政务资讯，农科资讯，农资购销，农产购销，农贸资讯，三农致富信息，农村文化生活，三农政策法规，三农之窗，三农调查，三农服务，三农知识，农民工，打假维权等。三农资讯网打造最具影响力的三农信息发布平台，并成为最具权威的三农资讯网。_三农资讯网-测试专用_全国政务信息一体化应用平台" , tagPriority: 10 },
            { name: 'keywords', content: "三农资讯,农业,三农,三农在线,农业新闻,三农资讯网_三农资讯网-测试专用_全国政务信息一体化应用平台" , tagPriority: 10 }
        ]
    });
}
//5.获得广告池
const adData = ref([]);
const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement', {
    method: 'GET',
    query: {},
});
if (adResponseStatus.code == 200) {
    templateBaseStore.setAdList(adResponseStatus.data)
    adData.value = adResponseStatus.data;
}
//自助建站 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;
           height: 54px;
        }

        .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: 60px;

    // 鼠标移入后字体颜色
    :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>