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 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}`" target="_blank" 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"}
    ]
});
</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;

            }
        .topicBox .inner /deep/.is-active{
                border-bottom: 2px solid #33b023;font-weight:bold;
            }

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

        .phone_none{display:none;}

    }
</style>