怎么让点赞数实时更新渲染

需求是这样的~

详情页点赞后,列表页刷新,我们这里的接口是一个接口对应一个数据

 

  <div class="fishqc-foretell" ms-visible="excellenceReport">
            <div style="height: 15rem" id="excellentcontain">
                <div ms-for="(key,el) in @excellenceReportLists" style="padding:1rem 0.5rem;padding: 0.5rem 0.5rem 0.5rem 0.5rem;height: 0rem;text-align: center;" ms-class="[@excellenceReportLists.length=='1'?'make-it-large':'make-it-small']">
                    <a ms-click="jumpToreport(el)" style="display: inline-block;border:1px solid #dfdfdf;width: 100%;height: 14rem;padding: 1rem 0.3rem 0 0;position: relative;float: left;">
                        <div class="fishqc-myreport" style="position: relative;padding-left: 1rem;box-sizing: border-box;float: left;width:100%;">
                            <img src="/img/jingpin.jpg" alt="" style="display: block;top:-1rem;left:0rem;position: absolute;width: 2.5rem;position: absolute;" ms-visible="el.excellence=='1'">
                            <span style="float: left;position: relative;">
                              <img ms-attr="{src:el.avatar}"  alt="" class="fishqc-myreport-img" style="margin-right: 0.5rem;">
                              <img src="/img/v.png" alt="" style="width: 0.8rem;top: 1.35rem;position: absolute;left: 1.3rem;" ms-visible="el.verified=='1'">
                              <span class="color-9">{{el.author}}</span>
                            </span>
                            <span class="fishqc-floatR fishqcfont">试后推荐度:
                            <p style="display: inline-block;">
                            <span ms-class="['fishqc-report-xing-small',el.score >=1 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                            <span ms-class="['fishqc-report-xing-small',el.score >=2 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                            <span ms-class="['fishqc-report-xing-small',el.score >=3 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                            <span ms-class="['fishqc-report-xing-small',el.score >=4 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                            <span ms-class="['fishqc-report-xing-small',el.score >=5 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                            </p>
                            </span>
                        </div>
                        <p class="fishqc-myreporttitles" style="padding-left: 1rem;text-align: left;padding-top: .5rem;">{{el.title}}</p>
                        <div class="fishqc-myreportbox" style="margin-left: 1rem;">
                            <div class="fishqc-myreportboxImg" ms-css="{backgroundImage: 'url('+el.prdImg + ')'}">
                                <i class="fishqc-greenfish" style="width: 2rem;height: 2rem;right: -.5rem;"></i>
                            </div>
                            <div style="display: inline-block;width:60%;float:right;">
                                <p class="reportproductname" style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{el.name?el.name:el.prdName}}</p>
                                <p class="fishqcTry-img-status fishqc-textLeft" style="margin-top: .5rem;"><span ms-visible="el.hasimg">有晒图</span><span ms-visible="el.excellence=='1'">精品报告</span></p>
                            </div>
                        </div>
                        <div class="fishqc-myreportcoin" style="margin-left: 1rem;">
                            <span class="fishqc-floatL">{{el.ctime}}</span><span class="fishqc-floatR">
                            <p class="fishqc-report-ping"><span class="fishqc-report-praise"><img src="/img/fishqc-praise.png" alt=""><span class="fishqc-vertical">{{el.praise}}</span></span><span class="fishqc-report-collect"><img src="/img/fishqc-collect.png" alt=""><span>{{el.favNum}}</span></span>
                            </p>
                            </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
  excellenceReportList: function() {
            $.get('/excellenceReportList', {
                lang: 'chs',
                page: 1,
                limit: 10
            }, function(res) {
                if (res.code == '200') {

                    if (res.data.tryInfo.length == '1') {
                        $('#excellentcontain').css({
                            width: '100%'
                        })
                    } else {
                        $('#excellentcontain').css({
                            width: (res.data.tryInfo.length * 19) + 'rem'
                        })

                    }
                    vmi.excellenceReportLists = res.data.tryInfo;
                    vmi.excellenceReportLists.forEach(function(val, index) {  
                        vmi.excellentId=val.id
                        // excellentId
                        vmi.gettimes(val)
                        if (val.score == '0') {
                            return vmi.tryReportStar;
                        } else {
                            vmi.tryReportStar.splice(0, val.score)
                            for (var i = 0; i < val.score; i++) {
                                vmi.tryReportStar.unshift(true)
                            }
                        }
                    })
                } else if (res.code == '204') {
                    //如果精选报告没有的话就隐藏
                    vmi.excellenceReport = false;

                }
            })
        },
  //让点赞数实时更新,精品
         gettimes: function(el) {
            $.ajaxSetup({
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                }
            });
            $.get("https://stat.fishqc.com/stat", { 
                'id': el.id,
                't': 'try_report'
            }, function(res) {     
                if (res.code == "200") {
                   vmi.newlike=res.data.like
                   el.praise=vmi.newlike
                    
                }
            }).fail(function() {});
         },

猜你喜欢

转载自www.cnblogs.com/antyhouse/p/8921324.html