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

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>

style/css/index.css

@@ -2,8 +2,8 @@
     display: flex;
     display: -ms-flexbox;
 }
-.hide{
+.hide,.hidden{
-    display: none;
+    display: none !important;
 }
 .radio-wrap{}
 .radio_box,.check_Box{
@@ -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;
+    height: 2px;
-    background: #f0f0f0;
+    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;

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,6 +161,9 @@ $(document).ready(function () {
         },
     ]; //已删除
 
+    allData = waitCheck;//初始赋值待审批列表 后续从接口请求赋值
+
+
     $('.radio-wrap').on('click', '.radio_box input', function () {
         var radio_val = $(this).attr('value')
         $('.edit-input').val('')
@@ -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,6 +207,7 @@ $(document).ready(function () {
     })
     // 打开弹框
     $('.addNewBtn').click(function () {
+        $('.preview').html('')
         $('.edit-input').val('')
         $('.radio-form').show();
         $('.img_list2').html('')
@@ -222,10 +228,11 @@ $(document).ready(function () {
             $('.modal').addClass('addmodal')
         }
 
-        $('#header_title').html('新录入')
+        $('#header_title').html('新增自录入')
         $('.modal, .modal-overlay').fadeIn();
     });
     var imagesHTML1 = ''
+
     function renderImages(item) {
         if (item.imgs) {
             item.imgs.forEach(image => {
@@ -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 = [
+    // var allData = [
-        "数据 1", "数据 2", "数据 3", "数据 4", "数据 5",
+        // "数据 1", "数据 2", "数据 3", "数据 4", "数据 5",
-        "数据 6", "数据 7", "数据 8", "数据 9", "数据 10",
+        // "数据 6", "数据 7", "数据 8", "数据 9", "数据 10",
-        "数据 11", "数据 12", "数据 13", "数据 14", "数据 15",
+        // "数据 11", "数据 12", "数据 13", "数据 14", "数据 15",
-        "数据 16", "数据 17", "数据 18", "数据 19", "数据 20",
+        // "数据 16", "数据 17", "数据 18", "数据 19", "数据 20",
-        "数据 21", "数据 22", "数据 23", "数据 24", "数据 25",
+        // "数据 21", "数据 22", "数据 23", "数据 24", "数据 25",
-        "数据 26", "数据 27", "数据 28", "数据 29", "数据 30"
+        // "数据 26", "数据 27", "数据 28", "数据 29", "数据 30"
-    ];
+    // ];
-    allData = waitCheck;
     // 总页数
     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(){
+        // 恢复待审批
+    })
+
 });