tuition-付款信息列表页

Posted MR崔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tuition-付款信息列表页相关的知识,希望对你有一定的参考价值。

<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-付款信息列表页的主要内容,如果未能解决你的问题,请参考以下文章

Android 片段,在 TabHost 中找不到 id 的视图

tuition-

tuition-main.js

电商 APP 下单页(俗称车2) 业务流程概要设计

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

VSCode插件开发全攻略代码片段设置自定义欢迎页