Commit fbc7fe38 authored by wangqinghua's avatar wangqinghua

我的值班更新

parent 7798de83
......@@ -9,6 +9,12 @@
</ion-navbar>
</ion-header>
<ion-content >
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingText="下拉刷新"
refreshingSpinner="bubbles">
</ion-refresher-content>
</ion-refresher>
<div class="filter-new">
<ion-row>
<ion-col col-7></ion-col>
......@@ -38,45 +44,67 @@
<span>{{item.publishTime | date:'yyyy-MM-dd'}}</span>
</p>
<div class="item-news">
<ng-container *ngIf="item.imgUrl">
<ion-row class="news-item">
<!-- 标题图片 -->
<ng-container *ngIf="item.path">
<ng-container *ngIf="item.resourceType == 1">
<ion-col col-8 class="news-left">
<p class="news-title">{{item.title}}</p>
<!-- <p class="news-end">-->
<!-- <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>-->
<!-- <span>{{item.browseCount}}</span>-->
<!-- <ion-icon name="chatboxes"></ion-icon>-->
<!-- <span>{{item.commentCount}}</span>-->
<!-- <ion-icon name="thumbs-up"></ion-icon>-->
<!-- <span>{{item.likeCount}}</span>-->
<!-- <ion-icon name="heart"></ion-icon>-->
<!-- <span>{{item.collectionCount}}</span>-->
<!-- </p>-->
<p class="news-title">{{item.title}}
<ion-icon *ngIf="item.topTime"
class="icon-fire iconfont"></ion-icon>
</p>
</ion-col>
<ion-col col-4 class="news-right">
<img [src]="picture+item.imgUrl">
<img src="{{picture + item.path}}">
</ion-col>
</ion-row>
</ng-container>
<ng-container *ngIf="!item.imgUrl">
<ion-row class="news-item">
<ng-container *ngIf="item.resourceType == 2">
<ion-col col-12 class="news-left">
<p class="news-title">{{item.title}}</p>
<!-- <p class="news-end">-->
<!-- <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>-->
<!-- <span>{{item.browseCount}}</span>-->
<!-- <ion-icon name="chatboxes"></ion-icon>-->
<!-- <span>{{item.commentCount}}</span>-->
<!-- <ion-icon name="thumbs-up"></ion-icon>-->
<!-- <span>{{item.likeCount}}</span>-->
<!-- <ion-icon name="heart"></ion-icon>-->
<!-- <span>{{item.collectionCount}}</span>-->
<!-- </p>-->
<p class="news-title">{{item.title}}
<ion-icon *ngIf="item.topTime"
class="icon-fire iconfont"></ion-icon>
</p>
</ion-col>
</ion-row>
</ng-container>
<!-- 视频 -->
<ng-container *ngIf="item.resourceType == 3">
<ion-col col-12 class="news-left">
<p class="news-title">{{item.title}}
<ion-icon *ngIf="item.topTime"
class="icon-fire iconfont"></ion-icon>
</p>
<div style="width: 100%;max-height: 180px;">
<video width="100%" height="100%"
crossorigin="anonymous"
(canplay)="loadVideo($event)"
(play)="clickVideo($event)"
preload = "metadata"
controls="controls" muted="muted">
<source [src]="picture +item.path+ '#t=2' ">
您的浏览器不支持 html5。
</video>
</div>
</ion-col>
</ng-container>
</ng-container>
<ng-container *ngIf="!item.path">
<ion-col col-12 class="news-left">
<p class="news-title">{{item.title}}
<ion-icon *ngIf="item.topTime"
class="icon-fire iconfont"></ion-icon>
</p>
</ion-col>
</ng-container>
</ion-row>
</div>
</div>
</ng-container>
</div>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="加载中"></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
......@@ -49,51 +49,75 @@ page-search-new {
}
//新闻区
.search-content{
padding: 0 1rem;
.search-item{
.search-content {
padding: 0 1rem 5rem 1rem;
.search-item {
padding: .8rem 0;
.item-info{
.item-info {
margin: .8rem 0;
color: #989898;
.item-source{
.item-source {
color: #d88f27;
font-weight: 500;
margin-right: 1rem;
}
}
.news-left{
.news-left {
display: flex;
flex-flow: row wrap;
min-height: 100%;
padding: 5px 0;
.news-title{
padding: 5px;
.news-title {
align-self: flex-start;
font-weight: bold;
width: 100%;
padding: .5rem 0;
//margin-bottom: 1rem;
color: #333333;
font-size: 1.6rem;
font-family: SourceHanSans-Bold;
position: relative;
.icon-fire {
position: absolute;
top: 3px;
left: -14px;
font-size: 1.5rem;
color: #e42417;
}
}
.news-end{
.news-end {
align-self: flex-end;
color: #999999;
color: #989898;
font-size: 1.5rem;
span{
margin-right: 1rem;
margin-top: .5rem;
ion-icon{
font-size: 1.2rem;
}
span {
margin-right: .8rem;
font-size: 1rem;
}
}
}
.news-right{
.news-right {
padding: 5px;
text-align: center;
img{
height: 60px;
max-height: 60px;
img {
border-radius: .5rem;
}
}
}
.search-item + .search-item{
.search-item + .search-item {
border-top: 1px solid #eeeeee;
}
}
......
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Component} from '@angular/core';
import {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";
......@@ -14,13 +14,15 @@ export class SearchNewPage {
picture: string = AppGlobal.domain + '/wisdomgroup';
newList = [];
pageSize: number = 1;
searchObj = {
title:'',
stuffType:null, //类型:(1图文,2视频)
order:'desc', //asc升序 desc 降序
title: '',
stuffType: null, //类型:(1图文,2视频)
order: 'desc', //asc升序 desc 降序
}
constructor(public navCtrl: NavController, public navParams: NavParams,
public tabs:TabsService) {
public tabs: TabsService) {
}
ionViewDidEnter() {
......@@ -28,34 +30,101 @@ export class SearchNewPage {
}
//改变时间
changeOrder(){
this.searchObj.order = this.searchObj.order == 'desc'?'asc':'desc';
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(){
search() {
const data = {
pageNum:'1',
pageCount:'1000',
pageNum: this.pageSize,
pageCount: 10,
isRecent: 0,
obj:this.searchObj,
}
obj: this.searchObj,
};
this.tabs.stuffPage(data).subscribe(
(res)=>{
(res) => {
this.newList = res.data.list;
this.newList.forEach(e => {
if (e.attachments.length > 0) {
e.imgUrl = e.attachments[0].path;
if (e.attachments && e.attachments.length > 0) {
e.path = e.attachments[0].path;
e.resourceType = e.attachments[0].resourceType;
}
})
}
)
}
//下拉刷新
doRefresh(e) {
this.pageSize = 1;
this.search();
setTimeout(() => {
e.complete();
}, 800);
}
//上拉加载
doInfinite(e) {
this.pageSize++;
const data = {
pageSize: this.pageSize,
pageCount: 10,
isRecent: 0,
obj: this.searchObj,
};
this.tabs.stuffPage(data).subscribe(
(res) => {
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);
})
}
)
}
//查看详情
goToDetail(item){
this.navCtrl.push(StuffDetailPage,{id:item.id});
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"));
}
}
}
......@@ -13,7 +13,7 @@ page-integral {
left: -16px;
width: 6px;
height: 6px;
background-color: #eeeeee;
background-color: #ef6666;
border-radius: 50%;
}
.inteTime:before{
......
......@@ -106,6 +106,7 @@ page-discover {
color: #333333;
font-size: 1.6rem;
font-family: SourceHanSans-Bold;
position: relative;
.icon-fire {
position: absolute;
......
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