tuition-改进 (营养餐500元)=》500

Posted MR崔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tuition-改进 (营养餐500元)=》500相关的知识,希望对你有一定的参考价值。

<template>
  <div id="homePage">
      <div>
        <group>
          <popup-picker title="学校名称" @on-change="changeSchool" :data="schoolList" v-model="schoolName" placeholder="请选择">
          </popup-picker>
          <popup-picker title="班级" @on-change="changeClass" :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:[],
      personInformation:{
        phoneNumber:"",
        name:‘‘,
        code:‘‘,
      },
      time:"",
    }
  },
    computed:{
        classList(){
            if(this.schoolName=="鳌江四中"){
                return [["七年级","八年级","九年级"],
                    [一班, 二班, 三班, 四班, 五班, 六班, 七班,"八班","九班","十班"]]
            }else if(this.schoolName=="水头附幼"){
                return [["小班","中一","中二","大一","大二","大三","大四","大五"]]
            }else{
                return [[一年级, 二年级, 三年级,四年级, 五年级, 六年级],
                       [一班, 二班, 三班, 四班, 五班, 六班, 七班,"八班"]]
            }
        },
        moneyList(){
            if(this.schoolName==鳌江十一小){
                return [["营养餐500元"]]
            }else if(this.schoolName==鳌江四中){
                if(this.className[0]=="九年级"){
                    return [["2070元"]]
                }else{
                    return [["2250元"]]
                }
            }else if(this.schoolName==水头三小){
                return [["600元"]]
            }else if(this.schoolName==钱仓前进){
                return [["营养餐700元"]]
            }else if(this.schoolName==水头附幼){
                return [["1000元"]]
            }else if(this.schoolName==平阳县小){
                return [["1200元通学部","2100元日托部","2500元住宿部"]]
            }else {
                return [["1200元"]]
            }

        }
    },
  methods:{
     times(){
         var IntervalName= setInterval(() => {
             this.time--;
             if(this.time<1){
                 clearInterval(IntervalName);
                 this.disabledButton=false;
                 this.time=‘‘;
                 this.sendCodeMsg=发送验证码;
             }
         }, 1000)
    },
      changeClass(){
          this.money=[];
      },
    changeSchool(){
        this.className=[];
        this.money=[];
     },
      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: 加载中
        })
        var payMoney=this.money[0].replace(/[^0-9]/ig,"");
        let postData = {
            phone:this.personInformation.phoneNumber,
            money:payMoney,
            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 });
          }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>

 

以上是关于tuition-改进 (营养餐500元)=》500的主要内容,如果未能解决你的问题,请参考以下文章

阿里云优惠券 – 阿里云短信优惠券 满1000减50 满3000减150 满5000减250 满10000减500

tuition-

tuition-main.js

初识贪心----硬币支付问题

tuition-付款信息列表页

Java设计模式之享元模式