Skip to content

P
party-build-cloud
Commit 1f9f4860 authored by wangqinghua's avatar wangqinghua
Browse files
Options

点赞收藏特效 提示

parent ee91e14d
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 27 deletions
src/app/app.scss
View file @ 1f9f4860
......@@ -375,4 +375,20 @@ a[disabled], button[disabled], [ion-button][disabled],
line-height: 33px;
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
View file @ 1f9f4860
......@@ -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
View file @ 1f9f4860
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
View file @ 1f9f4860
......@@ -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 = ""; //本地环境
//图片地址
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment