Client-Teapay/src/pagesB/invoice/invoiceList.vue

<template>
  <div class="iApp">
    <div class="log_list" v-if="list.length">
      <div class="list_box" v-for="(item, index) of list" :key="index" @click="toDetail(item.fpqqlsh)">
        <div class="list_item">
            <div class="p1 flex_r flex_jb c05">
              <span>状态：{{ typeStatus(item.status) }}</span>
              <span>{{item.create_time}}</span>
            </div>
            <div class="p2 flex_r flex_jb">
                <div class="tit ellipsis">电子发票</div>
                <span class="money">金额{{ item.money}}</span>
            </div>
        </div>
      </div>
    </div>
    <div class="zanwu" v-else>
      <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/5a3c6b1e2d098aa6695394c927c38586545188b8png" alt="" class="zanwuimg">
      <view class="zanwutxt">暂无开票历史</view>
    </div>
  </div>
</template>
<script>
import { post } from "@/request/api.js";
export default {
  name: "iApp",
  components: {},
  data() {
    return {
      list: [],
      page: 1,
      rows: 10,
      selectedId: [],
      selectedLi: [],
      height: undefined,
      trueTotal: 0,
      money: 0,
    };
  },
  onLoad(option) {
    let res = uni.getSystemInfoAsync()
    this.height = res.windowHeight * 2 - 150 + "rpx";
    this.getList();
  },
  onLaunch() {},
  onShow() {},
  onHide() {},
  //页面上拉触底事件的处理函数
  onReachBottom() {
    if (this.page != -1) {
      var that = this;
      setTimeout(function () {
        that.page++;
        that.getList();
      }, 800);
    }
  },
  methods: {
    getList() {
      let data = {
        page: this.page,
        rows: this.rows,
      };
      post("v1/invoice/myInvoice", data).then((res) => {
        if (res.code == 0) {
          this.list = this.list.concat(res.data.data);
          this.total = res.data.total;
          if (Math.ceil(this.total / this.rows) <= this.page) {
            this.page = -1;
          }
        }
      });
    },
    toDetail(id){
      this.goto("/pagesB/invoice/Billingresult",{id : id});
    },
  },
  computed: {
    typeStatus(){
      return (da) => {
        let str;
        if (da === 1) str = "已开票";
        if (da === 2) str = "开票失败";
        if (da === 4) str = "红冲发票";
        if (da === 5) str = "开票中";
        if (da === 6) str = "发票作废";
        return str;
      };
    }
  },
  watch: {

  },
};
</script>
<style scoped lang='scss'>
.iApp {
  min-height: 100vh;
  background: #fff;
  .log_list {
    padding: 32rpx 32rpx;
    overflow: scroll;
    .log_title {
      line-height: 40rpx;
      margin-bottom: 20rpx;

      .tit {
        font-size: 36rpx;
        font-weight: bold;

        .log_num {
          font-size: 28rpx;
          margin-left: 10rpx;
        }

        .active {
          border-bottom: 4rpx solid #3a88ff;
        }
      }

      .mor {
        font-size: 24rpx;
        color: rgba($color: #000, $alpha: 0.5);

        .icofont {
          font-size: 22rpx;
        }
      }
    }

    .list_box {
      margin-top: 20rpx;
      .list_item {
        background: #fff;
        padding: 32rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        border: 1px solid #ddd;
        .list_item_l {
          width: 68rpx;
          // text-align: center;
          .iconfont {
            font-size: 36rpx;
          }
        }
        .list_item_r {
          width: calc(100% - 68rpx);
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      .p1 {
        font-size: 25rpx;
        margin-bottom: 20rpx;
      }

      .p2 {
        .odr_img {
          object-fit: cover;
          width: 120rpx;
          height: 112rpx;
        }

        .odr_info {
          width: calc(100% - 120rpx - 20rpx);
          font-size: 24rpx;
          color: rgba($color: #000, $alpha: 0.5);

          .tit {
            color: rgba($color: #000, $alpha: 0.9);
          }
        }
      }
    }
  }

  .bottom {
    flex: 0 0 100rpx;
    // background-color: red;
    border-top: 1px solid #ddd;
    height: 100rpx;
    width: 100%;
    z-index: 999;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 32rpx;
    .left {
      display: flex;
      flex-direction: row;
      .green {
        color: #2db389;
        margin: 0 6rpx;
      }
    }
    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      .button {
        padding: 10rpx 20rpx;
        background-color: #2db389;
        border-radius: 10rpx;
        span {
          color: #fff;
        }
      }
    }
  }

  .money{
    color:#2db389;
  }
}
</style>