ionic動态詳情頁模闆

接上一篇

動态清單的詳情頁面效果：

上一篇部落格中展示了很多的動态，這一片就說一下動态詳情頁面的實作，老規矩先貼上html代碼：

<ion-header>

  <ion-navbar>
    <ion-title>動态詳情</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-item>
    <ion-avatar item-start>
      <img src="http://localhost:8080/img/userPhoto.jpg">
    </ion-avatar>
    <h2>{{item.nickName}}</h2>
    <p>{{item.date | date}}</p>
  </ion-item>
  <img style="width: 100%" src="{{item.imgUrl}}">
  <p style="padding: 5px">{{item.content}}</p>
  <ion-row>
    <ion-col>
      <button ion-button color="primary" clear small icon-start (click)="approvel(item.id)">
        <ion-icon name='thumbs-up'></ion-icon>
        {{item.totalZan}} 贊
      </button>
    </ion-col>
    <ion-col>
      <button ion-button color="primary" clear small icon-start>
        <ion-icon name='text'></ion-icon>
        {{item.totalComment}} 評論
      </button>
    </ion-col>
    <ion-col align-self-center text-center>
      <ion-note>
        {{item.time}} ago
      </ion-note>
    </ion-col>
  </ion-row>
  <div class="color_for_bg"></div>

  <ion-list>
    <ion-list-header>評論區</ion-list-header>
    <ion-item *ngFor="let item of commentsList">
      <ion-avatar item-start>
        <img src="http://139.199.62.61/img/userPhoto.jpg">
      </ion-avatar>
      <h2>{{item.nickName}}</h2>
      <p>{{item.comments}}</p>
      <ion-note item-end>{{item.time}}</ion-note>
      <span *ngIf="currentUserId===item.userId" item-end class="delete" (click)="showConfirm(item.id)">删除</span>
    </ion-item>
  </ion-list>

</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-item>
      <ion-icon color="primary" item-left name="photos"></ion-icon>
      <ion-input type="text" [(ngModel)]="comment" placeholder="評論..."></ion-input>
      <ion-icon tappable color="primary" item-right name="send" (click)="sendComment()"></ion-icon>
    </ion-item>
  </ion-toolbar>
</ion-footer>

           

緊接着就是頁面的js代碼，同樣隻是方法的代碼：

ionViewDidLoad() {
    // 擷取評論清單
    let $this = this;
    this.http.get("/api/news/comment/list", {newsId: this.item.id}, function (res, msg) {
      if (res.code === 0 && res.data) {
        $this.commentsList = res.data;
      }
    }, function (msg) {
    });
  }

  sendComment() {
    let $this = this;
    if (this.comment && this.comment !== "") {
      let data = {userId: this.currentUserId, newsId: this.item.id, comments: this.comment};
      this.http.post("/api/news/send/comment", data, function (res, msg) {
        if (res.code === 0) {
          $this.commentsList = res.data;
          $this.comment = "";
          $this.item.totalComment = $this.item.totalComment + 1
        } else {
        }
      }, function (msg) {
      })
    } else {
      return;
    }
  }
  // 點贊功能
  approvel() {
    let $this = this;
    this.http.get("/api/news/approvel", {"userId": this.currentUserId, "newsId": this.item.id}, function (res, msg) {
      if (res.code === 0 && res.data) {
        $this.item.totalZan = $this.item.totalZan + 1;
      } else if (res.code === 0) {
        $this.item.totalZan = $this.item.totalZan - 1;
      }
    }, function (msg) {
    });
  }

  /**
   * 删除評論
   */
  deleteComment(commentId: number) {
    let $this = this;
    this.http.post("/api/news/comment/delete", {id: commentId, newsId: this.item.id, userId: this.currentUserId}, function (res, msg) {
      if (res.code === 0) {
        $this.commentsList = res.data;
        $this.item.totalComment = $this.item.totalComment - 1
      }
    }, function (msg) {
    });
  }

  showConfirm(commentId: number) {
    let confirm = this.alertCtrl.create({
      title: '溫馨提示',
      message: '是否要删除該評論?',
      buttons: [
        {
          text: '再看看',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: '是的',
          handler: () => {
            this.deleteComment(commentId);
          }
        }
      ]
    });
    confirm.present();
  }
           

第一個方法：ionViewDidLoad（），作用是頁面被加載就去請求目前動态的所有評論

第二個方法：sendComment（），該方法就是發送評論的方法，頁面最下方的小飛機按鈕的點選方法，發送成功後就将輸入框中的文字清楚，并将評論list重新渲染，然後評論數量加一

第三個方法：approvel（），點贊的方法，略，請看官參考上一篇部落格

第四個方法：deleteComment（），删除評論的方法，如果不是自己評論的删除按鈕是不會出現的，通過html中的 *ngIf=“currentUserId===item.userId” 來控制按鈕的顯示與隐藏

後面會更新購物車的頁面以及個人中心以及首頁

加油鴨！！！