• 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>
  • 相关阅读:
    Linux命令权限 用户权限 组权限 文件、目录权限
    Linux基础命令
    Linux之centos7 VMware安装教程
    Python 输入输出 数据类型 变量
    操作系统和网络基础
    python之禅
    【Linux】Linux 在线安装yum
    【Linux】TFTP & NFS 服务器配置
    【读书笔记】如何高效学习(Learn More ,Study Less)
    【Linux】Windows与Linux之间的文件共享(基于网络)
  • 原文地址:https://www.cnblogs.com/MR-cui/p/8479018.html
Copyright © 2020-2023  润新知