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.
388 lines
9.5 KiB
388 lines
9.5 KiB
<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>
|
|
<image v-if="!applyInvoicingList.length" class="empty" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt=""/>
|
|
</view>
|
|
<view v-else class="invoice-header-list">
|
|
<view
|
|
v-for="(item, index) in invoiceHeaderList"
|
|
:key="index"
|
|
ref="box_center"
|
|
class="invoice-header-item"
|
|
@touchstart="drawStart"
|
|
@touchmove="drawMove(index,$event)"
|
|
@touchend="drawEnd(index,$event)"
|
|
:style="{ left: activeHeaderMask === index ? '-120rpx' : '' }"
|
|
>
|
|
<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 class="function-mask" :style="{visibility: activeHeaderMask === index ? 'visible' : 'hidden' }" @click="activeHeaderMask = -1"></view>
|
|
<view class="function" @click.stop="deleteHeader(item)" data-name="删除">
|
|
<view class="btn">删除</view>
|
|
</view>
|
|
</view>
|
|
<image v-if="!invoiceHeaderList.length" class="empty" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt=""/>
|
|
</view>
|
|
<view v-if="activeTab === tabList[1]" class="add-header" @click="addHeader">添加新的抬头</view>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getApplyInvoicingList, getInvoiceHeaderList, deleteInvoice } from '@/api/store';
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList: [
|
|
'开票申请',
|
|
'发票抬头',
|
|
],
|
|
activeTab: '开票申请',
|
|
applyInvoicingList: [],
|
|
invoiceHeaderList: [],
|
|
activeHeaderMask: -1,
|
|
};
|
|
},
|
|
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)}`,
|
|
});
|
|
},
|
|
// 开始触摸
|
|
drawStart(e) {
|
|
console.log('触摸',e);
|
|
this.clientX = e.changedTouches[0].clientX
|
|
},
|
|
// 触摸过程
|
|
drawMove(id, e) {
|
|
console.log('过程',e.changedTouches[0]);
|
|
var endX = e.changedTouches[0].clientX;
|
|
let diff = endX - this.clientX;
|
|
console.log(diff);
|
|
|
|
if (Math.abs(diff) <= 60 && diff < 0) {
|
|
let box_center = this.$refs.box_center[id]
|
|
// console.log(diff);
|
|
box_center.$el.style.left = diff + 'px'
|
|
}
|
|
|
|
},
|
|
// 结束触摸
|
|
drawEnd(id, e) {
|
|
console.log('结束',e.changedTouches[0], e);
|
|
var endX = e.changedTouches[0].clientX;
|
|
let diff = endX - this.clientX;
|
|
if (Math.abs(diff) > 20) {
|
|
// console.log('移动',diff,id,e);
|
|
if (diff < 0) {
|
|
this.activeHeaderMask = id;
|
|
} else {
|
|
this.activeHeaderMask = -1;
|
|
}
|
|
}
|
|
},
|
|
deleteHeader(item) {
|
|
console.log(item);
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "是否删除该抬头?",
|
|
success: async ({ confirm }) => {
|
|
if (!confirm) return;
|
|
uni.showLoading({
|
|
mask: true,
|
|
});
|
|
try {
|
|
await deleteInvoice({ id: item.id });
|
|
this.activeHeaderMask = -1;
|
|
// uni.hideLoading();
|
|
// this.$util.showMsg("删除成功!");
|
|
this.getInvoiceHeaderList();
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(err.msg);
|
|
}
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .base-container {
|
|
width: 100%;
|
|
/* #ifdef MP-WEIXIN */
|
|
padding-bottom: 0!important;
|
|
/* #endif */
|
|
}
|
|
.invoice-list{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #f5f5f5;
|
|
.invoice-content {
|
|
height: 100%;
|
|
width: 100%;
|
|
.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 {
|
|
width: 690rpx;
|
|
height: calc(100% - 96rpx);
|
|
overflow-y: auto;
|
|
padding: 20rpx 0 0;
|
|
margin: 0 auto;
|
|
.empty {
|
|
display: block;
|
|
width: 414rpx;
|
|
height: 305rpx;
|
|
margin: 100rpx auto 0;
|
|
}
|
|
.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;
|
|
position: relative;
|
|
.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;
|
|
}
|
|
.function-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
visibility: hidden;
|
|
}
|
|
.function {
|
|
width: 120rpx;
|
|
height: 100%;
|
|
background: #F8473E;
|
|
border-radius: 0rpx 10rpx 10rpx 0rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 0;
|
|
right: -120rpx;
|
|
z-index: 10;
|
|
.btn {
|
|
width: 30rpx;
|
|
white-space: pre-wrap;
|
|
overflow: auto;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.invoice-header-list {
|
|
height: calc(100% - 226rpx);
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
</style> |