新增举报页面
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