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> |