474 lines
15 KiB
Vue
474 lines
15 KiB
Vue
<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>
|