fe / ufo-platform-fe · Commits

Go to a project

Authored by bevishuang
Commit 392c0bae3ad921de1b2242264aa67d0a85b08a75 1 parent 1a63e9fe

优化imagelist楼层

Inline Side-by-side
Showing 2 changed files with 56 additions and 17 deletions
@@ -57,7 +57,7 @@ import util from '@/libs/util'; @@ -57,7 +57,7 @@ import util from '@/libs/util';
57 import draggable from 'vuedraggable'; 57 import draggable from 'vuedraggable';
58 58
59 export default { 59 export default {
60 - props: ['value', 'hideAddButton', 'hideDeleteButton','type', 'templateName'], 60 + props: ['value', 'hideAddButton', 'hideDeleteButton','type', 'templateName', 'size'],
61 filters: { 61 filters: {
62 removeImageParams(url) { 62 removeImageParams(url) {
63 if (!url) { 63 if (!url) {
@@ -69,8 +69,9 @@ export default { @@ -69,8 +69,9 @@ export default {
69 }, 69 },
70 data() { 70 data() {
71 return { 71 return {
72 - type_: '0',  
73 - value_: this.handleData(util.clone(this.value)) 72 + type_: this.size || '0',
  73 + value_: this.handleData(util.clone(this.value)),
  74 + itemStyle: ''
74 }; 75 };
75 }, 76 },
76 methods: { 77 methods: {
@@ -106,7 +107,10 @@ export default { @@ -106,7 +107,10 @@ export default {
106 this.$emit('input', this.handleSaveData(this.value_)); 107 this.$emit('input', this.handleSaveData(this.value_));
107 }, 108 },
108 handleData(m) { 109 handleData(m) {
109 - 110 + console.log('===handleData===')
  111 + console.log(m);
  112 + console.log('===handl///eData===')
  113 + console.log(this.type_);
110 let keys = Object.keys(m); 114 let keys = Object.keys(m);
111 115
112 keys.sort((a,b) => { 116 keys.sort((a,b) => {
@@ -201,7 +205,7 @@ export default { @@ -201,7 +205,7 @@ export default {
201 return this.handleSaveData(this.value_); 205 return this.handleSaveData(this.value_);
202 }, 206 },
203 getType(){ 207 getType(){
204 - return this.type_; 208 + return this.type_ || '0';
205 }, 209 },
206 addId(m) { 210 addId(m) {
207 m.id = this.$bus.genId(); 211 m.id = this.$bus.genId();
@@ -209,6 +213,9 @@ export default { @@ -209,6 +213,9 @@ export default {
209 setValue(newVal) { 213 setValue(newVal) {
210 this.value_ = this.handleData(util.clone(newVal)); 214 this.value_ = this.handleData(util.clone(newVal));
211 }, 215 },
  216 + reSetType() {
  217 + this.type_ = '0';
  218 + },
212 reset() { 219 reset() {
213 this.value_ = []; 220 this.value_ = [];
214 } 221 }
@@ -216,6 +223,7 @@ export default { @@ -216,6 +223,7 @@ export default {
216 }, 223 },
217 watch: { 224 watch: {
218 value(newVal) { 225 value(newVal) {
  226 + this.type_ = this.size || '0';
219 this.value_ = this.handleData(util.clone(newVal)); 227 this.value_ = this.handleData(util.clone(newVal));
220 } 228 }
221 }, 229 },
@@ -53,13 +53,15 @@ @@ -53,13 +53,15 @@
53 <div class="hot-image-list-body"> 53 <div class="hot-image-list-body">
54 <div class="hot-image-list-item" 54 <div class="hot-image-list-item"
55 v-for="(item, index) in i.data" 55 v-for="(item, index) in i.data"
  56 + :class="i.itemClass"
56 :key="index"> 57 :key="index">
57 <img class="item-image" 58 <img class="item-image"
58 - 59 + :class="i.imageClass"
59 :src="item.src ? item.src.split('?')[0] : ''" 60 :src="item.src ? item.src.split('?')[0] : ''"
60 alt="" 61 alt=""
61 srcset="" > 62 srcset="" >
62 - <p class="item-title" >{{item.title}}</p> 63 + <p class="item-title"
  64 + :class="i.titleClass" >{{item.title}}</p>
63 </div> 65 </div>
64 </div> 66 </div>
65 </div> 67 </div>
@@ -118,7 +120,7 @@ @@ -118,7 +120,7 @@
118 120
119 <Modal v-model="show" @on-ok="onOk" @on-cancel="onCancel" :title="modalInfo.modalTitle" width="650"> 121 <Modal v-model="show" @on-ok="onOk" @on-cancel="onCancel" :title="modalInfo.modalTitle" width="650">
120 <banner-editor ref="addEditor" v-model="modalData" :hideAddButton="modalInfo.hideAddButton" 122 <banner-editor ref="addEditor" v-model="modalData" :hideAddButton="modalInfo.hideAddButton"
121 - :hideDeleteButton="true" :type="platform" :templateName="modalInfo.template_name"></banner-editor> 123 + :hideDeleteButton="true" :type="platform" :templateName="modalInfo.template_name" :size="modalInfo.size"></banner-editor>
122 </Modal> 124 </Modal>
123 </div> 125 </div>
124 </LayoutContent> 126 </LayoutContent>
@@ -310,7 +312,6 @@ @@ -310,7 +312,6 @@
310 template_name: 'tabFloor', 312 template_name: 'tabFloor',
311 resContentId: 0 313 resContentId: 0
312 }, // 猜你喜欢Tab的基础数据 314 }, // 猜你喜欢Tab的基础数据
313 -  
314 resId: null, 315 resId: null,
315 bg: '', 316 bg: '',
316 show: false, // 显示Modal 317 show: false, // 显示Modal
@@ -355,7 +356,18 @@ @@ -355,7 +356,18 @@
355 let item = JSON.parse(data[i].data); 356 let item = JSON.parse(data[i].data);
356 item.resContentId = data[i].resContentId; 357 item.resContentId = data[i].resContentId;
357 item.type = data[i].type; 358 item.type = data[i].type;
  359 +
  360 + if(item.template_name === 'imageList' && item.size == 5){
  361 + item.itemClass = 'hot-image-list-item-5';
  362 + item.titleClass = 'item-title-5';
  363 + item.imageClass = 'item-image-5';
  364 + }else {
  365 + item.itemClass = '';
  366 + item.titleClass = '';
  367 + item.imageClass = '';
  368 + }
358 this.floorList.push(item); 369 this.floorList.push(item);
  370 +
359 } 371 }
360 }, 372 },
361 showModal(type, data, index) { 373 showModal(type, data, index) {
@@ -414,6 +426,7 @@ @@ -414,6 +426,7 @@
414 this.modalInfo.resContentId = data.resContentId; 426 this.modalInfo.resContentId = data.resContentId;
415 this.modalInfo.template_intro = data.template_intro; 427 this.modalInfo.template_intro = data.template_intro;
416 this.modalInfo.template_name = data.template_name; 428 this.modalInfo.template_name = data.template_name;
  429 + this.modalInfo.size = data.size || '0';
417 this.modalInfo.floorIndex = index; 430 this.modalInfo.floorIndex = index;
418 this.modalInfo.hideAddButton = hideAddButton; 431 this.modalInfo.hideAddButton = hideAddButton;
419 this.show = true; 432 this.show = true;
@@ -428,9 +441,13 @@ @@ -428,9 +441,13 @@
428 onOk: () => { 441 onOk: () => {
429 this.uploadData.items.splice(index, 1); 442 this.uploadData.items.splice(index, 1);
430 this.resourceService.addOrUpdateResourceDetail(this.uploadData).then(res => { 443 this.resourceService.addOrUpdateResourceDetail(this.uploadData).then(res => {
431 - if (res && res.code === 200) { 444 + if (res && res.code === 2000) {
432 this.$Message.success(res.message || '修改成功！'); 445 this.$Message.success(res.message || '修改成功！');
433 this.getResourceDetailList(); 446 this.getResourceDetailList();
  447 + } else {
  448 + this.$Message.error(res.message || '修改失败！');
  449 + }
  450 + //修改成功失败都需要初始化数据
434 this.modalData = []; 451 this.modalData = [];
435 this.modalInfo = { 452 this.modalInfo = {
436 modalType: 0, 453 modalType: 0,
@@ -438,11 +455,9 @@ @@ -438,11 +455,9 @@
438 resContentId: 0, 455 resContentId: 0,
439 floorIndex: -1, 456 floorIndex: -1,
440 template_intro: '', 457 template_intro: '',
441 - template_name: '' 458 + template_name: '',
  459 + size: '0'
442 }; 460 };
443 - } else {  
444 - this.$Message.error(res.message || '修改失败！');  
445 - }  
446 }); 461 });
447 } 462 }
448 }); 463 });
@@ -460,7 +475,8 @@ @@ -460,7 +475,8 @@
460 } 475 }
461 } 476 }
462 477
463 - if(size != 0 && length != size) { 478 + if(size && size != 0 && length != size) {
  479 + this.modalData = [];
464 this.$Message.error('请配置'+size+'个图片后再提交！'); 480 this.$Message.error('请配置'+size+'个图片后再提交！');
465 return; 481 return;
466 } 482 }
@@ -505,13 +521,15 @@ @@ -505,13 +521,15 @@
505 resContentId: 0, 521 resContentId: 0,
506 floorIndex: -1, 522 floorIndex: -1,
507 template_intro: '', 523 template_intro: '',
508 - template_name: '' 524 + template_name: '',
  525 + size: '0'
509 }; 526 };
510 this.show = false; 527 this.show = false;
511 } else { 528 } else {
512 this.$Message.error(res.message || '修改失败！'); 529 this.$Message.error(res.message || '修改失败！');
513 } 530 }
514 }); 531 });
  532 + this.$refs.addEditor.reSetType();
515 }, 533 },
516 onCancel() { 534 onCancel() {
517 this.modalData = []; 535 this.modalData = [];
@@ -521,7 +539,8 @@ @@ -521,7 +539,8 @@
521 resContentId: 0, 539 resContentId: 0,
522 floorIndex: -1, 540 floorIndex: -1,
523 template_intro: '', 541 template_intro: '',
524 - template_name: '' 542 + template_name: '',
  543 + size: '0'
525 }; 544 };
526 this.show = false; 545 this.show = false;
527 } 546 }
@@ -682,6 +701,10 @@ @@ -682,6 +701,10 @@
682 flex-shrink: 0; 701 flex-shrink: 0;
683 height: 150px; 702 height: 150px;
684 } 703 }
  704 + .hot-image-list-item-5 {
  705 + flex: 0 0 20%;
  706 + height: 120px;
  707 + }
685 708
686 .item-image { 709 .item-image {
687 margin-top: 10px; 710 margin-top: 10px;
@@ -692,6 +715,10 @@ @@ -692,6 +715,10 @@
692 justify-content: center; */ 715 justify-content: center; */
693 } 716 }
694 717
  718 + .item-image-5 {
  719 + height: 80px;
  720 + }
  721 +
695 .item-title { 722 .item-title {
696 width: 110px; 723 width: 110px;
697 margin-top: 10px; 724 margin-top: 10px;
@@ -710,6 +737,10 @@ @@ -710,6 +737,10 @@
710 text-overflow: ellipsis; 737 text-overflow: ellipsis;
711 } 738 }
712 739
  740 + .item-title-5 {
  741 + width: 88px;
  742 + }
  743 +
713 .sort-tab-body { 744 .sort-tab-body {
714 display: flex; 745 display: flex;
715 flex-direction: row; 746 flex-direction: row;