update
This commit is contained in:
parent
2231c7f36f
commit
d7aa326d2e
@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<view class="invoice-detail-page">
|
||||
<!-- 头部状态卡片 -->
|
||||
<view class="header-section">
|
||||
<view class="status-card" :class="statusClass">
|
||||
<view class="status-icon">{{ statusIcon }}</view>
|
||||
<view class="status-info">
|
||||
<view class="status-text">{{ statusText }}</view>
|
||||
<view class="status-desc">{{ statusDesc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="main-content">
|
||||
<!-- 发票基本信息卡片 -->
|
||||
<view class="detail-card">
|
||||
<view class="card-header">
|
||||
<view class="card-title">发票基本信息</view>
|
||||
<view class="card-icon">📋</view>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="info-row">
|
||||
<text class="info-label">发票抬头</text>
|
||||
<text class="info-value">{{ invoice.title }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">发票号码</text>
|
||||
<text class="info-value">{{ invoice.invoiceNumber }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">发票类型</text>
|
||||
<text class="info-value">{{ invoice.type }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">开票金额</text>
|
||||
<text class="info-value amount">¥{{ invoice.amount }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">申请时间</text>
|
||||
<text class="info-value">{{ invoice.createTime }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="invoice.status === 'issued' && invoice.issueTime">
|
||||
<text class="info-label">开票时间</text>
|
||||
<text class="info-value">{{ invoice.issueTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系信息卡片 -->
|
||||
<view class="detail-card">
|
||||
<view class="card-header">
|
||||
<view class="card-title">联系信息</view>
|
||||
<view class="card-icon">📞</view>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="info-row">
|
||||
<text class="info-label">电子邮箱</text>
|
||||
<text class="info-value">{{ invoice.email || '未填写' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">手机号码</text>
|
||||
<text class="info-value">{{ invoice.phone || '未填写' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 企业信息卡片(仅企业发票显示) -->
|
||||
<view class="detail-card" v-if="invoice.taxNumber">
|
||||
<view class="card-header">
|
||||
<view class="card-title">企业信息</view>
|
||||
<view class="card-icon">🏢</view>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="info-row">
|
||||
<text class="info-label">税号</text>
|
||||
<text class="info-value">{{ invoice.taxNumber }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="invoice.bankName">
|
||||
<text class="info-label">开户银行</text>
|
||||
<text class="info-value">{{ invoice.bankName }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="invoice.bankAccount">
|
||||
<text class="info-label">银行账号</text>
|
||||
<text class="info-value">{{ invoice.bankAccount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 驳回原因卡片(仅驳回状态显示) -->
|
||||
<view class="detail-card reject-card" v-if="invoice.status === 'rejected' && invoice.rejectReason">
|
||||
<view class="card-header">
|
||||
<view class="card-title">驳回原因</view>
|
||||
<view class="card-icon">⚠️</view>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="reject-reason">
|
||||
{{ invoice.rejectReason }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 票据图片卡片 -->
|
||||
<view class="detail-card" v-if="invoice.status === 'issued' && invoiceImages && invoiceImages.length > 0">
|
||||
<view class="card-header">
|
||||
<view class="card-title">票据图片</view>
|
||||
<view class="card-icon">🖼️</view>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="invoice-images">
|
||||
<view class="image-item" v-for="(image, index) in invoiceImages" :key="index"
|
||||
@click="previewImage(index)">
|
||||
<image class="invoice-image" :src="image.url" mode="aspectFill" />
|
||||
<view class="image-overlay">
|
||||
<view class="preview-icon">👁️</view>
|
||||
<text class="preview-text">点击预览</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menu: {}, // 手机配置信息
|
||||
invoice: {}, // 发票详情数据
|
||||
invoiceId: null, // 发票ID
|
||||
invoiceImages: [] // 票据图片数组
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 状态样式类
|
||||
statusClass() {
|
||||
var classMap = {
|
||||
'issued': 'status-issued',
|
||||
'applying': 'status-applying',
|
||||
'rejected': 'status-rejected'
|
||||
};
|
||||
return classMap[this.invoice.status] || '';
|
||||
},
|
||||
|
||||
// 状态图标
|
||||
statusIcon() {
|
||||
var iconMap = {
|
||||
'issued': '✅',
|
||||
'applying': '⏳',
|
||||
'rejected': '❌'
|
||||
};
|
||||
return iconMap[this.invoice.status] || '';
|
||||
},
|
||||
|
||||
// 状态文本
|
||||
statusText() {
|
||||
var textMap = {
|
||||
'issued': '已开票',
|
||||
'applying': '申请中',
|
||||
'rejected': '已驳回'
|
||||
};
|
||||
return textMap[this.invoice.status] || '未知';
|
||||
},
|
||||
|
||||
// 状态描述
|
||||
statusDesc() {
|
||||
var descMap = {
|
||||
'issued': '您的发票已开具完成',
|
||||
'applying': '正在为您开具发票,请耐心等待',
|
||||
'rejected': '申请被驳回,请根据驳回原因修改后重新申请'
|
||||
};
|
||||
return descMap[this.invoice.status] || '';
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||||
|
||||
if (options.id) {
|
||||
this.invoiceId = options.id;
|
||||
}
|
||||
|
||||
if (options.invoice) {
|
||||
try {
|
||||
this.invoice = JSON.parse(decodeURIComponent(options.invoice));
|
||||
} catch (error) {
|
||||
console.error('解析发票数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果没有从列表页传数据,则根据ID获取详情
|
||||
if (!this.invoice.id && this.invoiceId) {
|
||||
this.loadInvoiceDetail();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载发票详情
|
||||
loadInvoiceDetail() {
|
||||
var _this = this;
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
// 模拟API调用
|
||||
setTimeout(function () {
|
||||
// 模拟数据
|
||||
var mockData = {
|
||||
id: _this.invoiceId,
|
||||
title: '云南高速公路服务区有限公司',
|
||||
invoiceNumber: 'FP202401001',
|
||||
amount: '1000.00',
|
||||
status: 'issued',
|
||||
type: '增值税普通发票',
|
||||
createTime: '2024-01-15 14:30:00',
|
||||
issueTime: '2024-01-16 10:00:00',
|
||||
email: 'zhangsan@example.com',
|
||||
phone: '13800138000',
|
||||
taxNumber: '91530100MA6KXXXXXX',
|
||||
bankName: '中国银行昆明分行',
|
||||
bankAccount: '6217 9027 0000 1234 567',
|
||||
downloadUrl: 'https://example.com/invoice/FP202401001.pdf'
|
||||
};
|
||||
|
||||
_this.invoice = mockData;
|
||||
|
||||
// 模拟票据图片数据
|
||||
if (mockData.status === 'issued') {
|
||||
_this.invoiceImages = [
|
||||
{
|
||||
url: 'https://picsum.photos/seed/invoice1/800/600.jpg',
|
||||
name: '票据正面'
|
||||
},
|
||||
{
|
||||
url: 'https://picsum.photos/seed/invoice2/800/600.jpg',
|
||||
name: '票据背面'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载发票详情失败:', error);
|
||||
uni.showToast({
|
||||
title: '加载失败,请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
// 返回列表
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(index) {
|
||||
var urls = this.invoiceImages.map(function (image) {
|
||||
return image.url;
|
||||
});
|
||||
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.invoice-detail-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #E8F5E8 0%, #F8F9FA 50%, #FFFFFF 100%);
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.mainTop {
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
|
||||
.pageTitle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 头部状态卡片 */
|
||||
.header-section {
|
||||
padding: 40rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.status-issued {
|
||||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.status-applying {
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.status-rejected {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
flex: 1;
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: white;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
border: 1rpx solid #f0f0f0;
|
||||
overflow: hidden;
|
||||
|
||||
&.reject-card {
|
||||
border-left: 8rpx solid #ef4444;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
border-bottom: 2rpx solid #f0fdf4;
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, rgba(22, 163, 74, 0.03) 100%);
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 30rpx;
|
||||
opacity: 0.7;
|
||||
color: #22c55e;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
|
||||
&.amount {
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 驳回原因样式 */
|
||||
.reject-reason {
|
||||
background: #fef2f2;
|
||||
border: 1rpx solid #fecaca;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #dc2626;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 文件下载样式 */
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background: #f8fafc;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background: #f1f5f9;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
|
||||
.file-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx 20rpx;
|
||||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||
border-radius: 24rpx;
|
||||
color: white;
|
||||
|
||||
.download-text {
|
||||
font-size: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作区域 */
|
||||
.bottom-actions {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
padding: 24rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.back-btn {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
|
||||
&:active {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary-btn {
|
||||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||
color: white;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary-btn {
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
color: white;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 票据图片样式 */
|
||||
.invoice-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
width: calc(50% - 8rpx);
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.preview-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.preview-text {
|
||||
font-size: 24rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.image-item:hover .image-overlay,
|
||||
.image-item:active .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,552 @@
|
||||
<template>
|
||||
<view class="invoice-management-page">
|
||||
<!-- 头部统计区域 -->
|
||||
<view class="header-section">
|
||||
<view class="stats-card">
|
||||
<view class="stats-item">
|
||||
<text class="stats-number">{{ totalInvoices }}</text>
|
||||
<text class="stats-label">总发票数</text>
|
||||
</view>
|
||||
<view class="stats-divider"></view>
|
||||
<view class="stats-item">
|
||||
<text class="stats-number">{{ totalAmount }}</text>
|
||||
<text class="stats-label">开票金额(元)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索和筛选区域 -->
|
||||
<view class="filter-section">
|
||||
<view class="search-box">
|
||||
<view class="search-icon">🔍</view>
|
||||
<input class="search-input" v-model="searchText" placeholder="请输入发票号码" @input="handleSearch" />
|
||||
</view>
|
||||
<view class="filter-tabs">
|
||||
<view class="filter-tab" v-for="(item, index) in statusTabs" :key="index"
|
||||
:class="{ 'tab-active': currentStatus === item.value }" @click="switchStatus(item.value)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 发票列表 -->
|
||||
<view class="invoice-list">
|
||||
<view class="invoice-item" v-for="(invoice, key) in filteredInvoices" :key="invoice.id"
|
||||
@click="goToDetail(invoice)">
|
||||
<view class="item-header">
|
||||
<view class="invoice-title">{{ invoice.title }}</view>
|
||||
<view class="invoice-status" :class="'status-' + invoice.status">
|
||||
{{ statusText[invoice.status] || '未知' }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item-content">
|
||||
<view class="info-row">
|
||||
<text class="info-label">发票号码:</text>
|
||||
<text class="info-value">{{ invoice.invoiceNumber }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">开票金额:</text>
|
||||
<text class="info-value amount">¥{{ invoice.amount }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">开票日期:</text>
|
||||
<text class="info-value">{{ invoice.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item-footer">
|
||||
<view class="invoice-type">{{ invoice.type }}</view>
|
||||
<view class="view-detail">
|
||||
<text>查看详情</text>
|
||||
<text class="arrow">→</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="filteredInvoices.length === 0">
|
||||
<view class="empty-icon">📄</view>
|
||||
<text class="empty-text">暂无发票记录</text>
|
||||
<text class="empty-desc">您还没有申请过发票</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="load-more" v-if="hasMore && filteredInvoices.length > 0">
|
||||
<text class="load-text">{{ loading ? '加载中...' : '上拉加载更多' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menu: {}, // 手机配置信息
|
||||
searchText: '', // 搜索关键词
|
||||
currentStatus: 'all', // 当前筛选状态
|
||||
loading: false,
|
||||
hasMore: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
// 统计数据
|
||||
totalInvoices: 0,
|
||||
totalAmount: '0.00',
|
||||
// 状态筛选标签
|
||||
statusTabs: [
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '已开票', value: 'issued' },
|
||||
{ label: '申请中', value: 'applying' },
|
||||
{ label: '已驳回', value: 'rejected' }
|
||||
],
|
||||
// 发票列表数据
|
||||
invoiceList: [],
|
||||
// 状态文本映射
|
||||
statusText: {
|
||||
'issued': '已开票',
|
||||
'applying': '申请中',
|
||||
'rejected': '已驳回'
|
||||
},
|
||||
// 模拟数据
|
||||
mockData: [
|
||||
{
|
||||
id: 1,
|
||||
title: '云南高速公路服务区有限公司',
|
||||
invoiceNumber: 'FP202401001',
|
||||
amount: '1000.00',
|
||||
status: 'issued',
|
||||
type: '增值税普通发票',
|
||||
createTime: '2024-01-15 14:30:00',
|
||||
email: 'zhangsan@example.com',
|
||||
phone: '13800138000',
|
||||
taxNumber: '91530100MA6KXXXXXX',
|
||||
bankName: '中国银行昆明分行',
|
||||
bankAccount: '6217 9027 0000 1234 567'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '个人用户',
|
||||
invoiceNumber: 'FP202401002',
|
||||
amount: '500.00',
|
||||
status: 'applying',
|
||||
type: '增值税普通发票',
|
||||
createTime: '2024-01-16 09:15:00',
|
||||
email: 'lisi@example.com',
|
||||
phone: '13900139000'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '商贸有限公司',
|
||||
invoiceNumber: 'FP202401003',
|
||||
amount: '3000.00',
|
||||
status: 'rejected',
|
||||
type: '增值税专用发票',
|
||||
createTime: '2024-01-14 16:45:00',
|
||||
email: 'wangwu@example.com',
|
||||
phone: '13700137000',
|
||||
taxNumber: '91530100MA6KXXXXXX',
|
||||
bankName: '工商银行昆明分行',
|
||||
bankAccount: '6222 0227 0000 1234 567',
|
||||
rejectReason: '税号信息有误,请核对后重新申请'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 筛选后的发票列表
|
||||
filteredInvoices() {
|
||||
var list = this.invoiceList;
|
||||
var _this = this;
|
||||
|
||||
// 按状态筛选
|
||||
if (this.currentStatus !== 'all') {
|
||||
var currentStatus = this.currentStatus;
|
||||
list = list.filter(function (item) {
|
||||
return item.status === currentStatus;
|
||||
});
|
||||
}
|
||||
|
||||
// 按搜索关键词筛选
|
||||
if (this.searchText) {
|
||||
var keyword = this.searchText.toLowerCase();
|
||||
list = list.filter(function (item) {
|
||||
return item.title.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
item.invoiceNumber.toLowerCase().indexOf(keyword) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||||
this.loadInvoiceList();
|
||||
this.calculateStats();
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.hasMore && !this.loading) {
|
||||
this.loadMore();
|
||||
}
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.refresh();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载发票列表
|
||||
loadInvoiceList() {
|
||||
var _this = this;
|
||||
try {
|
||||
this.loading = true;
|
||||
|
||||
// 模拟API调用
|
||||
setTimeout(function () {
|
||||
// 使用模拟数据
|
||||
if (_this.page === 1) {
|
||||
_this.invoiceList = _this.mockData;
|
||||
} else {
|
||||
// 模拟分页
|
||||
_this.invoiceList = _this.invoiceList.concat(_this.mockData);
|
||||
}
|
||||
|
||||
// 模拟分页逻辑
|
||||
_this.hasMore = _this.page < 3;
|
||||
_this.loading = false;
|
||||
_this.calculateStats();
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载发票列表失败:', error);
|
||||
uni.showToast({
|
||||
title: '加载失败,请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
this.loading = false;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
},
|
||||
|
||||
// 加载更多
|
||||
loadMore() {
|
||||
this.page++;
|
||||
this.loadInvoiceList();
|
||||
},
|
||||
|
||||
// 刷新
|
||||
refresh() {
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.loadInvoiceList();
|
||||
},
|
||||
|
||||
// 计算统计数据
|
||||
calculateStats() {
|
||||
this.totalInvoices = this.invoiceList.length;
|
||||
var total = this.invoiceList.reduce(function (sum, item) {
|
||||
return sum + parseFloat(item.amount || 0);
|
||||
}, 0);
|
||||
this.totalAmount = total.toFixed(2);
|
||||
},
|
||||
|
||||
// 搜索处理
|
||||
handleSearch() {
|
||||
// 搜索时重置分页
|
||||
this.page = 1;
|
||||
},
|
||||
|
||||
// 切换状态筛选
|
||||
switchStatus(status) {
|
||||
this.currentStatus = status;
|
||||
},
|
||||
|
||||
// 跳转到详情页
|
||||
goToDetail(invoice) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/InvoiceManagement/detail?id=' + invoice.id + '&invoice=' + encodeURIComponent(JSON.stringify(invoice))
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.invoice-management-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #E8F5E8 0%, #F8F9FA 50%, #FFFFFF 100%);
|
||||
}
|
||||
|
||||
.mainTop {
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
|
||||
.pageTitle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 头部统计区域 */
|
||||
.header-section {
|
||||
padding: 40rpx 24rpx 44rpx;
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
position: relative;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(10rpx);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.stats-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: white;
|
||||
|
||||
.stats-number {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-divider {
|
||||
width: 2rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索和筛选区域 */
|
||||
.filter-section {
|
||||
padding: 40rpx 24rpx 24rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 40rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.search-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.filter-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12rpx 16rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.tab-active {
|
||||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 发票列表 */
|
||||
.invoice-list {
|
||||
padding: 0 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.invoice-item {
|
||||
background: white;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
border: 1rpx solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.invoice-title {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.invoice-status {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-issued {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
&.status-applying {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
&.status-rejected {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
||||
&.amount {
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.invoice-type {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.view-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #22c55e;
|
||||
font-size: 24rpx;
|
||||
|
||||
.arrow {
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 120rpx 40rpx;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载更多 */
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
|
||||
.load-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -94,7 +94,8 @@
|
||||
去付款</view>
|
||||
<view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE === 2010"
|
||||
@click.stop="handleConfirmReceipt(item)">确认收货</view>
|
||||
<!-- <view class="orderItemBottomRightBuyAgain" @click.stop="handleInvoiceApplication(item)">开票申请</view> -->
|
||||
<view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE===3000"
|
||||
@click.stop="handleInvoiceApplication(item)">开票申请</view>
|
||||
<!-- <view class="orderItemBottomRightBuyAgain" @click.stop="handleGoStore">再次购买</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -182,12 +182,12 @@
|
||||
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/bindCarIcon.png" />
|
||||
<view class="basicText">绑定车辆</view>
|
||||
</view>
|
||||
|
||||
<view class="basicItem" @click="handleGoNormal({ value: 3 })">
|
||||
<!-- @click="handleGoNormal({ value: 3 })" -->
|
||||
<!-- <view class="basicItem">
|
||||
<image class="basicItemImg"
|
||||
src="https://eshangtech.com/caiyunyiImg/suggestionFeedbackIcon.png" />
|
||||
<view class="basicText">建议反馈</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="basicItem" @click="hanldGoConfig">
|
||||
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/configIcon.png" />
|
||||
@ -256,6 +256,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 工会之家订单栏 -->
|
||||
<view class="orderFun" v-if="false">
|
||||
<view class="boxTitleTop" @click="handleGoOrder(0, 'UnionMall')">
|
||||
@ -304,7 +305,8 @@
|
||||
<image class="funItemImg" src="/static/images/home/serviceIcon.svg" />
|
||||
<view class="funItemText">我的爱车</view>
|
||||
</view>
|
||||
<view class="funItemBox" @click="handleGoNormal({ value: 3 })">
|
||||
<!-- @click="handleGoNormal({ value: 3 })" -->
|
||||
<view class="funItemBox" >
|
||||
<image class="funItemImg" src="/static/images/home/suggestion.svg" />
|
||||
<view class="funItemText">建议反馈</view>
|
||||
</view>
|
||||
@ -1084,9 +1086,9 @@ export default {
|
||||
// uni.navigateToMiniProgram({
|
||||
// shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
|
||||
// });
|
||||
uni.navigateTo({
|
||||
url: `/pages/complaints/index`,
|
||||
});
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/complaints/index`,
|
||||
// });
|
||||
}
|
||||
},
|
||||
// // 调起付款码
|
||||
|
||||
@ -18,6 +18,8 @@ export default {
|
||||
id: query.id
|
||||
}
|
||||
this.url = `https://eshangtech.com/JumpDocument/PlatformModuleManage/Modules/InfoSearch/JumpToHXQcode.aspx?content=535001|019051||${obj.time}|${obj.orderAmount}|4&d=${obj.id}`
|
||||
console.log('this.url', this.url);
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -161,11 +161,11 @@
|
||||
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/bindCarIcon.png" />
|
||||
<view class="basicText">绑定车辆</view>
|
||||
</view>
|
||||
|
||||
<view class="basicItem" @click="handleGoNormal({ value: 3 })">
|
||||
<!-- @click="handleGoNormal({ value: 3 })" -->
|
||||
<!-- <view class="basicItem" >
|
||||
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/suggestionFeedbackIcon.png" />
|
||||
<view class="basicText">建议反馈</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="basicItem" @click="hanldGoConfig">
|
||||
<image class="basicItemImg" src="https://eshangtech.com/caiyunyiImg/configIcon.png" />
|
||||
@ -282,7 +282,8 @@
|
||||
<image class="funItemImg" src="/static/images/home/serviceIcon.svg" />
|
||||
<view class="funItemText">我的爱车</view>
|
||||
</view>
|
||||
<view class="funItemBox" @click="handleGoNormal({ value: 3 })">
|
||||
<!-- @click="handleGoNormal({ value: 3 })" -->
|
||||
<view class="funItemBox" >
|
||||
<image class="funItemImg" src="/static/images/home/suggestion.svg" />
|
||||
<view class="funItemText">建议反馈</view>
|
||||
</view>
|
||||
@ -1166,9 +1167,9 @@ export default {
|
||||
// uni.navigateToMiniProgram({
|
||||
// shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
|
||||
// });
|
||||
uni.navigateTo({
|
||||
url: `/pages/complaints/index`,
|
||||
});
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/complaints/index`,
|
||||
// });
|
||||
}
|
||||
},
|
||||
// // 调起付款码
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1187,9 +1187,9 @@ var _default = {
|
||||
// uni.navigateToMiniProgram({
|
||||
// shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
|
||||
// });
|
||||
uni.navigateTo({
|
||||
url: "/pages/complaints/index"
|
||||
});
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/complaints/index`,
|
||||
// });
|
||||
}
|
||||
},
|
||||
// // 调起付款码
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,12 +8,26 @@
|
||||
"condition": {
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "pages/InvoiceManagement/detail",
|
||||
"pathName": "pages/InvoiceManagement/detail",
|
||||
"query": "id=1&invoice=%257B%2522id%2522%253A1%252C%2522title%2522%253A%2522%25E4%25BA%2591%25E5%258D%2597%25E9%25AB%2598%25E9%2580%259F%25E5%2585%25AC%25E8%25B7%25AF%25E6%259C%258D%25E5%258A%25A1%25E5%258C%25BA%25E6%259C%2589%25E9%2599%2590%25E5%2585%25AC%25E5%258F%25B8%2522%252C%2522invoiceNumber%2522%253A%2522FP202401001%2522%252C%2522amount%2522%253A%25221000.00%2522%252C%2522status%2522%253A%2522issued%2522%252C%2522type%2522%253A%2522%25E5%25A2%259E%25E5%2580%25BC%25E7%25A8%258E%25E6%2599%25AE%25E9%2580%259A%25E5%258F%2591%25E7%25A5%25A8%2522%252C%2522createTime%2522%253A%25222024-01-15%252014%253A30%253A00%2522%252C%2522email%2522%253A%2522zhangsan%2540example.com%2522%252C%2522phone%2522%253A%252213800138000%2522%252C%2522taxNumber%2522%253A%252291530100MA6KXXXXXX%2522%252C%2522bankName%2522%253A%2522%25E4%25B8%25AD%25E5%259B%25BD%25E9%2593%25B6%25E8%25A1%258C%25E6%2598%2586%25E6%2598%258E%25E5%2588%2586%25E8%25A1%258C%2522%252C%2522bankAccount%2522%253A%25226217%25209027%25200000%25201234%2520567%2522%257D",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
},
|
||||
{
|
||||
"name": "pages/InvoiceManagement/index",
|
||||
"pathName": "pages/InvoiceManagement/index",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "pages/couponDetail/index",
|
||||
"pathName": "pages/complaints/addComplaints",
|
||||
"query": "",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user