usoft
/
usoftchina-jpress


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
							<!--手机列表页-->
<#if USER??> <#assign userId=USER.id><#else><#assign userId=0></#if>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="${CTPATH}/assets/js/jquery.min.js"></script>
    <title></title>
    <style>
        .main{
            width: 100%;
            margin: 0 auto;
        }
        .main .container{
            /*width: 1190px;*/
            max-width: 640px;
            margin: 0 auto;
            text-align: center;
            padding: 0 10px;
        }
        .main .container .header p{
            text-align: left;
            font-size: 18px;
            color: #000;
        }
        .main .container .header div{
            margin: 5px 0;
            text-align: left;
            font-size: 14px;
            color: #8c8c8c;
        }
        .main .container .header div span:first-child{
            margin-right: 10px;
        }
        .main .container .section div{
            font-size: 14px;
            color: #000;
            text-align: left;
        }
        .main .container .section p{
            font-size: 14px;
            line-height: 20px;
            color: #6c6a6b;
            text-indent: 2em;
            text-align: left;
        }
        .main .container .section div.readCount{
            margin: 30px 0;
            overflow: hidden;
            color: #8c8c8c;
        }
        .main .container .section div.readCount div{
            float: left;
        }
        .main .container .section div.readCount div span{
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
        }
        .main .container .section div.readCount div span em{
            color: #5f9ac6;
            margin-left: 5px;
            font-style: normal;
        }
        .main .container .section div.readCount div span i{
            display: inline-block;
            font-size: 14px;
            color: #8c8c8c;
        }
        .main .container .section div.readCount p{
            float: right;
            font-size: 14px;
        }
        .main .container .section div.readCount img{
            width: 18px;
            height: 18px;
        }
        .main .container .footer{
            border-top: 1px solid #d7d5d6;
            padding-top: 20px;
        }
        .main .container .footer .footer-header{
            position: relative;
            cursor: pointer;
        }
        .main .container .footer .footer-header div.infoMessage{
            position: absolute;
            left: 278px;
            top: -30px;
            width: 90px;
            height: 25px;
            color: #8ca8bd;
            font-size: 14px;
            background: #fff;
        }
        .main .container .footer .footer-header div.infoMessage:hover{
            color: #000;
        }
        .main .container .footer .footer-header div span{
            margin-right: 5px;
        }
        .main .container .footer .footer-header div img{
            width: 15px;
            height: 15px;
        }
        .main .container .footer .footer-section .message{
            margin: 30px 0;
            overflow: hidden ;
        }
        .main .container .footer .footer-section .message .left{
            float: left;
        }
        .main .container .footer .footer-section .message .right{
            float: right;
            width: 85%;
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .main .container .footer .footer-section .img{
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 70px;
            height: 70px;
        }
        .main .container .footer .footer-section .img img{
            max-width: 70px;
            max-height: 70px;
            text-align: center;
            margin: 0 auto;
        }
        .main .container .footer .footer-section .detail{
            /*overflow: hidden;*/
        }
        .main .container .footer .footer-section .detail .title{
            overflow: hidden;
            margin-bottom: 10px;
        }
        .main .container .footer .footer-section .detail .title img{
            width: 17px;
            height: 17px;
        }
        .main .container .footer .footer-section .detail .title span:first-child{
            float: left;
            color: #6c6a6b;
            font-size: 14px;
        }
        .main .container .footer .footer-section .detail .title span:first-child em{
            margin-left: 10px;
            font-size: 14px;
            color: #8c8c8c;
            font-style: normal;
        }
        .main .container .footer .footer-section .detail .title span em{
            font-size: 14px;
        }
        .main .container .footer .footer-section .detail .title span:last-child{
            color: #8c8c8c;
            font-size: 14px;
            float: right;
            cursor: pointer;
        }
        .main .container .footer .footer-section .detail .title span:last-child em{
            margin-left: 10px;
            color: #5f9ac6;
            font-size: 14px;
            padding-right: 5px;
            font-style: normal;
        }
        .main .container .footer .footer-section .detail p{
            text-align: left;
            font-size: 14px;
            color: #333;
        }
        .main .container .footer .footer-section .detail .reply {
            margin-top: 10px;
        }
        .main .container .footer .pull{
            margin: 40px 0;
        }
        .main .container .footer .pull a{
            font-size: 14px;
            color: #8c8c8c;
            text-decoration: none;
        }
        .main .container .footer .footer-header .writeMessage{
            display: none;
            padding: 20px;
        }
        .main .container .footer .footer-header .writeMessage textarea{
            width: 580px;
            height: 100px;
        }
        .main .container .footer .footer-header .writeMessage div{
            text-align: right;
            margin-top: -60px;
        }
        .main .container .footer .footer-header .writeMessage button{
            display: inline-block;
            width: 80px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            font-size: 14px;
            background: #b4b5b9;
            border-radius: 5px;
            color: #333;
            border: none;
            cursor: pointer;
        }
        .main .container .footer .footer-header .writeMessage button:hover{
            border: none;
            background: #5078cb;
            color: #fff;
        }
    </style>
    <!--<#macro script>-->
    <script>
    </script>
    <!--</#macro>-->
</head>
<body>
<div class="main">
    <div class="container">
        <div class="header">
            <p>${content.title!}</p>
            <div><span>${(content.getMetadataByKey("push_time"))!}</span><span>${content.author!}</span></div>
        </div>
        <div class="section">
            ${content.text!}
            <div class="readCount">
                <div>
                    <span>阅读 <em>${content.view_count!'0'}</em></span>
                    <span><img src="/jpress/static/jpress/admin/image/hands.png" alt=""><em>${content.vote_up!'0'}</em></span>
                    <!--<span><img src="/jpress/static/jpress/admin/image/support.png" alt=""/><em>1</em></span>-->
                </div>
                <p>${(content.getMetadataByKey("copy_right"))!}</p>
            </div>
        </div>
        <div class="footer">
            <#if content.isCommentEnable() && !(content.isUuUserReplied(userid) || (USER?? && content.isUserReplied(USER.id))) && (USER?? || userid??)>
                <form action="${CPATH}/comment/submit" method="post"  id="comment">
                    <input type="hidden" name="cid" value="${(content.id)!}" >
                    <input type="hidden" id="parent_id" name="parent_id" >
                    <input type="hidden" name="uuUserId" value="${userid!}" >
                    <input type="hidden" name="uuUserName" value="${username!}" >
                    <input type="hidden" name="uuUserAvatar" value="${iconurl!}" >

                    <div class="footer-header">
                        <div class="infoMessage"><span>写留言</span><img src="/jpress/static/jpress/admin/image/pen.png" alt=""/></div>
                        <div class="writeMessage">
                            <textarea name="text" id="" cols="30" rows="10"></textarea>
                            <div><button type="submit">提交留言</div>
                        </div>
                    </div>
                </form>
            </#if>
            <div class="footer-section">
                <@jp.commentPage pageSize="1">
                <#if page ??>
                    <#list page.getList() as comment>
                        <div class="message">
                            <div class="left">
                                <div class="img" >
                                    <img src="/jpress/static/jpress/admin/image/dot.png" alt="用户头像">
                                </div>
                            </div>
                            <div class="right">
                                <div class="detail">
                                    <div class="title">
                                        <span>${comment.author!} <em>${(comment.created?string("yyyy-MM-dd"))!}</em></span>
                                        <span><img class="votedUas${comment.id} <#if comment.isvoted(comment.id, userId!0, userid!0)>voted</#if>" src="/jpress/static/jpress/admin/image/hands.png" alt="" onclick="vote(${comment.id})"/><em class="em${comment.id}">${(comment.vote_up)!'0'}</em></span>
                                    </div>
                                    <p>${comment.text!}</p>
                                    <#if comment.qc_content ??>
                                        <div class="title reply">
                                            <span>作者回复： <em>${(comment.qc_created?string("yyyy-MM-dd"))!}</em></span>
                                            <span><img class="votedUas${comment.qc_id} <#if comment.isvoted(comment.qc_id, userId!0, userid!0)>voted</#if>" src="/jpress/static/jpress/admin/image/hands.png" alt="" onclick="vote(${comment.qc_id})"/><em class="em${comment.qc_id}">${(comment.qc_vote_up)!'0'}</em></span>
                                        </div>
                                        <p>${comment.qc_content!}</p>
                                    </#if>
                                </div>
                            </div>
                        </div>
                    </#list>

                </#if>
            </@jp.commentPage>
            </div>
            <div class="pull">下拉加载更多</div>
            <!--<div class="pull"><a>没有更多数据了</a></div>-->
        </div>
    </div>
</div>
</body>
<script>
    jQuery('html').css('fontSize',$(window).width()/640 * 30);
//    jQuery(window).load(function () {
//        jQuery("img").each(function () {
//            DrawImage(this, 100, 50);
//        });
//    });
//    function DrawImage(ImgD, FitWidth, FitHeight) {
//        var image = new Image();
//        image.src = ImgD.src;
//        if (image.width > 0 && image.height > 0) {
//            if (image.width / image.height >= FitWidth / FitHeight) {
//                if (image.width > FitWidth) {
//                    ImgD.width = FitWidth;
//                    ImgD.height = (image.height * FitWidth) / image.width;
//                } else {
//                    ImgD.width = image.width;
//                    ImgD.height = image.height;
//                }
//            } else {
//                if (image.height > FitHeight) {
//                    ImgD.height = FitHeight;
//                    ImgD.width = (image.width * FitHeight) / image.height;
//                } else {
//                    ImgD.width = image.width;
//                    ImgD.height = image.height;
//                }
//            }
//        }
//    }
//    写留言
    $('.footer-header>div.infoMessage').click(function () {
        $(this).next('.writeMessage').toggle()
    })
//    上拉加载更多
    var aa = 2,
    timers = null;
    //加载数据
    var LoadingDataFn = function() {
        $.get("${CPATH}/comment/lazyLoad?contId=${(content.id)!}&pagesize=3&pagenumber="+aa+"&userId=${userId!0}&uuUserId=${userid!0}", function(result){
            var dom = '';
            if (result.data == null){
                $('.pull').text("没有更多数据了");
            }
            dom += result.message;
            $('.footer-section').append(dom);
        });

    };
    //初始化
    var userId = null;
    var uuUserId = null;
    $(document).ready(function() {
        userId = "${userId!0}"
        uuUserId = "${userid!0}";
        $('.voted').attr("src","/jpress/static/jpress/admin/image/support.png");
    });
    //滚动加载方法
    $(window).scroll(function() {
        if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
            clearTimeout(timers);
            timers = setTimeout(function() {
                aa++;
                LoadingDataFn();
            }, 300);
        }
    });

    //点赞
    var vote = function(commentid) {
        var imgObj = $(".votedUas"+commentid);
        var emObj = $(".em"+commentid);
        if (imgObj.hasClass("voted")) {
            emObj.text(""+(parseInt(emObj.text())-1));
            imgObj.removeClass("voted");
            imgObj.attr("src","/jpress/static/jpress/admin/image/hands.png");
        } else {
            emObj.text(""+(parseInt(emObj.text())+1));
            imgObj.addClass("voted");
            imgObj.attr("src","/jpress/static/jpress/admin/image/support.png")
        }
        $.get("${CPATH}/comment/vote?comment_id="+commentid+"&user_id="+userId+"&uu_user_id="+uuUserId, function(result){
            console.log(result.message);
        });
    }

</script>
</html>