Client-Teapay/src/pagesB/my/assistant.vue

<template>
  <div class="iApp">
    <div class="log_list" v-if="list.length">
      <!-- <div class="history">
        <div class="btn" @click="toHistory">
          <span>开票历史</span>
        </div>
      </div> -->
      <div class="list_box" v-for="(item, index) of list" :key="index">
        <div class="list_item flex_r flex_jb">
          <checkbox-group
            class="list_item_l flex_c flex_jc"
            @change="checkboxChange($event, item)"
          >
            <label class="option_box mar_t30">
              <checkbox
                :value="item.order_sn"
                :checked="item.isclick"
                color="#2DB389"
                style="transform: scale(0.7)"
              />
            </label>
          </checkbox-group>
          <div class="list_item_r">
            <div class="p1 flex_r flex_jb c05">
              <span>订单号：{{ item.order_sn }}</span>
              <span>{{ $day(item.add_time * 1000).format("YYYY-MM-DD") }}</span>
            </div>
            <div class="p2 flex_r flex_jb">
              <img :src="item.original_img" class="odr_img" alt />
              <div class="odr_info flex_c flex_jb">
                <div class="tit ellipsis">{{ item.goods_name }}</div>
                <div class="num">数量 x{{ item.goods_num }}</div>
                <div class="money flex_r flex_jb">
                  <span>金额{{ item.order_amount }}</span>
                  <!-- <span>奖励茶宝36</span> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="zanwu" v-else>
      <img src="@/static/img/zanwu.png" alt="" class="zanwuimg">
      <view class="zanwutxt">暂无可开票订单</view>
    </div>
    <div class="bottom" v-if="list.length">
      <div class="left">
        <span>共</span>
        <span class="green">{{ trueTotal }}</span>
        <span>笔订单，合计</span>
        <span class="green">￥{{ money }}</span>
        <span>元</span>
      </div>
      <div class="right">
        <div class="button" @click="toEditinvoice">
          <span>下一步</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/request/api.js";
var app = getApp();
var appEv = app.$vm.$options;
export default {
  name: "iApp",
  components: {},
  data() {
    return {
      list: [],
      page: 1,
      rows: 10,
      selectedId: [],
      selectedLi: [],
      // height: undefined,
      trueTotal: 0,
      money: 0,
    };
  },
  onLoad(option) {
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        // that.height = res.windowHeight * 2 - 150 + "rpx";
        that.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/orderList", 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;
          }
        }
      });
    },
    checkboxChange(e, item) {
      this.trueTotal = 0;
      this.money = 0;
      if (item.isclick == true) {
        this.$set(item, "isclick", false);
      } else {
        this.$set(item, "isclick", true);
      }
      for (let i of this.list) {
        if (i.isclick) {
          this.trueTotal++;
          this.money = this.money + i.order_amount * 1;
        }
      }
    },
    toHistory() {
      this.goto("/pagesB/invoice/invoiceList");
    },
    toEditinvoice() {
      if (this.trueTotal == 0) {
        appEv.errTips("请先选择订单");
        return;
      }
      let list = [];
      for (let i of this.list) {
        if (i.isclick == true) {
          list.push(i.order_id);
        }
      }
      uni.navigateTo({
        url:
          "/pagesB/invoice/editinvoice?icheckList=" +
          list.toString() +
          "&money=" +
          this.money,
      });
      // this.goto("/pagesB/invoice/editinvoice",{checkList : list.toString(),money:this.money});
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang='scss'>
.iApp {
  min-height: 100vh;
  background: #fff;

  .log_list {
    padding: 0rpx 32rpx 100rpx;
    .history {
      display: flex;
      justify-content: flex-end;
      // background-color: red;
      align-items: center;
      margin-right: 30rpx;
      margin-top: 30rox;
      height: 100rpx;
      .btn {
        padding: 10rpx 20rpx;
        background-color: #2db389;
        border-radius: 10rpx;
        span {
          color: #fff;
        }
      }
    }
    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 {
    position: fixed;
    left: 0;bottom: 0;
    background: #fff;

    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;
        }
      }
    }
  }
}
</style>