回复评论

src/components/comment/comment.html

+<div class="main" >
+  <div class="content" (click)="close()" >
+    <div class="comment" (click)="stop($event)">
+      <ion-row>
+        <ion-col col-2>
+          <ion-icon  class="close" (click)="close()" name="close"></ion-icon>
+        </ion-col>
+        <ion-col col-8 text-center>回复评论</ion-col>
+        <ion-col col-2 text-center (click)="submit()">提交</ion-col>
+      </ion-row>
+      <div class="padding-10">
+        <textarea #textAreaElement [(ngModel)]="replyContent" class="content-textarea" placeholder="{{placeholder}}"></textarea>
+      </div>
+    </div>
+  </div>
+</div>

src/components/comment/comment.scss

+comment {
+  .main{
+    background-color: rgba(0,0,0,.4);
+    height: 100%;
+  }
+  .content{
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+  .comment{
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    height: 80%;
+    background: #fff;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    padding: 5px 15px;
+    ion-icon{
+      font-size: 3rem;
+      font-weight: bold;
+    }
+  }
+}

src/components/comment/comment.ts

+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {NavController, NavParams, ViewController} from "ionic-angular";
+import {TabsService} from "../../pages/tabs/tabs.service";
+import {AppService} from "../../service/http.service";
+import {Keyboard} from "@ionic-native/keyboard";
+
+@Component({
+  selector: 'comment',
+  templateUrl: 'comment.html'
+})
+export class CommentComponent {
+  @ViewChild('textAreaElement') textAreaElement:ElementRef;
+
+  replyContent:string;
+  placeholder:string;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              private tabSer: TabsService,private keyboard:Keyboard,
+              public viewCtrl: ViewController, public appService: AppService) {
+    this.placeholder = this.navParams.get('placeholder');
+    setTimeout(()=>{
+      this.textAreaElement.nativeElement.focus();
+      this.keyboard.show();
+    },500)
+  }
+
+  close() {
+    this.viewCtrl.dismiss();
+  }
+
+  stop(e) {
+    e.stopPropagation();
+  }
+
+  submit(){
+    this.viewCtrl.dismiss(this.replyContent);
+  }
+
+}

src/components/reply/reply.html

+<div class="main" >
+  <div class="content" (click)="close()" >
+    <div class="comment" (click)="stop($event)">
+      <ion-row class="comment-item">
+        <ion-col col-2>
+          <img src="./assets/imgs/man.png" class="contact-img">
+        </ion-col>
+        <ion-col col-10 style="padding-bottom: 5px;border-bottom: 1px solid #eeeeee">
+          <p class="comment-info">
+            {{comment?.username}}
+          </p>
+          <p class="commnet-content">
+            {{comment?.content}}
+          </p>
+          <p class="comment-time">
+            {{comment?.createTime | date:'yyyy-MM-dd'}} <span>·</span>
+          </p>
+        </ion-col>
+      </ion-row>
+      <div class="reply-content">
+        <ion-row *ngFor="let reply of relpyList">
+          <ion-col offset-2 col-10>
+            <ion-row class="comment-item">
+              <ion-col col-2>
+                <img src="./assets/imgs/man.png" class="contact-img">
+              </ion-col>
+              <ion-col col-10>
+                <p class="comment-info">
+                  {{reply?.username}}
+                </p>
+                <p class="commnet-content">
+                  {{reply?.content}}
+                </p>
+                <p class="comment-time">
+                  {{reply?.createTime | date:'yyyy-MM-dd'}} <span>·</span>
+                </p>
+              </ion-col>
+            </ion-row>
+          </ion-col>
+        </ion-row>
+      </div>
+    </div>
+    <div class="reply">
+    </div>
+  </div>
+</div>

src/components/reply/reply.scss

+reply {
+  .main{
+    background-color: rgba(0,0,0,.4);
+    height: 100%;
+  }
+  .content{
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+  .comment{
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    height: 80%;
+    background: #fff;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    padding: 0 15px;
+  }
+  .comment-item {
+    .contact-img{
+      border-radius: 100px;
+      width: 75%;
+      text-align: center;
+      margin-top: 8px;
+    }
+    .comment-info {
+      color: #d88f27;
+      font-size: 1.4rem;
+      line-height: 1.8rem;
+      font-weight: 500;
+      margin-bottom: 5px;
+    }
+
+    .commnet-content {
+      padding: .1rem 0;
+      font-size: 1.4rem;
+      color: #333333;
+      line-height: 1.4rem;
+      margin-bottom: 6px;
+    }
+    .comment-time{
+      font-size: 1.4rem;
+      color: #888888;
+      .repear{
+        color: #333;
+        font-size: 1.2rem;
+        cursor: pointer;
+      }
+    }
+  }
+}

src/components/reply/reply.ts

+import {Component} from '@angular/core';
+import {NavController, NavParams, ViewController} from "ionic-angular";
+import {AppService} from "../../service/http.service";
+import {TabsService} from "../../pages/tabs/tabs.service";
+
+@Component({
+    selector: 'reply',
+    templateUrl: 'reply.html'
+})
+export class ReplyComponent {
+
+    comment;
+    relpyList;
+    replyContent;
+
+    constructor(public navCtrl: NavController, public navParams: NavParams,
+                private tabSer: TabsService,
+                public viewCtrl: ViewController, public appService: AppService) {
+    }
+
+    ionViewDidLoad() {
+        this.comment = this.navParams.get('comment');
+        console.log(this.comment);
+        this.getReply();
+    }
+
+    getReply() {
+        const data = {
+            commentId: this.comment.id,
+            pageNum: 1,
+            pageSize: 100
+        };
+        this.tabSer.commentReplySearch(data).subscribe(
+            (res) => {
+                this.relpyList = res.data.list;
+            }
+        )
+    }
+
+    replyHandle() {
+        const data = {
+            commentId: this.comment.id,
+            content: this.replyContent,
+            parentId: '',
+        };
+        this.tabSer.commentReply(data).subscribe(
+            (res) => {
+                this.getReply();
+            }
+        )
+    }
+
+    cancel() {
+
+    }
+
+    close() {
+        this.viewCtrl.dismiss();
+    }
+
+    stop(e) {
+        e.stopPropagation();
+    }
+
+}