apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工单批次，工单批次详情，上传发票，发票查看

Browse Source
This commit is contained in:
周林芳
2024-11-05 16:01:32 +08:00
parent 8a822e829d
commit 41d44e93d4
8 changed files with 789 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/api/mine.js
View File

@ -222,6 +222,47 @@ export function uploadImage(data){
})
}
// 发票上传
export function uploadInvoice(data){
return request({
url:'/order/taskInvoiceBatch/saveInvoiceImagesAndIdentify',
method:'POST',
contentType:'multipart/form-data',
data
})
}
// 删除发票
export function deleteInvoice(data) {
return request({
url:'/order/taskInvoiceBatch/deleteInfo',
method:'POST',
contentType:'multipart/form-data',
data
})
}
// 生成财务批次
export function createBatch(data) {
return request({
url:'/order/taskInvoiceBatch/supplierCreateFinanceBatch',
method:'POST',
contentType:'application/x-www-form-urlencoded',
data,
testFlag: true
})
}
// 获取服务商发票信息
export function getBillingInfo(url, data) {
return request({
url: url,
method:'POST',
contentType:'multipart/form-data',
data
})
}
// ocr 识别
export function ocrHandler(data){
return request({

BIN
src/assets/icon_upload.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 B

17
src/router/index.js
View File

@ -104,6 +104,23 @@ const routes = [
title: '工单批次详情'
}
},
{
path: "/uploadInvoice",
name: 'uploadInvoice',
component: () => import('@/views/index/uploadInvoice.vue'),
meta: {
title: '上传发票',
cache: true
}
},
{
path: "/showInvoice",
name: 'showInvoice',
component: () => import('@/views/index/showInvoice.vue'),
meta: {
title: '查看发票'
}
},
{
path: "/vehicleManage",
name: 'vehicleManage',

15
src/utils/http.js
View File

@ -15,22 +15,27 @@ let token = urlParams.get('token') ;
localStorage.setItem('token', token);
service.interceptors.request.use(
config => {
let reqUrl=config.url
// let reqUrl=config.url
// console.log("reqUrl",reqUrl)
config.data = config.contentType ? config.data : qs.stringify(config.data)
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
if (config.testFlag) {
config.data = qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true})
}
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
let token = localStorage.getItem('token');
// let token='4099761587129c46b03c9316c9e866c9'
// let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MTI0NTQ5NTMsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiJDLeS4iua1t-a1i-ivleacjeWKoeWVhiIsInN1cHBsaWVySWQiOjMzMDQxLCJzdXBwbGllclR5cGUiOjIsInVzZXJuYW1lIjoic29uZyIsInVzZXJUeXBlIjoicmVzY3VlQXBwIiwiZGV2aWNlSWQiOiIyMmI0OWNhMjBmOWI4MzMwZDk4NzIxNzNmMzllYTY4YmMiLCJhdXRob3JpdGllcyI6W119LCJzY29wZSI6WyJhbGwiXSwiaXNzIjoiaHR0cHM6Ly9zaW5vYXNzaXN0LmNvbSIsImV4cCI6MTcxMjU0MTM1MywiaWF0IjoxNzEyNDU0OTUzfQ.sPU9_OD_TOWcTwqmlawEGyo4mCPrEaRYw2R02gnvYJw'
if (reqUrl.includes("/driverApp")) {
config.headers['token'] = `${token}`;
config.headers['Authorization'] = `${token}`;
/*if (reqUrl.includes("/driverApp")) {
// console.log("司机app")
config.headers['token'] = `${token}`;
} else if(reqUrl.includes("/supplierApp") || reqUrl.includes("/supplierKPI") || reqUrl.includes('/supplier/select') || reqUrl.includes('/order')){
} else if(reqUrl.includes("/supplierApp") || reqUrl.includes("/supplierKPI") || reqUrl.includes('/supplier/select') || reqUrl.includes('/order') || reqUrl.includes('/order/taskInvoiceBatch') || reqUrl.includes('/supplier') ){
// console.log("调度app，服务商kpi")
config.headers['Authorization'] = `${token}`;
}else{
config.headers['token'] = `${token}`;
}
}*/
return config
},
error => {

1
src/views/index/invoicingDetail.vue
View File

@ -171,6 +171,7 @@ export default {
background-color: #fff;
width: 100%;
padding: 15px 15px;
box-sizing: border-box;
.tab_title {
font-size: 14px;
font-weight: bold;

9
src/views/index/invoicingNotify.vue
View File

@ -77,7 +77,7 @@
<span class="invoice_btn_title">开票总金额</span>
<span class="invoice_btn_money">￥{{totalCount}}</span>
</div>
<div class="btn">去开票</div>
<div class="btn" @click="goUploadPage">去开票</div>
</div>
<div v-show="show" class="bgShow">
<img src="@/assets/empty.png">
@ -106,6 +106,7 @@ export default {
batchCode: '',
finished: false,
checkList: [],
supplierId: '',
}
},
computed: {
@ -118,9 +119,13 @@ export default {
},
},
mounted() {
// this.getNotifyList()
this.supplierId = this.$route.query?.supplierId;
},
methods:{
goUploadPage() {
localStorage.setItem('list', JSON.stringify(this.checkList));
this.goPage('uploadInvoice', { supplierId : this.supplierId })
},
async onSearch() {
this.pageNum=1
await this.getNotifyList()

144
src/views/index/showInvoice.vue Normal file
View File

@ -0,0 +1,144 @@
<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_content">
<div class="item_wrap">
<div class="item_label">付款方</div>
<div class="item_content">{{invoiceInfo.accountName}}</div>
</div>
<div class="item_wrap">
<div class="item_label">收款方</div>
<div class="item_content">{{invoiceInfo.payName}}</div>
</div>
<div class="item_wrap">
<div class="item_label">发票号码</div>
<div class="item_content">
{{invoiceInfo.invoiceNumber}}
</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.taxRate}}%</div>
</div>
<div class="item_wrap">
<div class="item_label">税额</div>
<div class="item_content">{{invoiceInfo.taxAmount}}</div>
</div>
<div class="item_wrap">
<div class="item_label">未税金额</div>
<div class="item_content">{{invoiceInfo.afterTaxAmount}}</div>
</div>
<div class="item_wrap">
<div class="item_label">发票类型</div>
<div class="item_content">{{invoiceInfo.invoiceTypeCodeString}}</div>
</div>
<div class="item_wrap">
<div class="item_label">开票日期</div>
<div class="item_content">{{invoiceInfo.invoiceDate}}</div>
</div>
<div class="item_wrap">
<div class="item_label">发票影像</div>
<div class="item_content">
<div class="invoice_btn" @click="showInvoiceHandler(invoiceInfo.path)">查看发票</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { myMixins } from "@/utils/myMixins"
export default {
name: "showInvoice",
mixins:[ myMixins ],
data() {
return {
invoiceInfo: {},
}
},
mounted() {
let invoiceDetail = localStorage.getItem('invoiceDetail')
this.invoiceInfo = invoiceDetail ? JSON.parse(invoiceDetail) : {};
console.log('this.invoiceInfo', this.invoiceInfo)
},
methods: {
showInvoiceHandler(path) {
window.open(path)
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
@include wh(100%,100%);
background-color: #F4F5F7;
}
.navBar{
height: 46px;
}
.contentWrap{
.mt_cls {
margin-top: 10px;
}
.content_tab {
background-color: #fff;
width: 100%;
padding: 15px 15px;
.tab_title {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
}
.tab_content {
.item_wrap {
display: flex;
align-items: center;
line-height: 30px;
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
}
.invoice_btn {
padding: 0 15px;
background-color: #354D93;
border-radius: 4px;
height: 28px;
color: #fff;
}
</style>

569
src/views/index/uploadInvoice.vue Normal file
View File

@ -0,0 +1,569 @@
<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_top">
<div class="content_tip">【注】如结算金额确认无误后，请开具正规增值税专用发票（开票项为：施救费、救授费、拖车费、帝引费任选其一）。如有路桥费产生，请开在救援发票中。</div>
<div class="top_detail">
<div class="detail_title detail_color">
<div class="title"> <span class="squire"></span> 应开金额</div>
<div class="money">￥{{ invoiceTotal }}</div>
</div>
<div class="border"></div>
<div class="detail_content" v-for="(item, index) in list" :key="index + '_1'">
<div class="content_item">
{{item.batchCode}}
<span class="content_money">￥{{item.invoiceMoney}}</span>
</div>
</div>
</div>
</div>
<div class="content_top mt10">
<div class="detail_title detail_color2 pd_no">
<div class="title"> <span class="squire squire2"></span> 实开金额</div>
<div class="money">￥{{ invoiceMoney || 0 }}</div>
</div>
<div class="border"></div>
<div class="invoice_wrap mt10" v-for="(item, index) in tableData" :key="index" @click="goInvoiceDetail(item)">
<div class="invoice_title">
<div>{{item.accountName}}</div>
<div class="btn_del" @click.stop="deleteHandler(item)">删除</div>
</div>
<div class="border"></div>
<div class="invoice_content">
<div>
<span class="label">发票号码:</span>
<span>{{item.invoiceNumber}}</span>
</div>
<div>
<span class="label">发票金额:</span>
<span class="invoice_money">￥{{item.invoiceMoney}}</span>
</div>
<div class="invoice_flex">
<div>
<span class="label">开票日期:</span>
<span>{{item.invoiceDate}}</span>
</div>
<van-icon class="icon" name="arrow" />
</div>
</div>
</div>
</div>
</div>
<div class="upload_btn_wrap">
<div class="btn_save" @click="createInvoiceHandler">保存</div>
<van-uploader :before-read="beforeRead" :after-read="afterRead" accept=".png,.jpg,.jpeg,.pdf,.ofd">
<div class="btn_upload">
<img class="icon_upload" src="@/assets/icon_upload.png" alt="">
上传发票
</div>
</van-uploader>
</div>
</div>
</template>
<script>
import { Dialog } from "vant";
import { myMixins } from "@/utils/myMixins"
import { uploadInvoice, getBillingInfo, deleteInvoice, createBatch } from "@/api/mine"
export default {
name: "uploadInvoice",
mixins:[ myMixins ],
data(){
return {
list: [],
invoiceMoneyTotal: 0,
tableData: [],
activeObj: {},
billInfo: {},
supplierId: '',
queryId: '',
batchIds: [],
shouldRate: '',
realRate: '',
invoiceType: '',
invoiceMoney: 0,
afterTaxAmount: 0,
form: {
courierNumber: '',
invoiceType: '', //电子发票还是纸质发票
}
}
},
async mounted() {
this.list = JSON.parse(localStorage.getItem('list'));
this.batchIds = [];
this.list.map(a => {
this.batchIds.push(a.id)
})
console.log('this.batchIds', this.batchIds)
this.shouldRate = this.list[0]?.shouldRate
this.realRate = this.list[0]?.realRate
this.invoiceType = this.list[0]?.invoiceType
this.supplierId = this.list[0]?.supplierId
await this.getInfo();
},
watch: {
tableData: {
immediate: true,
handler() {
this.getInvoiceMoney()
}
}
},
computed: {
invoiceTotal () {
let total = 0;
this.list?.map(item => {
total += item.invoiceMoney
})
return total
}
},
methods: {
async getInfo() {
if(this.supplierId) {
let res = await getBillingInfo('/supplier/info/billing/getBySupplierId/' + this.supplierId )
this.billInfo = res.data || {}
}
},
async createInvoiceHandler() {
if ( !this.form.invoiceType ) {
this.$toast('发票类型不能为空！')
return
}
if (this.invoiceTotal != this.invoiceMoney) {
this.$toast('“应开金额”与“实开金额”不一致，请核实系统的开票金额与实际开出的发票金额。')
return
}
if(this.form.invoiceType == 2){
Dialog.confirm({
title: '提示',
message: '纸质发票上传后请尽快邮寄，并在系统《开票信息》菜单，录入快递单号，以免影响结算时效！谢谢！',
}).then(async () => {
await this.saveHandle();
}).catch(() => {
});
} else {
await this.saveHandle();
}
},
async saveHandle() {
let paramsArr = this.getParams();
console.log('.......', paramsArr)
try {
this.loading = true;
let res = await createBatch({
supplierId: this.supplierId,
batchIds: this.batchIds,
detailList: paramsArr
})
console.log('res', res)
this.loading = false;
Dialog.alert({
title: '提示',
message: `发票已上传成功，待审核。开票编号为：${res.data}，请前往菜单【开票信息】中查看。`,
}).then(() => {
this.h5GoBack()
});
} catch (e) {
Dialog.alert({
title: '提示',
message: e.msg + '发票提交出错',
}).then(() => {
});
}finally {
this.loading = false;
}
},
getParams() {
let params = [...this.tableData]
if(params.length > 0) {
params.map(item => {
item.courierNumber = (this.form.invoiceType == 2 ? this.form.courierNumber : '')
item.invoiceType = this.form.invoiceType
if( item.taxRate.toString().indexOf('%') != -1 ) {
let tempRate = item.taxRate.replace('%', '');
item.taxRate = (Number(tempRate) / 100)
}
})
}
return params
},
deleteHandler( row ) { // 删除发票
Dialog.confirm({
title: '提示',
message: '确认要删除发票信息吗?',
}).then(async () => {
await deleteInvoice({
id: row?.id || '',
path: row?.path
});
let index = this.tableData.findIndex(a => a.invoiceNumber == row.invoiceNumber)
this.tableData.splice(index, 1)
}).catch(() => {
});
},
beforeRead (file) {
const FileExt = file.name.replace(/.+\./, "");
if (['jpg', 'png', 'jpeg', 'pdf', 'ofd'].indexOf(FileExt.toLowerCase()) === -1) {
this.$toast('请上传后缀名为jpg、jpeg、png、pdf、ofd的文件！')
return false;
}
this.$set(this.activeObj, 'fileType', FileExt)
return true
},
async afterRead (file) {
try {
let res = await uploadInvoice({
file: file.file,
supplierId: this.supplierId
})
console.log('rrerer', res)
if( res?.code == 200 ) {
let test = this.tableData.filter(item => item.invoiceNumber == res.data.ocrInvoiceRes.data.invoiceNumber) // 如果
if( test.length > 0 ) { // 发票是否已经上传过
this.$message.warning("该发票已上传，不能重复上传")
return false
} else {
let invoiceDetails = this.getInvoiceRates(res.data.ocrInvoiceRes.data.invoiceDetails)
let flag = this.legalRate(invoiceDetails)
let realFlag = this.realRateCheck(invoiceDetails)
let errorStr = "";
//电子发票，验证必须是pdf版本
if((res.data.ocrInvoiceRes.data.invoiceType.indexOf("数电") != -1 || res.data.ocrInvoiceRes.data.invoiceType.indexOf("电子") != -1) && this.activeObj.fileType != 'pdf'){
errorStr = errorStr + "电票请上传PDF格式的文件;"
}
if(res.data.ocrInvoiceRes.data.invoiceType.indexOf("专用发票") == -1 && this.invoiceType == 1){
errorStr = errorStr + "上传发票类型与服务商配置发票类型不一致，设置类型为：专票;";
}
if(!this.billInfo.unitName ){
errorStr = errorStr + "未设置抬头，请联系区域经理;";
}
if(!this.billInfo.dutyParagraph ){
errorStr = errorStr + "未设置纳税人识别号，请联系区域经理;";
}
let ocrName = res.data.ocrInvoiceRes.data.sellerName.replace('(','').replace('（','').replace(')','').replace('）','');
let billName = ''
if (this.billInfo && this.billInfo.unitName) {
billName = this.billInfo.unitName.replace('(','').replace('（','').replace(')','').replace('）','');
}
let diffNumber = this.charDifference(ocrName,billName);
if(ocrName != billName && diffNumber > 2 && !res.data.ocrInvoiceRes.data.sellerName.startsWith("国家税务总局")){
errorStr = errorStr + "上传发票抬头与服务商配置不一致，设置抬头为：" + (this.billInfo.unitName || '未设置') + "，识别抬头为：" + res.data.ocrInvoiceRes.data.sellerName + ";如发票确认无误，请联系结算部：021-53682525";
}
if( !flag ) {
Dialog.alert({
title: '提示',
message: '您上传的发票税率不符合要求',
}).then(() => {
this.uploadLoading=false;
return false
});
}else if(!realFlag){
Dialog.alert({
title: '提示',
message: "您上传的发票税率与服务商配置税率不一致，设置税率为：" + this.realRate + "%"
}).then(() => {
this.uploadLoading=false;
return false
});
}else if(errorStr && errorStr.length > 0){
Dialog.alert({
title: '提示',
message: errorStr,
}).then(() => {
this.uploadLoading=false;
return false
});
} else {
console.log('res', res)
console.log('file', file)
this.form.invoiceType = res.data.ocrInvoiceRes.data.invoiceType.indexOf("数电") == -1 && res.data.ocrInvoiceRes.data.invoiceType.indexOf("电子") == -1 ? 2 : 1
let isOrdinaryInvoice = res.data.ocrInvoiceRes.data.invoiceType.indexOf("普通") > -1
this.$set(this.activeObj, 'imageUrl', '')
this.$set(this.activeObj, 'fileName', '')
if (['pdf','ofd'].indexOf(this.activeObj.fileType) === -1) {
this.activeObj.imageUrl = URL.createObjectURL(file.raw);
this.activeObj.imageUrl = res.data.url
this.$set(this.activeObj, 'fileName', file.file.name)
} else {
this.$set(this.activeObj, 'fileName', file.file.name)
}
this.$set(this.activeObj, 'path', res.data.url)
this.$set(this.activeObj, 'invoiceNumber', res.data.ocrInvoiceRes.data.invoiceNumber)
this.$set(this.activeObj, 'accountName', res.data.ocrInvoiceRes.data.sellerName)
this.$set(this.activeObj, 'invoiceMoney', res.data.ocrInvoiceRes.data.totalAmount)
this.$set(this.activeObj, 'taxRate',isOrdinaryInvoice?0: res.data.ocrInvoiceRes.data.invoiceDetails[0].taxRate)
this.$set(this.activeObj, 'taxAmount',isOrdinaryInvoice?0: res.data.ocrInvoiceRes.data.invoiceTax)
this.$set(this.activeObj, 'afterTaxAmount',isOrdinaryInvoice?res.data.ocrInvoiceRes.data.totalAmount: res.data.ocrInvoiceRes.data.invoiceAmountPreTax)
this.$set(this.activeObj, 'invoiceDate', res.data.ocrInvoiceRes.data.invoiceDate)
this.$set(this.activeObj, 'invoiceCode', res.data.ocrInvoiceRes.data.invoiceCode)
this.$set(this.activeObj, 'invoiceTypeCodeString', res.data.ocrInvoiceRes.data.invoiceType)
this.$set(this.activeObj, 'payName', res.data.ocrInvoiceRes.data.purchaserName)
this.tableData.push({...this.activeObj})
this.$forceUpdate()
}
}
}
} catch (e) {
console.log('eeee', e)
}
},
goInvoiceDetail (item) {
localStorage.setItem('invoiceDetail', JSON.stringify(item))
this.goPage('showInvoice')
},
getInvoiceMoney() {
let invoiceMoney = 0;
let afterTaxAmount = 0;
if( this.tableData.length > 0){
this.tableData.map(item => {
if( item.invoiceMoney && item.afterTaxAmount ) {
invoiceMoney += (Number(item.invoiceMoney) * 100)
afterTaxAmount += ( Number(item.afterTaxAmount) * 100 )
}
})
this.invoiceMoney = invoiceMoney != 0 ? (invoiceMoney / 100) : 0
this.afterTaxAmount = afterTaxAmount != 0 ? ( afterTaxAmount / 100 ) : 0
} else {
this.invoiceMoney = invoiceMoney
this.afterTaxAmount = afterTaxAmount
}
},
charDifference(str1,str2) {
let difference = 0;
// 遍历字符串1的每个字符
for (let i = 0; i < str1.length; i++) {
// 如果字符串2中不包含当前字符，或者位置不对，则误差加1
if (str2.indexOf(str1[i]) === -1 || str2[i] !== str1[i]) {
difference++;
}
}
// 同样遍历字符串2，处理字符串1中不存在的字符
for (let i = 0; i < str2.length; i++) {
if (str1.indexOf(str2[i]) === -1) {
difference++;
}
}
return difference;
},
legalRate(rateList) { // 合法的 税率
let rate = rateList[0]
let flag = rateList.every(item => {
//设置的是普票，不校验税率
if(this.invoiceType == 2 && item != '免税' && item != '0%'){
return true
}
return item == rate && ['1%', '3%', '6%', '9%', '13%'].includes(item)
})
console.log('flag', flag)
return flag
},
realRateCheck(rateList) { // 和设置的税率是否符合
let rate = rateList[0]
let flag = rateList.every(item => {
//设置的是普票，不校验税率
if(this.invoiceType == 2 && item != '免税' && item != '0%'){
return true
}
return item == rate && this.realRate + '%' == item
})
console.log('flag', flag)
return flag
},
getInvoiceRates(invoiceDetails) { // 获取发票详情的税率数组
let rates = [];
invoiceDetails.map(item => {
rates.push(item.taxRate)
})
return rates
},
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
@include wh(100%,100%);
background-color: #F4F5F7;
overflow-y: auto;
}
.navBar{
height: 46px;
}
.mt10 {
margin-top: 10px;
}
.contentWrap {
padding-bottom: 70px;
.content_top {
padding: 15px 20px;
background-color: #fff;
.content_tip {
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
}
.top_detail {
.detail_content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px 0;
.content_item {
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
line-height: 27px;
.content_money {
font-size: 15px;
color: #D48139;
font-weight: bold;
}
}
}
}
.detail_title {
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
padding: 10px 0;
}
.title {
display: flex;
align-items: center;
}
.money {
font-size: 22px;
}
.detail_color {
color: #D48139;
}
.detail_color2 {
color: #FF5D2E;
}
.pd_no {
padding-top: 0;
}
}
}
.squire {
width: 6px;
height: 6px;
display: inline-block;
background-color: #D48139;
border-radius: 2px;
margin-right: 10px;
}
.squire2 {
background-color: #FF5D2E;
}
.border {
width: 100%;
height: 0;
border-bottom: 1px solid;
opacity: 0.16;
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
}
.invoice_wrap {
background-color: #F4FAFF;
padding: 11px 3px 15px 18px;
border-radius: 4px;
border: 1px solid #EBF2F7;
.invoice_title {
font-size: 14px;
font-weight: bold;
color: rgba(50, 54, 67, 0.76);
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.btn_del {
width: 48px;
height: 18px;
margin-right: 12px;
line-height: 18px;
text-align: center;
border-radius: 3px;
border: 1px solid #DDDDDD;
font-size: 12px;
color: rgba(0, 0, 0, 0.7);
font-weight: normal;
}
}
.invoice_content {
padding-top: 10px;
padding-right: 12px;
color: #000;
font-size: 12px;
line-height: 24px;
.label {
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
margin-right: 10px;
}
.invoice_money {
color: #FF5D2E;
font-size: 15px;
font-weight: bold;
}
}
}
.upload_btn_wrap {
position: fixed;
width: 100%;
box-sizing: border-box;
bottom: 0;
left: 0;
padding: 15px 30px;
display: flex;
color: #fff;
font-weight: bold;
font-size: 14px;
line-height: 40px;
background: #FBFBFB;
box-shadow: 0px -1px 20px 4px rgba(98,107,128,0.2);
div {
height: 40px;
border-radius: 5px;
text-align: center;
flex: 1;
}
.btn_save {
background: #9EA7C0;
margin-right: 4px;
}
.btn_upload {
background: #354D93;
margin-left: 4px;
}
.icon_upload {
width: 13px;
height: 13px;
}
}
.invoice_flex {
display: flex;
align-items: center;
justify-content: space-between;
}
::v-deep .van-uploader__input-wrapper {
width: 100% !important;
}
</style>