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>