diff --git a/home.html b/home.html
index 9d67e89..c7101e3 100644
--- a/home.html
+++ b/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>
diff --git a/style/css/index.css b/style/css/index.css
index 425fb95..ef83f6e 100644
--- a/style/css/index.css
+++ b/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;
diff --git a/style/js/index.js b/style/js/index.js
index fc6f709..1340432 100644
--- a/style/js/index.js
+++ b/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');
@@ -185,7 +190,7 @@ $(document).ready(function () {
$('.answer-form').hide();
$('.normal-input').val(cur_editdata.desc);
$('.char-count').text(cur_editdata.desc.length + '/100');
-
+
if ($('.modal').hasClass('addmodal')) {
$('.modal').removeClass('addmodal')
$('.modal').addClass('editmodal')
@@ -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('提问信息')
}
@@ -221,12 +227,13 @@ $(document).ready(function () {
} else {
$('.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(){
+ // 恢复待审批
+ })
+
});
\ No newline at end of file