<template>
  <div>
      <div class="header-title">
        <span>繳費記錄</span>
      </div>
      <div v-if="orderList.length > 0" >
        <scroller lock-x height="430px"  >
           <div class="scrollerBox"> 
                <div class="box2"
 
 v-for="item in orderList">
                    <div class="recordTime">
                        <span>繳費時間</span>
                        <span class="recordTime_time">{{item.create_time}}</span>
                    </div>
                    <div class="recordContent"
 
>
                        <div class="recordContent_name">{{item.user_name}}</div>
                        <div>
                            <span class="recordContent_school">{{item.school_name}}</span>
                            <span>{{item.grade_name}}{{item.class_name}}</
 
span>
                        </div>
                    </div>
                    <div class="recordPaytype">
                        <span class="recordPaytype_payType" >{{item.status |payType}}</span>
                        <span>{{item.money |moneyChange}}</span>
                    </div>
                 </div>
            </div>
        </scroller>
      </div>
      <div v-if="orderList.length === 0" class="noPayMoney">
            <icon name="file" :scale="6"></icon>
            <div class="noPayMoney_distance">暫無繳費</div>
             <x-button type="primary" class="noPayMoney_distance"  @click.native="goToHomePage(‘/‘)" mini>去繳費</x-button>
      </div>
      <alert v-model="alertShow" title="信息獲取失敗" >{{alertMsg}}</alert>
  </div>
</template>

<script>
import {Scroller,XButton,AlertPlugin,Alert} from ‘vux‘

export default {
  name: ‘payRecord‘,
  components: {
    Scroller,XButton,AlertPlugin,Alert
  },
  data () {
    return {
        alertShow:false,
        alertMsg:‘‘,
        orderList:[],
    }
  },
  methods:{
      goToHomePage(path){
          this.$router.push({ path: path});
      },
      orderListInfo(){
          this.$vux.loading.show({
              text: ‘加載中‘
          })
          this.$http.post(‘/tuition/tuition-order/my-confirm-detail‘).then((result) =>{
              this.$vux.loading.hide();
              if(result.data.status==1){
                  this.orderList=result.data.data;
              }else{
                  this.alertShow=true;
                  this.alertMsg=result.data.message;
              }
          }).catch((error) => {
              this.$vux.loading.hide();
              this.$vux.toast.show({
                  text: ‘拉取信息失敗:網絡出現問題‘,
                  type: ‘cancel‘
              });
          })
      }
  },
    created(){
        this.orderListInfo();
    },
    filters: {
        payType: function (value) {
                if(value==0){
                    return "未繳費"
                }else if(value ==1){
                    return "已繳費"
                }else if(value==-1){
                    return "已取消"
                }
        },
        moneyChange(value){
            return value/100
        }
    }
}
</script>

<style >
.scrollerBox{
    background: #fff;
}
.header-title{
    font-size:18px;
    font-weight:bold;
    padding:15px 15px 8px 15px;
    border-bottom:3px solid #ccc;
}
.recordTime{
    position: relative;
    margin-top: 10px;
    padding:10px 0;
    color:#ccc;
    border-bottom:1px solid #ccc;
}
.recordContent,.recordPaytype{
        padding:15px 0;
    border-bottom:1px solid #ccc;
}
.recordPaytype_payType{
    color:red;
    padding-right:8px;
}
.recordContent_name{
    font-size:18px;
    font-weight: bold;
}
.recordContent_school{
    padding-right:25px;
}
.box2{
    padding:0 15px;
}
.recordTime_time{
    position: absolute;
    right:15px;
}

.noPayMoney{
    padding-top:50px;
    text-align: center;
}
.noPayMoney_distance{
    margin-bottom:15px;
    color:#613c3c;
}
</style>

<template>
  <div>
      <div class="header-title">
        <span>繳費記錄</span>
      </div>
      <div v-if="orderList.length > 0" >
        <scroller lock-x height="430px"  >
           <div class="scrollerBox"> 
                <div class="box2" v-for="item in orderList">
                    <div class="recordTime">
                        <span>繳費時間</span>
                        <span class="recordTime_time">{{item.create_time}}</span>
                    </div>
                    <div class="recordContent">
                        <div class="recordContent_name">{{item.user_name}}</div>
                        <div>
                            <span class="recordContent_school">{{item.school_name}}</span>
                            <span>{{item.grade_name}}{{item.class_name}}</span>
                        </div>
                    </div>
                    <div class="recordPaytype">
                        <span class="recordPaytype_payType" >{{item.status |payType}}</span>
                        <span>{{item.money |moneyChange}}</span>
                    </div>
                 </div>
            </div>
        </scroller>
      </div>
      <div v-if="orderList.length === 0" class="noPayMoney">
            <icon name="file" :scale="6"></icon>
            <div class="noPayMoney_distance">暫無繳費</div>
             <x-button type="primary" class="noPayMoney_distance"  @click.native="goToHomePage(‘/‘)" mini>去繳費</x-button>
      </div>
      <alert v-model="alertShow" title="信息獲取失敗" >{{alertMsg}}</alert>
  </div>
</template>

<script>
import {Scroller,XButton,AlertPlugin,Alert} from ‘vux‘

export default {
  name: ‘payRecord‘,
  components: {
    Scroller,XButton,AlertPlugin,Alert
  },
  data () {
    return {
        alertShow:false,
        alertMsg:‘‘,
        orderList:[],
    }
  },
  methods:{
      goToHomePage(path){
          this.$router.push({ path: path});
      },
      orderListInfo(){
          this.$vux.loading.show({
              text: ‘加載中‘
})
          this.$http.post(‘/tuition/tuition-order/my-confirm-detail‘).then((result) =>{
              this.$vux.loading.hide();
              if(result.data.status==1){
                  this.orderList=result.data.data;
              }else{
                  this.alertShow=true;
                  this.alertMsg=result.data.message;
              }
          }).catch((error) => {
              this.$vux.loading.hide();
              this.$vux.toast.show({
                  text: ‘拉取信息失敗:網絡出現問題‘,
                  type: ‘cancel‘
});
          })
      }
  },
    created(){
        this.orderListInfo();
    },
    filters: {
        payType: function (value) {
                if(value==0){
                    return "未繳費"
}else if(value ==1){
                    return "已繳費"
}else if(value==-1){
                    return "已取消"
}
        },
        moneyChange(value){
            return value/100
}
    }
}
</script>

<style >
.scrollerBox{
    background: #fff;
}
.header-title{
    font-size:18px;
    font-weight:bold;
    padding:15px 15px 8px 15px;
    border-bottom:3px solid #ccc;
}
.recordTime{
    position: relative;
    margin-top: 10px;
    padding:10px 0;
    color:#ccc;
    border-bottom:1px solid #ccc;
}
.recordContent,.recordPaytype{
        padding:15px 0;
    border-bottom:1px solid #ccc;
}
.recordPaytype_payType{
    color:red;
    padding-right:8px;
}
.recordContent_name{
    font-size:18px;
    font-weight: bold;
}
.recordContent_school{
    padding-right:25px;
}
.box2{
    padding:0 15px;
}
.recordTime_time{
    position: absolute;
    right:15px;
}

.noPayMoney{
    padding-top:50px;
    text-align: center;
}
.noPayMoney_distance{
    margin-bottom:15px;
    color:#613c3c;
}
</style>

tuition-付款信息列表頁