点赞收藏特效 提示

src/app/app.scss

@@ -376,3 +376,19 @@ a[disabled], button[disabled], [ion-button][disabled],
   position: relative;
   letter-spacing: 1px;
 }
+
+//点赞动画
+.animation{
+  animation: toBig 500ms;
+}
+@keyframes toBig {
+  0%{
+    font-size: 2.5rem;
+  }
+  50%{
+    font-size: 3.5rem;
+  }
+  100%{
+    font-size: 2.5rem;
+  }
+}
\ No newline at end of file

src/pages/home-pages/stuff-detail/stuff-detail.html

@@ -20,7 +20,7 @@
       <div class="stuff-attachments">
 
           <ng-container *ngFor="let item of attachments">
-            <div style="height: 160px;" *ngIf="item.resourceType == 2 || item.resourceType == 1">
+            <div style="height: 160px;" *ngIf="item.resourceType == 1">
               <img style="height: 160px;" [src]="url + item.path" alt="">
             </div>
             <div  *ngIf="item.resourceType == 3">
@@ -63,15 +63,15 @@
     </ion-col>
     <ion-col col-2>
       <ion-icon  name="chatboxes"></ion-icon>
-      <span class="tip-num">{{stuffObj?.commentCount}}</span>
+      <span class="tip-num">{{countObj?.commentCount}}</span>
     </ion-col>
-    <ion-col col-2 (click)="updateNum(3,1)">
-      <ion-icon [ngClass]="stuffObj?.collection == true?'main-color':''" name="heart"></ion-icon>
-      <span class="tip-num">{{stuffObj?.collectionCount}}</span>
+    <ion-col col-2 (click)="collectionHandle()">
+      <ion-icon #collection [ngClass]="countObj?.collection == true?'main-color':''" name="heart"></ion-icon>
+      <span class="tip-num">{{countObj?.collectionCount}}</span>
     </ion-col>
-    <ion-col col-2 (click)="updateNum(2,1)">
-      <ion-icon [ngClass]="stuffObj?.like == true?'main-color':''" name="thumbs-up"></ion-icon>
-      <span class="tip-num">{{stuffObj?.likeCount}}</span>
+    <ion-col col-2 (click)="likeHandle()">
+      <ion-icon #like [ngClass]="countObj?.like == true?'main-color':''" name="thumbs-up"></ion-icon>
+      <span class="tip-num">{{countObj?.likeCount}}</span>
     </ion-col>
   </ion-row>
 </div>

src/pages/home-pages/stuff-detail/stuff-detail.ts

-import {Component} from '@angular/core';
+import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core';
 import {IonicPage, NavController, NavParams} from 'ionic-angular';
 import {TabsService} from "../../tabs/tabs.service";
 import {Storage} from "@ionic/storage";
