需求是这样的~
详情页点赞后,列表页刷新,我们这里的接口是一个接口对应一个数据
<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() {}); },