You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
6.8 KiB
274 lines
6.8 KiB
9 months ago
|
<template>
|
||
|
|
<BaseContainer class="invoice-list flex flex-center-y">
|
||
|
|
<NavBar title="申请开票" />
|
||
|
|
<view class="invoice-content">
|
||
|
|
<view class="invoice-tab-list flex flex-center-x">
|
||
|
|
<view v-for="(item, index) in tabList" :key="index" class="invoice-tab" :class="{ active: activeTab === item }" @click="activeTab = item">{{ item }}</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="activeTab === tabList[0]"class="apply-invoicing-list">
|
||
|
|
<view v-for="(item, index) in applyInvoicingList" :key="index" class="apply-invoicing-item">
|
||
|
|
<view class="item-head flex flex-center-x">
|
||
|
|
<text :style="item.header_type === '企业' ? 'background: #FEE1E1;color: #FF5C6B;' : 'background: #F3F6FD;color: #1C92E7;'">{{ item.header_type }}</text>
|
||
|
|
<text>{{ item.invoice_header }}</text>
|
||
|
|
<text :style="item.status === 0 ? 'color: #FF2825;' : 'color: #999999'">{{ item.status === 0 ? '申请中' : '已完成' }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item-content">
|
||
|
|
<view class="content-money">开票金额：<text>￥{{ item.invoice_amount }}</text></view>
|
||
|
|
<view class="content-time">开票时间：{{ item.created_at }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-else class="invoice-header-list">
|
||
|
|
<view v-for="(item, index) in invoiceHeaderList" :key="index" class="invoice-header-item">
|
||
|
|
<view class="item-head flex flex-center-x">
|
||
|
|
<text :style="item.header_type === 2 ? 'background: #FEE1E1;color: #FF5C6B;' : 'background: #F3F6FD;color: #1C92E7;'">{{ item.header_type === 1 ? '个人' : '企业' }}</text>
|
||
|
|
<text>{{ item.invoice_header }}</text>
|
||
|
|
<text @click="editHeader(item)">编辑</text>
|
||
|
|
</view>
|
||
|
|
<view class="item-content">
|
||
|
|
普通发票-{{ item.header_type === 1 ? '个人' : '企业' }}抬头
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="activeTab === tabList[1]" class="add-header" @click="addHeader">添加新的抬头</view>
|
||
|
|
</view>
|
||
|
|
</BaseContainer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getApplyInvoicingList, getInvoiceHeaderList } from '@/api/store';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabList: [
|
||
|
|
'开票申请',
|
||
|
|
'发票抬头',
|
||
|
|
],
|
||
|
|
activeTab: '开票申请',
|
||
|
|
applyInvoicingList: [
|
||
|
|
{ type: '企业' , name: '南京梦航教育有限公司', status: 0, money: '1202.00', time: '2023-10-10 12:30:34' },
|
||
|
|
{ type: '个人' , name: '张三', status: 1, money: '1202.00', time: '2023-10-10 12:30:34' },
|
||
|
|
],
|
||
|
|
invoiceHeaderList: [
|
||
|
|
{ type: '企业' , name: '南京梦航教育有限公司' },
|
||
|
|
{ type: '个人' , name: '张三' },
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
activeTab: {
|
||
|
|
handler() {
|
||
|
|
if (this.activeTab === '开票申请') {
|
||
|
|
this.getApplyInvoicingList();
|
||
|
|
} else {
|
||
|
|
this.getInvoiceHeaderList();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
immediate: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
if (this.activeTab === '开票申请') {
|
||
|
|
this.getApplyInvoicingList();
|
||
|
|
} else {
|
||
|
|
this.getInvoiceHeaderList();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getApplyInvoicingList() {
|
||
|
|
uni.showLoading({
|
||
|
|
mask: true,
|
||
|
|
});
|
||
|
|
try{
|
||
|
|
const { data, code, msg } = await getApplyInvoicingList({});
|
||
|
|
uni.hideLoading();
|
||
|
|
if (code != 200) {
|
||
|
|
uni.showToast({
|
||
|
|
title: msg,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log(data);
|
||
|
|
this.applyInvoicingList = data.list;
|
||
|
|
}
|
||
|
|
}catch(e){
|
||
|
|
uni.hideLoading();
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
async getInvoiceHeaderList() {
|
||
|
|
uni.showLoading({
|
||
|
|
mask: true,
|
||
|
|
});
|
||
|
|
try{
|
||
|
|
const { data, code, msg } = await getInvoiceHeaderList({});
|
||
|
|
uni.hideLoading();
|
||
|
|
if (code != 200) {
|
||
|
|
uni.showToast({
|
||
|
|
title: msg,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log(data);
|
||
|
|
this.invoiceHeaderList = data.list;
|
||
|
|
}
|
||
|
|
}catch(e){
|
||
|
|
uni.hideLoading();
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
addHeader() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/store/applyInvoicing',
|
||
|
|
});
|
||
|
|
},
|
||
|
|
editHeader(item) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/store/applyInvoicing?info=${JSON.stringify(item)}`,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.invoice-list {
|
||
|
|
height: 100vh;
|
||
|
|
background: #f5f5f5;
|
||
|
|
.invoice-content {
|
||
|
|
flex: 1;
|
||
|
|
.invoice-tab-list {
|
||
|
|
width: 100%;
|
||
|
|
height: 96rpx;
|
||
|
|
background: #fff;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
.invoice-tab {
|
||
|
|
color: #999999;
|
||
|
|
font-size: 30rpx;
|
||
|
|
height: 100%;
|
||
|
|
line-height: 96rpx;
|
||
|
|
position: relative;
|
||
|
|
&.active {
|
||
|
|
color: #333333;
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 40rpx;
|
||
|
|
height: 6rpx;
|
||
|
|
background: linear-gradient(90deg, #24A9E1, #0F74BB);
|
||
|
|
border-radius: 3rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: 13rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.add-header {
|
||
|
|
position: fixed;
|
||
|
|
width: 690rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
border-radius: 44rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 88rpx;
|
||
|
|
background: linear-gradient(90deg, #4AA5FA 0%, #0F74BB 100%);
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #ffffff;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.apply-invoicing-list,
|
||
|
|
.invoice-header-list {
|
||
|
|
height: calc(100% - 96rpx);
|
||
|
|
overflow-y: auto;
|
||
|
|
padding-top: 20rpx;
|
||
|
|
.apply-invoicing-item{
|
||
|
|
width: 690rpx;
|
||
|
|
height: 228rpx;
|
||
|
|
margin: 0 auto 20rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 16rpx;
|
||
|
|
.item-head {
|
||
|
|
padding: 0 8rpx 0 12rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
>text {
|
||
|
|
color: #333333;
|
||
|
|
font-size: 28rpx;
|
||
|
|
&:nth-child(1) {
|
||
|
|
width: 67rpx;
|
||
|
|
height: 38rpx;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 38rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
}
|
||
|
|
&:nth-child(2) {
|
||
|
|
flex: 1;
|
||
|
|
margin: 0 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-content {
|
||
|
|
padding-top: 16rpx;
|
||
|
|
>view {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #999999;
|
||
|
|
padding-left: 12rpx;
|
||
|
|
&:first-child {
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
text {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-header-item {
|
||
|
|
width: 690rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
margin: 0 auto 20rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 16rpx;
|
||
|
|
.item-head {
|
||
|
|
padding: 0 8rpx 0 12rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
>text {
|
||
|
|
color: #333333;
|
||
|
|
font-size: 28rpx;
|
||
|
|
&:nth-child(1) {
|
||
|
|
width: 67rpx;
|
||
|
|
height: 38rpx;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 38rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
}
|
||
|
|
&:nth-child(2) {
|
||
|
|
flex: 1;
|
||
|
|
margin: 0 10rpx;
|
||
|
|
}
|
||
|
|
&:nth-child(3) {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-content {
|
||
|
|
height: calc(100% - 88rpx);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: #999;
|
||
|
|
font-size: 28rpx;
|
||
|
|
padding-left: 12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-header-list {
|
||
|
|
height: calc(100% - 226rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|