@@ -12,21 +12,27 @@ import {AppGlobal} from "../../../service/http.service";
     templateUrl: 'stuff-detail.html',
 })
 export class StuffDetailPage {
+    @ViewChild('like') like: ElementRef;
+    @ViewChild('collection') collection: ElementRef;
 
     stuffId;   //文章id
-    content:string;   //评论内容
+    content: string;   //评论内容
     userId;  //用户id
     username;   //用户姓名
     stuffObj;   //文章对象
 
+    //点赞，评价，收藏对象；
+    countObj;
+
     footerView: boolean;
     comment: boolean = false;
 
-    url = AppGlobal.domain +'/wisdomgroup';
+    url = AppGlobal.domain + '/wisdomgroup';
 
     attachments;   //附件
 
-    constructor(public navCtrl: NavController, public navParams: NavParams,public sanitizer: DomSanitizer,
+    constructor(public navCtrl: NavController, public navParams: NavParams, public sanitizer: DomSanitizer,
+                public renderer: Renderer2,
                 public tabSer: TabsService, public storage: Storage, public commonSer: CommonService) {
     }
 
@@ -34,13 +40,13 @@ export class StuffDetailPage {
         this.storage.get('userLoginInfo').then((value) => {
             this.userId = value.userid;
             this.username = value.loginName;
-            this.updateNum(1, 1);
+            this.lookHandle();
         })
         this.stuffId = this.navParams.get('id');
         this.getStuff();
-        setTimeout(()=>{
+        setTimeout(() => {
             this.footerView = true;
-        },300)
+        }, 300)
         //增加浏览量
     }
 
@@ -49,6 +55,7 @@ export class StuffDetailPage {
         this.tabSer.stuffInfo(this.stuffId).subscribe(
             (res) => {
                 this.stuffObj = res.data;
+                this.countObj = res.data;   //防止点赞，评论，收藏之后页面刷新
                 this.attachments = res.data.attachments;
                 let con = this.stuffObj.content.replace(/\r?\n/g, "<br />");
                 this.stuffObj.content = this.sanitizer.bypassSecurityTrustHtml(con);
@@ -62,34 +69,97 @@ export class StuffDetailPage {
 
     //更新浏览 点赞 收藏 评论
     //根据类型，修改数量(1浏览,2点赞,3收藏,4评论)
-    updateNum(type, num) {
-        if (type == 2) num = this.stuffObj.like == true ? '-1' : 1;
-        if (type == 3) num = this.stuffObj.collection == true ? '-1' : 1;
+    //浏览
+    lookHandle() {
         const data = {
             id: this.stuffId,
-            type: type,
+            type: 1,
+            num: 1,
+            userid: this.userId,
+            content: this.content,
+        }
+        this.tabSer.updateNumByType(data).subscribe(
+            (res) => {
+                if (res.errcode == '1000') {
+                    this.commonSer.log('浏览数 +1')
+                }
+            }
+        )
+    }
+
+    //点赞
+    likeHandle() {
+        let num = this.countObj.like == true ? '-1' : 1;
+        const data = {
+            id: this.stuffId,
+            type: 2,
             num: ~~num,
             userid: this.userId,
             content: this.content,
         }
+
         this.tabSer.updateNumByType(data).subscribe(
             (res) => {
                 if (res.errcode == '1000') {
-                    this.getStuff();
+                    this.tabSer.stuffInfo(this.stuffId).subscribe(
+                        (res) => {
+                            if (num == 1) {
+                                this.commonSer.toastTime('谢谢点赞','1000');
+                                this.renderer.addClass(this.like.nativeElement, 'animation');
+                            }
+                            if (num == -1){
+                                this.commonSer.toastTime('点赞已取消','1000');
+                                this.renderer.removeClass(this.like.nativeElement, 'animation');
+                            }
+                            this.countObj = res.data;   //防止点赞，评论，收藏之后文章信息刷新刷新
+                        }
+                    )
+                }
+            }
+        )
+    }
+
+    //收藏
+    collectionHandle() {
+        let message;
+        let num = this.countObj.collection == true ? '-1' : 1;
+        const data = {
+            id: this.stuffId,
+            type: 3,
+            num: ~~num,
+            userid: this.userId,
+            content: this.content,
+        };
+        this.tabSer.updateNumByType(data).subscribe(
+            (res) => {
+                if (res.errcode == '1000') {
+                    this.tabSer.stuffInfo(this.stuffId).subscribe(
+                        (res) => {
+                            if (num == 1) {
+                                this.renderer.addClass(this.collection.nativeElement, 'animation');
+                                this.commonSer.toastTime('功崇惟志，业广惟勤', '1000')
+                            }
+                            if (num == -1) {
+                                this.renderer.removeClass(this.collection.nativeElement, 'animation');
+                                this.commonSer.toastTime('收藏已取消', '1000')
+                            }
+                            this.countObj = res.data;   //防止点赞，评论，收藏之后文章信息刷新刷新
+                        }
+                    )
                 }
             }
         )
     }
 
     //确定发布
-    sure(){
+    sure() {
         const data = {
             userid: this.userId,
             content: this.content,
             id: this.stuffId,
-            num:1,
-            type:4,
-            username:this.username
+            num: 1,
+            type: 4,
+            username: this.username
         }
         this.tabSer.updateNumByType(data).subscribe(
             (res) => {
@@ -103,7 +173,7 @@ export class StuffDetailPage {
     }
 
     //取消发布
-    cancel(){
+    cancel() {
         this.content = '';
         this.comment = false;
     }

src/service/http.service.ts

@@ -15,8 +15,8 @@ export class AppGlobal {
     //接口基地址
     //  static domain = "http://101.89.112.92:80";       //正式环境
     // static domain = "http://180.168.156.212:2931";   //测试环境
-    static domain = "http://47.103.35.216:8080";    //阿里云地址
-    // static domain = "";   //本地环境
+    // static domain = "http://47.103.35.216:8080";    //阿里云地址
+    static domain = "";   //本地环境
 
 
     //图片地址