mall-web-ssr/pages/mobile/center/vendor/invoice/invoice_btob.vue

<template>
  <div>
    <div class="mobile-invoice-btob"  style="background: #f1f3f6" id="mobile-invoice-btob">
      <div class="switch-head" style="border:0">
        <div class="com-switch-head clearfix" style="line-height: 0.78rem">
          <div style="width: 33.3%" class="pull-left">
            <span style="margin: 0" class="com-switch-item inline-block"  @click="setSwitchType('apply')">待开票</span>
          </div>
          <div style="width: 33.3%" class="pull-left">
            <span style="margin: 0" class="com-switch-item inline-block"  @click="setSwitchType('record')">已开票</span>
          </div>
          <div style="width: 33.3%" class="pull-left">
            <span style="margin: 0" class="com-switch-item inline-block active" >B2B</span>
          </div>
        </div>
      </div>
      <div class="search-content mi-search-content">
        <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="单据编号/客户名称/物料名称">
        <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
      </div>
      <div class="filter-wrapper">
        <base-filter
          v-for="filterOption in filterOptions"
          :key="filterOption.selectOption"
          :selectItems="filterOption.selectItems"
          :defaultVal="filterOption.defaultVal"
          :selectOption="filterOption.selectOption"
          @selectAction="onSelectAction"
          @valueAction="onValueAction"
          :title="filterOption.title">
        </base-filter>
      </div>
      <div class="invoice-btob-wrapper">
        <div  v-if="resourceList.content && resourceList.content.length > 0">
          <div class="invoice-btob-list" v-for="bill in resourceList.content" @click="lookItem(bill)" :key="bill.id">
            <div class="invoice-btob-list-top clearfix">
              <div class="fl">日期：<span>{{bill.date | time}}</span></div>
              <div class="fr">流水号：<a>{{bill.code}}</a></div>
            </div>
            <div class="invoice-btob-wrapper-title">
              {{bill.enterprise.enName}}
            </div>
            <div class="invoice-btob-wrapper-content" v-for="item in bill.items">
              <div><span>物料型号：</span>{{item.product.code}}</div>
              <div><span>物料名称：</span>{{item.product.title}}</div>
              <div><span>物料规格：</span>{{item.product.spec}}</div>
              <div><span>单价：</span>{{isUser ? '-' : bill.currency + ' '+ item.price}}</div>
              <div><span>税率：</span>{{item.taxrate || 0}}%</div>
              <div><span>发票数量：</span>{{item.qty || '-'}}</div>
              <div><span>金额：</span>{{isUser ? '-' : bill.currency + ' '+ item.apAmount}}</div>
              <div><span>税金：</span>{{isUser ? '-' : bill.currency + ' '+ item.taxAmount}}</div>
              <div><span>单据编号：</span>{{item.orderCode}}</div>
              <div><span>数量：</span>{{item.thisvoQty}}{{item.product.unit}}</div>
              <div><span>单据金额：</span>{{ isUser ? '-' : bill.currency + ' '+ item.amount}}</div>
            </div>
          </div>
        </div>
        <empty-status
          v-else
          :text="'暂无开票信息'"
          :showLink="false"
          ></empty-status>
      </div>
    </div>
    <pull-up :fixId="'mobile-invoice-btob'" :allPage="allPage" :page="filterParams.page" @pullUpAction="onPullUpAction"></pull-up>
    <modal-wrapper :showModal="showModal" :title="'发票详情'" @closeAction="showModal = false">
      <div class="btob_invoice_modal">
        <div class="btob_invoice_modal_title">
          <span>单据资料</span>
        </div>
        <div class="btob_invoice_modal_content">
          <div><span>客户名称：</span>{{modalObj.enterprise && modalObj.enterprise.enName}}</div>
          <div><span>单据编号：</span>{{modalObj.code}}</div>
          <div><span>单据编号：</span>{{modalObj.date | time}}</div>
          <div><span>录单人：</span>{{modalObj.recorder}}</div>
        </div>
        <div class="btob_invoice_modal_title">
          <span>财务结算</span>
        </div>
        <div class="btob_invoice_modal_content">
          <div><span>日期：</span>{{modalObj.date | time}}</div>
          <div><span>付款日期：</span>{{modalObj.paydate | time}}</div>
          <div><span>币别：</span>{{modalObj.currency}}</div>
          <div><span>汇率：</span>{{modalObj.rate}}</div>
          <div><span>账期：</span>{{modalObj.yearMouth}}</div>
          <div><span>应付总额：</span>{{isUser ? '-' : modalObj.apAmount}}</div>
          <div><span>付款金额：</span>{{isUser ? '-': (modalObj.payAmount || 0)}}</div>
          <div><span>税金合计：</span>{{isUser ? '-': (modalObj.taxSum || 0)}}</div>
          <div><span>付款方式：</span>{{modalObj.payments}}</div>
        </div>
        <div class="btob_invoice_modal_title">
          <span>明细清单</span>
        </div>
        <div class="btob_invoice_modal_content btob_invoice_modal_content2"  v-for="(item, index) in modalObj.items">
          <div><span>序号：</span>{{index + 1}}</div>
          <div><span>物料型号：</span>{{item.product.code}}</div>
          <div><span>物料名称：</span>{{item.product.title}}</div>
          <div><span>物料规格：</span>{{item.product.spec}}</div>
          <div><span>单位：</span>{{item.product.unit}}</div>
          <div><span>采购单号：</span>{{item.orderCode}}</div>
          <div><span>出入库单号：</span>{{item.pdinoutNo}}</div>
          <div><span>数量：</span>{{item.thisvoQty}}</div>
          <div><span>单价：</span>{{isUser?'-':item.price}}</div>
          <div><span>税率：</span>{{item.taxrate}}</div>
          <div><span>单据金额：</span>{{isUser?'-':item.amount}}</div>
          <div><span>本次开票数量：</span>{{item.qty}}</div>
          <div><span>本次开票金额：</span>{{isUser?'-':item.apAmount}}</div>
          <div><span>已开票数：</span>{{item.invoQty||'-'}}</div>
          <div><span>已转开票记录数：</span>{{item.yQty|| '-'}}</div>
        </div>
      </div>
    </modal-wrapper>
  </div>
