Commit b1ead42c authored by wangqinghua's avatar wangqinghua

activity-modal

parent 41a2ec16
...@@ -89,6 +89,6 @@ ...@@ -89,6 +89,6 @@
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" /> <variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin> </plugin>
<plugin name="cordova-plugin-file-transfer" spec="^1.7.1" /> <plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
<engine name="android" spec="8.0.0" />
<plugin name="cordova-sqlite-storage" spec="^3.2.0" /> <plugin name="cordova-sqlite-storage" spec="^3.2.0" />
<engine name="android" spec="8.0.0" />
</widget> </widget>
...@@ -100,4 +100,4 @@ ...@@ -100,4 +100,4 @@
"android" "android"
] ]
} }
} }
\ No newline at end of file
...@@ -12,6 +12,13 @@ import {AppService} from "../http/http.service"; ...@@ -12,6 +12,13 @@ import {AppService} from "../http/http.service";
import {HttpClientModule} from "@angular/common/http"; import {HttpClientModule} from "@angular/common/http";
import {HttpModule} from "@angular/http"; import {HttpModule} from "@angular/http";
import {LoginPageModule} from "./tabs/login/login.module"; import {LoginPageModule} from "./tabs/login/login.module";
import {ActivityApplyModule} from "./pages/home-pages/activity/activityApply/activityApply.module";
import {ActivityConfirmModule} from "./pages/home-pages/activity/activityConfirm/activityConfirm.module";
import {ActivityDetailModule} from "./pages/home-pages/activity/activityDetail/activityDetail.module";
import {ActivityListModule} from "./pages/home-pages/activity/activityList/activityList.module";
import {BatchDetailModule} from "./pages/home-pages/activity/batch-detail/batch-detail.module";
import {OrderDetailModule} from "./pages/home-pages/activity/order-detail/order-detail.module";
import {OrderEditModule} from "./pages/home-pages/activity/order-edit/order-edit.module";
@NgModule({ @NgModule({
...@@ -22,6 +29,13 @@ import {LoginPageModule} from "./tabs/login/login.module"; ...@@ -22,6 +29,13 @@ import {LoginPageModule} from "./tabs/login/login.module";
DiscoverPageModule, DiscoverPageModule,
ServePageModule, ServePageModule,
MinePageModule, MinePageModule,
ActivityApplyModule,
ActivityConfirmModule,
ActivityDetailModule,
ActivityListModule,
BatchDetailModule,
OrderDetailModule,
OrderEditModule,
IonicModule, IonicModule,
CommonModule, CommonModule,
FormsModule, FormsModule,
......
<ion-header>
<ion-navbar>
<ion-title text-center>报名订单</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="content">
<ion-item class="content-title">
<span>活动名称</span>
<span float-right>{{activity.activityName}}</span>
</ion-item>
<ion-item>
<span>选择批次</span>
<span float-right>{{item.batchName}}</span>
</ion-item>
<ion-item class="margin-top-10">
<ion-label>报名用户</ion-label>
<span class="lettr-space-1" item-right>{{role.loginName}}</span>
</ion-item>
<ion-item class="margin-top-10">
<span>携带人数</span>
<span class="com" float-right>
<button type="button" class="input_left" (tap)="next()">-</button>
<input type="text" readonly="readonly" [(ngModel)]='order.Personnumber' name="num" />
<button type="button" style="margin-left: -2px" class="input_right" (tap)="add()">+</button>
</span>
</ion-item>
<ion-item class="margin-top-10">
<ion-label>报名备注</ion-label>
<ion-textarea [(ngModel)]="order.Orderbz" class="content-textarea"></ion-textarea>
</ion-item>
<button class="submit-btn submit" (click)="condirmAlert()">提交订单</button>
</ion-content>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import {ActivityApplyPage} from "./activityApply";
const routes: Routes = [
{
path: '',
component: ActivityApplyPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ActivityApplyPage]
})
export class ActivityApplyModule {}
page-activityApply {
.searchToolBar{
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
box-sizing: border-box;
}
.content{
background-color: #f1f1f1
}
.item1{
background-color: white;
}
// .img-box{
// width: 100%;
// height: 135px;
// }
.item1-image{
width: 100%;
height: 135px;
}
.item1-content{
margin-top: 12px;
}
.item1-content-header{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
}
.item1-title{
margin-left: 15px;
font-size: 18px;
font-weight: bold;
width: 12em;
line-height:18px;
}
.item1-content-box{
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
margin-right: 15px;
color: #80a7ee;
font-size: 16px;
line-height:18px;
}
.item1-introduction{
margin: 0 15px;
color: #9d9d9d;
padding-bottom: 10px;
line-height: 25px;
}
.item-margin{
margin-top: 17px
}
.item-list{
margin-bottom: 0;
}
.item-label{
border-left: 2px solid #498aff
}
.item-title{
color: #699fff;
margin-left: 15px
}
.item2-content{
}
.item2-box{
width: 73px;
height: 53px;
margin: 5px 4.5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
float: left;
font-size: 12px;
border: 1px solid #cccccc;
}
.zero{
background-color: #ededed;
}
.selected{
background-color: #e0e9fa;
}
.time{
color: #5f5f5f
}
.quantity{
color: #ebac67
}
.item3-box{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.item3-box-count{
color: #ee9d39;
}
.item3-1{
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
box-sizing: border-box;
}
.little-title-box{
border: 1px solid #cccccc;
}
.little-title{
font-size: 16px;
font-weight: bold;
margin:0 7px;
}
.change{
width: 20px;
height: 20px;
border-radius: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: #ef941f;
font-size: 20px;
line-height: 20px;
text-align: center;
}
.number{
width: 50px;
border: 1px solid #cccccc;
text-align: center;
}
.item3-2{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: left;
box-sizing: border-box;
}
.item3-icon{
font-size: 18px;
}
.remark-box{
width: 100px;
height: 40px;
}
.remark{
width: 100%;
// height: 100%;
border: 1px solid #cccccc;
margin: 0 0 0 15px;
}
.item4-content{
margin-left: 20px;
font-size: 14px;
color: #666666;
}
.item5{
margin-bottom: 50px;
}
.item5-content p{
color: #5c5c5c;
white-space: normal;
}
.confirmBtn{
position: fixed;
height: 50px;
bottom: 0;
margin: 0 0;
}
.cover{
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
// opacity: 0.4;
z-index: 100;
}
.cover-content{
position: fixed;
// height: 400px;
width: 300px;
margin:auto;
left:0;
right:0;
top: 110px;
z-index: 1000;
background-color: white;
}
.cover-content-box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 15px 15px;
// width: 280px;
}
.cover-content-info{
height: 280px;
border: 1px solid #cccccc;
padding: 0 10px;
margin-bottom: 10px;
color: #272727;
overflow: scroll;
width: 270px;
}
.cover-content-title{
margin-top: 0;
}
.btn-introduce{
background-color: white;
padding: 3px 7px;
border: 1px solid #cccccc;
border-radius: 10px;
float: right;
color: #666666;
}
.result-img{
width: 100px;
height:100px;
}
.result-msg{
color: #272727;
}
.cover-content-result{
top:200px;
}
.back-btn{
width: 30px;
height: 30px;
}
//新
.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: absolute;
bottom: 10px;
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;
}
}
.item-ios.item-block .item-inner{
margin-right: 16px;
border: none;
padding-left: 16px;
}
.content .item-ios.item-block:nth-child(5) .item-inner{
border: none;
}
.content-title{
padding: 0;
}
.content-title .item-inner{
padding-left: 16px;
margin: 0 !important;
}
.label-ios + ion-input .text-input, .label-ios + ion-textarea .text-input, .label-ios + .input + .cloned-input{
padding: 10px;
height: 100px;
border: 1px solid #ddd;
}
.submit{
margin-top: 20px;
border: 1px solid #34b4fc;
background-color: #34b4fc;
}
.com{
font-size: 0;
}
.com input{
font-size: 1.5rem;
height: 2rem;
width: 3rem;
vertical-align: bottom;
border: 1px solid #ddd;
text-align: center;
}
.com button{
height: 2rem;
width: 2rem;
}
}
import {Component} from '@angular/core';
import {CommonService} from "../../../../../provide/common.service";
import {Http, Response} from '@angular/http';
import {Storage} from '@ionic/storage';
import {AppService} from "../../../../../http/http.service";
import {Router, ActivatedRoute} from "@angular/router";
@Component({
selector: 'page-activityApply',
templateUrl: 'activityApply.html',
})
export class ActivityApplyPage {
picture: string;
isLoad: boolean = false;
//batches: object[]; //所有批次信息
batches: Array<String>[];
activity = {
activityName: '',
batchList: [],
id: '',
applyCount: null //批次数量限制
}; //活动信息
item = {
batchName: '',
batchPerNumber: null,
activityId: '',
id: '',
batchLimitNumber: null,
hasSignUpCount: null
};
role = {
loginName: ''
}; //角色信息
//报名订单
order = {
Orderid: '', //订单id
Personnumber: 0, //携带人数
Orderbz: '', //报名备注
Activityid: '', //关联活动id
Batchid: '', //关联批次id
batchlist: ''
};
//页面报名保存展示
isCover: boolean = false;
//活动详情显示
introduce: string;
//选中的批次的id,默认第一个id
isSelected: string;
//报名成功
isSuccess: boolean = false;
//报名失败
//活动须知
noticeArry: object[];
pageflag: boolean = false;
constructor(public router: Router,
public routerInfo: ActivatedRoute, public storage: Storage,
public cmonmonSer: CommonService,
public http: Http,
public appService: AppService,) {
}
//活动介绍限定一行17个字符串,两行57个字符串,多余以省略号代替
subIntroduce(str: string) {
if (!str) this.introduce = '';
if (str.length <= 17) this.introduce = str;
if (str.length > 17 && str.length <= 25) this.introduce = str.substr(0, 17) + "...";
if (str.length > 25 && str.length <= 42) this.introduce = str;
if (str.length > 42) this.introduce = str.substr(0, 42) + "...";
}
//初始化显示活动列表
ionViewDidEnter(): void {
this.routerInfo.queryParams.subscribe(queryParams => {
this.activity = queryParams.activity;
this.item = queryParams.item;
this.order.Activityid = this.activity.id;
// //获取角色
this.storage.get("user").then((value) => {
this.role = value;
});
}
)
}
//携带人数 数字加减
add() {
if (this.order.Personnumber < this.item.batchPerNumber) {
this.order.Personnumber++;
}
}
next() {
if (this.order.Personnumber >= 1) {
this.order.Personnumber--;
}
}
//具体介绍
hidden() {
this.isCover = false;
}
show() {
this.isCover = true;
}
condirmAlert() {
this.cmonmonSer.alert('确定提交该活动订单?', (res) => {
this.confirmOrder();
})
}
//报名
confirmOrder() {
//验证信息:
/**0.对于暂未有批次的。
1.判断携带人数是否超过限额人数。
leaveNum: 剩余人数
applyNum:报名批次数量
**/
let leaveNum = this.item.batchLimitNumber - this.item.hasSignUpCount;
let applyNum = 0;
this.activity.batchList.forEach((res) => {
if (res.order) {
applyNum++;
}
});
//报名次数 applyCount 1,2,3,4,5,0-> 不限
if (this.activity.applyCount > 0) {
if (applyNum >= this.activity.applyCount) {
this.cmonmonSer.toast("提交失败,报名批次达到上限");
return;
} else if (Number(this.order.Personnumber + 1) > Number(leaveNum)) {
this.cmonmonSer.toast("报名人数超过了该批次的剩余人数");
return;
} else {
this.submitOrder();
}
} else { //报名(新增)
this.submitOrder();
}
}
//报名操作
commitSignUpOrder() {
this.appService.ObserverHttpPost("/wisdomgroup/modules/order/create", this.order)
.subscribe((res: Response) => {
if (true) {
this.isSuccess = true;
setTimeout(() => {
this.isSuccess = false;
// this.navCtrl.push("MyActivityListPage");
}, 1000);
} else {
}
}, error => {
}
);
}
submitOrder() {
this.order.Batchid = this.item.id;
this.order.Activityid = this.item.activityId;
this.order.batchlist = this.item.id + ',';
this.appService.ObserverHttpPostOption("/wisdomgroup/modules/order/create", this.order)
.subscribe((res: Response) => {
if (true) {
this.isSuccess = true;
//清空 插入
// this.navCtrl.push("ActivityDetailPage", {id: this.item.activityId});
} else {
}
}, error => {
}
);
}
}
<ion-header>
<ion-navbar>
<ion-title text-center>订单确认</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="content">
<div class="content-container">
<ion-item class="content-title">
<span>活动名称</span>
<span float-right>{{activity?.activityName}}</span>
</ion-item>
<ion-item>
<span class="padding-left-16">选择批次</span>
<span float-right>{{batch?.batchName}}</span>
</ion-item>
<div class="confirm-item margin-top-10">
<ion-label>出行结果</ion-label>
<div class="confirm-type">
<span class="{{order.orderstate == 4? 'selected':''}}" (click)="changeType(4)">成功出行</span>
<span class="{{order.orderstate == 3? 'selected':''}}" (click)="changeType(3)">未出行</span>
</div>
</div>
<ng-container *ngIf="order.orderstate == 4">
<div class="margin-top-10 confirm-item">
<ion-label>评价反馈</ion-label>
<button (click)="selectLevel(4)" class="submit-btn submit1">非常满意
<ion-icon *ngIf="orderStatisfyLevel == 4" ios="ios-checkmark" md="md-checkmark"></ion-icon>
</button>
<button (click)="selectLevel(3)" class="submit-btn submit2">满意
<ion-icon *ngIf="orderStatisfyLevel == 3" ios="ios-checkmark" md="md-checkmark"></ion-icon>
</button>
<button (click)="selectLevel(2)" class="submit-btn submit3">一般
<ion-icon *ngIf="orderStatisfyLevel == 2" ios="ios-checkmark" md="md-checkmark"></ion-icon>
</button>
<button (click)="selectLevel(1)" class="submit-btn submit4">不满意
<ion-icon *ngIf="orderStatisfyLevel == 1" ios="ios-checkmark" md="md-checkmark"></ion-icon>
</button>
</div>
</ng-container>
</div>
<button class="submit-btn submit" (click)="commit()">提交确认</button>
</ion-content>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import {ActivityConfirmPage} from "./activityConfirm";
const routes: Routes = [
{
path: '',
component: ActivityConfirmPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ActivityConfirmPage]
})
export class ActivityConfirmModule {}
page-activityConfirm {
.searchToolBar{
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
box-sizing: border-box;
}
.content{
background-color: #f1f1f1
}
.content-container{
background-color: #fff;
padding-bottom: 20px;
}
.item1{
background-color: white;
}
.img-box{
width: 100%;
height: 135px;
// overflow: hidden;
}
.item1-image{
width: 100%;
height: 135px;
}
.item1-content{
margin-top: 12px;
}
.item1-content-header{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
}
.item1-title{
margin-left: 15px;
font-size: 18px;
font-weight: bold;
width: 12em;
line-height:18px;
}
.item1-content-box{
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
margin-right: 15px;
color: #80a7ee;
font-size: 16px;
line-height:18px;
}
.item1-introduction{
margin: 0 15px;
color: #9d9d9d;
padding-bottom: 10px;
line-height: 25px;
}
.item-margin{
margin-top: 17px;
}
.item-list{
margin-bottom: 0;
}
.item-label{
border-left: 2px solid #498aff
}
.item-title{
color: #699fff;
margin-left: 15px
}
.item2-content{
}
.item2-box{
width: 73px;
height: 53px;
margin: 5px 4.5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
float: left;
font-size: 12px;
border: 1px solid #cccccc;
}
.time{
color: #5f5f5f
}
.quantity{
color: #ebac67
}
.little-title-box{
border: 1px solid #cccccc;
}
.little-title{
font-size: 16px;
font-weight: bold;
text-align: center;
margin:0 7px;
}
.change{
width: 25px;
height: 25px;
border-radius: 15px;
margin: 0 5px ;
background-color: #ef941f;
}
.number{
width: 50px;
border: 1px solid #cccccc;
}
.item3-icon{
font-size: 18px;
}
.remark-box{
width: 100px;
height: 40px;
}
.remark{
border: 1px solid #cccccc;
margin: 0 0 0 15px;
}
.item4-content{
margin-left: 20px;
font-size: 14px;
color: #666666;
}
.item5{
margin-bottom: 50px;
}
.item5-content p{
color: #5c5c5c;
white-space: normal;
}
.btn-box{
position: fixed;
// height: 50px;
width: 100%;
height: 50px;
bottom:0;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
}
.bottom-btn{
width: 50%;
height: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
.bottom-btn-left{
border: 1px solid #cccccc;
}
.cover{
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 100;
}
.cover-content{
position: fixed;
// height: 400px;
width: 300px;
margin:auto;
left:0;
right:0;
top: 110px;
z-index: 1000;
background-color: white;
}
.cover-content-box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 15px 15px;
// width: 280px;
}
.cover-content-info{
height: 280px;
border: 1px solid #cccccc;
padding: 0 10px;
margin-bottom: 10px;
color: #272727;
overflow: scroll;
width: 270px;
}
.cover-content-title{
margin-top: 0;
}
.btn-introduce{
background-color: white;
padding: 3px 7px;
border: 1px solid #cccccc;
border-radius: 10px;
float: right;
color: #666666;
}
.cover{
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
// opacity: 0.4;
z-index: 100;
}
.cover-content{
position: fixed;
width: 300px;
margin:auto;
left:0;
right:0;
z-index: 1000;
background-color: white;
border-radius: 2px;
}
.cover-content-box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 15px 15px;
color: #272727;
}
.cover-content-title{
margin-top: 15px;
margin-bottom: 20px;
font-weight: normal;
}
.cover-btn{
width: 100%;
height: 40px;
border-radius: 3px;
margin: 7px 0;
font-size: 18px;
background-color: white;
}
.btn-yes{
background-color: #4a89fa;
color:white;
}
.btn-no{
background-color: white;
color: #676767;
border: 1px solid #cccccc;
}
.c1{
top: 200px;
}
.c2{
top: 130px;
}
.btn1{
border: 1px solid #cccccc;
color:#48c159;
}
.btn2{
border: 1px solid #cccccc;
color: #27b9e8;
}
.btn3{
border: 1px solid #cccccc;
color: #f3a138;
}
.btn4{
border: 1px solid #cccccc;
color: #f57a4c;
}
.c3{
top: 200px;
}
.third-btn-box{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.third-btn{
width: 130px;
height: 40px;
margin: 5px 5px;
font-size: 18px;
background-color: white;
border-radius: 3px;
}
.third-btn-left{
color: white;
background-color: #4a89fa;
}
.third-btn-right{
border: 1px solid #cccccc;
}
.c4{
top: 130px;
}
.suggest{
width: 100%;
// height: 100%;
border: 1px solid #cccccc;
padding: 5px 5px;
border-radius: 3px;
}
.commit{
margin-top: 20px;
}
.c5{
top: 200px;
}
.result-img{
width: 100px;
height:100px;
}
.result-msg{
color: #272727;
}
.cover-content-result{
top:200px;
}
.level1{
color:#48c159;
}
.level2{
color: #27b9e8;
}
.level3{
color: #f3a138;
}
.level4{
color: #f57a4c;
}
.back-btn{
width: 30px;
height: 30px;
}
//新
.confirm-item{
margin: 16px;
font-size: 1.7rem;
}
.confirm-item + .confirm-item{
border-top: 1px solid #dddddd;
}
.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: absolute;
bottom: 10px;
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;
}
}
.item-ios.item-block .item-inner{
margin-right: 16px;
}
.content .item-ios.item-block:nth-child(5) .item-inner{
border: none;
}
.content-title{
padding: 0;
}
.content-title .item-inner{
padding-left: 16px;
margin: 0 !important;
}
.label-ios + ion-input .text-input, .label-ios + ion-textarea .text-input, .label-ios + .input + .cloned-input{
padding: 10px;
height: 100px;
border: 1px solid #ddd;
}
.submit{
border: 1px solid #34b4fc;
background-color: #34b4fc;
margin-top: 20px;
}
.submit1{
border: 1px solid #5eb15e;
background-color: #d6f7d9;
color: #1a9610;
}
.submit2{
border: 1px solid #299082;
background-color: #b2f0e8;
color: #299082;
}
.submit3{
border: 1px solid #a77536;
background-color: #f7e1c4;
color: #a77536;
}
.submit4{
border: 1px solid #cd3838;
background-color: #f4c4c4;
color: #cd3838;
}
.confirm-type span{
width: 50%;
display: inline-block;
text-align: center;
padding: 8px;
font-size: 1.6rem;
}
.confirm-type {
font-size: 0;
span.selected{
background-color: #24bafc;
color: #fff;
}
span{
background-color: #ececec;
}
}
}
import {Component} from '@angular/core';
import {Router,ActivatedRoute} from "@angular/router";
import {Http, Response,} from '@angular/http';
import {AppService} from "../../../../../http/http.service";
@Component({
selector: 'page-activityConfirm',
templateUrl: 'activityConfirm.html',
})
export class ActivityConfirmPage {
picture: string;
isLoad: boolean = false;
onebatch: any;
activity: any;
orderInfo: any;
order = {
orderfgconent: '',
orderstate: null,
activityid: '',
orderid: '',
personnumber:'',
orderbz:''
};
batch;
//页面按钮为默认取消报名和重选批次
modelflag = 1;
showParticipantBtn: boolean = false;
//页面报名保存展示
//isCover: boolean = false;
//活动详情显示
introduce: string;
isCover: boolean = false; //是否显示弹出框
isIntroduce: boolean = false; //是否显示具体介绍
first: boolean = false; //第一层弹框
second: boolean = false; //第二层弹框
third: boolean = false; //第三层弹框
fourth: boolean = false; //第四层弹框
isSuccess: boolean = false; //是否提交成功
isError: boolean = false; //是否提交失败
activityTypeFlag: Array<String> = ['未知', '体检', '疗休养', '培训', '工会活动'];
orderStatisfyLevel = 4;
noticeArry: object[];
constructor(public router: Router,
public routerInfo: ActivatedRoute,
public http: Http,
public appService: AppService,) {
}
//跳转人员参与情况列表页面
joinPeople(order) {
// this.navCtrl.push("JoinPersonsPage", {
// batchid: order.batchid,
// batch: order.batch,
// });
}
ngOnInit(): void {
this.routerInfo.queryParams.subscribe(queryParams=>{
this.activity = queryParams.order.activity;
this.order = queryParams.order;
this.batch = queryParams.order.batch;
this.order.orderstate = 4;
})
}
selectLevel(type) {
this.orderStatisfyLevel = type;
}
//分隔字符串
strSplit(str): object[] {
let temp = str.split(/[\n]/g);
for (let i = 0; i < temp.length; i++) {
if (temp[i] == "") {
temp.splice(i, 1);
//删除数组索引位置应保持不变
i--;
}
}
return temp;
}
hidden() {
this.isCover = false;
this.isIntroduce = false;
}
show() {
this.isCover = true;
this.isIntroduce = true;
}
//重选批次(更新订单)
reelectBatch(order): void {
// this.navCtrl.push('ActivityApplyPage', {changeOrderInfo: order, item: order.activity});
}
//确认评价按钮,第一层弹框
evaluation(item) {
this.isCover = true;
this.first = true;
this.order["orderid"] = item["orderid"];
this.order["batchid"] = item["batchid"];
this.order["activityid"] = item["activityid"];
// this.order["orderstate"] = '2'; //确认状态
this.order["personnumber"] = item["personnumber"] == null ? 0 : item["personnumber"]; //携带人数
this.order["orderbz"] = item["orderbz"]; //备注说明
}
changeType(type) {
this.order.orderstate = type;
}
//第二层弹框,参加
yes() {
this.first = false;
this.second = true;
}
//第三层弹框,未参加
no() {
this.first = false;
this.third = true;
}
//确定未参加
sure() {
this.third = false;
this.isCover = false;
//未出行(更改订单状态为:报名未出行;确认方式为app)
// this.order["orderstate"] = '3'; //报名未出行
this.order["orderconfirm"] = '1'; //手机app确认
this.appService.ObserverHttpPost("/wisdomgroup/modules/order/confirmEvaluationOrder", this.order)
.subscribe((res: Response) => {
let resultback = res.json();
if (resultback.status == '200') {
//待确认列表移除,全部列表移除该订单
//let orderid = this.order["orderid"];
//this.allOrder.splice(this.allOrder.indexOf(orderid),0)["orderstate"] = '3';
//this.allOrder.splice(this.allOrder.indexOf(orderid),1)
//this.waitSureOrder.splice(this.waitSureOrder.indexOf(orderid),1)
// this.navCtrl.push("MyActivityListPage");
} else {
//失败
}
}, error => {
}
);
}
//否定为参加,跳到第一层
not() {
this.third = false;
this.first = true;
}
//no是对应的满意度,跳转到第四层
next(no: number) {
this.second = false;
this.fourth = true;
this.order["orderpjlevel"] = no; //满意度评价等级
}
//提交建议 (确认出行)
commit() {
//确认出行:更改订单状态为完成,订单满意度评价,意见,确认方式
// this.order["orderstate"] = '4'; //已完成
this.order["orderconfirm"] = '1'; //手机app确认
const data = {
orderfgconent:'',
orderid: this.order.orderid,
batchid: this.batch.id,
activityid: this.order.activityid,
orderpjlevel: this.orderStatisfyLevel,
orderstate: '',
orderconfirm: '1',
personnumber:this.order.personnumber,
orderbz:this.order.orderbz
};
if (this.order.orderstate == 3) {
data.orderstate = '3';
} else if (this.order.orderstate == 4) {
data.orderstate = '4';
}
this.appService.ObserverHttpPost("/wisdomgroup/modules/order/confirmEvaluationOrder",data)
.subscribe((res: Response) => {
let resultback = res.json();
if(resultback.status == '200'){
// //待确认列表移除,全部列表移除该订单
// const index = this.navCtrl.getActive().index;
// this.navCtrl.remove(0, index);
// this.navCtrl.setRoot(MinePage);
// this.navCtrl.parent.select(3);
// this.navCtrl.push("MyActivityListPage");
}else{
//失败
}
}, error => {
}
);
}
}
<ion-header>
<ion-navbar>
<ion-title text-center>活动报名</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="content">
<div class="item1">
<div class="img-box">
<img class="item1-image" src="{{picture + activity?.activityIMG}}">
</div>
<div class="item1-content">
<div class="margin-5-0">
<label class="item1-title">{{activity?.activityName}}
<button class="btn-introduce" (click)="show()">具体介绍</button>
</label>
</div>
<div class="item1-introduction">
{{introduce}}
</div>
<p style="margin: 0 15px;font-weight: bold;color:#699fff"><span>附件:</span></p>
<div class="item1-introduction">
<ng-container *ngFor="let file of activity?.fileUploadEntities">
<p style="text-decoration: underline;font-weight: bold" (click)="downLoad(file)" class="margin-bottom-15" >
{{file.showName}}
</p>
</ng-container>
</div>
</div>
</div>
<div class="item2">
<ion-list class="item-list">
<ion-item class="list-title">
<label class="item-label">
<span class="item-title">
批次信息
<ng-container *ngIf="batchList.length > 0">
(最多可报
<span *ngIf="activity.applyCount == 0 || !activity.applyCount">{{ batchList.length}}</span>
<span *ngIf="activity.applyCount != 0">{{activity.applyCount}}</span>
个批次)
<span *ngIf="activity?.activityNo == '0'" (click)="sayNo()" class="item-type">不想参加</span>
<span *ngIf="activity?.activityNo == '1'" (click)="sayYes()" class="item-type">参加</span>
</ng-container>
</span>
</label>
</ion-item>
<ng-container *ngIf="activity?.activityNo == '0'">
<ion-item class="item2-content" *ngIf="batchList.length > 0">
<div *ngFor="let batch of batchList" class="item2-box" (click)="goBatchDetail(batch)">
<p>
<span class="color-666">批次名称:</span>
<span>{{batch.batchName}}</span>
<!--是否报名 > 是否截止 > 是否满员 -->
<ng-container *ngIf="batch.order">
<span class="activity-btn2"
*ngIf="batch.order.orderstate == 1 || batch.order.orderstate == 2"
float-right>已报名</span>
<span class="activity-btn2" *ngIf="batch.order.orderstate == 4" float-right>已评价</span>
<span class="activity-btn2" *ngIf="batch.order.orderstate == 3" float-right>未出行</span>
</ng-container>
<ng-container *ngIf="!batch.order">
<ng-container *ngIf="batch.signUp">
<ng-container *ngIf=" batch.hasSignUpCount < batch.batchLimitNumber">
<span class="activity-btn2" float-right>未报名</span>
</ng-container>
<ng-container *ngIf="batch.hasSignUpCount == batch.batchLimitNumber">
<span class="activity-btn2" float-right>已满员</span>
</ng-container>
</ng-container>
<ng-container *ngIf="!batch.signUp">
<span class="activity-btn2" float-right>已截止</span>
</ng-container>
</ng-container>
</p>
<p>
<span class="color-666">截止时间:</span>
<span>{{batch.batchEndDate}}</span>
<span class="color-24bafc"
float-right>{{batch.hasSignUpCount}}/{{batch.batchLimitNumber}}</span>
</p>
</div>
</ion-item>
</ng-container>
<ng-container *ngIf="activity?.activityNo != '0'">
<p class="no-info">
已选择不想参加
</p>
</ng-container>
<p class="no-info" *ngIf="batchList.length == 0">
暂无批次
</p>
</ion-list>
</div>
</ion-content>
<div class="cover" *ngIf="isCover">
<div class="cover-content">
<div class="cover-content-box">
<h4 class="cover-content-title">具体介绍</h4>
<div class="cover-content-info">
<p>
{{activity?.activityIntro}}
</p>
</div>
<button class="submit-btn submit" (click)="hidden()">关闭</button>
</div>
</div>
</div>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import {ActivityDetailPage} from "./activityDetail";
const routes: Routes = [
{
path: '',
component: ActivityDetailPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ActivityDetailPage]
})
export class ActivityDetailModule {}
page-activityDetail {
.searchToolBar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
box-sizing: border-box;
}
.content {
background-color: #f1f1f1
}
.item1 {
background-color: white;
}
.img-box {
width: 100%;
height: 135px;
overflow: hidden;
}
.item1-content {
margin-top: 12px;
margin-bottom: 12px;
}
.item1-title {
margin-left: 15px;
font-size: 18px;
font-weight: bold;
}
.item1-content-box {
display: inline-block;
float: right;
margin-right: 15px;
color: #80a7ee;
font-size: 16px
}
.item1-introduction {
margin: 0 15px;
color: #9d9d9d;
padding-bottom: 10px;
line-height: 25px;
min-height: 2rem;
}
.item-margin {
margin-top: 17px
}
.item-list {
margin-bottom: 0;
}
.item-label {
border-left: 2px solid #498aff
}
.item-title {
color: #699fff;
margin-left: 15px
}
.item2-content {
}
.item2-box {
margin: 8px 0;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
font-size: 12px;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
p{
margin: 5px 0;
}
}
.time {
color: #5f5f5f
}
.quantity {
color: #ebac67
}
.little-title-box {
border: 1px solid #cccccc;
}
.little-title {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 0 7px;
}
.change {
width: 25px;
height: 25px;
border-radius: 15px;
margin: 0 5px;
background-color: #ef941f;
}
.number {
width: 50px;
border: 1px solid #cccccc;
}
.item3-icon {
font-size: 18px;
}
.remark-box {
width: 100px;
height: 40px;
}
.remark {
border: 1px solid #cccccc;
margin: 0 0 0 15px;
}
.item4-content {
margin-left: 20px;
font-size: 14px;
color: #666666;
}
.item5-content p {
color: #5c5c5c;
}
.cover {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
// opacity: 0.4;
z-index: 100;
}
.cover-content {
position: fixed;
// height: 400px;
width: 300px;
margin: auto;
left: 0;
right: 0;
top: 110px;
z-index: 1000;
background-color: white;
}
.cover-content-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 15px 15px;
// width: 280px;
}
.cover-content-info {
height: 280px;
border: 1px solid #cccccc;
padding: 0 10px;
margin-bottom: 10px;
color: #272727;
overflow: scroll;
width: 270px;
}
.cover-content-title {
margin-top: 0;
}
.btn-introduce {
background-color: white;
padding: 3px 7px;
border: 1px solid #cccccc;
float: right;
color: #666666;
border-radius: 4px;
margin-right: 18px;
}
.back-btn {
width: 30px;
height: 30px;
}
.activity-btn1,
.activity-btn2,
.activity-btn3,
.activity-btn4{
padding: 1px 6px;
border-radius: 4px;
}
.activity-btn1{
border: 1px solid #999;
color: #999;
}
.activity-btn2{
border: 1px solid #fa7587;
color: #fa7587;
}
.activity-btn3{
border: 1px solid #f8e8c1;
color: #f8e8c1;
}
.activity-btn4{
border: 1px solid #31b7fc;
color: #31b7fc;
}
.list-title .item-inner{
margin-right: 16px;
}
.item-type{
border: 1px solid #ddd;
padding: 3px 5px;
font-size: 1rem;
border-radius: 3px;
color: #999;
display: inline-block;
float: right;
margin-right: 8px;
}
.list-ios .item-block .item-inner{
padding-right: 0px;
margin-right: 0px;
}
.submit{
border: 1px solid #34b4fc;
background-color: #34b4fc;
margin-top: 20px;
}
}
\ No newline at end of file
import {Component} from '@angular/core';
import {Http, Response} from '@angular/http';
import {AppService,AppGlobal} from "../../../../../http/http.service";
import {environment} from "../../../../../environments/environment";
import {BatchDetailPage} from "../batch-detail/batch-detail";
import {TabsService} from "../../../../tabs/tabs.service";
import {CommonService} from "../../../../../provide/common.service";
import {FileTransfer, FileTransferObject} from "@ionic-native/file-transfer/ngx";
import {File} from "@ionic-native/file";
import {ActivatedRoute, Router} from "@angular/router";
@Component({
selector: 'page-activityDetail',
templateUrl: 'activityDetail.html',
})
export class ActivityDetailPage {
activityId; //活动ID
batches: object[];
activity = {
batchList: [],
activityIntro: ''
};
picture: string = AppGlobal.picture;
batchList = [];
//页面报名保存展示
isCover: boolean = false;
//活动详情显示
introduce: string;
hasOrder = false;
constructor(public router: Router,
public routerInfo:ActivatedRoute,
private fileTransfer: FileTransfer,
private fileTransferObject: FileTransferObject,
private file: File,
public commonSer: CommonService,
public http: Http,
public appService: AppService,) {
}
ionViewDidEnter() {
// const index = this.navCtrl.length() - 3;
// if (index > 1) {
// this.navCtrl.remove(3, index);
// }
// this.activityId = this.navParams.get('id');
this.findMyOrderByOrderId();
this.addRecodings();
}
//增加阅读记录
addRecodings() {
this.appService.ObserverHttpGet("/wisdomgroup/modules/activity/addRecodings", null)
.subscribe((res: Response) => {
}, error => {
}
);
}
findMyOrderByOrderId() {
let now = new Date().getTime();
this.appService.ObserverHttpGet("/wisdomgroup/modules/activity/findAllActivityForAppWithXQ", {"id": this.activityId})
.subscribe((res: Response) => {
this.activity = res.json();
this.batchList = this.activity.batchList;
this.subIntroduce(this.activity.activityIntro);
for (let i = 0; i < this.batchList.length; i++) {
let endDate = this.batchList[i].batchEndDate + " 24:00:00";
endDate = new Date(endDate).getTime() + ''; //判断是否过截止日期
if (now > Number(endDate)) { //已截止
this.batchList[i].signUp = false;
} else { //
this.batchList[i].signUp = true;
}
if (this.batchList[i].order) {
this.hasOrder = true;
}
}
}, error => {
}
);
}
goJoinDetail() {
// this.navCtrl.push("JoinDetailPage");
}
//批次详情
goBatchDetail(item) {
// this.navCtrl.push('BatchDetailPage', {batch: item, activity: this.activity});
}
//活动介绍限定65个字符串,多余以省略号代替
subIntroduce(str: string) {
if (!str) this.introduce = '';
if (str.length <= 65) this.introduce = str;
if (str.length > 65) this.introduce = str.substr(0, 65) + "...";
}
//具体介绍
hidden() {
this.isCover = false;
}
show() {
this.isCover = true;
}
//不参加
sayNo() {
if (this.hasOrder) {
this.commonSer.toast('您已报名,请先取消报名再点击');
return false;
}
this.commonSer.alert('确定不参加该活动',()=>{
this.appService.ObserverHttpPostAdd("/wisdomgroup/modules/activityNon/admin/", this.activityId)
.subscribe((res: Response) => {
// this.navCtrl.pop();
}, error => {
}
);
})
}
//参加
sayYes() {
this.commonSer.alert('确定参加该活动?',()=>{
this.appService.ObserverHttpPostAdd("/wisdomgroup/modules/activityNon/delete/", this.activityId)
.subscribe((res: Response) => {
// this.navCtrl.pop();
}, error => {
}
);
})
}
//预览附件
downLoad(file){
this.commonSer.downloadFile(file.id,file.showName)
}
}
<ion-header>
<ion-navbar>
<ion-title text-center>最新活动</ion-title>
</ion-navbar>
</ion-header>
<ion-content scrollbar-y="true" direction="y">
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="正在刷新!">
</ion-refresher-content>
</ion-refresher>
<ion-list *ngIf="items.length > 0">
<ion-item *ngFor="let item of items">
<div class="item">
<div class="item-header">
<div class="item-header-style">
<!-- <ion-icon name="md-contact" class="icon"></ion-icon> -->
<img src="./assets/imgs/icon-tj.png" class="icon" *ngIf="item.activityType==1">
<img src="./assets/imgs/icon-ly.png" class="icon" *ngIf="item.activityType==2">
<img src="./assets/imgs/icon-px.png" class="icon" *ngIf="item.activityType==3">
<img src="./assets/imgs/icon-gh.png" class="icon" *ngIf="item.activityType==4">
<span class="item-title">{{item.activityName}}</span>
</div>
<ng-container *ngIf="item.activityNo == 1">
<button ion-button round class="btn btn3">不参加</button>
</ng-container>
<ng-container *ngIf="item.activityNo == 0">
<button ion-button round class="btn btn1" *ngIf="item.activityState==2 && item.orderList.length == 0 ">可报名</button>
<button ion-button round class="btn btn2" *ngIf="item.activityState==2 && item.orderList.length > 0 ">已报名</button>
</ng-container>
</div>
<div class="content-box" (click)="goDetail(item)">
<div class="content-item-box">
<label class="left-title">活动类型:</label>
<div class="data">{{activityType[item.activityType]}}</div>
</div>
<div class="content-item-box">
<label class="left-title">活动说明:</label>
<div class="data data-1">
{{item.activityIntro}}
</div>
</div>
</div>
<div class="content-button">
<span>最新批次:</span>
<span *ngIf="item.recent_batch">{{item.recent_batch.batchName}}</span>
<span *ngIf="!item.recent_batch">暂无</span>
</div>
<!--<button class="sign-up" *ngIf="item.activityState==2 && item.orderList.length>0 " (click)="goDetail(item);$event.stopPropagation();">查看</button>-->
<!--<button class="sign-up" *ngIf="item.activityState==2 && item.orderList.length==0 " (click)="goApply(item);$event.stopPropagation();">报名</button>-->
</div>
</ion-item>
</ion-list>
<ion-list text-center style="margin-top: 10rem" *ngIf="items.length == 0">
<img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
<p text-center>
暂无数据
</p>
</ion-list>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import {ActivityListPage} from "./activityList";
const routes: Routes = [
{
path: '',
component: ActivityListPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ActivityListPage]
})
export class ActivityListModule {}
page-activityList {
.item-ios .item-button{
height: 2rem;
}
.searchToolBar{
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
box-sizing: border-box;
}
.item-header{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.item-header-style{
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
box-sizing: border-box;
}
.item-title{
font-size: 1.6rem;
}
.icon{
width: 2rem;
height: 2rem;
margin-right: 5px;
}
.btn{
background-color: white;
margin: 0 0;
font-size: 6px;
border-radius: 3px;
}
.btn1{
border: 1px solid #de6461;
color: #de6461;
}
.btn2{
border: 1px solid #19b5ff;
color: #19b5ff;
}
.btn3{
border: 1px solid #dddddd;
color: #dddddd;
}
// .item-content{
// display: flex;
// flex-direction: row;
// align-items: flex-end;
// justify-content: space-between;
// box-sizing: border-box;
// }
// .left{
// color: #cccccc;
// font-size: 8px;
// // height: 70px;
// display: inline-block;
// margin-left: 20px;
// }
.content-box{
padding-left: 25px;
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #dddddd;
}
.content-item-box{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: left;
box-sizing: border-box;
margin: 2px 0;
font-size: 1.4rem;
}
.left-title{
color: #8b8c8d;
font-size: 14px;
}
.data{
color: #666666;
font-size: 14px;
}
.data-1{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //文本行数
overflow: hidden;
white-space: normal;
}
.sign-up{
background-color: #4a89fa;
height: 27px;
width: 70px;
border-radius: 2px;
color: white;
float: right;
}
.back-btn{
width: 30px;
height: 30px;
}
.content-button{
font-size: 14px;
}
.content-button span:first-child{
color: #333;
}
.content-button span:last-child{
color: #999;
}
.list-ios .item-block .item-inner{
border: none;
}
.content-ios{
background-color: #e7e8ed;
}
.item-ios + .item-ios{
margin-top: 10px;
}
}
import { Component } from '@angular/core';
import {Router,ActivatedRoute} from "@angular/router";
import { Http,Response } from '@angular/http';
import {ActivityDetailPage} from "../activityDetail/activityDetail";
import {AppService} from "../../../../../http/http.service";
import {TabsService} from "../../../../tabs/tabs.service";
import {CommonService} from "../../../../../provide/common.service";
@Component({
selector: 'page-activityList',
templateUrl: 'activityList.html',
})
export class ActivityListPage {
items = [];
activityType:Array<String> = ['未知','体检','疗休养','培训','工会活动'];
constructor(public router: Router,
public routeIinfo: ActivatedRoute,
public commonSer:CommonService,
public http: Http,public tabSer:TabsService,
public appService: AppService) {
}
//初始化显示活动列表
ionViewDidEnter(): void {
this.getActivityList();
this.addRecodings();
}
getActivityList(){
this.appService.ObserverHttpPost("/wisdomgroup/modules/activity/findAllActivityForAppWithUsergroup",null)
.subscribe((res: Response) => {
let data = res.json();
this.items =data;
}, error => {
}
);
}
//查看详情
goDetail(item){
let id = item.id;
// this.navCtrl.push("ActivityDetailPage",{id:id});
}
doRefresh(refresher) {
setTimeout(() => {
this.getActivityList();
refresher.complete();
}, 2000);
}
goBack(){
// this.navCtrl.popToRoot();
}
//增加阅读记录
addRecodings(){
this.tabSer.activityAddRecodings().subscribe(
(res)=>{
this.commonSer.log("活动:增加阅读记录成功")
}
)
}
}
<ion-header>
<ion-navbar>
<ion-title>{{batch.batchName}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-slides #contentSlides class="height-190" (ionSlideDidChange)="slideChanged()" >
<ion-slide>
<ion-content direction="y" scrollbar-y="true">
<div class="content">
<div class="sign-info" *ngIf="batch.order">
<p class="info-title">报名信息</p>
<div class="content-item">
<p> <span>携带人数:</span><span>{{order?.personnumber}}</span> </p>
<p> <span>报名备注:</span><span>{{order?.orderbz}}</span> </p>
</div>
</div>
<div class="batch-info">
<div class="content-item">
<p> <span>报名截止:</span><span>{{this.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> <br>
<span [innerHtml]='batch.batchNotice' ></span>
</p>
</div>
</div>
<div class="content-button">
<div class="button-left">报名人数<span class="color-24bafc margin-left-15">{{batch.hasSignUpCount}}/{{batch.batchLimitNumber}}</span></div>
<div class="button-right" >
<!--是否报名了>时间是否截止->人数是否满了->-->
<ng-container *ngIf="batch.order">
<span *ngIf="batch.order.orderstate == 1" class="button-btn button-btn2" (click)="sureCancelOrder()">取消报名</span>
<span *ngIf="batch.order.orderstate == 2" class="button-btn button-btn1" (click)="reelectBatch()">订单确认</span>
</ng-container>
<ng-container *ngIf="!batch.order">
<!--时间截止-->
<ng-container *ngIf="batch.signUp">
<!--人数满-->
<ng-container *ngIf="batch.hasSignUpCount == batch.batchLimitNumber">
<span class="button-btn button-btn3">立即报名</span>
</ng-container>
<!--人数未满-->
<ng-container *ngIf="batch.hasSignUpCount < batch.batchLimitNumber">
<span (click)="goApply()" class="button-btn button-btn1">立即报名</span>
</ng-container>
</ng-container>
<ng-container *ngIf="!batch.signUp">
<span class="button-btn button-btn3">报名截止</span>
</ng-container>
</ng-container>
</div>
</div>
</div>
</ion-content>
</ion-slide>
</ion-slides>
</ion-content>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import {BatchDetailPage} from "./batch-detail";
const routes: Routes = [
{
path: '',
component: BatchDetailPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BatchDetailPage]
})
export class BatchDetailModule {}
page-batch-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: 6px;
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;
}
}
import {Component, ViewChild} from '@angular/core';
import {Response} from "@angular/http";
import {Router,ActivatedRoute} from "@angular/router";
import { DomSanitizer } from "@angular/platform-browser";
import {ActivityConfirmPage} from "../activityConfirm/activityConfirm";
import {AppService} from "../../../../../http/http.service";
import {CommonService} from "../../../../../provide/common.service";
declare var Swiper;
@Component({
selector: 'page-batch-detail',
templateUrl: 'batch-detail.html',
})
export class BatchDetailPage {
// @ViewChild('contentSlides') contentSlides: Slides;
batch={
batchEndDate:'',
signUp:true,
order:null,
batchName:'',
batchNotice:null
};
activity;
order = {
orderid:''
};
swiper;
swiperIndex = 0;
constructor(public router: Router, public routeInfo: ActivatedRoute,private commonSer:CommonService,
public appService:AppService, public sanitizer:DomSanitizer) {
}
ionViewDidLoad() {
this.routeInfo.queryParams.subscribe(queryParams=>{
this.batch = queryParams.batch;
let con = this.batch.batchNotice.replace(/\r?\n/g, "<br />");
this.batch.batchNotice = this.sanitizer.bypassSecurityTrustHtml(con);
if( this.batch.order ){
this.order = this.batch.order;
}
})
}
initSwiper(){
this.swiper = new Swiper('.pageMenuSlides .swiper-container', {
//设置slider容器能够同时显示的slides数量(
slidesPreView: 3,
//slide之间的距离(单位px)
spaceBetween: 0,
//断点设定:根据屏幕宽度设置某参数为不同的值
breakpoints: {
1024: {
slidesPerView: 3,
spaceBetween: 0
},
768: {
slidesPerView: 3,
spaceBetween: 0
},
640: {
slidesPerView: 3,
spaceBetween: 0
},
320: {
slidesPerView: 3,
spaceBetween: 0
}
}
});
}
selectPageMenu(index) {
this.swiperIndex = index;
//切换页面
// this.contentSlides.slideTo(index);
}
setStyle(index) {
}
slideChanged() {
//getActiveIndex()获得当前页面的index
// let index = this.contentSlides.getActiveIndex();
// this.setStyle(index);
//s切换菜单
// this.swiper.slideTo(index, 300);
}
//立即报名
goApply(){
// this.navCtrl.push('ActivityApplyPage',{
// activity:this.activity,
// item:this.batch
// });
}
//取消报名(订单)
sureCancelOrder(): void {
this.commonSer.alert('确定取消报名么?', res => {
this.cancelOrder();
});
}
//订单确认
reelectBatch(): void {
this.appService.ObserverHttpPost("/wisdomgroup/modules/order/findMyOrderByOrderId", {"orderid": this.order.orderid})
.subscribe((res: Response) => {
let data = res.json();
// this.navCtrl.push('ActivityConfirmPage',{activity:data.activity,order:data});
}, error => {
}
);
}
cancelOrder(): void {
const data = {
'id':this.batch.order.orderid +','
}
this.appService.ObserverHttpGetOption("/wisdomgroup/modules/order/deleteOrder", data)
.subscribe((res: Response) => {
//let data = res.json();
this.commonSer.alert('报名已取消!');
// this.navCtrl.pop();
}, error => {
}
);
}
}
<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">活动名称:{{activity?.activityName}}</p>
<div class="content-item">
<p>{{activity?.activityIntro}}</p>
</div>
</div>
<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?.orderbz}}</span></p>
</div>
</div>
<div class="batch-info">
<p class="info-title">批次:{{batch?.batchName}}</p>
<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?.batchSetTime}}</span></p>
<p><span>集合地点:</span><span>{{batch?.batchSetAddress}}</span></p>
<p><span>联络员:</span><span>{{batch?.liamand}}</span></p>
<p><span>联络电话:</span><span>{{batch?.liamantel}}</span></p>
<p><span>活动须知:</span><br>
<span [innerHtml]='batch.batchNotice' ></span>
</div>
</div>
<div class="content-button">
<div class="button-left">报名人数<span class="color-24bafc margin-left-15">{{batch?.hasSignUpCount}}/{{batch?.batchLimitNumber}}</span>
</div>
<div class="button-right">
<ng-container *ngIf="order.orderstate == '1'">
<span class="button-btn button-btn2" (click)="sureCancelOrder()">取消报名</span>
</ng-container>
<ng-container *ngIf="order.orderstate == '2'">
<span (click)="orderConform()" class="button-btn button-btn1">订单确认</span>
</ng-container>
</div>
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import {OrderDetailPage} from "./order-detail";
const routes: Routes = [
{
path: '',
component: OrderDetailPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [OrderDetailPage]
})
export class OrderDetailModule {}
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;
}
}
import {Component} from '@angular/core';
import {Response} from "@angular/http";
import {DomSanitizer} from "@angular/platform-browser";
import {AppService} from "../../../../../http/http.service";
import {Router,ActivatedRoute} from "@angular/router";
import {CommonService} from "../../../../../provide/common.service";
@Component({
selector: 'page-order-detail',
templateUrl: 'order-detail.html',
})
export class OrderDetailPage {
order = {
orderstate: '',
orderpjlevel: '',
orderid:''
}; //订单信息
activity = {
activityName: '',
activityIntro: ''
}; //活动
batch = {
batchNotice:<any>''
}; //批次
isCover = false;
isIntroduce = false;
constructor(public router: Router, public routeInfo: ActivatedRoute,
private commonSer:CommonService,
public appService: AppService ,public sanitizer: DomSanitizer) {
}
ionViewDidEnter() {
this.routeInfo.queryParams.subscribe(queryParams=>{
this.order = queryParams.item;
this.activity = queryParams.item.activity;
this.batch = queryParams.item.batch
let con = this.batch.batchNotice.replace(/\r?\n/g, "<br />");
this.batch.batchNotice = this.sanitizer.bypassSecurityTrustHtml(con);
})
}
//取消报名(订单)
sureCancelOrder(): void {
this.commonSer.alert('确定取消报名么?', res => {
this.cancelOrder();
});
}
cancelOrder(): void {
this.appService.ObserverHttpGetOption("/wisdomgroup/modules/order/deleteOrder", { "id": this.order.orderid })
.subscribe((res: Response) => {
this.commonSer.alert('报名已取消!');
// this.navCtrl.pop();
}, error => {
}
);
}
//订单确认
orderConform(){
// this.navCtrl.push('ActivityConfirmPage',{activity:this.activity,order:this.order});
}
hidden() {
this.isCover = false;
this.isIntroduce = false;
}
show() {
this.isCover = true;
this.isIntroduce = true;
}
}
<ion-header>
<ion-navbar>
<ion-title text-center>报名订单</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="content">
<ion-item class="content-title">
<span>活动名称</span>
<span float-right>{{activity?.activityName}}</span>
</ion-item>
<ion-item>
<ion-label>选择批次</ion-label>
<span float-right>{{submitOrder.Batchid}}</span>
</ion-item>
<ion-item class="margin-top-10">
<ion-label>报名用户</ion-label>
<span class="lettr-space-1" item-right>{{order?.username}}</span>
</ion-item>
<ion-item class="margin-top-10">
<span>携带人数</span>
<span class="com" float-right>
<button type="button" class="input_left" (tap)="next()">-</button>
<input type="text" readonly="readonly" [(ngModel)]='submitOrder.Personnumber' name="num" />
<button type="button" style="margin-left: -2px" class="input_right" (tap)="add()">+</button>
</span>
</ion-item>
<ion-item class="margin-top-10">
<ion-label>报名备注</ion-label>
<!--<ion-textarea [(ngModel)]="submitOrder.Orderbz" class="content-textarea"></ion-textarea>-->
</ion-item>
<button class="submit-btn submit" (click)="submit()">提交订单</button>
</ion-content>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import {OrderEditPage} from "./order-edit";
const routes: Routes = [
{
path: '',
component: OrderEditPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [OrderEditPage]
})
export class OrderEditModule {}
page-order-edit {
//新
.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: absolute;
bottom: 10px;
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;
}
}
.item-ios.item-block .item-inner{
margin-right: 16px;
border: none;
padding-left: 16px;
}
.content .item-ios.item-block:nth-child(5) .item-inner{
border: none;
}
.content-title{
padding: 0;
}
.content-title .item-inner{
padding-left: 16px;
margin: 0 !important;
}
.label-ios + ion-input .text-input, .label-ios + ion-textarea .text-input, .label-ios + .input + .cloned-input{
padding: 10px;
height: 100px;
border: 1px solid #ddd;
}
.submit{
margin-top: 20px;
border: 1px solid #34b4fc;
background-color: #34b4fc;
}
.com{
font-size: 0;
}
.com input{
font-size: 1.5rem;
height: 2rem;
width: 3rem;
vertical-align: bottom;
border: 1px solid #ddd;
text-align: center;
}
.com button{
height: 2rem;
width: 2rem;
}
.item-ios.item-block .item-inner {
border-bottom: 1px solid #c8c7cc;
}
}
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {Response} from "@angular/http";
import {AppService} from "../../../../../http/http.service";
@Component({
selector: 'page-order-edit',
templateUrl: 'order-edit.html',
})
export class OrderEditPage implements OnInit{
order; //订单信息
activity ; //活动
batch; //批次
batchList = [];
submitOrder = {
Orderid: '', //订单id
Personnumber: 0, //携带人数
Orderbz: '', //报名备注
Activityid: '', //关联活动id
Batchid: '', //关联批次id
orderbz_end:''
};
constructor(public router: Router, public routeInfo: ActivatedRoute,
public appService: AppService) {
}
ngOnInit() {
this.routeInfo.queryParams.subscribe(queryParams=>{
this.order = queryParams.item;
this.activity = queryParams.item.activity;
this.batch = queryParams.item.batch;
this.submitOrder.Batchid = this.order.batchid;
this.submitOrder.Orderbz = this.order.orderbz;
this.submitOrder.Personnumber = this.order.personnumber;
this.getAllBatch();
})
}
getAllBatch(){
this.appService.ObserverHttpGet("/wisdomgroup/modules/activity/findAllActivityForAppWithXQ", {"id":this.order.activityid})
.subscribe((res :Response) => {
this.batchList = res.json().batchList;
}, error => {
}
);
}
//携带人数 数字加减
add() {
if(this.submitOrder.Personnumber < this.batch.batchPerNumber){
this.submitOrder.Personnumber++;
}
}
next() {
if (this.submitOrder.Personnumber >= 1) {
this.submitOrder.Personnumber--;
}
}
submit(){
const data = {
Orderid: this.order.orderid, //订单id
Personnumber: this.submitOrder.Personnumber, //携带人数
Orderbz: this.submitOrder.Orderbz, //报名备注
Activityid: this.order.activityid, //关联活动id
Batchid: this.order.batchid, //关联批次id
orderbz_end:''
};
this.appService.ObserverHttpPost("/wisdomgroup/modules/order/reelectBatchForOrder", data)
.subscribe((res: Response) => {
if (true) {
setTimeout(() => {
// this.navCtrl.setRoot("MyActivityListPage");
// this.navCtrl.push("MyActivityListPage");
}, 1000);
} else {
}
}, error => {
}
);
}
}
...@@ -11,6 +11,7 @@ export class HomePage implements OnInit { ...@@ -11,6 +11,7 @@ export class HomePage implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
console.log('ngOnInit')
} }
} }
This diff is collapsed.
...@@ -89,7 +89,7 @@ export class CommonService{ ...@@ -89,7 +89,7 @@ export class CommonService{
} }
/** /**
* 下载文件 * 预览文件文件
* @param url 文件URL * @param url 文件URL
*/ */
downloadFile(fileID,fileName) { downloadFile(fileID,fileName) {
......
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