新增举报页面
This commit is contained in:
Dragon
163
view/yinmeng/modules/report/css/index.css
Normal file
163
view/yinmeng/modules/report/css/index.css
Normal file
@@ -0,0 +1,163 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #2E5FEC;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 10rem;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 9.2rem;
|
||||
border-radius: 0.26667rem;
|
||||
background: #fff;
|
||||
margin: -0.2rem auto 0.66667rem;
|
||||
position: relative;
|
||||
padding: 0.26667rem 0.26667rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form .title {
|
||||
width: 100%;
|
||||
color: #e21e1e;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .content {
|
||||
color: #5f5f5f;
|
||||
font-size: 0.37333rem;
|
||||
line-height: 0.53333rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.form p {
|
||||
color: #474646;
|
||||
font-size: 0.37333rem;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form p b {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form p i {
|
||||
font-style: normal;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
|
||||
.form .textarea {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: 0.26667rem;
|
||||
display: block;
|
||||
height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.26667rem;
|
||||
font-size: 0.32rem;
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: whitesmoke;
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .textarea2 {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: 0.26667rem;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.26667rem;
|
||||
font-size: 0.32rem;
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: whitesmoke;
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .inform-img {
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .inform-img .inform-img-title {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form .inform-img .box {
|
||||
margin-top: 0.53333rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence {
|
||||
overflow: hidden;
|
||||
border-radius: 0.26667rem;
|
||||
width: 2.13333rem;
|
||||
height: 2.13333rem;
|
||||
margin-right: 0.2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence.has-data .reupdate {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence .reupdate {
|
||||
width: 100%;
|
||||
height: 0.53333rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 0.53333rem;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form .but {
|
||||
width: 80%;
|
||||
margin: 0.4rem auto 0;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
text-align: center;
|
||||
color: #1a1a1a;
|
||||
background: #ffeb3b;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
170
view/yinmeng/modules/report/css/index.scss
Normal file
170
view/yinmeng/modules/report/css/index.scss
Normal file
@@ -0,0 +1,170 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #2E5FEC;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, .3) !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: px2rem(750);
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 9.2rem;
|
||||
// height: 5rem;
|
||||
border-radius: px2rem(20);
|
||||
background: #fff;
|
||||
margin: px2rem(-15) auto px2rem(50);
|
||||
position: relative;
|
||||
padding: px2rem(20) px2rem(20);
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
color: rgb(226, 30, 30);
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
margin-bottom: px2rem(20);
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #5f5f5f;
|
||||
font-size: px2rem(28);
|
||||
line-height: px2rem(40);
|
||||
margin-bottom: px2rem(30);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #474646;
|
||||
font-size: px2rem(28);
|
||||
margin-bottom: px2rem(20);
|
||||
|
||||
b {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: px2rem(18);
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: px2rem(20);
|
||||
display: block;
|
||||
height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(20);
|
||||
font-size: px2rem(24);
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: px2rem(20);
|
||||
}
|
||||
|
||||
.textarea2 {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: px2rem(20);
|
||||
display: block;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(20);
|
||||
font-size: px2rem(24);
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: px2rem(20);
|
||||
}
|
||||
|
||||
.inform-img {
|
||||
margin-bottom: px2rem(20);
|
||||
|
||||
.inform-img-title {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: px2rem(40);
|
||||
display: flex;
|
||||
|
||||
.update_evidence {
|
||||
overflow: hidden;
|
||||
border-radius: px2rem(20);
|
||||
width: px2rem(160);
|
||||
height: px2rem(160);
|
||||
margin-right: px2rem(15);
|
||||
position: relative;
|
||||
|
||||
&.has-data {
|
||||
.reupdate {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.reupdate {
|
||||
width: 100%;
|
||||
height: px2rem(40);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: px2rem(40);
|
||||
z-index: 2;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.but {
|
||||
width: 80%;
|
||||
margin: px2rem(30) auto 0;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
text-align: center;
|
||||
color: #1a1a1a;
|
||||
background: #ffeb3b;
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
BIN
view/yinmeng/modules/report/images/bg.png
Normal file
BIN
view/yinmeng/modules/report/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
view/yinmeng/modules/report/images/report_uploading_img.png
Normal file
BIN
view/yinmeng/modules/report/images/report_uploading_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
60
view/yinmeng/modules/report/index.html
Normal file
60
view/yinmeng/modules/report/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>举报</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="./images/bg.png" alt="" class="box">
|
||||
<div class="form">
|
||||
<div class="title">重要提醒:</div>
|
||||
<div class="content">如果您发现有不法分子通过平台进行违规操作，请您务必向我们进行反馈，可在下发填写相关信息，或在我的-联系客服反馈，感谢您的理解与支持!</div>
|
||||
<p><b>*</b>请简单描述您遇到的问题:</p>
|
||||
<textarea name="textarea" placeholder="请输入举报内容" class="textarea"></textarea>
|
||||
<p><b>*</b>请填写被举报人ID:</p>
|
||||
<textarea name="textarea" placeholder="被举报人ID" class="textarea2"></textarea>
|
||||
<p><b>*</b>请上传截图，包含被举报人信息<i></i>:</p>
|
||||
<div class="inform-img">
|
||||
<p class="inform-img-title">上传截图 (图片不能超过1M)</p>
|
||||
<div class="box">
|
||||
<div class="update_evidence">
|
||||
<img src="images/report_uploading_img.png" alt="">
|
||||
<input class="update-img" type="file" accept="image/*">
|
||||
<div class="reupdate">重新上传
|
||||
<input class="reupdate-img" type="file" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="update_evidence">
|
||||
<img src="images/report_uploading_img.png" alt="">
|
||||
<input class="update-img" type="file" accept="image/*">
|
||||
<div class="reupdate">重新上传
|
||||
<input class="reupdate-img" type="file" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="update_evidence">
|
||||
<img src="images/report_uploading_img.png" alt="">
|
||||
<input class="update-img" type="file" accept="image/*">
|
||||
<div class="reupdate">重新上传
|
||||
<input class="reupdate-img" type="file" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 0.3rem;text-align: center;">需要至少上传一张相关截图，以提高举报的准确度</p>
|
||||
<div class="but">提交</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
129
view/yinmeng/modules/report/js/index.js
Normal file
129
view/yinmeng/modules/report/js/index.js
Normal file
@@ -0,0 +1,129 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加载中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
// 初始化函数
|
||||
$(function () {
|
||||
getInfoFromClient();
|
||||
})
|
||||
// 上传图片
|
||||
function upload (than, type) {
|
||||
showLoading();
|
||||
var val = than.get(0).files[0];
|
||||
var formData = new FormData();
|
||||
formData.append('uid', pubInfo.uid);
|
||||
formData.append('file', val);
|
||||
networkRequest({
|
||||
type: 'post',
|
||||
url: urlPrefix + '/live/upload',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
data: formData,
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
if (type == 1) {
|
||||
than.siblings('img').attr('src', res.data);
|
||||
than.parent().addClass('has-data')
|
||||
than.hide();
|
||||
}
|
||||
else {
|
||||
than.parent().siblings('img').attr('src', res.data);
|
||||
than.parent().parent().addClass('has-data');
|
||||
}
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 上传按钮
|
||||
$('.update_evidence').on('change', '.update-img', function () {
|
||||
var _that = $(this);
|
||||
upload(_that, 1);
|
||||
})
|
||||
// 重新上传按钮
|
||||
$('.update_evidence').on('change', '.reupdate-img', function () {
|
||||
var _that = $(this);
|
||||
upload(_that, 2);
|
||||
})
|
||||
// 提交按钮
|
||||
$('.but').click(function () {
|
||||
var reason = $('.form .textarea').val();
|
||||
var targetUid = $('.form .textarea2').val();
|
||||
var imgStr = '';
|
||||
for (var i = 0; i < $('.update_evidence').length; i++) {
|
||||
if ($('.update_evidence').eq(i).find('img').attr('src').match('images/report_uploading_img.png')) {
|
||||
continue;
|
||||
}
|
||||
if (i < $('.update_evidence').length) {
|
||||
imgStr += ',' + $('.update_evidence').eq(i).find('img').attr('src');
|
||||
}
|
||||
}
|
||||
if (imgStr.indexOf(',') == 0) {
|
||||
imgStr = imgStr.substr(1, imgStr.length);
|
||||
}
|
||||
if (reason == '') {
|
||||
toastMsg('请简单描述您遇到的问题');
|
||||
} else if (targetUid == '') {
|
||||
toastMsg('请填写被举报人ID');
|
||||
} else if (imgStr == '') {
|
||||
toastMsg('需要至少上传一张相关截图');
|
||||
} else {
|
||||
impeachSomeone(reason, targetUid, imgStr);
|
||||
}
|
||||
})
|
||||
// 提交举报接口
|
||||
function impeachSomeone (reason, targetUid, imgStr) {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: 'post',
|
||||
url: urlPrefix + '/impeach/impeachSomeone',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
reason: reason,
|
||||
imgUrl: imgStr,
|
||||
targetErBanNo: targetUid
|
||||
},
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
toastMsg('提交成功')
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user