CQ_JD
/
nazw


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南岸区微信公众号</title>
    <link rel="stylesheet" href="css/officialAccounts.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>

<body>
    <div class="head">新媒体矩阵</div>
    <div class="nav">
        <ul>
            <li onclick="location.href='officialAccounts.html'"><img src="img/weixin.png" alt=""> 微信公众号</li>
            <li onclick="location.href='weBo.html'"><img src="img/weibo.png" alt=""> 新浪微博</li>
            <li onclick="location.href='today.html'"><img src="img/toutiao.png" alt=""> 今日头条</li>
        </ul>
    </div>
    <div class="banner">
        <div class="swiper">
            <div class="swiper-wrapper">
                <!-- <div class="swiper-slide"> -->
                <!-- <ul>
                        <li><img src="img/guohui.png" alt="">
                            <p style="color:#2876CD;">重庆市南岸区人民政府</p>
                        </li>
                        <li><img src="img/xiaofang.png" alt="">
                            <p>重庆南岸消防 </p>
                        </li>
                        <li><img src="img/chengguan.png" alt="">
                            <p>南岸智慧城管</p>
                        </li>
                        <li>
                            <img src="img/jiankang.png" alt="">
                            <p>南岸健康卫士</p>
                        </li>
                        <li>
                            <img src="img/wenlv.png" alt="">
                            <p>南岸文旅</p>
                        </li>
                        <li>
                            <img src="img/shengtai.png" alt="">
                            <p>南岸生态环境</p>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul >
                        <li><img src="img/sifa.png" alt="">
                            <p>南岸司法</p>
                        </li>
                        <li><img src="img/shebao.png" alt="">
                            <p>南岸人力社保</p>
                        </li>
                        <li><img src="img/gongan.png" alt="">
                            <p>南岸公安</p>
                        </li>
                        <li>
                            <img src="img/guozi.png" alt="">
                            <p>南岸国资</p>
                        </li>
                        <li>
                            <img src="img/shuxiang.png" alt="">
                            <p>书香南岸</p>
                        </li>
                        <li>
                            <img src="img/yujian.png" alt="">
                            <p>遇见南坪</p>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul >
                        <li><img src="img/jiedao.png" alt="">
                            <p>重庆市南岸区南坪街道</p>
                        </li>
                        <li><img src="img/fabu.png" alt="">
                            <p>南岸发布</p>
                        </li>
                        <li><img src="img/wentjd.png" alt="">
                            <p>重庆市南岸区天文街道</p>
                        </li>
                        <li>
                            <img src="img/jiangk.png" alt="">
                            <p>南岸健康</p>
                        </li>
                        <li>
                            <img src="img/jiandu.png" alt="">
                            <p>南岸区卫生监督</p>
                        </li>
                        <li>
                            <img src="img/guangyang.png" alt="">
                            <p>广阳岛绿色发展公司</p>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li><img src="img/jiedao.png" alt="">
                            <p style="width: 50.66666vw;">重庆市南岸区南坪街道</p>
                        </li>
                    </ul> -->
                <!-- </div> -->
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="table">
        <!-- <ul>
        <li>
                <a href="#">
                    <div>重庆市南岸区人民政府</div>
                    <p>面对世纪疫情,习近平总书记这样统筹指挥!</p>
                    <span>2022-03-30 </span>
                </a>
            </li>

        </ul> -->
    </div>
    <div class="btn" style="display: none;">查看更多</div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {

            loop: true, // 循环模式选项
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        })
        $(function () {
            var page = 1
            var count = 0
            var limit = 10
            var name='重庆市南岸区人民政府'
            function getMessage(page,name) {
                $.ajax({
                    type: 'GET',
                    url: '/article/getOfficialAccountByPaging',
                    dataType: 'json',
                    data: {
                        'page': page,
                        'limit': 10,
                        'name': name,
                    },
                    success: function (json) {
                        var data = json.data
                        count = json.count
                        var html = ''
                        html += '<ul>'
                        for (var i = 0; i < data.length; i++) {
                            html += '<li>'
                            html += '<a href=' + data[i].url + '>'
                            html += '<div>' + data[i].officialAccount + '</div>'
                            html += '<p>' + data[i].title + '</p>'
                            html += '<span>' + data[i].nowTime + '</span>'
                            html += '</a>'
                            html += '</li>'
                        }
                        html += '</ul>'
                        $('.table').append(html)
                        if (count > 10) {
                            $('.btn').css('display', 'block')
                        } else {
                            $('.btn').css('display', 'none')
                        }
                    },
                    error: function (e) {
                    }
                });
            }
            $('.btn').on('click', function () {
                if ((page * limit) > count) {
                    $('.btn').css('display', 'none')
                } else {
                    page++
                    getMessage(page,name)
                }
            })
            getMessage(page,name)
            $.ajax({
                type: 'GET',
                url: '/article/getAllOfficialAccount',
                data: {
                    'tag': 'phone'
                },
                success: function (json) {
                    var datas = json.data.ofa;
                    var html = ''
                    var arr = []
                    for (var i = 0; i < datas.length; i++) {
                        if(datas[i].wName =='重庆市南岸区人民政府') {
                            arr.push(datas[i])
                            break;
                        }
                    }
                    for (var i = 0; i < datas.length; i++) {
                        if (datas[i].wType == '微信公众号') {
                            if(datas[i].wName =='重庆市南岸区人民政府'){
                            continue;
                        }
                            arr.push(datas[i])
                        }
                    }
                    console.log(arr)
                    for (var j = 0; j < arr.length; j++) {
                        if ((j % 6) == 0) {
                            html += '<div class="swiper-slide"><ul>'
                        }
                        html += '<li class="btns"><img src="' + arr[j].wxHead + '" alt="暂无图片">'
                        html += '<p>' + arr[j].wName + '</p>'
                        html += '</li>';

                        if ((j % 6) == 5) {
                            html += '</ul></div>';
                        }
                    }
                    $('.swiper-wrapper').append(html);
                    for(let k=0;k<arr.length;k++){
                        $('.btns').eq(k).click(function(){
                           console.log($('.btns').eq(k).text()) 
                            name=$('.btns').eq(k).text()
                            
                            page=1
                            getMessage(page,name)
                            $('.table').empty()
                        })
                    }
                },
                error: function (e) {

                }
            });
            
        })

    </script>
</body>

</html>