469 lines
19 KiB
Vue
469 lines
19 KiB
Vue
<template>
|
|
<div class="hover-mask">
|
|
<img src="" alt="">
|
|
</div>
|
|
|
|
<div class="toast"></div>
|
|
|
|
<audio src="" id="myAudio"></audio>
|
|
|
|
<div class="content">
|
|
<div class="box box-primary">
|
|
<div class="box-body">
|
|
<div class="container">
|
|
<section class="content-header">
|
|
<h1 id="itemTitle"></h1>
|
|
</section>
|
|
|
|
<section class="content">
|
|
<div id="toolbar"></div>
|
|
<form action="" id="searchForm" method="POST">
|
|
申请时间 <input type="text" name="timeBegin" id="beginTime" class="input-sm" value=""
|
|
placeholder="开始">
|
|
至 <input type="text" name="timeEnd" id="endTime" class="input-sm" value=""
|
|
placeholder="结束">
|
|
uid <input type="text" name="userId" id="userId" placeholder="">
|
|
id <input type="text" name="userErBanNo" id="erbanNo" value="" placeholder="">
|
|
大技能 <select name="skillBig" id="skillBigType" data-btn-class="btn btn-warning">
|
|
<!-- <option value="全部技能">全部技能</option>
|
|
<option value="游戏陪玩">游戏陪玩</option>
|
|
<option value="电台主播">电台主播</option>
|
|
<option value="唱见主播">唱见主播</option>
|
|
<option value="声优主播">声优主播</option> -->
|
|
</select>
|
|
小技能<select name="skill" id="skillType">
|
|
|
|
</select>
|
|
</form>
|
|
|
|
<button class="btn btn-primary" style="margin-left: 10px" id="btnSearch">搜索</button>
|
|
|
|
<div id="table"></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="addRemark" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span
|
|
aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title" id="modalLabel">备注</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="" class="form-horizontal" id="addRemarks">
|
|
<input type="hidden" id="id">
|
|
<div class="form-group">
|
|
<textarea name="" id="remarks" cols="80" rows="10" placeholder="请填写相关备注"
|
|
style="margin-left: 20px; resize: none;"></textarea>
|
|
</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="add">提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 播放音乐弹窗 -->
|
|
<!-- <div class="modal fade" id="playVoice" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
|
<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"></span></button>
|
|
<h4 class="modal-title" id="modalLabel">音乐播放</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="audio-seconds"></p>
|
|
<audio src="" id="myAudio" style="display: none;"></audio>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</template>
|
|
|
|
<script>
|
|
import TableHelper from '@/utils/bootstrap-table-helper';
|
|
|
|
var voiceClickStatus = 1;
|
|
var $audio = document.getElementById('myAudio');
|
|
export default {
|
|
name: "ApplyAdminView",
|
|
setup() {
|
|
return {};
|
|
},
|
|
created() {
|
|
this.$nextTick(function () {
|
|
this.initData();
|
|
});
|
|
},
|
|
methods: {
|
|
initData() {
|
|
$(function () {
|
|
$('#table').bootstrapTable('destroy');
|
|
$('#table').bootstrapTable({
|
|
columns: [{
|
|
field: 'uid',
|
|
title: 'uid',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '5%'
|
|
},
|
|
{
|
|
field: 'erbanNo',
|
|
title: 'id',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '5%'
|
|
},
|
|
{
|
|
field: 'nick',
|
|
title: '用户名',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '10%'
|
|
},
|
|
{
|
|
field: 'skillTagName',
|
|
title: '认证技能名称',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '5%'
|
|
},
|
|
{
|
|
field: 'applyVoice',
|
|
title: '认证录音',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '5%',
|
|
formatter: function (val, row, index) {
|
|
if (!val) {
|
|
return '无'
|
|
}
|
|
return '<button class="voice-play btn-warning btn-sm opt-undercarriage" data-id=" ' + row.id +
|
|
' " data-url="' + row.applyVoice + '">播放<span class="voice-seconds"></span></button>'
|
|
}
|
|
},
|
|
{
|
|
field: 'applyPicture',
|
|
title: '认证图片',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '25%',
|
|
formatter: function (val, row, index) {
|
|
if (!val) {
|
|
return '无'
|
|
}
|
|
if (!val.match(',')) {
|
|
return '<p style="width: 50px; height: 50px"><img style="width:100%; height: 100%; margin: 0 5px;" src=" ' +
|
|
val + '" alt=""></p>';
|
|
}
|
|
var arr = val.split(',');
|
|
var str = '';
|
|
for (var i = 0; i < arr.length; i++) {
|
|
str += '<p style="width: 50px; height: 50px; display: inline-block; margin: 0 5px;"><img style="width: 100%;height: 100%;" src=" ' + arr[i] +
|
|
'" alt=""></p>';
|
|
}
|
|
return str;
|
|
}
|
|
},
|
|
{
|
|
field: 'applyTime',
|
|
title: '申请时间',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '25%',
|
|
formatter: function (val, index, row) {
|
|
var date = new Date(val);
|
|
return date.format('yyyy-MM-dd hh:mm:ss');
|
|
}
|
|
},
|
|
{
|
|
field: 'tmp',
|
|
title: '操作',
|
|
align: 'center',
|
|
valign: 'middle',
|
|
width: '20%',
|
|
formatter: function (val, row, index) {
|
|
return '<button class="veto btn-warning btn-sm opt-undercarriage" data-id=" ' + row.id +
|
|
' " >否决</button> <button class="pass btn-primary btn-sm opt-undercarriage" data-id="' + row
|
|
.id + '">通过</button>'
|
|
}
|
|
},
|
|
|
|
],
|
|
cache: false,
|
|
striped: true,
|
|
showRefresh: false,
|
|
pageSize: 10,
|
|
pagination: true,
|
|
pageList: [10, 20, 30, 50],
|
|
sidePagination: 'server',
|
|
queryParamsType: 'underfined',
|
|
queryParams: function queryParams(params) {
|
|
var beginTime = ($('#beginTime').val()) ? ($("#beginTime").val() + ' 00:00:00') : null;
|
|
var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
|
|
var param = {
|
|
pageSize: params.pageSize,
|
|
currentPage: params.pageNumber,
|
|
startTime: beginTime,
|
|
endTime: endTime,
|
|
skillTagName: ($('#skillType').val()) ? $('#skillType').val() : null,
|
|
skillType: ($('#skillBigType').val()) ? $('#skillBigType').val() : null,
|
|
uid: ($('#userId').val()) ? $('#userId').val() : null,
|
|
id: ($('#erbanNo').val()) ? $('#erbanNo').val() : null
|
|
};
|
|
return param;
|
|
},
|
|
uniqueId: 'id',
|
|
toolbar: '#toolbar',
|
|
// method: 'POST',
|
|
url: '/admin/live/applyList',
|
|
onLoadSuccess: function () {
|
|
console.log('load success');
|
|
},
|
|
onLoadError: function () {
|
|
console.log('load fail');
|
|
}
|
|
});
|
|
|
|
|
|
|
|
var main = {
|
|
init: function () {
|
|
this.eventRegister();
|
|
this.getData();
|
|
},
|
|
|
|
eventRegister: function () {
|
|
$('#btnSearch').on('click', function () {
|
|
TableHelper.doRefresh('#table');
|
|
});
|
|
|
|
$('#skillBigType').on('change', function () {
|
|
console.log($(this).val());
|
|
$.get('/admin/skill/getSkillByTypeId', {
|
|
typeId: $(this).val()
|
|
}, function (res) {
|
|
if (res.msg) {
|
|
console.log(res.msg);
|
|
}
|
|
var str = '<option value="">全部</option>';
|
|
for (var i = 0; i < res.rows.length; i++) {
|
|
str += '<option value="' + res.rows[i].skillName + '">' + res.rows[i].skillName +
|
|
'</option>'
|
|
}
|
|
$('#skillType').html(str);
|
|
})
|
|
});
|
|
|
|
// 播放录音
|
|
// $('#table').on('click', '.voice-play', function () {
|
|
// $audio.src = $(this).data('url');
|
|
// $audio.load();
|
|
// var audioTimes = $audio.duration;
|
|
// $(this).find('.voice-seconds').html('(' + audioTimes + 'S)');
|
|
// $audio.play();
|
|
// })
|
|
},
|
|
|
|
getData: function () {
|
|
$.get('/admin/skill/typeList', {}, function (res) {
|
|
if (res.msg) {
|
|
console.log(res.msg);
|
|
return;
|
|
}
|
|
var str = '<option value="">全部</option>';
|
|
var smallTag_default_num = res.rows[0].skillTypeId;
|
|
for (var i = 0; i < res.rows.length; i++) {
|
|
str += '<option value="' + res.rows[i].skillTypeId + '">' + res.rows[i].skillTypeName + '</option>'
|
|
}
|
|
console.log(smallTag_default_num);
|
|
$('#skillBigType').html(str);
|
|
$.get('/admin/skill/getSkillByTypeId', {
|
|
// typeId: smallTag_default_num
|
|
typeId: ''
|
|
}, function (res) {
|
|
if (res.msg) {
|
|
console.log(res.msg);
|
|
}
|
|
var str = '<option value="">全部</option>';
|
|
for (var i = 0; i < res.rows.length; i++) {
|
|
str += '<option value="' + res.rows[i].skillName + '">' + res.rows[i].skillName +
|
|
'</option>'
|
|
}
|
|
$('#skillType').html(str);
|
|
})
|
|
});
|
|
|
|
setTimeout(function () {
|
|
|
|
}, 500)
|
|
}
|
|
};
|
|
main.init();
|
|
|
|
// 事件编辑
|
|
var $timeBegin = $('#beginTime').datepicker({
|
|
format: 'yyyy-mm-dd',
|
|
autoclose: true
|
|
});
|
|
var $timeEnd = $('#endTime').datepicker({
|
|
format: 'yyyy-mm-dd',
|
|
autoclose: true,
|
|
});
|
|
|
|
$timeBegin.on('changeDate', function () {
|
|
var date = $('#beginTime').datepicker('getDate');
|
|
$timeEnd.datepicker('setStartDate', date);
|
|
});
|
|
$timeEnd.on('changeDate', function () {
|
|
var date = $('#endTime').datepicker('getDate');
|
|
$timeBegin.datepicker('setEndDate', date);
|
|
})
|
|
|
|
// 点击通过或否决按钮时的事件
|
|
$('#table').on('click', '.veto', function () {
|
|
var id = $(this).attr('data-id');
|
|
$('#addRemarks').find('textarea').val('');
|
|
$('#addRemark').data('edit-id', id);
|
|
$('#addRemark').data('edit-type', 1)
|
|
$('#addRemark').modal('show');
|
|
});
|
|
$('#table').on('click', '.pass', function () {
|
|
var id = $(this).attr('data-id');
|
|
$('#addRemarks').find('textarea').val('');
|
|
$('#addRemark').data('edit-id', id);
|
|
$('#addRemark').data('edit-type', 2)
|
|
$('#addRemark').modal('show');
|
|
})
|
|
|
|
// 移动到图片放大
|
|
$('#table').on('mouseover', 'img', function (e) {
|
|
e = event || window.event;
|
|
var x = e.clientX;
|
|
var y = e.clientY;
|
|
var _url = $(this).attr('src');
|
|
$('.hover-mask').find('img').attr('src', _url)
|
|
$('.hover-mask').css({
|
|
'top': (y + 15) + 'px',
|
|
'left': (x + 60) + 'px'
|
|
});
|
|
$('.hover-mask').show();
|
|
}).on('mouseout', 'img', function () {
|
|
$('.hover-mask').hide();
|
|
});
|
|
|
|
// 点击播放音频按钮
|
|
// 播放录音
|
|
$('#table').on('click', '.voice-play', function () {
|
|
if (!$(this).data('url').match('.com') || $(this).data('url').match('activity/tutu101')) {
|
|
$('.toast').html('音频不正确，请确认').fadeIn(30).fadeOut(3000);
|
|
return;
|
|
}
|
|
console.log($(this).data('url'));
|
|
$audio.src = $(this).data('url');
|
|
$audio.load();
|
|
var _that = $(this);
|
|
$audio.addEventListener('canplay', function () {
|
|
var audioTimes = Math.round($audio.duration);
|
|
_that.find('.voice-seconds').html('(' + audioTimes + 'S)');
|
|
$audio.play();
|
|
})
|
|
})
|
|
|
|
|
|
// 选择大技能后请求接口渲染小技能
|
|
// $('#skillType').on('change', function () {
|
|
// console.log($(this).val());
|
|
// $.post('', {
|
|
// skillType: $(this).val()
|
|
// }, function (res) {
|
|
// if (res.success) {
|
|
// var str = '';
|
|
// for (var i = 0; i < res.data.length; i++) {
|
|
// str += '<option value="' + (i + 1) + '">' + re.data[i].skillTagName + '</option>';
|
|
// }
|
|
// $('#smallSkillName').html(str);
|
|
// }
|
|
// })
|
|
// })
|
|
|
|
|
|
|
|
// 点击提交
|
|
$('.modal').on('click', '#add', function () {
|
|
var $id = $('#addRemark').data('edit-id');
|
|
var $content = $('.modal').find('textarea').val();
|
|
console.log($content);
|
|
var $status = $('#addRemark').data('edit-type');
|
|
if (!$content) {
|
|
$('.toast').html('没有填写备注').fadeIn(30).fadeOut(3000);
|
|
return;
|
|
}
|
|
$.post('/admin/live/updateLiveForApplyById', {
|
|
id: $id,
|
|
status: $status,
|
|
remark: $content
|
|
}, function (res) {
|
|
if (res.success) {
|
|
$('.toast').html('提交成功').fadeIn(30).fadeOut(3000, function () {
|
|
$('#addRemark').modal('hide')
|
|
TableHelper.doRefresh('#table');
|
|
});
|
|
} else {
|
|
$('.toast').html(res.message).fadeIn(30).fadeOut(3000);
|
|
}
|
|
})
|
|
});
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hover-mask {
|
|
width: 500px;
|
|
height: 500px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: none;
|
|
z-index: 100000;
|
|
}
|
|
|
|
.hover-mask img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.toast {
|
|
width: 700px;
|
|
height: 60px;
|
|
background-color: black;
|
|
opacity: .7;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
border-radius: 25px;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -350px;
|
|
margin-top: -30px;
|
|
display: none;
|
|
z-index: 10000;
|
|
}
|
|
</style> |