</template>

<script>
  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
  import { PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    layout: 'mobile',
    middleware: 'authenticated',
    data() {
      return {
        resourceList: {},
        filterParams: {
          keyword: '',
          page: 1,
          count: 10
        },
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ],
        isUser: '', // 获取当前用户是否为普通用户
        modalObj: {}, // 详情页
        showModal: false
      }
    },
    created() {
      this.$http.get('/account/role/isUser').then(res => {
        this.isUser = res.data.isUser
      })
    },
    methods: {
      lookItem(bill) {
        this.showModal = true
        // let {data} = this.$http.get(`/sale/apBill/${id}/info`)
        this.modalObj = bill
      },
      onPullUpAction () {
        this.filterParams.page++
        this.setSelect(this.$selectObj.key, this.$selectObj.value, false)
      },
      setSwitchType(tp) {
        this.$router.push('/mobile/center/vendor/invoice?tp=' + tp)
      },
      onFilter() {
        this.filterParams.page = 1
        this.setSelect(this.$selectObj.key, this.$selectObj.value, true)
      },
      onSelectAction(selectObj) {
        this.$selectObj = selectObj
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      onValueAction(selectObj) {
        this.$selectObj = selectObj
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      async setSelect(...val) {
        let { data } = await this.$http.get('/sale/apBill/info/search', {
          params: {
            count: this.filterParams.count,
            page: this.filterParams.page,
            searchFilter: {'fromDate': val[1].fromDate, 'endDate': val[1].toDate, 'keyword': this.filterParams.keyword},
            sorting: {'date': 'desc'}
        }})
        this.resourceList.content = this.resourceList.content || []
        if (!val[2]) {
          this.resourceList.content.push(...data.content)
          data.content = this.resourceList.content
        } else {
          this.resourceList.content = []
        }
        this.resourceList = data
      }
    },
    computed: {
      allPage () {
        return this.resourceList.totalPage
      },
      isEmpty () {
        return this.resourceList.content.length === 0
      }
    },
    filters: {
      time: function (time) {
        if (typeof time === 'number') {
          if (!time) {
            return '无'
          } else {
            let d = new Date(time)
            let year = d.getFullYear()
            let month = d.getMonth() + 1
            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
            return year + '-' + month + '-' + day
          }
        }
      }
    },
    components: {
      ModalWrapper,
      BaseFilter,
      PullUp,
      EmptyStatus
    }
  }
</script>

<style lang="scss" scoped>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @import '~assets/scss/mobileInvoice';
  .com-switch-head .com-switch-item.active {
    border-bottom: 0.04rem solid #3f84f6;
  }
  .mobile-invoice-btob{
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    height: calc(100vh - 1.26rem - 0.98rem);
    overflow-y: auto;
    .search-content {
      padding: .24rem 0;
      text-align: center;
      background: #f1f3f6;
      input {
        width: 6.48rem;
        height: .58rem;
        line-height: .58rem;
        border-radius: .14rem;
        margin: 0 0 0 .11rem;
        font-size: .26rem;
        padding: 0 .71rem 0 .21rem;
        border: 1px solid #3f84f6;
      }
    }
  }
  .filter-wrapper{
    width: 7.1rem;
    margin: 0 auto 0.27rem;
    background: #fff;
    padding: 0.27rem 0.2rem;
    border-radius: 0.05rem;
  }
  .invoice-btob-wrapper {
    .invoice-btob-list {
      width: 7.1rem;
      margin: 0 auto 0.2rem;
      background: #FFFFFF;
      border-radius: 0.05rem;
      padding: 0 0.24rem;
      .invoice-btob-list-top {
        line-height: 0.91rem;
        border-bottom: 1px solid #D9D9D9;
        color: #666;
        font-size: 0.28rem;
        .fl span{
          color: #151515;
        }
      }
      .invoice-btob-wrapper-title {
        @include overFlowHidden();
        font-size: 0.28rem;
        color: #333333;
        line-height: 0.9rem;
      }
      .invoice-btob-wrapper-content {
        border-top: 1px solid #D9D9D9;
        @include overFlowHidden();
        padding-top: 0.15rem;
        font-size: 0.28rem;
        color: #151515;
        line-height: 0.5rem;
        padding-bottom: 0.15rem;
        span {
          color: #666666;
        }
      }
    }
  }
  .btob_invoice_modal {
    padding: 0 0.24rem;
    .btob_invoice_modal_title {
      line-height: 0.72rem;
      border-top:1px solid #D3D3D3;
      border-bottom:1px solid #D3D3D3;
      span {
        font-size: 0.28rem;
        color: #3F84F6;
        border-left: 0.06rem solid #3F84F6;
        padding-left: 0.15rem;
        height: 0.18rem;
      }
      &:nth-child(1) {
        border-top: 0px
      }
    }
    .btob_invoice_modal_content {
      @include overFlowHidden();
      padding-top: 0.15rem;
      font-size: 0.28rem;
      color: #151515;
      line-height: 0.5rem;
      padding-bottom: 0.15rem;
      span {
        color: #666666;
      }
      &.btob_invoice_modal_content2 {
        border-bottom:1px solid #D3D3D3;
        &:nth-last-of-type(1) {
          border-bottom: 0px
        }
      }
    }
  }
</style>