345 lines
9.4 KiB
Vue
345 lines
9.4 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<div class="navBar">
|
|
<van-nav-bar
|
|
title="开票信息"
|
|
left-arrow
|
|
left-arrow-color="#FFFFFF"
|
|
:border="false"
|
|
:fixed="true"
|
|
:safe-area-inset-top="true"
|
|
@click-left="h5GoBack"
|
|
/>
|
|
</div>
|
|
<div class="contentWrap">
|
|
<div class="content_tab">
|
|
<div class="tab_title">批次信息</div>
|
|
<div class="tab_content">
|
|
<div class="item_wrap">
|
|
<div class="item_label">财务编号</div>
|
|
<div class="item_content">
|
|
<span id="copyText">{{invoiceInfo.financeBatchCode}}</span>
|
|
<img class="copyIcon" @click="copyHandler(invoiceInfo.financeBatchCode)" src="@/assets/copy.png" />
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">工单数量</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.orderNum}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">总金额</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.totalMoney}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">扣款</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.cutMoney || ''}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">税额扣款</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.taxCutMoney || ''}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">开票金额</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.invoiceMoney || ''}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">备注</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.remark || ''}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">失败原因</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.failRemark || ''}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">创建时间</div>
|
|
<div class="item_content">
|
|
{{invoiceInfo.createTime}}
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_label">对账状况</div>
|
|
<div class="item_content">
|
|
{{ statusStr(invoiceInfo.status, invoiceInfo.createTime) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content_tab mt10">
|
|
<div class="tab_title">发票信息</div>
|
|
<div class="itemWrap" v-for="(item,index) in invoiceList" :key="index">
|
|
<div class="item line1">
|
|
<div class="title own_title">{{item.accountName}}</div>
|
|
<div class="checkBtn" @click="goShowInvoice(item)">查看</div>
|
|
</div>
|
|
<div class="item">
|
|
<span class="title">发票号码:</span>
|
|
<span class="content">{{item.financeBatchCode}}</span>
|
|
</div>
|
|
<div class="item">
|
|
<span class="title">发票金额:</span>
|
|
<span class="content">￥{{item.invoiceMoney}}元</span>
|
|
</div>
|
|
<div class="item">
|
|
<span class="title">开票日期:</span>
|
|
<span class="content">{{ item.invoiceDate }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content_tab mt10">
|
|
<div class="tab_title">快递信息</div>
|
|
<div class="itemWrap bg_cls pd_cls">
|
|
<div class="item mb10">
|
|
<span class="title width_cls">发票类型:</span>
|
|
<span class="content">
|
|
<van-radio-group v-model="invoiceType" disabled direction="horizontal">
|
|
<van-radio :name="1" icon-size="16px">电子发票</van-radio>
|
|
<van-radio :name="2" icon-size="16px">纸质发票</van-radio>
|
|
</van-radio-group>
|
|
</span>
|
|
</div>
|
|
<div class="item">
|
|
<span class="title width_cls">补录快递单号:</span>
|
|
<span class="content" style="flex: 1">
|
|
<van-field v-model="courierNumber" label="" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="invoice_btn_wrap">
|
|
<div class="btn" @click="saveHandler">保存</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {myMixins} from "@/utils/myMixins"
|
|
import { financeInvoiceList, selectInvoiceDetailInfo, saveBatchCourierNumber } from "@/api/mine"
|
|
import {Dialog} from "vant";
|
|
export default {
|
|
name: "invoiceInfo",
|
|
mixins: [ myMixins ],
|
|
data() {
|
|
return {
|
|
invoiceInfo: {},
|
|
invoiceList: [],
|
|
invoiceType: '',
|
|
courierNumber: '',
|
|
id: ''
|
|
}
|
|
},
|
|
async mounted() {
|
|
let showItemInfo = localStorage.getItem('showItemInfo');
|
|
this.invoiceInfo = showItemInfo ? JSON.parse(showItemInfo) : {};
|
|
console.log('this.invoiceInfo', this.invoiceInfo)
|
|
this.invoiceType = this.invoiceInfo.invoiceType
|
|
this.id = this.$route.query.id;
|
|
await this.getInvoiceHandler()
|
|
},
|
|
methods: {
|
|
async saveHandler() {
|
|
await saveBatchCourierNumber({
|
|
invoiceBatchId: this.id,
|
|
courierNumber: this.courierNumber,
|
|
})
|
|
Dialog.alert({
|
|
title: '提示',
|
|
message: '操作成功!',
|
|
}).then(() => {
|
|
this.h5GoBack()
|
|
});
|
|
},
|
|
async goShowInvoice(item) {
|
|
let res = await selectInvoiceDetailInfo({
|
|
id: item.id
|
|
})
|
|
localStorage.setItem('invoiceDetail', JSON.stringify(res.data));
|
|
this.goPage('showInvoice')
|
|
},
|
|
statusStr(status,date) {
|
|
if(new Date('2024-01-01 00:00:00') > new Date(date)){
|
|
return ''
|
|
}
|
|
if( status == 1 ) {
|
|
return '待审核'
|
|
} else if( [2 ,3].includes(status)) {
|
|
return '审核通过'
|
|
} else if( status == 7 ) {
|
|
return '审核失败'
|
|
} else if( status == 4 ) {
|
|
return '已打款'
|
|
} else if( status == 8 ) {
|
|
return '打款中'
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
async getInvoiceHandler() {
|
|
let res = await financeInvoiceList({
|
|
current: 1,
|
|
pageSize: 1000,
|
|
total: 0,
|
|
pageNum: 1,
|
|
invoiceBatchId: this.id
|
|
});
|
|
this.invoiceList = res.data;
|
|
console.log('current', res)
|
|
},
|
|
copyHandler(copyText){
|
|
let inputNode = document.createElement('input') // 创建input
|
|
inputNode.value = copyText // 赋值给 input 值
|
|
document.body.appendChild(inputNode) // 插入进去
|
|
inputNode.select() // 选择对象
|
|
document.execCommand('Copy') // 原生调用执行浏览器复制命令
|
|
inputNode.className = 'oInput'
|
|
inputNode.style.display = 'none' // 隐藏
|
|
this.$toast('复制成功')
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/mixin.scss";
|
|
@import "@/styles/common.scss";
|
|
.wrap{
|
|
@include wh(100%,100%);
|
|
background-color: #F4F5F7;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.navBar{
|
|
margin-bottom: 46px;
|
|
}
|
|
|
|
.contentWrap{
|
|
.content_tab {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
padding: 15px 15px;
|
|
box-sizing: border-box;
|
|
.tab_title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.tab_content {
|
|
.item_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 26px;
|
|
font-size: 12px;
|
|
.item_label {
|
|
color: rgba(0,0,0,0.5);
|
|
margin-right: 5px;
|
|
width: 60px;
|
|
}
|
|
.item_content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.copyIcon {
|
|
width: 35px;
|
|
height: 15px;
|
|
margin-left: 10px
|
|
}
|
|
|
|
.itemWrap{
|
|
/*background: #FFFFFF;*/
|
|
background-color: #EBF2F7;
|
|
padding: 10px 20px;
|
|
border: 1px solid #EBF2F7;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
line-height: 26px;
|
|
@include flexBetween;
|
|
margin-bottom: 10px;
|
|
.line1{
|
|
width: 100%;
|
|
@include flexColBet;
|
|
.checkBtn{
|
|
@include bgFontColor(#FFFFFF,#354D93);
|
|
@include wh(48px,18px);
|
|
border-radius: 3px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.item{
|
|
display: flex;
|
|
@include fontWeightSize(400,12px);
|
|
span{
|
|
display: inline-block;
|
|
}
|
|
.title{
|
|
opacity: 0.5;
|
|
margin-right: 5px;
|
|
}
|
|
.own_title {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.mt10 {
|
|
margin-top: 10px;
|
|
}
|
|
.bg_cls {
|
|
background-color: #fff;
|
|
}
|
|
.pd_cls {
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
}
|
|
::v-deep .van-cell {
|
|
padding: 0;
|
|
border: 1px solid #EBF2F7;
|
|
}
|
|
.width_cls {
|
|
width: 80px;
|
|
}
|
|
.invoice_btn_wrap {
|
|
width: 100%;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
.btn {
|
|
width: 100%;
|
|
background-color: #2C395F;
|
|
color: #fff;
|
|
padding: 15px 0;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
.mb10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
::v-deep .van-radio__icon {
|
|
margin-right: 10px;
|
|
}
|
|
</style>
|