hlm_pl_mall_h5/pages/member/invoice/InvoiceList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false" ><view class="div container">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="发票管理" class="common-header" left-icon="back" @clickLeft="goBack()">
				<view v-if="isFromCheckout" class="div common-btn btn" slot="right"  @click="useInvoice(false)">不使用发票</view>
            </uni-nav-bar>
        </view>
        </view>
        <view class="div pb-30" v-if="invoice_list.length>0">
            <view class="div" v-for="item in invoice_list" :key="item.invoice_id">
                <view class="div invoice-item">
                    <view class="div top-wrapper">
                        <view class="div" v-if="item.invoice_state == 1">
                            <view class="div title-wrapper">
                                <label class="title" style="margin-left:0">普通发票</label>
                                <label class="title" >{{ item.invoice_title }}</label>
                            </view>
                            <view class="div desc address-text">{{item.invoice_code}}</view>
                        </view>
                        <view class="div" v-else>
                            <view class="div title-wrapper">
                                <label class="title">增值税发票</label>
                                <label class="title" >{{ item.invoice_company }}</label>
                            </view>
                            <view class="div desc address-text">{{item.invoice_company_code}}</view>
                        </view>
                        <view class="div bottom-line"></view>
                    </view>
                    <view class="div bottom-wrapper">
                        <view class="div bottom-left-wrapper" v-if="isFromCheckout">
                            <label class="subtitle" @click="useInvoice(item)">
                                <text v-if="invoice_id == item.invoice_id" class="i iconfont">&#xe69d;</text><text v-else class="i iconfont">&#xe69e;</text>使用
                            </label>
                        </view>
                        <view class="div bottom-right-wrapper">
                            <view class="div common-btn btn-2 mr-5" @click="onEdit(item.invoice_id)">编辑</view>
                            <view class="div common-btn btn-1" @click="onDelete(item.invoice_id)">删除</view>
                        </view>

                    </view>
                </view>
            </view>

        </view>
        <view class="div"  v-else>
            <empty-record></empty-record>
        </view>
		<view class='common-add-btn-wrapper'><view class="div common-btn common-add-btn"  @click="goAdd">新增</view></view>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import { getInvoiceList, delInvoice } from '../../../api/memberInvoice'
import EmptyRecord from '../../EmptyRecord'
export default {
  name: 'InvoiceList',
  components:{
    TitleHeader,
    MemberBase,
    EmptyRecord
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
    navHeight: 0,
    params:{},
      vat_deny: false,
      isFromCheckout: false,
      invoice_id: 0,
      invoice_list: []
    }
  },
  onLoad: function (option) {
  this.params=option.params
  this.vat_deny=option.vat_deny ? option.vat_deny : false
      this.isFromCheckout=option.isFromCheckout ? option.isFromCheckout : false
      this.invoice_id=option.invoice_id ? option.invoice_id : 0
  },
  onShow: function (option) {
    this.getInvoiceList()
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    goAdd () {
      uni.navigateTo({ url: '/pages/member/invoice/InvoiceForm'+'?'+urlencode( { action: 'add' } )})
    },
    useInvoice (item) {
      let query = JSON.parse(this.params)
      if (item == false) {
        query.invoice_id = 0
        query.invoice_content = '不需要发票'
      } else {
        let content = ''
        if (this.vat_deny) {
          if (item.invoice_state == 2) {
            uni.showToast({icon:'none',title: '订单商品不支持增值税发票'})
            return
          }
        }
        if (item.invoice_state == 2) {
          // content = '增值税发票 ' + item.invoice_company + ' ' + item.invoice_company_code + ' ' + item.invoice_reg_addr
          content = item.invoice_company
        } else {
          // content = '普通发票 ' + item.invoice_title + ' ' + item.invoice_code + ' ' + item.invoice_content
          content = item.invoice_title
        }
        query.invoice_id = item.invoice_id
        query.invoice_content = content
      }
      uni.navigateTo({ url: '/pages/member/buy/step1'+'?'+urlencode( query )})
    },
    onEdit (invoiceId) {
      uni.navigateTo({ url: '/pages/member/invoice/InvoiceForm'+'?'+urlencode( { invoice_id: invoiceId } )})
    },
    onDelete (invoiceId) {
      uni.showLoading({ title: '加载中' })
      delInvoice(invoiceId).then(
        (response) => {
          this.getInvoiceList()
          uni.hideLoading()
        }, (error) => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        })
    },
    getInvoiceList () {
      getInvoiceList().then(res => {
        this.invoice_list = res.result.invoice_list
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>
<style scoped lang="scss">
    .container{}
    .common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .invoice-item{background: #fff;padding:0 $pageSpace;margin-bottom:$modelSpace}
    .btn-1{border:1px solid $primaryColor;color:$primaryColor;min-width: 2rem}
    .btn-2{border:1px solid #333;color:#333;min-width: 2rem}
    .bottom{position:absolute;padding:.5rem $pageSpace;bottom:0;left:0;width:100%;box-sizing: border-box;background: #fff}
    .bottom-holder{height: 3rem;}
    .top-wrapper {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }
    .title-wrapper {
        height: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: 1rem;
    }
    .title {
        font-size:$h3;
        color: #333;
        margin-left: 0.5rem;
        font-weight: 700;
    }
    .desc {
        color: $descTextColor;
        font-size:$subFontSize;
    }
    .address-text {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
    .bottom-line {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        border-bottom:1px dashed #eee
    }
    .bottom-wrapper {
        height: 2.5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        align-items: center;
    }
    .bottom-left-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .bottom-right-wrapper {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
    }
    .edit-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .delete-wrapper {
        margin-right: 0.5rem;
    }
    .subtitle {
        font-size:$subFontSize;
        color: $descTextColor;
    }
    .subtitle .i{font-size:$h2;margin-right:.5rem;}
</style>