<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>