调整弹窗

src/app/view/link/link.component.html

@@ -25,28 +25,89 @@
 </div>
 
 <nz-modal [(nzVisible)]="showModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter"
-          (nzOnCancel)="cancel()">
+          (nzOnCancel)="cancel()" nzWidth="650">
     <ng-template #modalTitle>
         <h2 style="text-align: center">申请友链</h2>
     </ng-template>
 
     <ng-template #modalContent>
-        <div class="am-modal-bd">
-            <div class="article-setting">
-                <label>网站名称：
-                    <input nz-input placeholder="请输入网站名称" nzSize="large" [(ngModel)]="link.name">
-                </label>
-                <br>
-                <br>
-                <label>网站链接：
-                    <input nz-input placeholder="请输入网站链接" nzSize="large" [(ngModel)]="link.url">
-                </label>
-            </div>
-        </div>
+        <form nz-form [formGroup]="applyFormGroup">
+            <nz-form-item>
+                <nz-form-label nzFlex="100px" nzRequired>网站名称</nz-form-label>
+                <nz-form-control nzFlex="auto" [nzErrorTip]="nameErrTip">
+                    <input nz-input formControlName="name">
+                    <ng-template #nameErrTip>
+                        <div *ngIf="applyFormGroup.controls.name.hasError('required')">网站名称不可为空</div>
+                        <div *ngIf="applyFormGroup.controls.name.hasError('maxlength')">最大长度为255</div>
+                    </ng-template>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzFlex="100px" nzRequired>站长邮箱</nz-form-label>
+                <nz-form-control nzFlex="auto" [nzErrorTip]="emailErrTip">
+                    <input nz-input formControlName="email">
+                    <ng-template #emailErrTip>
+                        <div *ngIf="applyFormGroup.controls.email.hasError('required')">站长邮箱不可为空</div>
+                        <div *ngIf="applyFormGroup.controls.email.hasError('pattern')">邮箱格式不正确</div>
+                    </ng-template>
+                </nz-form-control>
+            </nz-form-item>
+
+            <nz-form-item>
+                <nz-form-label nzFlex="100px" nzRequired>首页链接</nz-form-label>
+                <nz-form-control nzFlex="auto" [nzErrorTip]="urlErrTip">
+                    <nz-input-group [nzAddOnBefore]="protocol" nzCompact>
+                        <ng-template #protocol>
+                            <nz-select formControlName="urlProtocol">
+                                <nz-option nzLabel="Http://" nzValue="http://"></nz-option>
+                                <nz-option nzLabel="Https://" nzValue="https://"></nz-option>
+                            </nz-select>
+                        </ng-template>
+                        <input nz-input formControlName="url">
+                        <ng-template #urlErrTip>
+                            <div *ngIf="applyFormGroup.controls.url.hasError('required')">首页链接不可为空</div>
+                            <div *ngIf="applyFormGroup.controls.url.hasError('pattern')">链接格式不正确</div>
+                        </ng-template>
+                    </nz-input-group>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzFlex="100px" nzRequired>友链页链接</nz-form-label>
+                <nz-form-control nzFlex="auto" [nzErrorTip]="urlLinkErrTip">
+                    <nz-input-group [nzAddOnBefore]="protocol">
+                        <ng-template #protocol>
+                            <nz-select formControlName="urlLinkProtocol">
+                                <nz-option nzLabel="Http://" nzValue="http://"></nz-option>
+                                <nz-option nzLabel="Https://" nzValue="https://"></nz-option>
+                            </nz-select>
+                        </ng-template>
+                        <input nz-input formControlName="linkUrl">
+                        <ng-template #urlLinkErrTip>
+                            <div *ngIf="applyFormGroup.controls.linkUrl.hasError('required')">首页链接不可为空</div>
+                            <div *ngIf="applyFormGroup.controls.linkUrl.hasError('pattern')">链接格式不正确</div>
+                        </ng-template>
+                    </nz-input-group>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzFlex="100px">网站图标</nz-form-label>
+                <nz-form-control nzFlex="auto" nzErrorTip="链接格式不正确">
+                    <input nz-input formControlName="iconPath">
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzFlex="100px">网站描述</nz-form-label>
+                <nz-form-control nzFlex="auto" nzErrorTip="可输入最大文字长度为255">
+                    <textarea nz-input formControlName="desc" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
+                </nz-form-control>
+            </nz-form-item>
+        </form>
     </ng-template>
 
     <ng-template #modalFooter>
         <button nz-button (click)="cancel()">取消</button>
-        <button nz-button nzType="primary" (click)="apply()">提交</button>
+        <button nz-button nzType="primary" (click)="apply()" [disabled]="!applyFormGroup.valid" [nzLoading]="loading">
+            提交
+        </button>
     </ng-template>
 </nz-modal>

