文章预览

src/pages/discover-pages/preview/preview.html

+<ion-header>
+
+  <ion-navbar>
+    <ion-title>预览</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+<ion-content>
+  <div class="stuff">
+    <div class="stuff-container">
+      <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">
+        <p [innerHTML]="stuffObj?.content"></p>
+      </div>
+      <div class="stuff-attachments">
+        <ng-container *ngFor="let item of attachments">
+          <!--            <div style="height: 160px;" *ngIf="item.resourceType == 1">-->
+          <!--              <img style="height: 160px;" [src]="url + item.path" alt="">-->
+          <!--            </div>-->
+          <div  *ngIf="item.resourceType == 3">
+            <video width="100%" height="100%"  [src]="url + item.path" controls="controls">
+              您的浏览器不支持 html5。
+            </video>
+          </div>
+        </ng-container>
+        <ng-container *ngFor="let item of attachments">
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</ion-content>

src/pages/discover-pages/preview/preview.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { PreviewPage } from './preview';
+
+@NgModule({
+  declarations: [
+    PreviewPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(PreviewPage),
+  ],
+})
+export class PreviewPageModule {}

src/pages/discover-pages/preview/preview.scss

+page-preview {
+  .stuff {
+    font-size: 1.8rem;
+    line-height: 2.4rem;
+    height: calc(100% - 4rem);
+    overflow-y: scroll;
+    background-color: #f3f3f3;
+
+    .stuff-container {
+      padding: 1.5rem;
+      background-color: #fff;
+      .stuff-title {
+        font-weight: 600;
+        font-size: 2.5rem;
+        margin-bottom: .5rem;
+        line-height: 3rem;
+        color: #4c4c4c;
+        font-family: 'SourceHanSans-Bold';
+      }
+
+      .stuff-info {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+
+        .info-publisher {
+          color: #5c5c5c;
+          margin-right: 1rem;
+        }
+
+        .info-time {
+          color: #888888;
+        }
+      }
+      .stuff-content{
+        line-height: 2.8rem;
+        color: #444444;
+        font-family: 'SourceHanSans-Light';
+      }
+    }
+  }
+
+  .stuff-footer {
+    position: fixed;
+    bottom: 0;
+    height: 4rem;
+    width: 100%;
+    text-align: center;
+    line-height: 3rem;
+    border-top: 1px solid #eeeeee;
+    z-index: 9;
+
+    [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: 99;
+    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 {
+        margin-top: 1rem;
+        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: 2.5rem;
+          line-height: 2.5rem;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+
+  .stuff-comment {
+    margin-top: 1rem;
+    padding: 0 1.5rem;
+    background-color: #fff;
+    .comment-title {
+      border-bottom: 1px solid #dddddd;
+      font-weight: 500;
+      padding-bottom: .8rem;
+      margin-bottom: .8rem;
+      position: relative;
+    }
+    .comment-title::after{
+      content: '';
+      position: absolute;
+      top: 7px;
+      left: -8px;
+      width: 3px;
+      height: 15px;
+      background-color: #e12724;
+    }
+    [col-10],[col-2]{
+      padding: 0;
+    }
+
+    .comment-item {
+      .contact-img{
+        border-radius: 100px;
+        width: 75%;
+        text-align: center;
+        margin-top: 8px;
+      }
+      .comment-info {
+        color: #d88f27;
+        font-size: 1.6rem;
+      }
+
+      .commnet-content {
+        padding: .1rem 0;
+        font-size: 1.5rem;
+        color: #333333;
+      }
+      .comment-time{
+        font-size: 1.4rem;
+        color: #888888;
+      }
+    }
+
+    .comment-item + .comment-item {
+      border-top: 1px solid #eee;
+      margin-top: .5rem;
+    }
+  }
+}

src/pages/discover-pages/preview/preview.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import {DomSanitizer} from "@angular/platform-browser";
+import {AppGlobal} from "../../../service/http.service";
+
+
+@IonicPage()
+@Component({
+  selector: 'page-preview',
+  templateUrl: 'preview.html',
+})
+export class PreviewPage {
+
+  stuffObj;
+  url = AppGlobal.domain + '/wisdomgroup';
+
+  attachments;   //附件
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public sanitizer:DomSanitizer) {
+  }
+
+  ionViewDidLoad() {
+    this.stuffObj = this.navParams.get('stuff');
+    if(this.stuffObj.attachments)  this.attachments = this.stuffObj.attachments;
+    let con = this.stuffObj.content.replace(/\r?\n/g, "<br />");
+    this.stuffObj.content = this.sanitizer.bypassSecurityTrustHtml(con);
+  }
+
+}

src/pages/discover-pages/publish/publish.html

 <ion-header>
   <ion-navbar>
-    <ion-title>发布</ion-title>
+    <ion-title>发布<span *ngIf="type == 'image'">图片</span><span *ngIf="type == 'video'">视频</span>  </ion-title>
     <ion-buttons end>
-      <button ion-button icon-only (click)="publish()" class="toolbar-icon">
-        <ion-icon name="share-alt"></ion-icon>
-        发布
+      <button ion-button icon-only (click)="handle()" class="toolbar-icon">
+        <ion-icon name="list"></ion-icon>
+<!--        发布-->
       </button>
     </ion-buttons>
   </ion-navbar>

src/pages/discover-pages/publish/publish.ts

@@ -214,4 +214,41 @@ export class PublishPage {
         })
     }
 
+    //选择发布或者预览
+    handle(){
+        const actionSheet = this.actionSheetCtrl.create({
+            title: '',
+            buttons: [
+                {
+                    text: '预览',
+                    handler: () => {
+                        const obj = {
+                            title:this.obj.title,
+                            source: '上海市委组织部',
+                            publishTime:new Date().getTime(),
+                            content:this.obj.content,
+                            attachments:this.fileList,
+                        }
+                        this.navCtrl.push('PreviewPage',{
+                            stuff:obj
+                        });
+                    }
+                }, {
+                    text: '发布',
+                    role: 'fromPhoto',
+                    handler: () => {
+                        this.publish();
+                    }
+                }, {
+                    text: '取消',
+                    role: 'cancel',
+                    handler: () => {
+                        console.log('Cancel clicked');
+                    }
+                }
+            ]
+        });
+        actionSheet.present();
+    }
+
 }

src/pages/home-pages/stuff-detail/stuff-detail.html

@@ -2,7 +2,6 @@
   <ion-navbar>
     <ion-title></ion-title>
   </ion-navbar>
-
 </ion-header>
 <ion-content>
   <div class="stuff">

src/pages/tabs/discover/discover.html

@@ -9,7 +9,7 @@
     <ion-buttons end>
       <button ion-button icon-only (click)="isPublish = true" class="toolbar-signUp">
         <ion-icon class="icon-fabu iconfont"></ion-icon>
-        <span class="signUp-span" >发布</span>
+        <span class="signUp-span"> 发布</span>
       </button>
     </ion-buttons>
     <ion-buttons end>