parent
32ea3887fb
commit
3eb69bf7dd
@ -0,0 +1,581 @@ |
|||||||
|
<template> |
||||||
|
<view class="invoice"> |
||||||
|
<!-- <view class="invoice-goods" v-if="sourcePage==0 && orderDetail"> |
||||||
|
<view class="b" v-if="orderDetail"> |
||||||
|
<view class="r">订单编号：{{orderDetail.order_no}}<text @click="handleCopy(orderDetail.order_no)">复制</text> |
||||||
|
</view> |
||||||
|
<view class="r">开票金额：{{orderDetail.pay_price}}</view> |
||||||
|
</view> |
||||||
|
</view> --> |
||||||
|
<view class="invoice-info"> |
||||||
|
<view class="b"> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">发票类型：</view> |
||||||
|
<view class="r"> |
||||||
|
<picker :value="index" :range="array" @change="bindPickerChange"> |
||||||
|
<view class="lx">{{ index == -1 ? '请选择' : array[index] }}</view> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">发票类型：</view> |
||||||
|
<view class="r"> |
||||||
|
<view class="li" :class="tabIndex == 1 ? 'li-on' : ''" @click="tabItem(1)">个人</view> |
||||||
|
<view class="li" :class="tabIndex == 2 ? 'li-on' : ''" @click="tabItem(2)">单位</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item" v-if="tabIndex != 2"> |
||||||
|
<view class="l">发票抬头：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" v-model="obj.header" placeholder="请输入个人姓名" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item" v-if="tabIndex == 2"> |
||||||
|
<view class="l">发票抬头：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" v-model="array1[index1]" placeholder="请输入单位名称" /> |
||||||
|
<!-- <view class="tt" @click="bindPickerChange1" style="color: rgb(58, 134, 255)">更改抬头</view> --> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item" v-if="tabIndex == 2"> |
||||||
|
<view class="l">单位税号：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" v-model="obj.duty_no" placeholder="请输入纳税人识别号" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-company" v-if="tabIndex == 2"> |
||||||
|
<view class="a">选填内容（开户银行、银行账号等） |
||||||
|
<text :class="toggleIndex ? 'on' : ''" @click="toggleItem()">{{ toggleIndex ? "收起" : "展开" }}</text> |
||||||
|
</view> |
||||||
|
<view class="b" v-if="toggleIndex"> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">开户银行：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" v-model="obj.bank_name" placeholder="请输入开户银行名称" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">银行账号：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="number" v-model="obj.bank_no" placeholder="请输入银行账号" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">单位地址：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="text" v-model="obj.address" placeholder="请输入单位地址" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">单位电话：</view> |
||||||
|
<view class="r"> |
||||||
|
<input type="number" v-model="obj.phone" placeholder="请输入单位电话" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-btn"> |
||||||
|
<view class="invoice-fd" @click="toDetail()"> |
||||||
|
提交 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- <u-modal v-model="show" :content="content" :show-cancel-button="true" :show-title="false" |
||||||
|
confirm-color="#F55349"></u-modal> --> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as InvoiceApi from '@/api/invoice' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
content: "确认您的发票信息无误后再提交", |
||||||
|
show: true, |
||||||
|
toggleIndex: true, |
||||||
|
index: -1, |
||||||
|
array: ['普通增值税发票'], |
||||||
|
index1: -1, |
||||||
|
array1: [], |
||||||
|
tabIndex: 2, |
||||||
|
sourcePage: 0, |
||||||
|
orderDetail: '', |
||||||
|
orderId: '', |
||||||
|
obj: { |
||||||
|
header: '', |
||||||
|
gongsi: '', |
||||||
|
duty_no: '', |
||||||
|
bank_name: '', |
||||||
|
bank_no: '', |
||||||
|
address: '', |
||||||
|
phone: '', |
||||||
|
type: '', |
||||||
|
source: 2 |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
onLoad(op) { |
||||||
|
let app = this; |
||||||
|
app.orderId = op.orderId |
||||||
|
app.sourcePage = op.source == 1 ? op.source : 0 |
||||||
|
if (op.source == 0) { |
||||||
|
app.orderDetail = op.order ? JSON.parse(op.order) : ''; |
||||||
|
} |
||||||
|
if (op.source == 2 || op.source == 1) { |
||||||
|
let detail = op.detail ? JSON.parse(op.detail) : ''; |
||||||
|
app.index = detail.type == 1 ? 0 : 1; |
||||||
|
app.tabIndex = detail.source |
||||||
|
app.obj = detail |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取当前订单信息 |
||||||
|
toDetail(canReset = false) { |
||||||
|
const app = this |
||||||
|
if (app.index == -1) { |
||||||
|
uni.showToast({ |
||||||
|
title: '请选择发票类型', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
if (!app.obj.header) { |
||||||
|
uni.showToast({ |
||||||
|
title: '请输入抬头', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
if (app.tabIndex == 2 && !app.obj.duty_no) { |
||||||
|
uni.showToast({ |
||||||
|
title: '请输入抬头', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
app.isLoading = true; |
||||||
|
if (app.tabIndex == 1) { |
||||||
|
app.obj.gongsi = ''; |
||||||
|
app.obj.duty_no = ''; |
||||||
|
app.obj.bank_name = ''; |
||||||
|
app.obj.bank_no = ''; |
||||||
|
app.obj.address = ''; |
||||||
|
app.obj.phone = ''; |
||||||
|
} |
||||||
|
app.obj.type = app.index == 0 ? 1 : 2; |
||||||
|
app.obj.source = app.tabIndex; |
||||||
|
let url = '' |
||||||
|
if (app.sourcePage == 0) { //开票addInvoicing editInvoicing invoicingAdd |
||||||
|
url = InvoiceApi.invoicingAdd(app.orderId, app.obj) |
||||||
|
} |
||||||
|
if (app.sourcePage == 1) { //我的开票使用某一个开票 |
||||||
|
app.obj.invoice_id = app.obj.id; //选择 |
||||||
|
url = InvoiceApi.invoicingAdd(app.orderId, app.obj) |
||||||
|
} |
||||||
|
if (app.sourcePage == 2) { //申请记录 修改抬头 |
||||||
|
url = InvoiceApi.invoicingEdit(app.orderId, app.obj) |
||||||
|
} |
||||||
|
if (app.sourcePage == 3) { //新增发票抬头 |
||||||
|
url = InvoiceApi.addInvoicing(app.orderId, app.obj) |
||||||
|
} |
||||||
|
if (app.sourcePage == 4) { //我的发票记录过来编辑 |
||||||
|
url = InvoiceApi.editInvoicing(app.orderId, app.obj) |
||||||
|
} |
||||||
|
debugger |
||||||
|
url.then(result => { |
||||||
|
if (result.status == 200) { |
||||||
|
uni.showToast({ |
||||||
|
title: result.message, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
if (result.data.list.length.length > 0) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/detail?id=" + result.data.list[0].id |
||||||
|
}) |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: '请求成功无返回详情', |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: result.message, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
// 相应全局事件订阅: 刷新上级页面数据 |
||||||
|
canReset && uni.$emit('syncRefresh', true, true) |
||||||
|
}, |
||||||
|
|
||||||
|
// 复制指定内容 |
||||||
|
handleCopy(value) { |
||||||
|
const app = this |
||||||
|
uni.setClipboardData({ |
||||||
|
data: value, |
||||||
|
success: () => app.$toast('复制成功'), |
||||||
|
fail: ({ |
||||||
|
errMsg |
||||||
|
}) => app.$toast('复制失败 ' + errMsg) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 提交信息 |
||||||
|
handleInvoice() { |
||||||
|
const app = this |
||||||
|
}, |
||||||
|
onClose() { }, |
||||||
|
tabItem(i) { |
||||||
|
this.tabIndex = i; |
||||||
|
}, |
||||||
|
toggleItem(i) { |
||||||
|
this.toggleIndex = !this.toggleIndex; |
||||||
|
this.pamres.invoiceUnit = this.toggleIndex |
||||||
|
}, |
||||||
|
bindPickerChange(e) { |
||||||
|
this.index = e.detail.value; |
||||||
|
}, |
||||||
|
bindPickerChange1() { |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/index?orderId=" + this.orderId + '&order=' + (app.orderDetail ? JSON.stringify(app.orderDetail) : '') |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.invoice-btn{ |
||||||
|
width: 100%; |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
padding: 30rpx 44rpx; |
||||||
|
z-index: 8; |
||||||
|
background: #F5F5F5; |
||||||
|
} |
||||||
|
.invoice-company{ |
||||||
|
margin-bottom: 170rpx; |
||||||
|
} |
||||||
|
.invoice { |
||||||
|
padding-bottom: 1rpx; |
||||||
|
&-goods { |
||||||
|
padding: 0 20rpx 0 40rpx; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
padding: 30rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.a { |
||||||
|
width: 145rpx; |
||||||
|
height: 135rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.b { |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.l { |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.r { |
||||||
|
font-size: 30rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 20rpx; |
||||||
|
|
||||||
|
text { |
||||||
|
display: block; |
||||||
|
width: 104rpx; |
||||||
|
line-height: 60rpx; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 4rpx; |
||||||
|
text-align: center; |
||||||
|
border: 1px solid #CACACA; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-info { |
||||||
|
margin-top: 20rpx; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.a { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 20rpx 30rpx 20rpx 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
border-bottom: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
|
||||||
|
text { |
||||||
|
color: #006AFF; |
||||||
|
padding-right: 40rpx; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #006AFF; |
||||||
|
border-left: 1px solid #006AFF; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.b { |
||||||
|
padding: 0 30rpx 0 45rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.item { |
||||||
|
padding: 30rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.l { |
||||||
|
width: 180rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
|
||||||
|
.r { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
|
||||||
|
.li { |
||||||
|
width: 150rpx; |
||||||
|
height: 78rpx; |
||||||
|
background: #F3F3F3; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
line-height: 78rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
margin-right: 12rpx; |
||||||
|
|
||||||
|
&-on { |
||||||
|
background: #FDF4F4; |
||||||
|
background: url(/static/invoice/select-active.png) center top no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
picker { |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
.tt { |
||||||
|
width: 180rpx; |
||||||
|
position: relative; |
||||||
|
color: #4894FF; |
||||||
|
text-align: right; |
||||||
|
|
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #4894FF; |
||||||
|
border-left: 1px solid #4894FF; |
||||||
|
position: absolute; |
||||||
|
right: -50rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.lx { |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #B8B8B8; |
||||||
|
border-left: 1px solid #B8B8B8; |
||||||
|
position: absolute; |
||||||
|
right: 20rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-fd { |
||||||
|
height: 104rpx; |
||||||
|
background: #F55349; |
||||||
|
border-radius: 8rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #FFFFFF; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
&-company { |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.a { |
||||||
|
padding: 35rpx 50rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
color: #262626; |
||||||
|
|
||||||
|
text { |
||||||
|
width: 70rpx; |
||||||
|
color: #888888; |
||||||
|
margin-right: 30rpx; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #888888; |
||||||
|
border-left: 1px solid #888888; |
||||||
|
position: absolute; |
||||||
|
right: -30rpx; |
||||||
|
top: 10rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(225deg); |
||||||
|
} |
||||||
|
|
||||||
|
&.on { |
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #888888; |
||||||
|
border-left: 1px solid #888888; |
||||||
|
position: absolute; |
||||||
|
right: -30rpx; |
||||||
|
top: 20rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.b { |
||||||
|
padding: 0 30rpx 0 45rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.item { |
||||||
|
padding: 30rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.l { |
||||||
|
width: 180rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
|
||||||
|
.r { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
|
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,210 @@ |
|||||||
|
<template> |
||||||
|
<view class="invoice-box"> |
||||||
|
<view class="bill-top"> |
||||||
|
<view class="top-name" :class="tabIndex == 0 ? 'active' : ''" @click="onTabClick(0)">发票记录 |
||||||
|
<view v-if="tabIndex == 0" class="active-border"></view> |
||||||
|
</view> |
||||||
|
<view class="top-name" :class="tabIndex == 1 ? 'active' : ''" @click="onTabClick(1)">发票抬头 |
||||||
|
<view v-if="tabIndex == 1" class="active-border"></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view v-if="tabIndex == 0"> |
||||||
|
<view class="empty" v-if="recordList.length == 0"> |
||||||
|
<u-empty text="暂无信息" mode="list"></u-empty> |
||||||
|
</view> |
||||||
|
<view class="bill-record" v-else> |
||||||
|
<view class="bill-item" v-for="(item, index) in recordList" :key="index"> |
||||||
|
<view class="bill-item-left"> |
||||||
|
<view class="commpany-name">飞科网络科技有限公司</view> |
||||||
|
<view class="bill-price"> |
||||||
|
<text>¥</text>150 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<text class="bill-time">2023-12-31</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<!-- 发票抬头 --> |
||||||
|
<view v-if="tabIndex == 1"> |
||||||
|
<view class="invoice-header"> |
||||||
|
<view class="bill-header-item" @click="onAddInvoice" v-for="(item, index) in recordList" :key="index"> |
||||||
|
<view class="bill-header-left"> |
||||||
|
<view class="header-type">普通发票抬头-个人</view> |
||||||
|
<view class="bill-header"> |
||||||
|
王大幅 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<u-icon name="edit-pen" size="30" color="#838383"></u-icon> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-btn-box"> |
||||||
|
<view class="invoice-btn" @click="onAddInvoice"> |
||||||
|
<text>+</text>添加发票抬头 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Empty from '@/components/empty' |
||||||
|
import * as InvoiceApi from '@/api/invoice' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tabIndex: 1, |
||||||
|
invoicList: [], |
||||||
|
recordList: [1, 2] |
||||||
|
}; |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
onTabClick(index) { |
||||||
|
this.tabIndex = index |
||||||
|
}, |
||||||
|
onEdit(item) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/editset?detail=" + JSON.stringify(item) + '&source=' + 4 |
||||||
|
}) |
||||||
|
}, |
||||||
|
onAddInvoice() { |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/invoice/editset?source=" + 3 |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.invoice-btn-box { |
||||||
|
width: 100%; |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
padding: 30rpx 44rpx; |
||||||
|
z-index: 8; |
||||||
|
background: #F5F5F5; |
||||||
|
|
||||||
|
.invoice-btn { |
||||||
|
height: 104rpx; |
||||||
|
background: #F21A1C; |
||||||
|
color: #fff; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-radius: 8rpx; |
||||||
|
|
||||||
|
text { |
||||||
|
font-size: 50rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.invoice-header { |
||||||
|
background: #fff; |
||||||
|
|
||||||
|
.bill-header-item { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
padding: 54rpx 46rpx 120rpx 64rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.header-type { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 18rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.bill-header { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #AEAEAE; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.bill-top { |
||||||
|
margin-top: 6rpx; |
||||||
|
margin-bottom: 4rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
background: #fff; |
||||||
|
padding: 0 138rpx; |
||||||
|
|
||||||
|
.top-name { |
||||||
|
width: 128rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
height: 126rpx; |
||||||
|
font-weight: bold; |
||||||
|
color: #6F6F6F; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.active-border { |
||||||
|
width: 72rpx; |
||||||
|
height: 8rpx; |
||||||
|
background: #FF2525; |
||||||
|
border-radius: 34rpx; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 26rpx; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.active { |
||||||
|
color: #262626; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bill-item { |
||||||
|
background: #fff; |
||||||
|
margin-bottom: 10rpx; |
||||||
|
display: flex; |
||||||
|
padding: 44rpx 34rpx 40rpx 64rpx; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-end; |
||||||
|
|
||||||
|
.commpany-name { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #454545; |
||||||
|
margin-bottom: 34rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.bill-price { |
||||||
|
font-size: 40rpx; |
||||||
|
color: #F21A1C; |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
text { |
||||||
|
font-size: 24rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bill-time { |
||||||
|
display: inline-block; |
||||||
|
width: 180rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #AEAEAE; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.empty { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
padding-top: 180rpx; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
// height: calc(100vh - 152rpx); |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue