tuition-

<template>
  <div id="homePage">
      <div>
        <group>
          <popup-picker title="学校名称" @on-change="changeSchool" :data="schoolList" v-model="schoolName" placeholder="请选择">
          </popup-picker>
          <popup-picker title="班级" :data="classList" v-model="className" placeholder="请选择"></popup-picker>
          <x-input title="姓名" name="username" v-model="personInformation.name" placeholder="请输入姓名" is-type="china-name"></x-input>
          <popup-picker title="缴费金额" :data="moneyList" v-model="money" placeholder="请选择"></popup-picker>
          <x-input title="手机号" name="mobile" v-model="personInformation.phoneNumber" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile" class="weui-vcode">
            <x-button slot="right" type="primary" @click.native="sendCode" :disabled="disabledButton" mini>{{sendCodeMsg}} {{time}}</x-button>
          </x-input>
          <x-input title="验证码" v-model="personInformation.code"  keyboard="number"  placeholder="请输入" ></x-input>
        </group>
        <div class="submitBox">
          <flexbox>
            <flexbox-item :span="2">
            </flexbox-item>
            <flexbox-item :span="8">
              <x-button type="primary"  @click.native="submitContent">提交</x-button>
            </flexbox-item>
          </flexbox>
        </div>
        <div class="PaymentBox">
            <icon name="file" :scale="3"></icon>
            <span class="watchPayment" @click="goToPaymentRecords('/payRecord')">查看缴费记录</span>
        </div>  
      </div>
      <div >
      <alert v-model="alertShow" :title="alertTitle" >{{alertMsg}}</alert>
      </div>
  </div>
</template>

<script>
import { Group,PopupPicker, XInput,XButton,Flexbox,FlexboxItem,AlertPlugin,Alert  } from 'vux'

export default {
  components: {
    Group,
    PopupPicker,
    XInput,
    XButton,
    Flexbox,
    FlexboxItem,
    AlertPlugin,
    Alert 
  },
  data () {
    return {
      alertShow:false,
      alertTitle:"",
      alertMsg:'',
      disabledButton:false,
      sendCodeMsg:"发送验证码",
      schoolName: [],
      schoolList: [['鳌江七小', '鳌江十二小', '鳌江十一小', '鳌江实验', '鳌江四中', '鳌江五中', '鳌江一小',"平阳县小",
                    "钱仓前进","水头二小","水头实验","水头一小","榆垟中心校","昆阳实验"]],
      className:[],
      money:[],
      moneyList:[[0.01,0.02,0.03,50,100,200,300,500]],
      personInformation:{
        phoneNumber:"",
        name:'',
        code:'',
      },
      time:"",
    }
  },
    computed:{
        classList(){
            if(this.schoolName=="鳌江四中"){
                return [["七年级","八年级","九年级"],
                    ['一班', '二班', '三班', '四班', '五班', '六班', '七班',"八班","九班","十班"]]
            }else if(this.schoolName=="鳌江五中"){
                return [["七年级","八年级","九年级"],
                    ['一班', '二班', '三班', '四班', '五班', '六班', '七班',"八班","九班","十班","十一班","十二班"]]
            }else{
                return [['一年级', '二年级', '三年级','四年级', '五年级', '六年级'],
                       ['一班', '二班', '三班', '四班', '五班', '六班', '七班',"八班"]]
            }
        }
    },
  methods:{
     times(){
         var IntervalName= setInterval(() => {
             this.time--;
             if(this.time<1){
                 clearInterval(IntervalName);
                 this.disabledButton=false;
                 this.time='';
                 this.sendCodeMsg='发送验证码';
             }
         }, 1000)
    },
    changeSchool(){
        this.className=[];
     },
      goToPaymentRecords(path){
      this.$router.push({ path: path });
    },
    sendCode(){
        if(!this.personInformation.phoneNumber){
            this.alertTitle="手机号为空";
            this.alertMsg="请填写你的手机号";
            this.alertShow=true;
            return;
        }
      this.disabledButton=true;
      this.time=30;
        this.$vux.loading.show({
            text: '加载中'
        })
      this.$http.post('/tuition/tuition-order/send-message',{mobile:this.personInformation.phoneNumber}).then((res) =>{
          this.$vux.loading.hide();
          this.sendCodeMsg="发送成功";
          this.times();
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.show({
                text: '发送验证码错误:网络出现问题',
                type: 'cancel'
            });
          this.disabledButton=false;
          this.time="";
        })
    },
    submitContent(){
      if(this.schoolName.length==0||this.className.length==0||this.money.length==0||
      !this.personInformation.phoneNumber||!this.personInformation.name||!this.personInformation.code){
          this.alertTitle="信息不完整";
          this.alertMsg="请完善你的相关信息";
          this.alertShow=true;
        return
      }
        this.$vux.loading.show({
            text: '加载中'
        })
        let postData = {
            phone:this.personInformation.phoneNumber,
            money:this.money[0],
            user_name:this.personInformation.name,
            class_name:this.className[1],
            grade_name:this.className[0],
            school_name:this.schoolName[0],
            code:this.personInformation.code
        }
      this.$http.post('/tuition/tuition-order/create-tuition-order',postData).then((res) =>{
          this.$vux.loading.hide();
          let order_id=res.data.data.order_id;
          if(res.data.status==1){
              this.$router.push({ path: '/confirmOrder?'+order_id });//把orderID传到下一个页面
          }else{
              this.alertTitle="提交失败";
              this.alertMsg=res.data.message;
              this.alertShow=true;
          }
        }).catch((error) => {
          this.$vux.loading.hide();
            this.$vux.toast.show({
                text: '提交错误:网络出现问题',
                type: 'cancel'
            });
        })
    }
  }
}
</script>

<style>
html,body{
  background:#f2f2f2;
}
.submitBox{
  margin-top:30px;
  margin-bottom:20px;
}
#homePage .weui-cell{
padding:15px;
}
.PaymentBox{
  color:#613c3c;
  text-align: center;
}
.watchPayment{
  position: relative;
  top:-5px;
  cursor: pointer;
}
</style>