活动

src/pages/activity/order-detail/order-detail.html

+<ion-header>
+    <ion-navbar>
+        <ion-title>订单详情</ion-title>
+    </ion-navbar>
+</ion-header>
+<ion-content class="content">
+    <div class="content">
+        <div class="sign-info">
+            <p class="info-title">报名信息</p>
+            <div class="content-item">
+                <p> <span>携带人数：</span><span>{{order?.personnumber}}</span> </p>
+                <p> <span>报名备注：</span><span>{{order?.orderfgconent}}</span> </p>
+            </div>
+        </div>
+        <div class="feedback-info">
+            <p class="info-title">出行反馈</p>
+            <div class="content-item">
+                <p>
+                    <span>出行结果：</span>
+                    <span *ngIf="order?.orderstate == 1">待出行</span>
+                    <span *ngIf="order?.orderstate == 2">待确认</span>
+                    <span *ngIf="order?.orderstate == 3">报名未出行</span>
+                    <span *ngIf="order?.orderstate == 4">已评价</span>
+                </p>
+                <p>
+                    <span>评价反馈：</span>
+                    <span *ngIf="order?.orderpjlevel == 1">非常满意</span>
+                    <span *ngIf="order?.orderpjlevel == 2">满意</span>
+                    <span *ngIf="order?.orderpjlevel == 3">一般</span>
+                    <span *ngIf="order?.orderpjlevel == 4">不满意</span>
+                </p>
+            </div>
+        </div>
+        <div class="batch-info">
+            <div class="content-item">
+                <p> <span>报名截止：</span><span>{{batch?.batchEndDate}}</span> </p>
+                <p> <span>出行日期：</span><span>{{batch?.batchGoDate}}</span> </p>
+                <p> <span>可携带人数：</span><span>{{batch?.batchPerNumber}}</span> </p>
+                <p> <span>集合时间：</span><span>{{batch?.batchSetTime}}</span> </p>
+                <p> <span>集合地点：</span><span>{{batch?.batchSetAddress}}</span> </p>
+                <p> <span>活动须知：</span><span>{{batch?.batchNotice}}</span> </p>
+            </div>
+        </div>
+        <div class="content-button">
+            <div class="button-left">报名人数<span class="color-24bafc margin-left-15">4/20</span></div>
+            <div class="button-right" >
+                <!--时间是否截止->人数是否满了->是否报名了-->
+            </div>
+        </div>
+    </div>
+</ion-content>
\ No newline at end of file

src/pages/activity/order-detail/order-detail.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { OrderDetailPage } from './order-detail';
+
+@NgModule({
+  declarations: [
+    OrderDetailPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(OrderDetailPage),
+  ],
+})
+export class OrderDetailPageModule {}

src/pages/activity/order-detail/order-detail.scss

+page-order-detail {
+  p{
+    margin: 0;}
+  .pageMenuSlides{
+    //设置菜单栏底部的颜色
+    border-bottom:1px solid rgb(255, 255, 255);
+    .swiper-container{
+      width: 100%;
+      height: 40px;
+      border-bottom: 1px solid #dddddd;
+    }
+    .swiper-slide{
+      //设置菜单栏的颜色
+      background: rgb(255, 255, 255);
+      //设置字体颜色
+      color: #0c0c0c;
+      font-size: 16px;
+    }
+    .bottomLine{
+      //设置当前菜单底部边框
+      border-bottom: 2px solid #7aa7fa;
+      color:#7aa7fa
+    }
+    .swiper-title{
+      position: relative;
+      color: #24bafc;
+    }
+    .swiper-title::after{
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 2px;
+      background-color: #24bafc;
+      bottom: -8px;
+      left: 0px;
+    }
+  }
+  ion-slides {
+    .slide-zoom {
+      height: 100%;
+    }
+  }
+  .content{
+    text-align: left;
+    margin-top: 6px;
+  }
+  .sign-info,.feedback-info{
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 20px;
+  }
+  .info-title{
+    padding-left: 10px;
+    position: relative;
+  }
+  .info-title::after{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 5px;
+    height: 25px;
+    background-color: #24bafc;
+  }
+  .content-item{
+    font-size: 16px;
+    padding: 0 20px;
+    p{
+      padding: 10px 0;
+      span:first-child{
+        color: #333;
+      }
+      span:last-child{
+        color: #666;
+      }
+    }
+    p + p{
+      border-top: 1px solid #ddd;
+    }
+  }
+
+  .content-button{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    background-color: #e3f6fe;
+    div:first-child{
+      width: 65%;
+      padding-left: 20px;
+    }
+  }
+  .button-btn{
+    padding: 10px 20px;
+    color: #fff;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+  }
+  .button-btn1{
+    background-color: #24bafc;
+  }
+  .button-btn2{
+    background-color: #e25c5e;
+  }
+  .button-btn3{
+    background-color: #d9d9d9;
+  }
+}

src/pages/activity/order-detail/order-detail.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+
+@IonicPage()
+@Component({
+  selector: 'page-order-detail',
+  templateUrl: 'order-detail.html',
+})
+export class OrderDetailPage {
+  order;  //订单信息
+  activity = {
+      activityName:'',
+      activityIntro:''
+  };    //活动
+  batch;    //批次
+
+    isCover = false;
+    isIntroduce = false;
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    this.order = this.navParams.get('item');
+    this.activity = this.navParams.get('item').activity;
+    this.batch = this.navParams.get('item').batch;
+    console.log(this.navParams.get('item'));
+  }
+
+    hidden() {
+        this.isCover = false;
+        this.isIntroduce = false;
+    }
+
+    show() {
+        this.isCover = true;
+        this.isIntroduce = true;
+    }
+
+}