577 lines
28 KiB
Vue
577 lines
28 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<div class="box-body">
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
</section>
|
||
<section class="content">
|
||
<div id="table"></div>
|
||
<div id="toolbar">
|
||
<div style="margin-bottom: 6px">
|
||
<button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
|
||
搜索根源：
|
||
<select name="checkType" id="checkType">
|
||
<option value="1">平台号</option>
|
||
<option value="2">手机号</option>
|
||
<option value="4">uid</option>
|
||
<option value="5">邮箱</option>
|
||
</select>
|
||
</div>
|
||
<textarea name="erbanNoList" id="erbanNoList" placeholder="多个搜索号请用逗号隔开"></textarea>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||
aria-hidden="true">x</span></button>
|
||
<h4 class="modal-title" id="addModalLabel">编辑用户信息</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="editUser" class="form-horizontal">
|
||
<input type="hidden" name="uid" id="editUid">
|
||
<input type="hidden" name="app" id="app">
|
||
<div class="form-group">
|
||
<label for="editNick" class="col-sm-3 control-label">昵称:</label>
|
||
<div class="col-sm-7">
|
||
<input type="text" class="form-control validate[required]" name="nick" id="editNick">
|
||
</div>
|
||
<button class="btn btn-warning col-sm-2" type="button" id="default_nick">恢复默认</button>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editGender" class="col-sm-3 control-label">性别:</label>
|
||
<div class="col-sm-8">
|
||
<select name="gender" class="form-control" id="editGender">
|
||
<option value="1">男</option>
|
||
<option value="2">女</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editPhone" class="col-sm-3 control-label">手机:</label>
|
||
<div class="col-sm-8 control-label">
|
||
<p id="editPhone"></p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editEmail" class="col-sm-3 control-label">邮箱:</label>
|
||
<div class="col-sm-8 control-label">
|
||
<p id="editEmail"></p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">用户头像图:</label>
|
||
<div class="col-sm-8">
|
||
<img src="" id="addImgUrl" style="width:70px;height:70px;" alt="">
|
||
<input type="file" id="addUploadFile" name="uploadFile"
|
||
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
|
||
<button class="btn btn-success" type="button" id="editUploadBtn">上传</button>
|
||
<button class="btn btn-warning" type="button" id="default_avatar">恢复默认</button>
|
||
<input type="hidden" id="editAvatar" name="avatar"
|
||
class="form-control validate[required]" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="userDesc" class="col-sm-3 control-label">简介:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control" name="userDesc" id="userDesc">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">相册:</label>
|
||
<table class="table table-bordered table-hover" id="photoTable">
|
||
<tbody id="photoTbody">
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">添加相册:</label>
|
||
<div class="col-sm-8">
|
||
<img src="" id="picUrl" style="width:70px;height:70px;" alt="">
|
||
<input type="file" id="uploadPhotoFile" name="uploadPhotoFile"
|
||
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
|
||
<button class="btn btn-success" type="button" id="uploadPicBtn">上传</button>
|
||
<input type="hidden" class="form-control validate[required]" name="imgUrl" id="imgUrl"
|
||
style="width:400px">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">是否发送通知:</label>
|
||
<div class="col-sm-9">
|
||
<label class="radio-inline"><input type="radio" name="sendMsg" id="needSend" value="1"
|
||
checked>是</label>
|
||
<label class="radio-inline"><input type="radio" name="sendMsg" id="notSend"
|
||
value="0">否</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label"> </label>
|
||
<div class="col-sm-9" id="msgDiv">
|
||
<textarea type="text" class="form-control" name="msg" id="msg" maxlength="100"
|
||
placeholder="请填写通知内容，100字符内"></textarea>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
<button type="button" class="btn btn-primary" id="editSave">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
|
||
export default {
|
||
name: "UserCheckAdminBaseView",
|
||
setup() {
|
||
function delPhoto(obj) {
|
||
var tr = $(obj).parent().parent();
|
||
tr.remove();
|
||
}
|
||
window.delPhoto = delPhoto;
|
||
return {
|
||
delPhoto
|
||
};
|
||
},
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
$(function () {
|
||
$('#table').bootstrapTable('destroy');
|
||
$('#table').bootstrapTable({
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 10,
|
||
pagination: true,
|
||
pageList: [10, 20, 30, 50],
|
||
sidePagination: "client", //表示服务端请求
|
||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||
//设置为limit可以获取limit, offset, search, sort, order
|
||
queryParamsType: "undefined",
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
var param = {
|
||
pageSize: params.pageSize,
|
||
pageNumber: params.pageNumber,
|
||
erbanNoList: $('#erbanNoList').val(),
|
||
type: $('#checkType').val()
|
||
};
|
||
// console.log(param);
|
||
return param;
|
||
},
|
||
uniqueId: 'code',
|
||
toolbar: '#toolbar',
|
||
url: '/admin/userCheckAdmin/getlist',
|
||
onLoadSuccess: function () { //加载成功时执行
|
||
console.log("load success");
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.log("load fail");
|
||
},
|
||
columns: [
|
||
{ field: 'account.erbanNo', title: '平台号', align: 'center', valign: 'middle' },
|
||
{
|
||
field: 'users.avatar',
|
||
title: '头像',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
return "<img src='" + val + "' width='40' height='40'>";
|
||
}
|
||
},
|
||
{ field: 'account.uid', title: 'Uid', align: 'center', valign: 'middle' },
|
||
{ field: 'users.nick', title: '用户昵称', align: 'center', valign: 'middle' },
|
||
{ field: 'account.phone', title: '手机号', align: 'center', valign: 'middle' },
|
||
{ field: 'account.email', title: '邮箱', align: 'center', valign: 'middle' },
|
||
{ field: 'users.userDesc', title: '简介', align: 'center', valign: 'middle' },
|
||
{
|
||
field: '', title: '是否实名认证', align: 'center', valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
if (row.users.idCardNum && row.users.realName) {
|
||
return '是';
|
||
} else {
|
||
return '否';
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'privatePhoto',
|
||
title: '相册',
|
||
align: 'center',
|
||
width: '10%',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
var photoUrl = '';
|
||
val.forEach(function (item, index) {
|
||
photoUrl += "<img src='" + item.photoUrl + "' width='70' height='70'>";
|
||
});
|
||
return photoUrl;
|
||
}
|
||
},
|
||
|
||
{ field: 'userPurseVo.diamonds', title: '金币数', align: 'center', valign: 'middle' },
|
||
{ field: 'userPurseVo.golds', title: '钻石数', align: 'center', valign: 'middle' },
|
||
// {field:'account.phone',title:'手机电话',align:'center',valign:'middle'},
|
||
{
|
||
field: 'users.birth',
|
||
title: '用户出生日期',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
if (val) {
|
||
var date = new Date(val);
|
||
return date.format("yyyy-MM-dd");
|
||
} else {
|
||
return '-';
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'users.gender',
|
||
title: '性别',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
if (val == 1) {
|
||
return '男';
|
||
} else {
|
||
return '女';
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'users.userVipInfoVO',
|
||
title: 'vip等级',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
if (!val){
|
||
return 0
|
||
} else {
|
||
return val.vipLevel;
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'users.userLevelVo',
|
||
title: '财富等级(经验值)',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
return val.experLevelName + '(' + val.experAmount + ')';
|
||
}
|
||
},
|
||
{
|
||
field: 'users.userLevelVo',
|
||
title: '魅力等级(魅力值)',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
return val.charmLevelName + '(' + val.charmAmount + ')';
|
||
}
|
||
},
|
||
{
|
||
field: 'users.defUser',
|
||
title: '账号类型',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
switch (val) {
|
||
case 1:
|
||
return '普通账号';
|
||
case 2:
|
||
return '官方账号';
|
||
case 3:
|
||
return '机器账号';
|
||
case 4:
|
||
return '工会账户';
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'users.createTime',
|
||
title: '创建时间',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
if (val) {
|
||
var date = new Date(val);
|
||
return date.format("yyyy-MM-dd hh:mm:ss");
|
||
} else {
|
||
return '-';
|
||
}
|
||
}
|
||
},
|
||
{ field: 'users.inviteCode', title: '所属邀请码', align: 'center', valign: 'middle' },
|
||
{
|
||
field: 'tmp',
|
||
title: '操作',
|
||
align: 'center',
|
||
width: '20%',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
var key = row.account.uid;
|
||
var result = "<button class='btn btn-sm btn-success opt-edit' data-id=" + key + ">编辑</button>";
|
||
return result;
|
||
}
|
||
}
|
||
]
|
||
})
|
||
$('#btnSearch').on('click', function () {
|
||
TableHelper.doRefresh('#table');
|
||
})
|
||
|
||
$('#uploadPicBtn').on('click', function () {
|
||
if (!$('#uploadPhotoFile').val()) {
|
||
$("#tipMsg").text("请选择上传图片");
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
var options = {
|
||
type: 'post',
|
||
url: '/admin/userCheckAdmin/upload/photo',
|
||
dataType: 'json',
|
||
success: function (json) {
|
||
if (json.path) {
|
||
$('#imgUrl').val(json.path);
|
||
$('#picUrl').attr('src', json.path);
|
||
var trHtml = '<tr><td style="text-align:center;"><img src="' + json.path + '" width="100" height="100" class="photoImgUrl"></td>' +
|
||
'<td><button class="btn btn-danger" type="button" onclick="delPhoto(this)">删除</button></td></tr>';
|
||
$('#photoTbody').append(trHtml);
|
||
} else {
|
||
$('#tipMsg').text(json.msg);
|
||
$('#tipModal').modal('show');
|
||
}
|
||
}
|
||
}
|
||
$("#editUser").ajaxSubmit(options);
|
||
});
|
||
$('#table').on('click', '.opt-edit', function () {
|
||
$('#imgUrl').val('');
|
||
$('#picUrl').attr('src', '');
|
||
$('#uploadPhotoFile').val('');
|
||
$("#needSend").prop("checked", true);
|
||
$('#msg').val('');
|
||
$('#msgDiv').show();
|
||
$.ajax({
|
||
url: '/admin/userCheckAdmin/getOne',
|
||
type: 'post',
|
||
data: {
|
||
uid: $(this).data('id')
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
|
||
var users = res.data.users;
|
||
var account = res.data.account;
|
||
var nick = users ? users.nick : '';
|
||
var avatar = users ? users.avatar : '';
|
||
var gender = users ? users.gender : 1;
|
||
|
||
$('#editNick').val(nick);
|
||
$('#editPhone').html(account.phone);
|
||
$('#addImgUrl').attr('src', avatar);
|
||
$('#editAvatar').val(avatar);
|
||
$('#editPhone').val(account.phone);
|
||
$('#editGender').val(gender);
|
||
$('#editUid').val(account.uid);
|
||
$("#app").val(users.currentApp);
|
||
|
||
$("#userDesc").val(users.userDesc);
|
||
|
||
|
||
var privatePhoto = res.data.privatePhoto;
|
||
var $photos = $('#photoTbody');
|
||
$photos.html("");
|
||
$.each(privatePhoto, function (i, item) {
|
||
var $photo = $('<tr><td style="text-align:center;"><img src="' + item.photoUrl + '" width="100" height="100" class="photoImgUrl"></td>' +
|
||
'<td><button class="btn btn-danger" type="button" onclick="delPhoto(this)">删除</button></td></tr>');
|
||
$photos.append($photo);
|
||
});
|
||
}
|
||
$('#editModal').modal('show');
|
||
}
|
||
})
|
||
})
|
||
|
||
$('#editSave').on('click', function () {
|
||
var userDesc = $("#userDesc").val();
|
||
if (userDesc && userDesc.length > 60) {
|
||
$("#tipMsg").text("简介文字过长");
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
var photoUrls = '';
|
||
var list = $('#photoTable').find($('.photoImgUrl'));
|
||
var size = list ? list.length : 0;
|
||
if (size > 8) {
|
||
$("#tipMsg").text("最多只能上传8张照片");
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
for (var i = 0; i < size; i++) {
|
||
photoUrls += list[i].src + ',';
|
||
}
|
||
var sendMsg = $('input[name="sendMsg"]:checked').val();
|
||
|
||
if (sendMsg == 1 && !$("#msg").val()) {
|
||
$("#tipMsg").text("请填写通知内容");
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
|
||
if ($('#editUser').validationEngine('validate')) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/userCheckAdmin/saveUser",
|
||
data: {
|
||
nick: $('#editNick').val(),
|
||
gender: $('#editGender').val(),
|
||
avatar: $('#editAvatar').val(),
|
||
uid: $('#editUid').val(),
|
||
userDesc: $("#userDesc").val(),
|
||
photoUrls: photoUrls,
|
||
msg: $("#msg").val(),
|
||
sendMsg: sendMsg
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
// $('#erbanNoList').val('');
|
||
$("#editModal").modal('hide');
|
||
$("#tipMsg").text("保存成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
} else if (res.code == 1600) {
|
||
$("#tipMsg").text("保存失败，错误码：" + res.code + "，无法寻找用户资料，请确认该用户资料是否补全或存在");
|
||
$("#tipModal").modal('show');
|
||
} else if (res.code == 999) {
|
||
$("#tipMsg").text("保存失败，错误码：" + res.code + "，该平台号已被占用");
|
||
$("#tipModal").modal('show');
|
||
} else if (res.code == 4002) {
|
||
$("#tipMsg").text("保存失败，错误码：" + res.code + "，该手机号已被占用");
|
||
$("#tipModal").modal('show');
|
||
} else {
|
||
$("#tipMsg").text("保存失败，" + res.message);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
$('#editUploadBtn').on('click', function () {
|
||
//判断图片的大小
|
||
var file = $('#addUploadFile')[0];
|
||
if (file != undefined && file != "") {
|
||
var fileSize = file.files[0].size; //获得文件大小；
|
||
console.log(fileSize);
|
||
if (fileSize > 5242880) {
|
||
$("#tipMsg").text("当前图片大于5M,请重新选择");
|
||
$("#tipModal").modal('show');
|
||
return
|
||
}
|
||
}
|
||
var options = {
|
||
fileElementId: 'addUploadFile', //需要上传的文件域的ID，即<input type="file">的ID。
|
||
type: 'post',
|
||
url: '/admin/upload/img',
|
||
dataType: 'json',
|
||
success: function (json) {
|
||
if (json.path) {
|
||
$('#editAvatar').val(json.path);
|
||
$('#addImgUrl').attr("src", json.path);
|
||
console.log(json.path);
|
||
} else {
|
||
$("#tipMsg").text(json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
}
|
||
$("#editUser").ajaxSubmit(options);
|
||
})
|
||
$('#default_nick').on('click', function () {
|
||
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/userCheckAdmin/getDefaultNick",
|
||
data: {
|
||
app: $('#app').val()
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
$("#editNick").val(res.data);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
$('#default_avatar').on('click', function () {
|
||
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/userCheckAdmin/getDefaultAvatar",
|
||
data: {
|
||
app: $('#app').val()
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
$("#addImgUrl").attr("src", res.data);
|
||
$("#editAvatar").val(res.data);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
$('input[name="sendMsg"]').change(function () {
|
||
if ($("#needSend").is(":checked")) {
|
||
$('#msgDiv').show();
|
||
} else if ($("#notSend").is(":checked")) {
|
||
$('#msgDiv').hide();
|
||
}
|
||
});
|
||
|
||
})
|
||
}
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
#toolbar textarea {
|
||
overflow: hidden;
|
||
resize: none;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 4px;
|
||
height: 100px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
#btnSearch {
|
||
margin-right: 12px;
|
||
}</style> |