stuff-detail.ts

import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core';
import {IonicPage, ModalController, NavController, NavParams} from 'ionic-angular';
import {TabsService} from "../../tabs/tabs.service";
import {Storage} from "@ionic/storage";
import {CommonService} from "../../../provide/common.service";
import {DomSanitizer} from "@angular/platform-browser";
import {AppGlobal} from "../../../service/http.service";
import {ReplyComponent} from "../../../components/reply/reply";
import {CommentComponent} from "../../../components/comment/comment";

@IonicPage()
@Component({
    selector: 'page-stuff-detail',
    templateUrl: 'stuff-detail.html',
})
export class StuffDetailPage {
    @ViewChild('like') like: ElementRef;
    @ViewChild('collection') collection: ElementRef;

    picture: string = AppGlobal.picture;

    stuffId;   //文章id
    content: string;   //评论内容
    userId;  //用户id
    username;   //用户姓名
    stuffObj;   //文章对象

    //点赞，评价，收藏对象；
    countObj;

    footerView: boolean;
    comment: boolean = false;

    url = AppGlobal.domain + '/wisdomgroup';

    attachments;   //附件
    replyText = '';
    replyItem;
    reply = false;
    replyContent;

    constructor(public navCtrl: NavController, public navParams: NavParams, public sanitizer: DomSanitizer,
                public renderer: Renderer2, private modalCtrl: ModalController,
                public tabSer: TabsService, public storage: Storage, public commonSer: CommonService) {
    }

    ionViewDidLoad() {
        this.storage.get('userLoginInfo').then((value) => {
            this.userId = value.userid;
            this.username = value.loginName;
            // this.lookHandle();
        });
        this.stuffId = this.navParams.get('id');
        this.getStuff();
        setTimeout(() => {
            this.footerView = true;
        }, 300)
    }

    //获取文章信息
    getStuff() {
        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);
            }
        )
    }

    ionViewWillLeave() {
        this.footerView = false;
    }

    //更新浏览 点赞 收藏 评论
    //根据类型，修改数量(1浏览,2点赞,3收藏,4评论)
    //浏览
    lookHandle() {
        const data = {
            id: this.stuffId,
            type: 1,
            num: 1,
            userid: this.userId,
            content: this.content,
        }
        this.tabSer.updateNumByType(data).subscribe(
            (res) => {
                if (res.data.content) {
                    this.commonSer.toast(res.data.content);
                }
            }
        )
    }

    //点赞
    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.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 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;   //防止点赞，评论，收藏之后文章信息刷新刷新
                        }
                    )
                }
            }
        )
    }

    //打开回复
    openMask(item) {
        this.replyText = '回复' + item.username;
        this.replyItem = item;
        let modal = this.modalCtrl.create(CommentComponent, {placeholder: '回复：' + item.username});
        modal.onDidDismiss(res => {
            if (res) {
                this.replyContent = res;
                this.replyHandle();
            }
        });
        modal.present();
    }

    //回复
    replyHandle() {
        const data = {
            commentId: this.replyItem.id,
            content: this.replyContent,
            parentId: '',
        };
        this.tabSer.commentReply(data).subscribe(
            (res) => {
                this.getStuff();
                this.reply = false;
            }
        )
    }

    //取消评论
    cancel() {
        this.content = '';
        this.comment = false;
        this.reply = false;
    }

    //查看回复
    commentSearch(comment) {
        let modal = this.modalCtrl.create(ReplyComponent, {
            comment: comment
        });
        modal.present();
    }

    //打开评论
    openComment() {
        let modal = this.modalCtrl.create(CommentComponent, {placeholder: ''});
        modal.onDidDismiss(res => {
            if (res) {
                this.content = res;
                this.sure();
            }
        })
        modal.present();
    }

    // 提交评论
    sure() {
        const data = {
            userid: this.userId,
            content: this.content,
            id: this.stuffId,
            num: 1,
            type: 4,
            username: this.username
        };
        this.tabSer.updateNumByType(data).subscribe(
            (res) => {
                if (res.errcode == '1000') {
                    this.getStuff();
                    this.comment = false;
                    this.commonSer.toast('发布成功');
                    this.replyText = '';
                }
            }
        )
    }

    //列表视频不同时播放
    clickVideo(e) {
        const videoArr = document.querySelectorAll("video");
        for (let i = 0; i < videoArr.length; i++) {
            if (videoArr[i] != e.target) {
                videoArr[i].pause();
            }
        }
    }

    loadVideo(e) {
        const scale = 0.8;
        const canvas = document.createElement('canvas');
        canvas.width = 120 * scale;
        canvas.height = 120 * scale;
        //绘制图片
        canvas.getContext('2d').drawImage(e.target, 0, 0, canvas.width, canvas.height);
        //设置标签的poster属性
        e.target.setAttribute("poster", canvas.toDataURL("image/png"));
    }

}