<template>
<view class="">
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">发票信息</block>
</cu-custom>
<view class="padding-top-sm">
<view
class="shadow-warp radius move-top bg-gray margin margin-top-0 margin-bottom-sm bg-white text-bold text-xl padding-lg ">
<view class="Invoicing-header">
<view class="Invoicing-header-text text-lg">开票信息</view>
</view>
<view class="Invoicing-box " :class="[showBoxsing ? 'showBox':'hidenBox']">
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
发票抬头:
</view>
<view class="Invoicing-box-list-text text-sm ">
{{InvoiceDetails.invoicName}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
税号:
</view>
<view class="Invoicing-box-list-text text-sm ">
{{InvoiceDetails.invoicTaxIdentiNumber}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
电子邮箱:
</view>
<view class="Invoicing-box-list-text text-df">
{{InvoiceDetails.invoicEmail}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
发票备注:
</view>
<view class="Invoicing-box-list-text text-df">
{{InvoiceDetails.remark}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
开票金额:
</view>
<view class="Invoicing-box-list-text text-df">
{{InvoiceDetails.invoicAmount}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
发票类型:
</view>
<view class="Invoicing-box-list-text text-df">
普通电子发票
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
抬头类型:
</view>
<view class="Invoicing-box-list-text text-df">
公司
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
公司地址:
</view>
<view class="Invoicing-box-list-text text-df">
{{InvoiceDetails.invoicAddress}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
电话号码:
</view>
<view class="Invoicing-box-list-text text-df">
{{InvoiceDetails.invoicTel}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
开户银行:
</view>
<view class="Invoicing-box-list-text text-df">
{{InvoiceDetails.invoicOpenBank}}
</view>
</view>
<view class="Invoicing-box-list solid-top padding-top-sm padding-bottom-sm">
<view class="Invoicing-box-list-title text-df">
银行账号:
</view>
<view class="Invoicing-box-list-text text-df">
{{InvoiceDetails.invoicBankNumber}}
</view>
</view>
</view>
<view class=" text-center text-lg padding-top-sm" @tap="showBoxsings" v-text="showText">
</view>
</view>
</view>
<view class="">
<view
class="shadow-warp radius bg-gray margin margin-top-20 margin-bottom-sm bg-white text-bold text-xl padding-lg">
<view class="Invoicing-header-text text-lg ">
订单编号
</view>
<view class="text-df padding-left-sm " @tap="onCopy(InvoiceDetails.orderSerialNumber)">
{{InvoiceDetails.orderSerialNumber}} <text class="cuIcon-copy padding-left-xs text-sm "></text>
</view>
<view class="Invoicing-header-text text-lg margin-top-lg ">
开票进度
</view>
<view class="text-df padding-sm" style="width: 100%;">
<u-time-line>
<u-time-line-item :class="{'showIcons':item.check === true}" v-for="(item,index) in numList"
:key='index'>
<template v-slot:content>
<view class="time_lineDispay">
<view class="u-order-desc margin-right-lg">{{item.name}}</view>
<view class="u-order-time ">{{item.time}}</view>
</view>
<view class="time_lineDispay margin-top-xs" v-if="item.errcheck == 1"
v-show='index == 3'>
<view class="u-order-desc text-xs margin-right-lg text-red light">24小时内未收到发票请与客服联系
</view>
</view>
<view class="time_lineDispay margin-top-xs" v-if="item.errcheck == -1"
v-show='index == 1'>
<view class="u-order-desc text-xs margin-right-lg "> <text
class="text-red text-xs ">原因:</text> {{item.errtext}}</view>
<view class="u-order-time text-blue text-xs" @tap="gotochanges">前往修改开票信息</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
<!-- <u-steps direction="column" :list="numList" :current="1" active-color="#FF0000"></u-steps> -->
</view>
</view>
</view>
</view>
</template>
<script>
import financelApi from '@/api/oil-finance.js'
export default {
data() {
return {
showText: '查看更多',
showBoxsing: false,
orderId: '',
numList: [{
name: '待申请',
time: '',
check: false,
}, {
name: '待审核',
time: '',
check: false,
errcheck: false
}, {
name: '待开票',
time: '',
check: false,
}, {
name: '待发件',
time: '',
check: false,
errcheck: 0,
errtext: ''
}],
InvoiceDetails: {
id: '', //主键id
orderSerialNumber: '', // 订单编号
invoicAmount: '', //开票金额
userName: '', //司机名
phone: '', //司机电话号码
invoicTel: '', //公司电话号码
siteName: '', //油站名
siteCode: '', //油站编码
auditMark: '', //审核状态
openInvoicMark: '', //开票状态
invoicEnclosure: '', //电子发票附件
remark: '', //开票备注
customerId: '', //司机id
auditRemark: '', //审核备注
invoicName: '', //发票抬头
invoicTaxIdentiNumber: '', //税号
openInvoicTime: '', //开票时间
invoicEmail: '', //接收邮件
invoicBankNumber: '', //银行账号
invoicOpenBank: '', //开户银行
invoicAddress: '', //公司地址
auditRecordTime: '', //开票申请时间
auditTime: '' //审核时间
}
}
},
onLoad(option) {
console.log(option)
this.orderId = option.orderId
this.getOrderInvoice()
},
methods: {
gotochanges() {
console.log(this.InvoiceDetails.invoicAmount)
uni.navigateTo({
url: "../orderInvoicing/orderInvoicing?orderId=" + this.orderId + '&&code=' + 2 +
'&&realAmount=' + this.InvoiceDetails.invoicAmount
})
},
showBoxsings() {
if (this.showBoxsing) {
this.showBoxsing = false
this.showText = '查看更多'
} else {
this.showText = '收回'
this.showBoxsing = true
}
},
onCopy(id) {
uni.setClipboardData({
data: id,
success: () => {
uni.showToast({
icon: 'none',
title: '订单号复制成功'
})
}
})
},
getOrderInvoice() { //获取发票详情
console.log('这里是传来的 orderId')
console.log(this.orderId)
financelApi.getRecordByOrderId(this.orderId).then((res) => {
console.log('这里的发票详情')
console.log(res)
let _that = this
if (res.data.auditMark == 1) {
console.log('审核通过')
this.timeLineStates(2)
_that.numList[0].name = '已申请'
_that.numList[1].name = '已审核'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
} else if (res.data.auditMark == -1) {
console.log('审核未通过')
_that.numList[0].name = '已申请'
_that.numList[1].name = '审核未通过'
_that.numList[0].time = res.data.auditRecordTime
console.log()
this.timeLineStates(2, res.data)
} else if (res.data.auditMark == 0) {
_that.numList[0].time = res.data.auditRecordTime
console.log('待审核')
_that.numList[0].name = '已申请'
_that.numList[1].name = '待审核'
this.timeLineStates(2)
}
if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED') {
_that.numList[0].name = '已申请'
_that.numList[2].name = '开票成功'
_that.numList[1].name = '已审核'
console.log(res)
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
_that.numList[2].time = res.data.openInvoicTime
this.timeLineStates(3)
} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'TO_INVOICED') {
_that.numList[0].name = '已申请'
_that.numList[2].name = '待开票'
_that.numList[1].name = '已审核'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
console.log('待开票')
this.timeLineStates(3)
} else if (res.data.auditMark == 1 && res.data.openInvoicMark === "INVOICING") {
_that.numList[0].name = '已申请'
_that.numList[2].name = '正在开票中'
_that.numList[1].name = '已审核'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
console.log('开票中')
this.timeLineStates(3)
} else if (res.data.auditMark == 1 && res.data.openInvoicMark === "INVOICE_FAIL") {
_that.numList[0].name = '已申请'
_that.numList[2].name = '开票失败'
_that.numList[1].name = '已审核'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
console.log('开票中')
this.timeLineStates(3, res.data)
}
// else if(res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED'){
// _that.numList[0].name = '已申请'
// _that.numList[2].name = '正在开票'
// _that.numList[1].name = '已审核'
// _that.numList[2].time =res.data.openInvoicTime
// _that.numList[0].time = res.data.createTime
// _that.numList[1].time = res.data.auditTime
// console.log('待开票')
// this.timeLineStates(3)
// }
if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
.sendEmailMark == 1) {
console.log('邮件发件成功')
_that.numList[0].name = '已申请'
_that.numList[1].name = '已审核'
_that.numList[2].name = '已开票'
_that.numList[3].name = '已发邮箱'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
_that.numList[2].time = res.data.openInvoicTime
_that.numList[3].time = res.data.sendEmailTime
this.timeLineStates(4, res.data)
} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
.sendEmailMark == -1) {
_that.numList[0].name = '已申请'
_that.numList[1].name = '已审核'
_that.numList[2].name = '已开票'
_that.numList[3].name = '邮件发送失败'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
_that.numList[2].time = res.data.openInvoicTime
console.log('邮件发件失败')
this.timeLineStates(4, res.data)
} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
.sendEmailMark == 0) {
_that.numList[0].name = '已申请'
_that.numList[1].name = '已审核'
_that.numList[2].name = '已开票'
_that.numList[3].name = '邮件正在发送'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
_that.numList[2].time = res.data.openInvoicTime
console.log('邮件发送中')
this.timeLineStates(4, res.data)
} else if (res.data.auditMark == 1 && res.data.openInvoicMark === 'INVOICED' && res.data
.sendEmailMark == null) {
_that.numList[0].name = '已申请'
_that.numList[1].name = '已审核'
_that.numList[2].name = '已开票'
_that.numList[3].name = '代发件'
_that.numList[0].time = res.data.auditRecordTime
_that.numList[1].time = res.data.auditTime
_that.numList[2].time = res.data.openInvoicTime
console.log('邮件发送中')
this.timeLineStates(4, res.data)
}
this.InvoiceDetails = res.data
})
},
// 获取当前步骤条状态
timeLineStates(num, obj) {
console.log('这里是obj')
console.log(obj)
console.log(num)
let listTime = this.numList
for (let i = 0; i < listTime.length; i++) {
if (i < num) {
listTime[i].check = true
console.log('123')
if (obj) {
if (obj.sendEmailMark == 1 && obj.auditMark == 1) {
console.log('这里是邮件1')
listTime[num - 1].errcheck = obj.sendEmailMark
} else if (obj.sendEmailMark != -1 && obj.auditMark == -1) {
console.log('这里是审核2')
listTime[num - 1].name = '审核失败'
listTime[num - 1].errcheck = obj.auditMark
listTime[num - 1].errtext = obj.auditRemark
console.log('这里进入obj')
} else if (obj.openInvoicMark == 'INVOICE_FAIL' && obj.auditMark == 1) {
console.log('这里是开票2')
let checkErr = 0
if (obj.openInvoicMark == 'INVOICE_FAIL') {
checkErr = -1
}
listTime[num - 1].name = '开票失败'
listTime[num - 1].errcheck = checkErr
listTime[num - 1].errtext = obj.openInvoicRemark
console.log('这里进入obj')
}
}
}
}
}
}
}
</script>
<style>
.showBox {
height: auto;
overflow: hidden;
}
.hidenBox {
height: 300upx;
overflow: hidden;
}
.time_lineDispay {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.showIcons /deep/ .u-dot {
background: #FF0000 !important;
}
page {
background-color: #F1F2F7;
}
.weight-2 {
font-weight: 600;
}
.weight-4 {
font-weight: 400;
}
.weight-0 {
font-weight: 100;
}
.clomes-box {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.Invoicing-header-text {
border-left: 4px solid #FF0000;
padding-left: 10upx;
margin-bottom: 20upx;
}
.Invoicing-box {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
width: 100%;
box-shadow: inset 0 -5px 5px #f1f1f17a;
}
.Invoicing-box-list-title {
flex: 0 0 auto;
width: 30%;
}
.Invoicing-box-list-text {}
.Invoicing-box-list {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
}
</style>