Commit fbc7fe38 authored by wangqinghua's avatar wangqinghua

我的值班更新

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