chooseAddress.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,  Content, Slides } from 'ionic-angular';
import {  Response } from '@angular/http';
import { Storage } from '@ionic/storage';
import { AppService } from '../../../../service/http.service';

import {OutGoingReportDetailPage} from "../outGoingReportDetail/outGoingReportDetail";

declare var Swiper;
@IonicPage()
@Component({
  selector: 'page-chooseAddress',
  templateUrl: 'chooseAddress.html'
})

export class ChooseAddressPage {
  swiper: any;

    changeType = 1;

  //ViewChild传入一个字符串contentSlides，变量contentSlides接收。其它不变  
  @ViewChild('contentSlides') contentSlides: Slides;
  @ViewChild('content1') content1: Content;
  @ViewChild('content2') content2: Content;
  menus: Array<string> = ['国内', '国际/港澳台'];

  searchValue: string;
  currentIndex:number = 0;
  //国内
  areaAll = [];
  //国外
  outerAreaAll: Array<String>[][];
  //搜索
  searchAreaAll: Array<String>[][];

    selectIndex;
    cityInList;
    cityOutList;

  isSearch:boolean =  false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public appService: AppService,
    public storage:Storage
  ) {


  }

  //当页面加载的时候触发，只触发一次，当有缓存的的时候，打开页面时不在加载  
  ionViewDidLoad() {
    this.initSwiper();
    this.initAreaList();
    this.initOuterAreaList();
  }
  //初始化swiper  
  initSwiper() {
    this.swiper = new Swiper('.pageMenuSlides .swiper-container', {
      //设置slider容器能够同时显示的slides数量(  
      slidesPreView: 2,
      //slide之间的距离（单位px）  
      spaceBetween: 0,
      //断点设定：根据屏幕宽度设置某参数为不同的值  
      breakpoints: {
        1024: {
          slidesPerView: 2,
          spaceBetween: 0
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 0
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 0
        },
        320: {
          slidesPerView: 2,
          spaceBetween: 0
        }
      }
    });
  }

  //选择菜单  
  selectPageMenu(index) {
    this.setStyle(index);
    //切换页面  
    this.contentSlides.slideTo(index);
  }
  //选择菜单之后设置菜单样式  
  setStyle(index) {
    //得到菜单的个数  
    var slides = document.getElementsByClassName('pageMenuSlides')[0].getElementsByClassName('swiper-slide');
    //给所有的菜单都设置上swiper-slide样式  
    if (index < slides.length) {
      for (var i = 0; i < slides.length; i++) {
        var s = slides[i];
        s.className = "swiper-slide";
      }
      //给当前菜单设置成这个样式  
      slides[index].className = "swiper-slide bottomLine";
    }
  }

  slideChanged() {
    //getActiveIndex()获得当前页面的index
    let index = this.contentSlides.getActiveIndex();
    this.currentIndex = index;
    this.setStyle(index);
    //s切换菜单
  }

  //清除搜索关键字
  clearValue() {
    this.searchValue = "";
    this.isSearch = false;
  }

  //滑动定位
  scrollTop(id) {
    //动态拼接组件id
    // var el = document.getElementById(id+this.currentIndex);
    // var top = el.getBoundingClientRect().top;
    // // var height = el.getBoundingClientRect().height;
    // if(this.currentIndex==0){
    //   this.content1.scrollTo(0, top, 1000);
    // }else if(this.currentIndex==1){
    //   this.content2.scrollTo(0, top, 1000);
    // }

    document.querySelector("#"+id+this.currentIndex).scrollIntoView(true);  
  }

  //初始化列表
  initAreaList(): void {
      const data = {
          'inorout':'1'
      };
    this.appService.ObserverHttpGetOption("/wisdomgroup/area/area/getProvince",data)
      .subscribe((res: Response) => {
          let data = res.json();
          this.areaAll = data;
          //this.appService.alert(JSON.stringify(this.areaAll));
          
        }, error => {        
        }
      );
  }
  

  initOuterAreaList(): void {
      const data = {
          'inorout':'2'
      };
      this.appService.ObserverHttpGetOption("/wisdomgroup/area/area/getProvince",data)
          .subscribe((res: Response) => {
                  let data = res.json();
                  this.outerAreaAll = data;

              }, error => {
              }
          );
  }

  //选择城市
  selectedCity(city):void{
     this.selectIndex = null;
      this.storage.set("city",city);
      this.navCtrl.push("OutGoingReportDetailPage");

  }

   //搜索地址
   searchAddress() {
      if(this.searchValue == null || this.searchValue == ''){
          this.isSearch = false;
          return false;
      }
      let cityName =  encodeURIComponent(this.searchValue) ;
      this.appService.ObserverHttpPost("/wisdomgroup/area/area/getAreaByCityName",{cityName:cityName})
        .subscribe((res: Response) => {
            let data = res.json();
            //this.areaAll = [];
            //this.outerAreaAll = [];
            this.isSearch = true;
            this.searchAreaAll = data;        
          }, error => {        
          }
        );

    }

//国内
    selectIn(item,index){
      this.selectIndex = index;
      const data = {
          'parentId':item.id
      };
        this.appService.ObserverHttpGetOption('/wisdomgroup/area/area/getCityByParentId',data).subscribe(
            (res:Response)=>{
                this.cityInList = res.json();
            }
        )
    }

    //国外
    selectOut(item,index){
        this.selectIndex = index;
        const data = {
            'parentId':item.id
        };
        this.appService.ObserverHttpGetOption('/wisdomgroup/area/area/getCityByParentId',data).subscribe(
            (res:Response)=>{
                this.cityOutList = res.json();
            }
        )
    }


}