货主管理

src/app/shared/components/imagelist/image-list.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ImageListComponent } from './imagelist.component';
+import { ImageViewComponent } from './imageview/imageview.component';
+
+const COMPONENTS = [ImageListComponent, ImageViewComponent];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule],
+  exports: COMPONENTS,
+})
+export class ImageListModule {}

src/app/shared/components/imagelist/imagelist.component.html

@@ -0,0 +1,3 @@
+<div class="imgBox">
+  <img *ngFor="let item of imgList; let i = index" [src]="item" (click)="showImg(i)" />
+</div>

src/app/shared/components/imagelist/imagelist.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ImageListComponent } from './imagelist.component';
+
+describe('ImageListComponent', () => {
+  let component: ImageListComponent;
+  let fixture: ComponentFixture<ImageListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageListComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/imagelist/imagelist.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { ImageViewComponent } from './imageview/imageview.component';
+
+@Component({
+  selector: 'app-imagelist',
+  templateUrl: './imagelist.component.html',
+  styleUrls: ['./imagelist.less'],
+})
+export class ImageListComponent implements OnInit {
+  @Input() imgList: any = [];
+  constructor(private modal: ModalHelper, public msgSrv: NzMessageService, public http: _HttpClient) {}
+
+  ngOnInit(): void {}
+  showImg(index: any) {
+    const params = {
+      imgList: this.imgList,
+      index,
+    };
+    this.modal.create(ImageViewComponent, { params }).subscribe((res) => {});
+  }
+}

src/app/shared/components/imagelist/imagelist.less

@@ -0,0 +1,9 @@
+.imgBox {
+  width: 100%;
+  overflow: hidden;
+  img {
+    width: 100px;
+    margin: 0 10px;
+    vertical-align: middle;
+  }
+}

src/app/shared/components/imagelist/imageview/imageview.component.html

@@ -0,0 +1,12 @@
+<div class="modal-header">
+  <div class="modal-title">查看图片</div>
+</div>
+<div class="imageWrap">
+  <div class="prev" (click)="prevImg()" *ngIf="params.imgList.length > 1">
+    <i nz-icon [class.blue]="currentIndex != 0" nzType="vertical-right" nzTheme="outline"></i>
+  </div>
+  <div class="imgBox"><img [src]="params.imgList[currentIndex]" /></div>
+  <div class="next" *ngIf="params.imgList.length > 1" (click)="nextImg()">
+    <i nz-icon nzType="vertical-left" nzTheme="outline" [class.blue]="currentIndex != params.imgList.length - 1"></i>
+  </div>
+</div>

src/app/shared/components/imagelist/imageview/imageview.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ImageViewComponent } from './imageview.component';
+
+describe('ImageViewComponent', () => {
+  let component: ImageViewComponent;
+  let fixture: ComponentFixture<ImageViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageViewComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/imagelist/imageview/imageview.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { _HttpClient } from '@delon/theme';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'app-imageview',
+  templateUrl: './imageview.component.html',
+  styleUrls: ['./imageview.less'],
+})
+export class ImageViewComponent implements OnInit {
+  params: any = {};
+  currentIndex = 0;
+  constructor(private modal: NzModalRef, public msgSrv: NzMessageService, public http: _HttpClient) {}
+
+  ngOnInit(): void {
+    this.currentIndex = this.params.index;
+  }
+
+  close() {
+    this.modal.destroy();
+  }
+  prevImg() {
+    if (this.currentIndex === 0) {
+      this.msgSrv.error('已经是第一张图片！');
+      return false;
+    }
+    this.currentIndex--;
+    return true;
+  }
+  nextImg() {
+    if (this.currentIndex === this.params.imgList.length - 1) {
+      this.msgSrv.error('已经是最后一张图片！');
+      return false;
+    }
+    this.currentIndex++;
+    return true;
+  }
+}

src/app/shared/components/imagelist/imageview/imageview.less

@@ -0,0 +1,39 @@
+.imageWrap {
+  position: relative;
+  width: 95%;
+  margin: 0 auto;
+}
+.imgBox {
+  max-width: 500px;
+  height: 100%;
+  max-height: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+  img {
+    width: 100%;
+    vertical-align: middle;
+  }
+}
+.prev,
+.next {
+  position: absolute;
+  top: 50%;
+  width: 50px;
+  height: 50px;
+  color: #bbb;
+  font-size: 30px;
+  line-height: 50px;
+  text-align: center;
+  background: #e2e2e2;
+  border-radius: 100px;
+  transform: translateY(-50%);
+}
+.next {
+  right: 0;
+}
+.prev {
+  left: 0;
+}
+.blue {
+  color: #2593e8 !important;
+}

src/app/shared/components/imagelist/index.ts

@@ -0,0 +1,3 @@
+export * from './imagelist.component';
+export * from './imageview/imageview.component';
+export * from './image-list.module';

src/app/shared/shared-zorro.module.ts

@@ -39,6 +39,7 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzStatisticModule } from 'ng-zorro-antd/statistic';
 import { NzTimelineModule } from 'ng-zorro-antd/timeline';
+import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 export const SHARED_ZORRO_MODULES = [
   NzButtonModule,
   NzGridModule,
@@ -71,5 +72,6 @@ export const SHARED_ZORRO_MODULES = [
   NzPopoverModule,
   NzEmptyModule,
   NzStatisticModule,
-  NzTimelineModule
+  NzTimelineModule,
+  NzSkeletonModule
 ];

src/app/shared/shared.module.ts

@@ -28,6 +28,7 @@ import { StatusLabelModule } from './components/status-label';
 import { SharedThirdModule } from './shared-third.module';
 import { LogisticsTimeLineComponent } from './components/logistics-time-line/logistics-time-line.component';
 import { AmapModule } from './components/amap/amap.module';
+import { ImageListModule } from './components/imagelist';
 
 const MODULES = [
   AddressModule,
@@ -40,6 +41,7 @@ const MODULES = [
   StatusLabelModule,
   SharedThirdModule,
   AmapModule,
+  ImageListModule,
   ...PRO_SHARED_MODULES
 ];
 // #endregion