search-new.ts

import {Component, ViewChild} from '@angular/core';
import {InfiniteScrollContent, IonicPage, NavController, NavParams} from 'ionic-angular';
import {TabsService} from "../../tabs/tabs.service";
import {StuffDetailPage} from "../stuff-detail/stuff-detail";
import {AppGlobal} from "../../../service/http.service";


@IonicPage()
@Component({
    selector: 'page-search-new',
    templateUrl: 'search-new.html',
})
export class SearchNewPage {
    @ViewChild(InfiniteScrollContent) infiniteScrollContent: InfiniteScrollContent;

    newList = [];
    searchObj = {
        title: '',
        stuffType: null,   //类型：(1图文,2视频)
        order: 'desc',  //asc升序  desc  降序
    };

    pageNum: number = 1;
    pageSize = AppGlobal.pageCount;
    totalNum: number;

    constructor(public navCtrl: NavController, public navParams: NavParams,
                public tabs: TabsService) {
    }

    ionViewDidEnter() {
        this.search();
    }

    //改变时间
    changeOrder() {
        this.searchObj.order = this.searchObj.order == 'desc' ? 'asc' : 'desc';
        this.search();
    }

    ionViewDidLeave() {
        const videoArr = document.querySelectorAll("video");
        for (let i = 0; i < videoArr.length; i++) {
            videoArr[i].pause();
        }
    }

    //查询列表
    search() {
        const data = {
            pageNum: 1,
            pageSize: this.pageSize,
            isRecent: 0,
            obj: this.searchObj,
        };
        this.tabs.stuffPage(data).subscribe(
            (res) => {
                this.newList = res.data.list;
                this.totalNum = res.data.total;
                this.newList.forEach(e => {
                    if (e.attachments && e.attachments.length > 0) {
                        e.path = e.attachments[0].path;
                        e.resourceType = e.attachments[0].resourceType;
                    }
                })
            }
        )
    }

    //下拉刷新
    doRefresh(e) {
        this.infiniteScrollContent.inf.enable(true);
        this.search();
        setTimeout(() => {
            e.complete();
        }, 800);
    }

    //上拉加载
    doInfinite(e) {
        if (this.totalNum == this.newList.length) {
            console.log('done');
            e.enable(false);
            return false;
        }
        this.pageNum++;
        const data = {
            pageNum: 1,
            pageSize: this.pageSize,
            isRecent: 0,
            obj: this.searchObj,
        };
        this.tabs.stuffPage(data).subscribe(
            (res) => {
                this.totalNum = res.data.total;
                res.data.list.forEach(e => {
                    if (e.attachments && e.attachments.length > 0) {
                        e.path = e.attachments[0].path;
                        e.resourceType = e.attachments[0].resourceType;
                    }
                    this.newList.push(e);
                });
                e.complete();
            }
        )
    }

    //查看详情
    goToDetail(item) {
        this.navCtrl.push(StuffDetailPage, {id: item.id});
    }

    //列表视频不同时播放
    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属性

        let img = new Image();
        img.src = canvas.toDataURL("image/png");
        img.setAttribute("crossOrigin", 'Anonymous')
        img.onload = () => {
            // console.log(img);
            e.target.setAttribute("poster", canvas.toDataURL("image/png"));
        }
    }

}