From acd58b0a9bb3a07eb90ad3f817e5e67abe0dd111 Mon Sep 17 00:00:00 2001 From: zq <136432190602163.com> Date: Fri, 14 Mar 2025 14:48:28 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=8A=E4=BC=A0=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=8C=89=E9=92=AE=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- home.html | 3 +- style/css/index.css | 73 ++++++++++++++------- style/js/index.js | 183 +++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 212 insertions(+), 47 deletions(-) diff --git a/home.html b/home.html index 9d67e89..c7101e3 100644 --- a/home.html +++ b/home.html @@ -115,6 +115,7 @@ + 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 = $(`
+
上传中...
上传中...
- +
`); $('.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(`${file.name}` + 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(`
图片 Small Image + Small Image
`); } else if (type === 'video') { + // 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位 item.prepend(`
视频 Video Cover ...丢了 + Small Image
`); } }; 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(`
+ 图片 + Small Image + Small Image +
`); + } else if (type === 'video') { + // 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位 + item.prepend(`
+ 视频 + Video Cover + ...丢了 + Small Image +
`); + } + }; + reader.readAsDataURL(file); + }else{ + console.log(res,'response.info---'); + item.find('.upload_name').html(`${file.name}` +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 () { 录入：` + item.lurutime + ` ${ - tabActive == '1' ? '
编辑
' :'' + tabActive == '1' ? `
编辑
` :'' } @@ -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