472 lines
11 KiB
Vue
472 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<s-layout title="发票管理" class="invoice_center">
|
|||
|
|
<!-- <view class="invoiceTitle">发票列表</view> -->
|
|||
|
|
<view class="invoiceCenters">
|
|||
|
|
<uni-section class="invoice_tabbar" title="实心标签" type="line">
|
|||
|
|
<view class="uni-padding-wrap uni-common-mt invoice_tabbar_title">
|
|||
|
|
<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#7D9337"
|
|||
|
|
@clickItem="onClickItem" />
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<view v-if="current === 1">
|
|||
|
|
<view class="invoList" v-if="state.invoList.length>0">
|
|||
|
|
<view class="invoice_item-a" v-for="(item,index) in state.invoList" :key="index">
|
|||
|
|
<view class="goods_box">
|
|||
|
|
<image :src="item.picUrl"></image>
|
|||
|
|
<view>{{item.spuName}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="invoice_box">
|
|||
|
|
<view>
|
|||
|
|
<view class="invoicea_type">{{item.invoice_type}}</view>
|
|||
|
|
<view>申请时间:{{item.createTime}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="goods_mon">
|
|||
|
|
￥{{ fen2yuan(item.price) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="set_box">
|
|||
|
|
<view class="invoicea_status">{{ item.status === 1 ? "已开票" : "开票中" }}</view>
|
|||
|
|
<view class="lookDetailbtn" @tap.stop="lookinvDetail(item.invoice)">查看发票信息</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="noInvoices" v-else>
|
|||
|
|
<image src="/static/data-empty.png"></image>
|
|||
|
|
没有发票信息呦~
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="current === 0">
|
|||
|
|
<view class="invoList" v-if="state.riseList.length>0">
|
|||
|
|
<view class="invoice_item" v-for="(item,index) in state.riseList" :key="index">
|
|||
|
|
<view class="ii_left">
|
|||
|
|
<view class="inhead_name">{{item.name}}
|
|||
|
|
<view class="defaultFont" v-if="item.isDefault">默认</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="inhead_email color-gray">联系邮箱：{{ item.email }}</view>
|
|||
|
|
<view class="inhead_tel color-gray">联系电话：{{ item.companyTel }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="ii_right">
|
|||
|
|
<view class="inhead_type">{{item.type?"企业":'个人'}}普通发票</view>
|
|||
|
|
<view class="inhead_set">
|
|||
|
|
<view class="inhead_set_btn inhead_change" @tap.stop="updateInvoice(item.id)"><uni-icons class="ii_icon" type="compose"
|
|||
|
|
size="18"></uni-icons>编辑</view>
|
|||
|
|
<view class="inhead_set_btn inhead_del" @tap.stop="deleInvoicehead(item.id)"><uni-icons class="ii_icon" type="trash"
|
|||
|
|
size="18"></uni-icons>删除</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="noInvoices" v-else>
|
|||
|
|
<image src="/static/data-empty.png"></image>
|
|||
|
|
没有发票信息呦~
|
|||
|
|
</view>
|
|||
|
|
<view class="addInvoiceBtn" @tap.stop="addInvoice">添加新发票</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-section>
|
|||
|
|
<!-- <view v-if="isPopupVisible" class="custom-popup">
|
|||
|
|
<view class="popup-content">
|
|||
|
|
<view class="del_btn" @tap.stop="closeImg">X</view>
|
|||
|
|
<image></image>
|
|||
|
|
<!-- <view class="title">请选择升级方向</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<radio-group @change="onRadioChange">
|
|||
|
|
<label v-for="(item, index) in options" :key="index" class="radio-item">
|
|||
|
|
<radio :value="item.value" :checked="item.value === selectedValue" />
|
|||
|
|
{{ item.label }}
|
|||
|
|
</label>
|
|||
|
|
</radio-group> -->
|
|||
|
|
<!-- <view class="btns">
|
|||
|
|
<button @click="confirmSelection('up')"></button>
|
|||
|
|
<button @click="confirmSelection('noup')"></button>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</s-layout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import DeliveryApi from '@/sheep/api/trade/delivery';
|
|||
|
|
import {
|
|||
|
|
onMounted,
|
|||
|
|
reactive,
|
|||
|
|
ref
|
|||
|
|
} from 'vue';
|
|||
|
|
import {
|
|||
|
|
fen2yuan,
|
|||
|
|
formatGoodsSwiper,
|
|||
|
|
useDurationTime
|
|||
|
|
} from '@/sheep/hooks/useGoods';
|
|||
|
|
import InvoiceApi from '@/sheep/api/trade/invoices';
|
|||
|
|
import sheep from '@/sheep';
|
|||
|
|
import {
|
|||
|
|
onLoad,onShow
|
|||
|
|
} from '@dcloudio/uni-app';
|
|||
|
|
// let isPopupVisible = ref(false);
|
|||
|
|
const current = ref(0);
|
|||
|
|
const state = reactive({
|
|||
|
|
invoList: [
|
|||
|
|
],
|
|||
|
|
riseList: [{
|
|||
|
|
riseName: "抬头1",
|
|||
|
|
invoice_no: "165121349",
|
|||
|
|
invoice_money: 29800
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// onMounted(()=>{
|
|||
|
|
// //获取发票列表
|
|||
|
|
// getInvoicelistdatas()
|
|||
|
|
// //获取抬头列表
|
|||
|
|
|
|||
|
|
// })
|
|||
|
|
onLoad((options)=>{
|
|||
|
|
getInvoicelistdatas()
|
|||
|
|
|
|||
|
|
if(options.toRight){
|
|||
|
|
current.value = 1
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// const closeImg = ()=>{
|
|||
|
|
// // isPopupVisible.value = false
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
onShow(()=>{
|
|||
|
|
getInvoicelistdatas()
|
|||
|
|
getInvoiceheadlist()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
const getInvoicelistdatas = async ()=>{
|
|||
|
|
const {data} = await InvoiceApi.getInvoicesList()
|
|||
|
|
console.log(data)
|
|||
|
|
if(data){
|
|||
|
|
data.list.forEach(item => {
|
|||
|
|
item.createTime = formatTimestamp(item.createTime); // 直接修改原对象
|
|||
|
|
});
|
|||
|
|
state.invoList = data.list
|
|||
|
|
console.log(state.invoList)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const getInvoiceheadlist =async ()=>{
|
|||
|
|
const {data} = await InvoiceApi.getInvoicesHeadList()
|
|||
|
|
|
|||
|
|
state.riseList = data
|
|||
|
|
console.log(state.riseList)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const updateInvoice = (headid)=>{
|
|||
|
|
console.log("点击了修改")
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:"/pages/user/invoices/addInvoiceHeader?type=update&headid="+headid
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const lookinvDetail= (invoiceUrl)=>{
|
|||
|
|
if(!invoiceUrl){
|
|||
|
|
sheep.$helper.toast('暂无发票，联系管理员开票');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// isPopupVisible.value = true
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:"/pages/user/invoices/invoicePreviews?invoiceUrl="+invoiceUrl
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const deleInvoicehead = (headId)=>{
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要删除此发票吗？',
|
|||
|
|
success: async function (res) {
|
|||
|
|
if (!res.confirm) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
deleteInvoicehead(headId)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
const deleteInvoicehead = async (headId)=>{
|
|||
|
|
const {code } = await InvoiceApi.deleteInvoicehead(headId)
|
|||
|
|
if(code === 0){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '删除成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
});
|
|||
|
|
getInvoiceheadlist()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const onClickItem = (e) => {
|
|||
|
|
|
|||
|
|
if (current.value !== e.currentIndex) {
|
|||
|
|
current.value = e.currentIndex
|
|||
|
|
}
|
|||
|
|
if(e.currentIndex === 0){
|
|||
|
|
getInvoiceheadlist()
|
|||
|
|
}else{
|
|||
|
|
getInvoicelistdatas()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const items = reactive([ '抬头管理','发票记录'])
|
|||
|
|
const addInvoice = () => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/user/invoices/addInvoiceHeader?type=add"
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
function formatTimestamp(timestamp) {
|
|||
|
|
const date = new Date(Number(timestamp)); // 确保时间戳是数字
|
|||
|
|
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，加 1 并补零
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|||
|
|
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|||
|
|
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
|
|||
|
|
.invoiceCenters{
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
::v-deep .invoice_tabbar {
|
|||
|
|
|
|||
|
|
.invoice_tabbar_title {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
background: white !important;
|
|||
|
|
.segmented-control__text {
|
|||
|
|
font-size: 17px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.segmented-control__item--text {
|
|||
|
|
border-bottom-width: 3px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//模态框
|
|||
|
|
.custom-popup {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.popup-content {
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
border-radius: 10px;
|
|||
|
|
width: 72%;
|
|||
|
|
height: 50vh;
|
|||
|
|
position: relative;
|
|||
|
|
text-align: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 105% 105%;
|
|||
|
|
background-position: center;
|
|||
|
|
background-image: url("https://xcx.dfhg888.cn/admin-api/infra/file/29/get/6bbea043f7ac06e25a33a28c7f942a8034a7a75185084c1556d2b1d25339a7cb.png");
|
|||
|
|
|
|||
|
|
.del_btn{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 20rpx;
|
|||
|
|
top: 13rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.radio-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
.btns {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 98rpx;
|
|||
|
|
justify-content: center;
|
|||
|
|
>button{
|
|||
|
|
width: 33%;
|
|||
|
|
height: 42rpx;
|
|||
|
|
margin: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//模态框
|
|||
|
|
.addInvoiceBtn {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 95rpx;
|
|||
|
|
line-height: 95rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
z-index: 10;
|
|||
|
|
position: fixed;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
background-color: #7D9337;
|
|||
|
|
bottom: 50rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-gray {
|
|||
|
|
color: #6e6a6a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invoList {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 75vh;
|
|||
|
|
overflow: auto;
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
|
|||
|
|
.invoice_item-a {
|
|||
|
|
width: 95%;
|
|||
|
|
margin: 0 auto 20rpx;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
|
|||
|
|
.goods_box {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
>image {
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
width: 80rpx;
|
|||
|
|
min-width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invoice_box {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 20rpx auto;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
background-color: #F5F6F8;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.invoicea_type {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods_mon {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.set_box {
|
|||
|
|
display: flex;
|
|||
|
|
margin: 36rpx auto 0;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.invoicea_status {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lookDetailbtn {
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
border: 1px solid #bbb5b5;
|
|||
|
|
padding: 10rpx 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invoice_item {
|
|||
|
|
width: 95%;
|
|||
|
|
height: 230rpx;
|
|||
|
|
margin: 0 auto 20rpx;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.ii_left {
|
|||
|
|
.inhead_name {
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
.defaultFont{
|
|||
|
|
margin-left: 26rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
color: #7D9337;
|
|||
|
|
border: 1px solid #7D9337;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inhead_email {
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ii_right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.inhead_type {
|
|||
|
|
background-color: #FAF0e2;
|
|||
|
|
padding: 5rpx 10rpx;
|
|||
|
|
color: #C9792B;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inhead_set {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.inhead_set_btn {
|
|||
|
|
|
|||
|
|
.ii_icon {
|
|||
|
|
margin-right: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inhead_change {
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.noInvoices{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
padding-top: 135rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 31rpx;
|
|||
|
|
color: #B0B0B0;
|
|||
|
|
>image{
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|