From 4679139e2212b1b242ce863826e0b077c1fc49c1 Mon Sep 17 00:00:00 2001 From: xuhuajiao <13476289682@163.com> Date: Mon, 7 Mar 2022 14:34:31 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B4=A0=E6=9D=90=E5=BA=932?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/selected.png | Bin 0 -> 1472 bytes src/assets/images/un_selected.png | Bin 0 -> 1491 bytes src/views/materialContent/index.vue | 22 +- .../materialContent/materialList/index.vue | 293 ++++++++++++++++-- 4 files changed, 290 insertions(+), 25 deletions(-) create mode 100644 src/assets/images/selected.png create mode 100644 src/assets/images/un_selected.png diff --git a/src/assets/images/selected.png b/src/assets/images/selected.png new file mode 100644 index 0000000000000000000000000000000000000000..eaeba0f7b9d59e54ef33d756ddaffbadd2ad6922 GIT binary patch literal 1472 zcmbVMZEO=|9KY_R;MkVM$>?CX^FSS8*L&&fUDmB#uVaO^YeoZwEV#RSp0e8Y?!4aC zZkgDrSpboj3<2W{#AqA|Bj`Rzh6*?}Qv!^|XfV;hgqRo!s6;@L>2<8=2f_z0xqIIJ zzu*7&{9kTcD7dPmXmJsOASM20u1z0J*>}EC|6WSDZtFv(=8I@+<*1h8Rfu?iEI`zs z;5WlI$b;VJzJhfKlHU^xN3=+wg%#z5na|po(+NdKBS>9CTH(bw)KCF#j!7=;`iYYm z8UrqDy)8fn6ff+IHTS7-ZC@}f_Qgd8U=8(XU7FPi5>VsObfQa2vS}AK%ggHX>^6a+ zvnE>Hh20Ys34~CutU}agw&5a4Sy2aLrfiheN!6k>Nm&TeLQoc*qFIt*DH}TXV7fOI zMAAfo?ltAD zL>o-X-KwbPBf2aH)?@c@M_EH%4cn^5^rY}zoGf-HprrXZ7p9+>K@6}oWq0xnBj6A? z01ilN6lX-M1t)EQ6hTxF9DFp#^B}yZ(Q9p@?F_>;+9}HCZEW)RIGW^~4xfc$$i^Jj zFC{fz5@F7FO!qy9bv_i!dR544vKp4~;arI8V|}99pda=j}EpF4!5n%_52vX}4l?c<_JY zN9dx6Y_a^Ocye2MMP{e>TR~skZzd?|9i-~5B8}ZhAc*0TpYw#%-wWVW{*kdw@w~&$ zXitH#6s^dtejb@#>HfHS>;CGM<)7?4Q`}T#j3b97^iLiw?J`Wa9r8KmZ$zwhOPd1) zLXUCkR4aOJ-bT87!|q4U-l#xrFBOkh9_ov_&z`zz_~xp`G@MU&)bm`?9}B=()q15e zGhI-@{jk?ms=^)2)7}A#BY#18-SM&0>g2oWS05c;)81>!D|Vv%=&#GhufBhhpW4_m zsRb8~pRfPxta9y+44&N6GTFj?aQWxV;Qo=jpWnDuy`5h5RA*^nzGQD2oC$3iEJ{6Y zTo;`xCJGnN{B-LD?LD@(`Qky(rUS2^ZW&lOA;7Zfs4)EF?QNHDJ@aA7JcD8Hj-G3G zss~FJZOL5x_Uo?Vk(vIQ`X??Z>EKMJc5?LYf^};qs48F|Jrb`Rb`N>HMhMKMW#GyO8D%ydm zH17-#FGSm6!*SEGOQ7tEAROqvy=29pY}n`fv^Er6QFcODxy$_}UjN%$Z+>?4u}#(P z_&fc^Uk3Uk*No@qP5yr3wW7g~uz24fhcSwKp;pwbaYQ0B)NC{AHyUQ&5c z0HTbvUo2B?pr&-<3PH*3o+1{M$v|l#gCn#Aqk04m2BY^Hw^mdy_pgkHS}XbG5(j%Z zMJ$sUEgymTF|Zc9M>~odYHEmOGOs0tUQLNiS&$P{7i9yr6Ftkb1csWeG>-crjkC&KM04Vqy`74fy>QIuPS|7(T;J8l9Nggj04iiaJQUGs8h)2xYZ63@DD+V_27< zsI9X59iT^zi~KhLuIpG)>%^ z;$%L=u})bG0^@Ne_=jjPFu2+5XEBIIFe}6vjVwf)O;*Tn#?2-J!=Q-S2u|YJ{~JG8 z69q?$1_9ZiQ!?+vh2k3Ksje&29e1o@vag?e%nAMHaMNIMs7_0QT;C{@Thd zrxLrt9ltu)2<_K$9IfA<+iOc^w-0rL^dNcr)%O1DH9w8n_D5rwu;V`Hf->N^4F5a-n9L3Ba*uKiZr`7y?$#v*?!%1)Ei73o4(}M w%jEFguHjnzWOG{$y&mhI(O0`Q^tNwWoK87i(c3|M)e-&8x*Q&=$-ZjCKkYR$1ONa4 literal 0 HcmV?d00001 diff --git a/src/views/materialContent/index.vue b/src/views/materialContent/index.vue index 89155f1..77df687 100644 --- a/src/views/materialContent/index.vue +++ b/src/views/materialContent/index.vue @@ -3,7 +3,11 @@
- + @@ -30,7 +34,7 @@
上传列表 - 多选 + {{ mulitText }}
@@ -42,7 +46,10 @@ export default { components: { MaterialList }, data() { return { - activeName: 'first' + activeName: 'first', + isMultiSelected: false, + isCheck: null, + mulitText: '多选' } }, methods: { @@ -51,6 +58,15 @@ export default { }, handleUpload() { this.$refs.MaterialList.UploadList() + }, + multiSelectBtn() { + this.isMultiSelected = !this.isMultiSelected + if (this.isMultiSelected) { + this.mulitText = '取消' + } else { + this.mulitText = '多选' + } + // this.$refs.MaterialList.multiSelectList() } } } diff --git a/src/views/materialContent/materialList/index.vue b/src/views/materialContent/materialList/index.vue index a8e3d0b..b866fa5 100644 --- a/src/views/materialContent/materialList/index.vue +++ b/src/views/materialContent/materialList/index.vue @@ -14,26 +14,25 @@

文件夹

-
- -
- JPG -
-
人工智能
-
-
-
+
+ +
- Video - 03:00 + {{ item.type }} + 03:00
-
防控疫情小贴士
+
{{ item.name }}
+
- +
- + - + @@ -91,8 +90,8 @@
- -
+ +
+
+ +
点击上传
+ +
返回
+
+ +
+ +
+ 即时发布 + 定时发布 + 编辑 + 下载 + 移动 + 删除 +
+ + +
+ + +
+
+ +

{{ item.name }}

+
+
+
+ 确定 + 取消 +
@@ -155,14 +209,29 @@ export default { return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser } }) }, mixins: [presenter(), header(), form(defaultForm), crud()], + props: { + isMultiSelected: { + type: Boolean, + required: true + }, + mulitText: { + type: String, + required: true + } + }, data() { return { - mkdirVisible: false, uploadListVisible: false, loading_txt: '暂停', progressLoading: true, percentage: 0, colors: '#1e9f4c', + layerTitle: '创建文件夹', + labelTxt: '文件夹名称', + mkdirVisible: false, + formType: null, + movingVisible: false, + movingChecked: null, // dialogImageUrl: '', // dialogVisible: false, // disabled: false @@ -173,6 +242,40 @@ export default { type: 'vedio', size: '3MB' } + ], + listData: [ + { + id: '1', + name: '人工智能', + type: 'JPG', + coverImg: require('@/assets/images/background.jpg'), + time: '' + }, + { + id: '2', + name: '防控疫情小贴士', + type: 'vedio', + coverImg: require('@/assets/images/background.jpg'), + time: '03:00' + }, + { + id: '3', + name: '防控疫情小贴士2', + type: 'audio', + coverImg: '', + time: '01:20' + } + ], + contentIds: [], + wjjList: [ + { + id: '1', + name: '文件夹1' + }, + { + id: '2', + name: '文件夹2' + } ] } }, @@ -181,6 +284,13 @@ export default { 'user' ]) }, + watch: { + isMultiSelected(newName, oldName) { + if (newName === false) { + this.contentIds = [] + } + } + }, mounted: function () { this.start() }, @@ -191,6 +301,49 @@ export default { UploadList() { this.uploadListVisible = true }, + selectedItem(id, type) { + console.log('type', type) + + const arr = this.contentIds + // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效 + if (arr.includes(id)) { + // 判断数组中是否有选中的id,如果有则去掉 + const index = arr.indexOf(id) + if (index > -1) { + arr.splice(index, 1) + } + } else { + this.contentIds.push(id) + this.formType = type + } + + console.log('formType', this.formType) + }, + editContent() { + this.mkdirVisible = true + this.labelTxt = '文件名称' + + if (this.formType === 'vedio') { + this.layerTitle = '视频编辑' + } else if (this.formType === 'audio') { + this.layerTitle = '音频编辑' + } else { + this.layerTitle = '图片编辑' + } + + const resType = this.listData.filter(item => { + return item.id === this.contentIds[0] + }) + this.form.name = resType[0].name + }, + moveingTo(index) { + this.movingVisible = true + // this.movingChecked = index + }, + wjjSelected(index) { + this.movingChecked = index + console.log(this.movingChecked) + }, format(percentage) { return percentage === 100 ? '100%' : `${percentage}%` }, @@ -208,7 +361,7 @@ export default { }, // 进度条结束 end() { - this.loading_txt = '开始' + this.loading_txt = '继续' // const that = this // that.percentage = 100 clearInterval(this.timeStart) @@ -236,11 +389,29 @@ export default { flex-wrap: wrap; margin-left: 24px; .material_item { + position: relative; width: 174px; height: 182px; border-radius: 4px; margin: 0 20px 20px 0; } + .checked_btn { + position: absolute; + top: 10px; + right: 10px; + display: block; + width: 24px; + height: 24px; + background: url(~@/assets/images/un_selected.png) no-repeat; + background-size: 24px 24px; + cursor: pointer; + } + .item_multi { + border-color: #3a8aeb !important; + .checked_btn { + background: url(~@/assets/images/selected.png) no-repeat; + } + } .cont_upload { display: flex; flex-wrap: wrap; @@ -312,4 +483,82 @@ export default { width: 128px; height: 120px; } +.upload_layer { + ::v-deep .el-dialog__headerbtn { + right: -60px; + .el-dialog__close { + color: #fff; + font-size: 26px; + } + } + .upload_list_right { + position: absolute; + right: 24px; + top: 24px; + display: flex; + font-size: 14px; + font-weight: bold; + color: #3a8aeb; + .upload_return { + margin-left: 16px; + cursor: pointer; + } + } +} + +.multi_handle { + position: fixed; + bottom: 140px; + left: 50%; + width: 1100px; + padding: 25px 150px; + background: rgba(0, 0, 0, 0.5); + border-radius: 4px; + margin-left: -438px; + .mulit_btn { + padding: 0 24px; + height: 34px; + font-size: 14px; + color: #333; + border: none; + margin: 0 24px; + background-color: #fff; + } + .mulit_delt_btn { + background-color: #ec414d; + color: #fff; + } +} + +.wjj_layer { + ::v-deep .el-dialog__body { + padding: 30px 24px; + } + .wjj_list { + display: flex; + flex-wrap: wrap; + .wjj_item { + display: flex; + flex-wrap: wrap; + align-content: center; + justify-content: center; + width: 96px; + height: 104px; + cursor: pointer; + &.wjj_item_active { + background: #e8f3ff; + border: 1px solid #428fec; + } + .font-icon { + width: 64px; + height: 55px; + } + .wjj_name { + font-size: 14px; + color: #333; + margin-top: 8px; + } + } + } +}