<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"></text><text v-else class="i iconfont"></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>