<!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="https://mplus.mbcore.com/PMCoreClient/css/mbcore.component.css">
<link rel="stylesheet" href="../css/Post_issue.css">
</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="plate_name">
<div>所属社区:</div>
<div class="name">啦啦啦啦</div>
</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input title" type="text" maxlength="20" placeholder="点击此处输入标题(字数不得超过20个字)">
</div>
</div>
</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea content" placeholder="点击此处输入内容" rows="4"></textarea>
</div>
</div>
</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
</ul>
<div class="weui-uploader__input-box">
<div id="uploaderInput" class="weui-uploader__input">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="button">发布</div>
<script>
$(function () {
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;
}
console.log(GetRequest().id);
var plate_id = GetRequest().plate_id; //社区id
var plate_name = GetRequest().plate_name;
//获取编码后的参数
function GetUrlByParamName(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var URL = decodeURI(window.location.search);
var r = URL.substr(1).match(reg);
if(r!=null){
//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
return decodeURI(r[2]);
// console.log(decodeURI(r[2]));
};
return null;
};
var questionnaireName = GetUrlByParamName("plate_name");//将接收到的乱码进行翻译
$(".name").html(questionnaireName);
//删除图片重新上传
$(document).on("click", ".delete", function () {
$(this).parents(".img-item").remove();
})
//图片上传功能
$(document).on("click", '#uploaderInput', function () {
//在调起上传图片功能之前需要查看当前图片数量
var imgsLength = $(".img-item").length;//已上传的图片数量
var count = 9 - imgsLength;//需要再上传的图片数量
if (imgsLength < 9) {
window.MBC.chooseImage({
count: count,
success: function (res) {
if (res.code == 1) {
// alert(JSON.stringify(res));
// alert(JSON.stringify(res.result));
// alert(JSON.stringify(res.result.serverId));
res.result.map(function (item, index) {
// var html = '<div class="imgWrapper" data-server-id="' + item.serverId + '"><img src="' + item.url + '"/></div>';
var html = '<div class="img-item">\n' +
'<div class="imgWrapper" data-server-id="' + item.serverId + '">\n' +
'<img src="' + item.url + '">\n' +
'</div>\n' +
'<div class="delete">\n' +
'<i class="iconfont icon-cross"></i>\n' +
'</div>\n' +
'</div>';
$('#uploaderFiles').append(html);
var imgWrapper = $('.imgWrapper');
var width = window.screen.width;
var img_w = (width - 45) / 4;
var uploaderInput = $(".weui-uploader__input-box");
for (var i = 0; i < uploaderInput.length; i++) {
$(uploaderInput[i]).css({"width": img_w + "px", "height": img_w + 'px'});
}
for (var i = 0; i < imgWrapper.length; i++) {
$(imgWrapper[i]).css({"width": img_w + "px", "height": img_w + 'px'});
}
// $(".weui-uploader__input-box").css("display", "none")//隐藏上传图片功能图标
})
} else {
// $.alert({
// title: '温馨提示',
// text: res.result,
// onOK: function () {
// //点击确认
// }
// });
}
}
})
} else {
//当前图片数量已经是9张，无法再上传
$.toast("图片数量已达上限", "text");
}
});
//点击发布按钮遍历里面的图片
$(document).on("click",".button",function () {
var goods_images = [];
$(".imgWrapper").map(function () {
goods_images.push($(this).data("server-id"));
});
var title = $(".title").html();
var content = $(".content").val();
$.Ajax({
url:baseUrl+"PCommunity/client/users/postTopic",
is_login:true,
data:{
plate_id:plate_id,
title:title,
content:content,
picture:goods_images,
},
success:function (res) {
if (res.code == 1){
$.toast("发布成功","text");
setTimeout(function () {
var pageTitle = "社区详情";
var href = baseClientUrl + "Community/Community_info.html" + '?plate_id=' + plate_id;
window.MBC.openNew({
pageTitle: pageTitle,
url: href,
removeHeader: ($(this).attr("data-removeHeader") == "true") ? true : false // true
});
},2000);
} else {
$.toast(res.result,"text");
}
}
})
});
//将的到的id 传入后台参数里
})
</script>
</body>
</html>
body {
background-color: #f3f3f3;
}
.plate_name {
display: flex;
align-items: center;
padding: 10px;
background-color: white;
}
.weui-cells {
margin-top: -1px;
font-size: 14px;
}
.name {
margin-left: 20px;
color: #085556;
}
.weui-uploader__bd {
overflow: initial!important;
}
.img-item {
position: relative;
float: left;
}
.img-item .delete {
position: absolute;
left: -5px;
top: -5px;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 20px;
display: flex;
align-items: center;
color: #fff;
justify-content: center;
}
.imgWrapper{
overflow: hidden;
margin-bottom: 5px;
margin-right: 5px;
}
.imgWrapper:nth-child(4n){
margin-right: 0;
}
.imgWrapper img{
display: block;
width: 100%;
height: auto;
}
.button {
width: 90%;
margin: 20px auto;
background-color: #085556;
text-align: center;
color: white;
height: 40px;
line-height: 40px;
border-radius: 4px;
font-size: 16px;
}