Skip to content

P
party-build-cloud
Commit 24d66b84 authored by wangqinghua's avatar wangqinghua
Browse files
Options

ionic3

parent 8f86af71
Hide whitespace changes
Inline Side-by-side
Showing with 485 additions and 0 deletions
src/pages/home-pages/search-new/search-new.html 0 → 100644
View file @ 24d66b84
<ion-header>
<ion-navbar>
<ion-navbar>
<div class="search-header">
<ion-input type="text" placeholder="按姓名搜索" [(ngModel)]="searchObj.title"></ion-input>
<span class="clear" (click)="search()">搜索</span>
</div>
</ion-navbar>
</ion-navbar>
</ion-header>
<ion-content >
<div class="filter-new">
<ion-row>
<ion-col col-7></ion-col>
<ion-col col-2 (click)="changeOrder()">
时间
<ion-icon class="main-color" *ngIf="searchObj.order == 'desc'" name="arrow-round-down"></ion-icon>
<ion-icon class="main-color" *ngIf="searchObj.order == 'asc'" name="arrow-round-up"></ion-icon>
</ion-col>
<ion-col col-3>
<ion-segment [(ngModel)]="searchObj.stuffType" (ionChange)="search()">
<ion-segment-button value="1">
图文
</ion-segment-button>
<ion-segment-button value="2">
视频
</ion-segment-button>
</ion-segment>
</ion-col>
</ion-row>
</div>
<div class="search-content">
<ng-container *ngFor="let item of newList">
<div class="search-item">
<p class="item-info">
<span>{{item.source}}</span>
<span>{{item.publishTime | date:'yyyy-MM-dd'}}</span>
</p>
<div class="item-news">
<ion-row class="news-item">
<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>
</ion-col>
<ion-col col-4 class="news-right">
<img src="./assets/imgs/demo.png">
</ion-col>
</ion-row>
</div>
</div>
</ng-container>
</div>
</ion-content>
src/pages/home-pages/search-new/search-new.module.ts 0 → 100644
View file @ 24d66b84
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SearchNewPage } from './search-new';
@NgModule({
declarations: [
SearchNewPage,
],
imports: [
IonicPageModule.forChild(SearchNewPage),
],
})
export class SearchNewPageModule {}
src/pages/home-pages/search-new/search-new.scss 0 → 100644
View file @ 24d66b84
page-search-new {
.search-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 90%;
margin-left: 5px;
ion-input {
border-bottom: 1px solid #ffffff;
background-color: #fff;
border-radius: 5px;
height: 35px;
padding-left: 10px;
}
}
.text-input::-webkit-input-placeholder {
color: #ffffff;
}
.clear {
border-radius: 15px;
text-align: center;
margin-left: 10px;
color: #ffffff;
font-size: 1.8rem;
}
.filter-new{
height: 3rem;
line-height: 2.2rem;
}
.segment-ios .segment-button{
border-color: #e12724;
color: #e12724;
height: 2.2rem;
line-height: 2rem;
}
.segment-ios .segment-button.segment-activated{
background-color: #e12724;
}
//新闻区
.search-content{
padding: 0 1rem;
.search-item{
padding: .8rem 0;
.news-left{
display: flex;
flex-flow: row wrap;
min-height: 100%;
padding: 5px 0;
.news-title{
align-self: flex-start;
font-weight: bold;
width: 100%;
}
.news-end{
align-self: flex-end;
color: #999999;
font-size: 1.5rem;
span{
margin-right: 1rem;
}
}
}
.news-right{
padding: 5px 0;
img{
border-radius: .5rem;
}
}
}
.search-item + .search-item{
border-top: 1px solid #eeeeee;
}
}
}
src/pages/home-pages/search-new/search-new.ts 0 → 100644
View file @ 24d66b84
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {TabsService} from "../../tabs/tabs.service";
@IonicPage()
@Component({
selector: 'page-search-new',
templateUrl: 'search-new.html',
})
export class SearchNewPage {
newList = [];
searchObj = {
title:'',
stuffType:null, //类型：(1图文,2视频)
order:'desc', //asc升序 desc 降序
}
constructor(public navCtrl: NavController, public navParams: NavParams,
public tabs:TabsService) {
}
ionViewDidLoad() {
this.search();
}
//改变时间
changeOrder(){
this.searchObj.order = this.searchObj.order == 'desc'?'asc':'desc';
this.search();
}
//查询列表
search(){
const data = {
pageNum:'1',
pageCount:'100',
obj:this.searchObj,
}
this.tabs.stuffPage(data).subscribe(
(res)=>{
this.newList = res.data;
}
)
}
}
src/pages/home-pages/stuff-detail/stuff-detail.html 0 → 100644
View file @ 24d66b84
<ion-header>
<ion-navbar>
<ion-title></ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="stuff">
<div class="stuff-title">
{{stuffObj?.title}}
</div>
<div class="stuff-info">
<span class="info-publisher">{{stuffObj?.source}}</span>
<span class="info-time">{{stuffObj?.publishTime | date:'yyyy-MM-dd'}}</span>
</div>
<div class="stuff-content">
{{stuffObj?.content}}
</div>
</div>
</ion-content>
<div *ngIf="footerView" class="stuff-footer">
<ion-row>
<ion-col col-6>
<div class="input" (click)="comment = true">欢迎发表你的观点</div>
</ion-col>
<ion-col col-2>
<ion-icon name="chatboxes"></ion-icon>
<span class="tip-num">{{stuffObj?.commentCount}}</span>
</ion-col>
<ion-col col-2 (click)="updateNum(3,1)">
<ion-icon [ngClass]="stuffObj?.collection == true?'main-color':''" name="heart"></ion-icon>
<span class="tip-num">{{stuffObj?.collectionCount}}</span>
</ion-col>
<ion-col col-2 (click)="updateNum(2,1)">
<ion-icon [ngClass]="stuffObj?.like == true?'main-color':''" name="thumbs-up"></ion-icon>
<span class="tip-num">{{stuffObj?.likeCount}}</span>
</ion-col>
</ion-row>
</div>
<!--评论-->
<div class="error-text" *ngIf="comment">
<div class="error-flex">
<div class="padding-10">
<textarea [(ngModel)]="content" class="content-textarea"></textarea>
</div>
<div class="error-footer">
<ion-row>
<ion-col col-6>
<button (click)="sure()" class="sure">发布</button>
</ion-col>
<ion-col col-6>
<button (click)="cancel()" class="cancel">取消</button>
</ion-col>
</ion-row>
</div>
</div>
</div>
\ No newline at end of file
src/pages/home-pages/stuff-detail/stuff-detail.module.ts 0 → 100644
View file @ 24d66b84
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { StuffDetailPage } from './stuff-detail';
@NgModule({
declarations: [
StuffDetailPage,
],
imports: [
IonicPageModule.forChild(StuffDetailPage),
],
})
export class StuffDetailPageModule {}
src/pages/home-pages/stuff-detail/stuff-detail.scss 0 → 100644
View file @ 24d66b84
page-stuff-detail {
.stuff {
padding: 1.5rem;
font-size: 1.8rem;
line-height: 2.4rem;
height: calc(100% - 4rem);
overflow-y: scroll;
background-color: #f8f8f8;
.stuff-title {
font-weight: 600;
font-size: 2.5rem;
margin-bottom: .5rem;
line-height: 3rem;
}
.stuff-info {
font-size: 1.5rem;
margin-bottom: 1rem;
.info-publisher {
color: #5c5c5c;
margin-right: 1rem;
}
.info-time {
color: #888888;
}
}
}
.stuff-footer {
position: fixed;
bottom: 0;
height: 4rem;
width: 100%;
text-align: center;
line-height: 3rem;
border-top: 1px solid #eeeeee;
[col-2] {
line-height: 4rem;
}
.tip-num {
position: absolute;
right: 15px;
top: 10px;
color: #e12724;
font-size: 1rem;
background: #fff;
display: block;
line-height: 1rem;
border-radius: 5px;
}
ion-icon {
color: #666666;
position: relative;
font-size: 2.5rem;
}
ion-icon.main-color {
color: #e66866;
}
.input {
background: #ddd;
border: 1px solid #ddd;
border-radius: 2px;
height: 2.8rem;
line-height: 2.8rem;
color: #666666;
}
}
.error-text{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.2);
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
.error-flex{
text-align: center;
width: 80%;
background-color: #fff;
.error-title{
background-color: #5579bb;
color: #ffffff;
padding: 1rem 0;
}
.content-textarea {
padding: 10px;
min-height: 100px;
width: 100%;
border: 1px solid #ddd;
}
.error-footer{
height: 4rem;
.sure,.cancel{
color: #ffffff;
background-color: #fd5151;
width: 50%;
margin-right: 10px;
height: 3rem;
line-height: 3rem;
border-radius: 5px;
}
}
}
}
}
src/pages/home-pages/stuff-detail/stuff-detail.ts 0 → 100644
View file @ 24d66b84
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {TabsService} from "../../tabs/tabs.service";
import {Storage} from "@ionic/storage";
import {CommonService} from "../../../provide/common.service";
@IonicPage()
@Component({
selector: 'page-stuff-detail',
templateUrl: 'stuff-detail.html',
})
export class StuffDetailPage {
stuffId; //文章id
content:string; //评论内容
userId; //用户id
stuffObj; //文章对象
footerView: boolean;
comment: boolean = false;
constructor(public navCtrl: NavController, public navParams: NavParams,
public tabSer: TabsService, public storage: Storage, public commonSer: CommonService) {
}
ionViewDidLoad() {
this.footerView = true;
this.storage.get('userLoginInfo').then((value) => {
console.log(value);
this.userId = value.userid;
})
this.stuffId = this.navParams.get('id');
this.getStuff();
//增加浏览量
this.updateNum(1, 1);
}
//获取文章信息
getStuff() {
this.tabSer.stuffInfo(this.stuffId).subscribe(
(res) => {
this.stuffObj = res.data;
}
)
}
ionViewWillLeave() {
this.footerView = false;
console.log('leave')
}
//更新浏览 点赞 收藏 评论
//根据类型，修改数量(1浏览,2点赞,3收藏,4评论)
updateNum(type, num) {
if (type == 2) num = this.stuffObj.like == true ? '-1' : 1;
if (type == 3) num = this.stuffObj.collection == true ? '-1' : 1;
const data = {
id: this.stuffId,
type: type,
num: num,
userid: this.userId,
content: this.content,
}
this.tabSer.updateNumByType(data).subscribe(
(res) => {
if (res.errcode == '1000') {
this.getStuff();
}
}
)
}
//确定发布
sure(){
const data = {
userid: this.userId,
content: this.content,
id: this.stuffId,
}
this.tabSer.updateNumByType(data).subscribe(
(res) => {
if (res.errcode == '1000') {
this.getStuff();
this.commonSer.toast('发布成功');
}
}
)
}
//取消发布
cancel(){
this.content = '';
this.comment = false;
}
}
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