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">
<ion-col col-8 class="news-left"> <!-- 标题图片 -->
<p class="news-title">{{item.title}}</p> <ng-container *ngIf="item.path">
<!-- <p class="news-end">--> <ng-container *ngIf="item.resourceType == 1">
<!-- <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>--> <ion-col col-8 class="news-left">
<!-- <span>{{item.browseCount}}</span>--> <p class="news-title">{{item.title}}
<!-- <ion-icon name="chatboxes"></ion-icon>--> <ion-icon *ngIf="item.topTime"
<!-- <span>{{item.commentCount}}</span>--> class="icon-fire iconfont"></ion-icon>
<!-- <ion-icon name="thumbs-up"></ion-icon>--> </p>
<!-- <span>{{item.likeCount}}</span>--> </ion-col>
<!-- <ion-icon name="heart"></ion-icon>--> <ion-col col-4 class="news-right">
<!-- <span>{{item.collectionCount}}</span>--> <img src="{{picture + item.path}}">
<!-- </p>--> </ion-col>
</ion-col> </ng-container>
<ion-col col-4 class="news-right"> <ng-container *ngIf="item.resourceType == 2">
<img [src]="picture+item.imgUrl"> <ion-col col-12 class="news-left">
</ion-col> <p class="news-title">{{item.title}}
</ion-row> <ion-icon *ngIf="item.topTime"
</ng-container> class="icon-fire iconfont"></ion-icon>
<ng-container *ngIf="!item.imgUrl"> </p>
<ion-row class="news-item"> </ion-col>
</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"> <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> </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";
...@@ -7,55 +7,124 @@ import {AppGlobal} from "../../../service/http.service"; ...@@ -7,55 +7,124 @@ import {AppGlobal} from "../../../service/http.service";
@IonicPage() @IonicPage()
@Component({ @Component({
selector: 'page-search-new', selector: 'page-search-new',
templateUrl: 'search-new.html', templateUrl: 'search-new.html',
}) })
export class SearchNewPage { export class SearchNewPage {
picture: string = AppGlobal.domain + '/wisdomgroup'; picture: string = AppGlobal.domain + '/wisdomgroup';
newList = []; newList = [];
searchObj = { pageSize: number = 1;
title:'', searchObj = {
stuffType:null, //类型:(1图文,2视频) title: '',
order:'desc', //asc升序 desc 降序 stuffType: null, //类型:(1图文,2视频)
} order: 'desc', //asc升序 desc 降序
constructor(public navCtrl: NavController, public navParams: NavParams, }
public tabs:TabsService) {
} constructor(public navCtrl: NavController, public navParams: NavParams,
public tabs: TabsService) {
ionViewDidEnter() { }
this.search();
} ionViewDidEnter() {
this.search();
//改变时间 }
changeOrder(){
this.searchObj.order = this.searchObj.order == 'desc'?'asc':'desc'; //改变时间
this.search(); changeOrder() {
} this.searchObj.order = this.searchObj.order == 'desc' ? 'asc' : 'desc';
this.search();
//查询列表 }
search(){
const data = { ionViewDidLeave() {
pageNum:'1', const videoArr = document.querySelectorAll("video");
pageCount:'1000', for (let i = 0; i < videoArr.length; i++) {
isRecent: 0, videoArr[i].pause();
obj:this.searchObj, }
} }
this.tabs.stuffPage(data).subscribe(
(res)=>{ //查询列表
this.newList = res.data.list; search() {
this.newList.forEach(e => { const data = {
if (e.attachments.length > 0) { pageNum: this.pageSize,
e.imgUrl = e.attachments[0].path; pageCount: 10,
isRecent: 0,
obj: this.searchObj,
};
this.tabs.stuffPage(data).subscribe(
(res) => {
this.newList = res.data.list;
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.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});
}
//列表视频不同时播放
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) {
goToDetail(item){ const scale = 0.8;
this.navCtrl.push(StuffDetailPage,{id:item.id}); 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