<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=yes">
<title>社区成员</title>
<link rel="stylesheet" href="../css/third_party/swiper.css">
<link rel="stylesheet" href="../css/third_party/weui.min.css">
<link rel="stylesheet" href="../css/third_party/jquery-weui.min.css">
<link rel="stylesheet" href="../css/third_party/base.css">
<link rel="stylesheet" href="https://mplus.mbcore.com/PMCoreClient/css/color-config.css">
<link rel="stylesheet" href="https://mplus.mbcore.com/PMCoreClient/css/iconfont/iconfont.css">
<link rel="stylesheet" href="../css/Community_members.css">
<style>
.square-img {
flex-shrink: 0;
margin-right: 10px;
border-radius: 5px;
background-repeat: no-repeat;
background-position: center center;
padding-bottom: 100%;
/ / 主要为了图片未加载出来时，页面元素不会挤在一起
}
html, body {
height: 100%;
}
.scroll-container {
overflow-y: scroll;
height: 100%;
}
</style>
</head>
<body>
<script src="../config/config.js"></script>
<script src="https://mplus.mbcore.com/PMCoreClient/js/dependencies.min.js"></script>
<script src="https://mplus.mbcore.com/PMCoreClient/js/core.js"></script>
<script src="https://mplus.mbcore.com/PMCoreClient/js/webview.js"></script>
<div class="scroll-container">
<div class="scroll-inner" style="min-height: 101%">
<div class="msg"></div>
<div class="weui-loadmore loading">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
<div class="weui-loadmore weui-loadmore_line" style="display: none">
<span class="weui-loadmore__tips no_more">没有更多了</span>
</div>
</div>
</div>
<script type="text/html" id="msg">
{{each user_list}}
<div class="manager">
<div class="square-img user_info" data-src="{{$value.avatar}}" data-id="{{$value.user_id}}"
data-removeHeader="false"
data-pageTitle="用户首页" data-href="Community/user_home.html"></div>
<div style="display: flex;justify-content: space-between;flex: 1;width: 0">
<div class="user_name">{{$value.user_name}}</div>
{{if $value.status == 1}}
<div class="Forbidden" style="display: none" data-id="{{$value.user_id}}">禁言</div>
{{else}}
<div class="Forbidden" style="display: none" data-id="{{$value.user_id}}">解除禁言</div>
{{/if}}
</div>
</div>
{{/each}}
</script>
<script>
$(function () {
function showSquareImage(width, img) {
var img = $(img);
// console.log(img);
var realWidth;//真实的宽度
var realHeight;//真实的高度
//这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
$("<img/>").attr("src", $(img).attr("data-src")).load(function () { //创建临时img标签获取到图片的src 等图片加载完成之后才能判断出来图片的宽高 是长图还是宽图
/*
如果要获取图片的真实的宽度和高度有三点必须注意
1、需要创建一个image对象：如这里的$("<img/>")
2、指定图片的src路径
3、一定要在图片加载完成后执行如.load()函数里执行
*/
realWidth = this.width;
realHeight = this.height;
var ratio = realWidth / realHeight;
// console.log(ratio);
$(img).css("width", width + "px");
$(img).css("height", width + "px");
$(img).addClass("loaded");//为了避免重复计算加上标记类
$(img).css("paddingBottom", 0);//真实的图片已经可以占位了，需要将占位的特性去掉
$(img).css("backgroundImage", 'url("' + $(img).attr("data-src") + '")');
if (ratio >= 1) {
//说明是宽幅图
$(img).css("backgroundSize", "auto 100%");
}
else {
//说明是竖幅图
$(img).css("backgroundSize", "100% auto");
}
});
}
function GetRequest() { //将上一页数据携带过来
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var plate_id = GetRequest().plate_id; //店铺id
var page = 1; //从第一页开始加载
var page_size = 8; //每次加载8个
var loading = false; //状态标记
var tplDrawing = function(){
$(".loading").css("display", "block");//显示正在加载
$(".weui-loadmore_line").css("display", "none");//隐藏暂无数据
$(".weui-loadmore_line").html('没有更多了');
loading = true;
$.Ajax({
url: baseUrl + "PCommunity/client/plate/plateUser",
is_login: "check",
data: {
plate_id: plate_id,
page:page,
page_size:page_size
},
success: function (res) {
console.log(res);
if (res.code == 1) {
var msg = "msg";
var tem_msg = template(msg, res.result);
$(".msg").append(tem_msg);
var info_img = 50;
$('.square-img:not(".square-img.loaded")').map(function () {
showSquareImage(info_img, this);
})
if (res.result.now_user_role == "manager") {
$(".Forbidden").css("display", "block");
}
if (res.result.user_list.length == 0) {
if (page == 1) {
$(".loading").css("display", "none");//显示正在加载
$(".weui-loadmore_line").css("display", "block");//隐藏暂无数据
loading = true;
} else {
$(".loading").css("display", "none");//显示正在加载
$(".weui-loadmore_line").css("display", "block");//隐藏暂无数据
loading = true;
$(".no_data").css("display","none")//隐藏暂无数据
}
} else {
loading = false;
if (res.result.user_list.length < page_size) {
$(".loading").css("display", "none");//显示正在加载
$(".weui-loadmore_line").css("display", "block");//隐藏暂无数据
loading = true;
}
}
page++
} else {
$.toast(res.result, "text");
loading = true;
$(".loading").css("display", "none");//隐藏正在加载
$(".weui-loadmore_line").css("display", "block")//显示暂无数据
$(".weui-loadmore_line").html('数据异常')
}
}
});
};
tplDrawing();
$(".scroll-container").infinite().on("infinite", function () {
if (loading) return;
loading = true;
tplDrawing();
});
// 禁言社区成员
$(document).on("click", ".Forbidden", function () {
var ban_user_id = $(this).data("id");//社区成员id
var that = $(this);
$.Ajax({
url: baseUrl + "PCommunity/client/manager/isBanned",
is_login: true,
data: {
ban_user_id: ban_user_id,
plate_id: plate_id
},
success: function (res) {
console.log(res);
if (res.code == 1) {
if (res.result.ban == 0) {
that.html("解除禁言");
} else {
that.html("禁言");
}
} else {
$.toast(res.result.msg, "text");
}
}
})
});
// 点击头像
$(document).on("click", ".user_info", function () {
var now_user_id = $(this).data("id");
var pageTitle = $(this).attr("data-pageTitle");
var href = baseClientUrl + $(this).attr('data-href') + "?now_user_id=" + now_user_id;
window.MBC.openNew({
pageTitle: pageTitle,
url: href,
removeHeader: ($(this).attr("data-removeHeader") == "true") ? true : false, // true
replace: true
});
});
})
</script>
</body>
</html>
body {
background-color: #f3f3f3;
}
.manager {
display: flex;
align-items: center;
background-color: white;
padding: 10px;
border-bottom: 1px solid #f3f3f3;
}
.Forbidden {
flex-shrink: 0;
padding: 0 13px;
border: 1px solid #890101;
border-radius: 12px;
color: #890101;
height: 24px;
line-height: 24px;
font-size: 12px;
}
.user_name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 80%;
}
.weui-loadmore {
line-height: 0;
}