src/app/view/link/link.component.ts

@@ -1,8 +1,9 @@
 import {Component, OnInit} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService, NzModalService} from 'ng-zorro-antd';
 import {Title} from '@angular/platform-browser';
 import {ApiService} from '../../api/api.service';
-import {Link} from '../../class/Link';
+import {ApplyLinkReq, Link} from '../../class/Link';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
     selector: 'view-link',
@@ -13,7 +14,9 @@ export class LinkComponent implements OnInit {
 
     constructor(private message: NzMessageService,
                 private titleService: Title,
-                private apiService: ApiService) {
+                private apiService: ApiService,
+                private fb: FormBuilder,
+                private modal: NzModalService) {
         titleService.setTitle('小海博客 | 友链');
     }
 
@@ -23,38 +26,68 @@ export class LinkComponent implements OnInit {
     link: Link;
 
     linkList: Link[];
+    loading: boolean = false;
+    applyFormGroup: FormGroup;
 
     ngOnInit() {
         window.scrollTo(0, 0);
         this.link = new Link();
-        this.apiService.links().subscribe(data => {
-                this.linkList = data.result;
-            },
-            error => {
-                this.message.error(error.msg);
+        this.apiService.links().subscribe({
+            next: data => this.linkList = data.result,
+            error: err => this.message.error(err.msg)
         });
+        this.applyFormGroup = this.fb.group({
+            urlLinkProtocol: ['http://'],
+            urlProtocol: ['http://'],
+            desc: [null, [Validators.maxLength(255)]],
+            email: [null, [Validators.required, Validators.pattern(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)]],
+            iconPath: [null, [Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]],
+            linkUrl: [null, [Validators.required, Validators.pattern(/^([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]],
+            name: [null, [Validators.required, Validators.maxLength(255)]],
+            url: [null, [Validators.required, Validators.pattern(/^([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]]
+        });
+        this.applyFormGroup.patchValue({
+            desc: '百度',
+            email: 'a@celess.cn',
+            iconPath: 'baidu.com',
+            linkUrl: 'baidu.com',
+            name: '百度',
+            url: 'baidu.com'
+        })
     }
 
     apply() {
-        if (this.link.name === '') {
-            this.message.error('网站名称不能为空');
-            return;
-        }
-        if (this.link.url === '') {
-            this.message.error('网站链接不能为空');
-            return;
-        }
-        const regExp = /^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
-        if (!regExp.test(this.link.url)) {
-            this.message.error('网站链接输入不合法');
-            return;
-        }
-        this.showModal = false;
-        this.apiService.applyLink(this.link).subscribe(data => {
+        const value = this.applyFormGroup.value;
+        value.url = value.urlProtocol + value.url;
+        value.linkUrl = value.urlLinkProtocol + value.linkUrl;
+        const req: ApplyLinkReq = value;
+        this.loading = true;
+        this.apiService.applyLink(req).subscribe({
+            next: data => {
                 this.message.success('提交成功，请稍等，即将为你处理');
+                this.loading = false;
+                this.showModal = false;
             },
-            error => {
-                this.message.error('提交失败，原因：' + error.msg);
+            error: err => {
+                if (err.code === 7200) {
+                    const key = err.result;
+                    this.modal.create({
+                        nzTitle: '抓取站点失败',
+                        nzContent: '暂未在您的网站友链页抓取到本站链接，是否确认已添加并重新提交邮件申请？',
+                        nzClosable: false,
+                        nzOnOk: () => {
+                            this.apiService.reapplyLink(key).subscribe({
+                                next: data1 => this.message.success('提交成功，请稍等，即将为你处理'),
+                                error: err1 => this.message.error('提交失败，原因：' + err.msg)
+                            })
+                        }
+                    });
+                } else {
+                    this.message.error('提交失败，原因：' + err.msg);
+                }
+                this.loading = false;
+                this.showModal = false;
+            }
         });
     }
 

src/app/view/link/link.module.ts

@@ -1,8 +1,8 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {LinkComponent} from './link.component';
-import {NzButtonModule, NzIconModule, NzInputModule, NzModalModule} from 'ng-zorro-antd';
-import {FormsModule} from '@angular/forms';
+import {NzButtonModule, NzFormModule, NzIconModule, NzInputModule, NzModalModule, NzSelectModule} from 'ng-zorro-antd';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 
 
@@ -15,7 +15,10 @@ import {RouterModule} from '@angular/router';
         FormsModule,
         NzButtonModule,
         NzInputModule,
-        RouterModule.forChild([{path: '**', component: LinkComponent}])
+        RouterModule.forChild([{path: '**', component: LinkComponent}]),
+        NzFormModule,
+        ReactiveFormsModule,
+        NzSelectModule
     ]
 })
 export class LinkModule {