<div class="row g-4 morequn">
{qb:tag name="index_qun001" type="qun" mid="-1" order="list" by="desc" rows="6" js="morequn"}
<div class="col-sm-6 col-lg-4">
<!-- Card START -->
<div class="card">
<div class="h-80px rounded-top" style="background-image:url({$rs.banner}); background-position: center; background-size: cover; background-repeat: no-repeat;"></div>
<!-- Card body START -->
<div class="card-body text-center pt-0">
<!-- Avatar -->
<div class="avatar avatar-lg mt-n5 mb-3">
<a href="{:get_url('msg',-$rs.id)}"><img class="avatar-img rounded-circle border border-white border-3 bg-white" src="{$rs.picurl}" alt=""></a>
</div>
<!-- Info -->
<h5 class="mb-0"> <a href="{$rs.url}">{$rs.title}</a> </h5>
<small> <i class="bi bi-person-circle"></i>{$rs.username}</small>
<!-- Group stat START -->
<div class="hstack gap-2 gap-xl-3 justify-content-center mt-3">
<!-- Group stat item -->
<div>
<h6 class="mb-0"> {$rs.view}{// :fun('qun@count','bbs_content1',$rs.id)} </h6>
<small>热度</small>
</div>
<!-- Divider -->
<div class="vr"></div>
<!-- Group stat item -->
<div>
<h6 class="mb-0">{:fun("count@info",'bbs_content1',['ext_id'=>$rs.id])}</h6>
<small>帖子</small>
</div>
</div>
<!-- Group stat END -->
<!-- Avatar group START -->
<ul class="avatar-group list-unstyled align-items-center justify-content-center mb-0 mt-3 qun_member" data-id="{$rs.id}">
<!--圈子相关联的用户,不能实现标签嵌套,所以移到了下面,这里的外层参数qun_member这是标志给JS做处理的,data-id这是标志圈子ID-->
</ul>
<!-- Avatar group END -->
</div>
<!-- Card body END -->
<!-- Card Footer START -->
<div class="card-footer text-center">
<span class="btn btn-success-soft btn-sm" id="guanzhu" data-id="{$rs.id}"> 关注</span>
</div>
<!-- Card Footer END -->
</div>
<!-- Card END -->
</div>
{/qb:tag}
<ul style="display:none;">
{qb:tag name="member_tpl_001" class="app\qun\model\Member@get_label" union="aid" rows="3"}
<li class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="{:get_user_icon($rs.uid)}" alt="{:get_user_name($rs.uid)}">
</li>
{/qb:tag}
<li class="avatar avatar-xs">
<div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">{$rs.usernum}</span></div>
</li>
</ul>
<script type="text/javascript">
$(".qun_member").each(function(){
var that = $(this); //下面要进行内容赋值使用
var id = $(this).data('id'); //对应圈子的ID
var page = 1; //只显示第一页的内容
var url = "{qb:url name='member_tpl_001'}" + page + "&aid=" + id; //这里就是异步显示更多的用法,另一个关键地方就是圈子用户关联圈子的字段是aid
$.get(url,function(res){
if(res.code==0){
if(res.data!=''){
that.html(res.data);
}
}
});
});
</script>
</div>
<!--加入圈子-->
<script type="text/javascript">var qun_api_url = "/qun/wxapp.member/api.html";</script>
<script type="text/javascript" src="__STATIC__/qun/qun.js"></script>
<script type="text/javascript">
function morequn(res) {
$("#guanzhu").each(function () {
var id = $(this).data('id');
var that = this;
if ("{$userdb.uid}" == "") { //游客点关注,就直接进入对应的圈子
$(this).click(function () {
window.location.href = "{:urls('content/show')}?id=" + id;
});
} else {
//检查是否已关注
$.get("{:urls('wxapp.member/ckjoin')}?id=" + id, function (res) {
if (res.code == 1) { //还没关注
$(that).click(function () { //添加关注点击事件
$.get("{:urls('wxapp.member/join')}?id=" + id, function (res) {
if (res.code == 1) { //关注失败
layer.alert(res.msg);
} else if (res.code == 0) { //关注成功
layer.msg('已关注,' + res.msg);
$(that).html('已关注');
}
});
});
} else if (res.code == 0) { //已关注
$(that).html('已关注');
}
});
}
});
}
var qun_page = 1;
function show_more_qun() {
var url = "{qb:url name='index_qun001' /}";
layer.load(1);
qun_page++;
$.get(url + qun_page, function (res) {
layer.closeAll();
if (res.code == 0) {
if (res.data != '') {
$(".morequn").append(res.data);
} else {
layer.msg('没有了!');
$(".show-more-qun-btn").hide();
}
} else {
}
});
}
</script>想要在圈子列表页调用每个圈子的成员头像列表,用标签嵌套标签的形式(JS植入),问题来了,这个关注好像有问题。如果去掉这个头像列表是正常的。