nongmingongwang/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 phone_none">
                                <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>
                            <div class="phone_li pc_none">
                                <div class=" phone_li_tip_head">
                                    <span v-for="i in typeList" :key="index" class="phone_li_tag_box">
                                        <span v-if="item.type == i.value" class="phone_li_tag"> {{ i.label }}</span>
                                    </span>
                                    <div class="phone_li_time"> {{ item.created_at }}</div>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_img_box">
                                        <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="">
                                    </div>
                                    <span class="phone_li_name"> {{ item.nickname }}</span>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_title"> {{ item.title }}</div>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_icon_1">
                                        <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat.png" alt="">
                                        <div>
                                            {{ item.num ? item.num : 0 }}
                                        </div>
                                    </div>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_icon_2" v-show="item.group_name">
                                        <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat1.png" alt="">
                                        <div>
                                            {{ item.group_name }}
                                        </div>
                                    </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 phone_none">
                                <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>
                            <div class="phone_li pc_none">
                                <div class=" phone_li_tip_head">
                                    <span v-for="i in typeList" :key="index" class="phone_li_tag_box">
                                        <span v-if="item.type == i.value" class="phone_li_tag"> {{ i.label }}</span>
                                    </span>
                                    <div class="phone_li_time"> {{ item.created_at }}</div>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_img_box">
                                        <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="">
                                    </div>
                                    <span class="phone_li_name"> {{ item.nickname }}</span>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_title"> {{ item.title }}</div>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_icon_1">
                                        <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat.png" alt="">
                                        <div>
                                            {{ item.num ? item.num : 0 }}
                                        </div>
                                    </div>
                                </div>
                                <div class="phone_li_tip">
                                    <div class="phone_li_icon_2" v-show="item.group_name">
                                        <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/Chat1.png" alt="">
                                        <div>
                                            {{ item.group_name }}
                                        </div>
                                    </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 phone_none" v-show="currentPage">
                    <el-pagination background layout="prev, pager, next" :total="currentPage" prev-text="上一页"
                        next-text="下一页" @change="pageChage" />
                </div>
                <div class="paginationBox pc_none" v-show="currentPage">
                    <el-pagination pager-count="5" background layout=" pager " :total="currentPage"
                        @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 },
        { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', 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>
<style lang="less" scoped>
@media screen and (min-width:801px) {
    /*pc*/
    .pc_none {
        display: none;
    }
}
@media screen and (max-width:800px) {
    /*ipad_phone*/
    .topicBox .inner {
        width: 92%;
    }
    .topicBox .inner /deep/.el-tabs__header {
        width: 100%;
    }
    /deep/.el-tabs__nav-prev {
        display: none;
    }
    /deep/.el-tabs__nav-next {
        display: none;
    }
    .topicBox .inner /deep/.el-tabs__nav-scroll {
        height: 50px;
    }
    .topicBox .inner /deep/.el-tabs__nav {
        height: 50px;
        display: block;
    }
    .topicBox .inner /deep/.el-tabs__item {
        padding: 0;
        float: left;
        height: 100%;
        line-height: 50px;
        box-sizing: border-box;
        margin-right: 22px;
    }
    /deep/.el-tabs__nav .is-active {
        border-bottom: 2px solid #489d97;
        font-weight: bold;
        color: #489d97 !important;
    }
    .phone_li {
        overflow: hidden;
        border: solid 1px #e7e7e7;
        margin-top: 11px;
        box-sizing: border-box;
        width: 100%;
        padding: 0 0 6px;
        .phone_li_tip {
            overflow: hidden;
            width: 96%;
            margin: 0px auto 11px;
        }
        .phone_li_tip_head {
            background: #fafafa;
            margin-bottom: 11px;
            width: 100%;
            padding: 0px 3%;
            overflow: hidden;
            box-sizing: border-box;
            border-bottom: solid 1px #e7e7e7;
        }
        .phone_li_tag_box {
            width: 100%;
            overflow: hidden;
        }
        .phone_li_tag {
            margin: 8px 0;
            color: #FFAA33;
            background-color: #fbebd5;
            float: left;
            font-size: 14px;
            padding: 4px 12px;
        }
        .phone_li_time {
            float: right;
            height: 33px;
            line-height: 33px;
            font-size: 14px;
            color: #333;
            margin-top: 5px;
        }
        .phone_li_img_box {
            float: left;
            height: 40px;
        }
        .phone_li_img_box img {
            display: block;
            height: 100%;
        }
        .phone_li_name {
            display: block;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #333;
            padding-left: 11px;
            box-sizing: border-box;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .phone_li_title {
            float: left;
            line-height: 22px;
            max-height: 44px;
            font-size: 18px;
            color: #333;
            font-weight: bold;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .phone_li_icon_1 {
            width: 100%;
            height: 22px;
        }
        .phone_li_icon_1 img {
            float: left;
            height: 22px;
            margin-right: 8px;
        }
        .phone_li_icon_1 div {
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            color: #333;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .phone_li_icon_2 {
            height: 22px;
            width: 100%;
        }
        .phone_li_icon_2 img {
            float: left;
            height: 22px;
            margin-right: 8px;
        }
        .phone_li_icon_2 div {
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            color: #333;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .paginationBox {
        margin: 22px 0 0;
    }
    /deep/.el-pagination.is-background .el-pager .is-active {
        background-color: #489d97 !important;
        color: #fff;
    }
    .paginationBox /deep/.el-pagination.is-background .el-pager li {
        margin: 0px 4px;
    }
    .phone_none {
        display: none;
    }
}
</style>