Browse Source

优化上传相关信息展示,增加按钮逻辑

pull/1/head
zq 3 months ago
parent
commit
acd58b0a9b
  1. 3
      home.html
  2. 73
      style/css/index.css
  3. 179
      style/js/index.js

3
home.html

@ -115,6 +115,7 @@
</div>
</div>
</div>
<div class="form-item answer-form" style="display: none;">
<div class="form-left">
回答信息
@ -164,7 +165,7 @@
<input type="file" id="upload-video" accept="video/*" style="display: none;" multiple>
<div class="buttons flex">
<button id="submit" class="button ">仅保存</button>
<button id="cancel" class="button button-primary">保存并通过审批</button>
<button id="savePass" class="button button-primary">保存并通过审批</button>
</div>
</div>
</div>

73
style/css/index.css

@ -2,13 +2,13 @@
display: flex;
display: -ms-flexbox;
}
.hide{
display: none;
.hide,.hidden{
display: none !important;
}
.radio-wrap{}
.radio_box,.check_Box{
display: flex;
display: -ms-flexbox;
display: -ms-flexbox;
align-items: center;
margin-right: 24px;
position: relative;
@ -220,7 +220,8 @@ display: -ms-flexbox;
height: 20px;
display: flex;
text-align: center;
justify-content: space-between;
justify-content: flex-start;
padding-left: 0;
letter-spacing: 1px;
box-sizing: border-box;
position: relative;
@ -241,10 +242,9 @@ display: -ms-flexbox;
.index-nav-wrap ul li {
color: #3D4B54;
font-size: 14px;
font-weight: 500;
text-align: center;
text-align: left;
position: relative;
cursor: pointer;
}
@ -360,7 +360,7 @@ display: -ms-flexbox;
.play-video {
width: 40px;
height: 40px;
position: absolute;
position: absolute !important;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@ -544,6 +544,20 @@ button:hover {
.addmodal .add-form .form-left{
display: block;
}
.addmodal .modal_upload_btn{
flex-direction: column;
justify-content: flex-end;
margin-bottom: 20px;
}
.addmodal .modal_btns{
margin-bottom: 12px;
justify-content: flex-end;
width: 100%;
}
.addmodal .modal_btns + p{
width: 100%;
text-align: right;
}
/* 弹框样式 */
.modal {
display: none;
@ -607,6 +621,7 @@ button:hover {
.modal .preview .small-image{
margin-right: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.modal .preview img,
.modal .preview video {
@ -617,8 +632,9 @@ button:hover {
position: absolute;
top: 0;
right: 0;
background: red;
width: 24px;
color: white;
background: transparent;
border: none;
cursor: pointer;
}
@ -631,17 +647,6 @@ button:hover {
border: none;
cursor: pointer;
}
.modal .progress-bar {
width: 100%;
height: 10px;
background: #f0f0f0;
margin-bottom: 10px;
}
.modal .progress-bar .progress {
height: 100%;
width: 0;
background: #4caf50;
}
.modal .buttons {
justify-content: flex-end;
}
@ -655,6 +660,8 @@ button:hover {
}
.modal_upload_btn{
align-items: center;
margin-bottom: 20px;
width: 100%;
}
.modal_upload_btn p{
font-size: 12px;
@ -682,6 +689,24 @@ button:hover {
.upload-container button {
margin-right: 10px;
}
.upload_name{
font-family: Inter;
font-size: 13px;
font-weight: normal;
line-height: 22px;
letter-spacing: 0px;
color: #606266; /* #606266 */
display: flex;
justify-content: space-between;
align-items: center;
}
.upload_file_name{
max-width: 130px;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.preview {
margin-top: 20px;
}
@ -690,6 +715,7 @@ button:hover {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
width: 170px;
}
.preview img,
.preview video {
@ -707,19 +733,22 @@ button:hover {
}
.progress-bar {
width: 100%;
height: 10px;
background: #f0f0f0;
height: 2px;
background: #EBEEF5;
margin-top: 5px;
}
.progress-bar .progress {
height: 100%;
width: 0;
background: #4caf50;
background: #006AFF;
}
.status {
font-size: 12px;
color: #666;
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.status.uploading {
color: #2196f3;

179
style/js/index.js

@ -3,6 +3,7 @@ $(document).ready(function () {
var tabActive = '1';
var cur_editdata = {}; //当前编辑数据
var vediourl = ''
var allData =[];//用于列表展示
// 假数据假数据-----
var waitCheck = [{
id: 1,
@ -160,13 +161,16 @@ $(document).ready(function () {
},
]; //已删除
allData = waitCheck;//初始赋值待审批列表 后续从接口请求赋值
$('.radio-wrap').on('click', '.radio_box input', function () {
var radio_val = $(this).attr('value')
$('.edit-input').val('')
if(radio_val == '1'){
if (radio_val == '1') {
$('.answer-form').hide()
$('.common-input').html('录入信息')
}else{
} else {
$('.common-input').html('提问信息')
$('.answer-form').show()
}
@ -177,6 +181,7 @@ $(document).ready(function () {
//编辑 打开弹框
$('#data-list').on('click', '.list_item_top_r', function () {
$('.preview').html('')
var cur_id = $(this).attr('id');
cur_editdata = allData.filter(item => item.id == cur_id)[0];
console.log(cur_editdata, 'cur_editdata');
@ -202,16 +207,17 @@ $(document).ready(function () {
})
// 打开弹框
$('.addNewBtn').click(function () {
$('.preview').html('')
$('.edit-input').val('')
$('.radio-form').show();
$('.img_list2').html('')
$('.img_list2').show()
imagesHTML1 = ''
var radio_val = $('.radio-wrap').find('.radio_box_active input').val();
if(radio_val == '1'){
if (radio_val == '1') {
$('.answer-form').hide()
$('.common-input').html('录入信息')
}else{
} else {
$('.answer-form').show()
$('.common-input').html('提问信息')
}
@ -222,11 +228,12 @@ $(document).ready(function () {
$('.modal').addClass('addmodal')
}
$('#header_title').html('新录入')
$('#header_title').html('新增自录入')
$('.modal, .modal-overlay').fadeIn();
});
var imagesHTML1 =''
function renderImages(item){
var imagesHTML1 = ''
function renderImages(item) {
if (item.imgs) {
item.imgs.forEach(image => {
imagesHTML1 += `
@ -292,11 +299,12 @@ $(document).ready(function () {
function uploadFile(file, type) {
const item = $(`
<div class="item">
<div class="upload_name">上传中...</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="status uploading">上传中...</div>
<button class="delete-btn">×</button>
</div>
`);
$('.preview').append(item);
@ -305,50 +313,109 @@ $(document).ready(function () {
formData.append('file', file);
// 模拟接口上传
$.ajax({
url: 'https://aitest.chachongz.com/upload_file', // 模拟接口地址
url: 'http://zq.pengda.checkcopy.com//upload_file', // 模拟接口地址
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function () {
console.log(file,'=====file');
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
const percent = Math.ceil((e.loaded / e.total) * 100);
item.find('.progress').css('width', percent + '%');
item.find('.upload_name').html(`<span class="upload_file_name">${file.name}</span>` + percent + '%');
}
}, false);
return xhr;
},
success: function (response) {
res = JSON.parse(response)
item.find('.status').removeClass('uploading').addClass('hidden').text('上传成功');
item.find('.progress-bar').addClass('hide'); // 隐藏进度条
item.find('.upload_name').addClass('hide'); // 隐藏进度条
const reader = new FileReader();
reader.onload = function (event) {
if (type === 'image') {
item.prepend(` <div class="small-image">
<span class="small-image-desc">图片</span>
<img src="${event.target.result}" alt="Small Image">
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image">
</div>`);
} else if (type === 'video') {
// 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位
item.prepend(` <div class="small-video-cover" href="">
<span class="small-image-desc">视频</span>
<img class="small-video-show" src="${event.target.result}" alt="Video Cover">
<img src="./style/img/play.svg" class="play-video" alt="...丢了">
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image">
</div>`);
}
};
reader.readAsDataURL(file);
return
if (res.status) {
item.find('.status').removeClass('uploading').addClass('hidden').text('上传成功');
item.find('.progress-bar').addClass('hide'); // 隐藏进度条
item.find('.upload_name').addClass('hide'); // 隐藏进度条
const reader = new FileReader();
reader.onload = function (event) {
if (type === 'image') {
item.prepend(` <div class="small-image">
<span class="small-image-desc">图片</span>
<img src="${event.target.result}" alt="Small Image">
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image">
</div>`);
} else if (type === 'video') {
// 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位
item.prepend(` <div class="small-video-cover" href="">
<span class="small-image-desc">视频</span>
<img class="small-video-show" src="${event.target.result}" alt="Video Cover">
<img src="./style/img/play.svg" class="play-video" alt="...丢了">
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image">
</div>`);
}
};
reader.readAsDataURL(file);
}else{
console.log(res,'response.info---');
item.find('.upload_name').html(`<span class="upload_file_name">${file.name}</span>` +res.info);
item.find('.status').removeClass('uploading').addClass('failed').text('上传失败');
}
},
error: function () {
item.find('.status').removeClass('uploading').addClass('failed').text('上传失败');
item.find('.status').removeClass('uploading').addClass('failed').text('上传失败');ç
}
});
}
// 删除功能
$(document).on('click', '.delete-btn', function () {
$('.img_list2').on('click', '.delete-btn', function () {
$(this).parent().remove();
// 请求借口
// $.ajax({
// type: "post",
// dataType: 'json',
// url: '',
// data: {
// type
// },
// success: function (res) {}
// })
});
$('.preview').on('click', '.delete-btn', function () {
$(this).parent().parent().remove();
// 请求借口
// $.ajax({
// type: "post",
// dataType: 'json',
// url: '',
// data: {
// type
// },
// success: function (res) {}
// })
});
// 三个按钮操作
@ -517,15 +584,14 @@ $(document).ready(function () {
}
// 模拟数据
var allData = [
"数据 1", "数据 2", "数据 3", "数据 4", "数据 5",
"数据 6", "数据 7", "数据 8", "数据 9", "数据 10",
"数据 11", "数据 12", "数据 13", "数据 14", "数据 15",
"数据 16", "数据 17", "数据 18", "数据 19", "数据 20",
"数据 21", "数据 22", "数据 23", "数据 24", "数据 25",
"数据 26", "数据 27", "数据 28", "数据 29", "数据 30"
];
allData = waitCheck;
// var allData = [
// "数据 1", "数据 2", "数据 3", "数据 4", "数据 5",
// "数据 6", "数据 7", "数据 8", "数据 9", "数据 10",
// "数据 11", "数据 12", "数据 13", "数据 14", "数据 15",
// "数据 16", "数据 17", "数据 18", "数据 19", "数据 20",
// "数据 21", "数据 22", "数据 23", "数据 24", "数据 25",
// "数据 26", "数据 27", "数据 28", "数据 29", "数据 30"
// ];
// 总页数
var totalPages = Math.ceil(allData.length / pageSize);
// 渲染数据
@ -570,7 +636,7 @@ $(document).ready(function () {
<span>录入` + item.lurutime + `</span>
</div>
${
tabActive == '1' ? ' <div class="list_item_top_r" id="${item.id}"><img src="./style/img/edit.svg" alt="">编辑</div>' :''
tabActive == '1' ? `<div class="list_item_top_r" id="${item.id}"><img src="./style/img/edit.svg" alt="">编辑</div>` :''
}
</div>
@ -690,4 +756,73 @@ $(document).ready(function () {
$(this).find('span').addClass('active')
renderData()
})
// 仅保存
// 录入信息
$('#submit').click(function () {
if ($('.modal').hasClass('editmodal')) { //编辑
var desc = $('.normal-input').val().trim()
var answer = $('.answer-input').val().trim()
// cur_editdata.id //当前编辑数据 后续用其他参数也可
} else if ($('.modal').hasClass('addmodal')) { //新增
var radio_val = $('.radio-wrap').find('.radio_box_active input').val();
// 区分信息段、问答
if (radio_val == '1') {
} else {
}
}
// $.ajax({
// type: "post",
// dataType: 'json',
// url: '',
// data: {
// type
// },
// success: function (res) {}
// })
$('.modal, .modal-overlay').fadeOut();
})
// 保存并通过审批
$('#savePass').click(function () {
// 请求借口
if ($('.modal').hasClass('editmodal')) { //编辑
var desc = $('.normal-input').val().trim()
var answer = $('.answer-input').val().trim()
} else if ($('.modal').hasClass('addmodal')) { //新增
var radio_val = $('.radio-wrap').find('.radio_box_active input').val();
// 区分信息段、问答
if (radio_val == '1') {
} else {
}
}
// $.ajax({
// type: "post",
// dataType: 'json',
// url: '',
// data: {
// type
// },
// success: function (res) {}
// })
$('.modal, .modal-overlay').fadeOut();
})
$('.list_all').on('click','deleteBtn',function(){
// 列表删除
})
$('.list_all').on('click','passBtn',function(){
// 列表通过
})
$('.list_all').on('click','checkBtn',function(){
// 恢复待审批
})
});
Loading…
Cancel
Save