748 lines
16 KiB
Vue
748 lines
16 KiB
Vue
<template>
|
||
<view class="profit-exception-container">
|
||
<!-- 页面标题 -->
|
||
<view class="page-header">
|
||
<view class="header-left" @click="goBack">
|
||
<view class="back-icon">←</view>
|
||
</view>
|
||
<view class="header-title">分润异常提醒</view>
|
||
<view class="header-right" @click="refreshData">
|
||
<view class="refresh-btn">刷新</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 异常统计 -->
|
||
<view class="stats-section">
|
||
<view class="stats-grid">
|
||
<view class="stat-card">
|
||
<view class="stat-icon">💰</view>
|
||
<view class="stat-content">
|
||
<view class="stat-value">{{ exceptionStats.total }}</view>
|
||
<view class="stat-label">总异常数</view>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<view class="stat-icon">⚠️</view>
|
||
<view class="stat-content">
|
||
<view class="stat-value">{{ exceptionStats.pending }}</view>
|
||
<view class="stat-label">待处理</view>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<view class="stat-icon">✅</view>
|
||
<view class="stat-content">
|
||
<view class="stat-value">{{ exceptionStats.resolved }}</view>
|
||
<view class="stat-label">已解决</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 异常列表 -->
|
||
<view class="exception-section">
|
||
<view class="section-header">
|
||
<view class="section-title">异常列表</view>
|
||
<view class="filter-box">
|
||
<view class="filter-tabs">
|
||
<view
|
||
v-for="tab in filterTabs"
|
||
:key="tab.value"
|
||
class="filter-tab"
|
||
:class="{ active: currentFilter === tab.value }"
|
||
@click="currentFilter = tab.value"
|
||
>
|
||
{{ tab.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="exception-list">
|
||
<view
|
||
v-for="exception in filteredExceptions"
|
||
:key="exception.id"
|
||
class="exception-item"
|
||
:class="{ 'pending': exception.status === 'pending', 'resolved': exception.status === 'resolved' }"
|
||
@click="viewExceptionDetail(exception.id)"
|
||
>
|
||
<view class="exception-header">
|
||
<view class="exception-title">{{ exception.title }}</view>
|
||
<view class="exception-status">{{ getStatusText(exception.status) }}</view>
|
||
</view>
|
||
<view class="exception-content">
|
||
<view class="exception-desc">{{ exception.description }}</view>
|
||
<view class="exception-info">
|
||
<view class="info-item">
|
||
<view class="info-label">关联账户：</view>
|
||
<view class="info-value">{{ exception.accountName }}</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="info-label">异常金额：</view>
|
||
<view class="info-value">{{ exception.amount }}元</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="info-label">异常时间：</view>
|
||
<view class="info-value">{{ exception.createTime }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="exception-actions">
|
||
<view
|
||
v-if="exception.status === 'pending'"
|
||
class="action-btn primary"
|
||
@click.stop="resolveException(exception.id)"
|
||
>
|
||
处理
|
||
</view>
|
||
<view
|
||
class="action-btn secondary"
|
||
@click.stop="viewExceptionDetail(exception.id)"
|
||
>
|
||
详情
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="filteredExceptions.length === 0" class="empty-state">
|
||
<view class="empty-icon">📭</view>
|
||
<view class="empty-text">暂无相关异常</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作提示 -->
|
||
<view class="tips-section">
|
||
<view class="tips-title">操作提示</view>
|
||
<view class="tips-content">
|
||
<view class="tip-item">• 账户余额不足时，系统会暂停分润发放</view>
|
||
<view class="tip-item">• 请及时充值以确保分润正常发放</view>
|
||
<view class="tip-item">• 处理异常后，系统会自动重试分润发放</view>
|
||
<view class="tip-item">• 如遇持续异常，请联系平台客服</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from "vue"
|
||
|
||
// 异常统计
|
||
const exceptionStats = ref({
|
||
total: 5,
|
||
pending: 2,
|
||
resolved: 3
|
||
})
|
||
|
||
// 异常列表
|
||
const exceptions = ref([
|
||
{
|
||
id: 1,
|
||
title: '账户余额不足',
|
||
description: '驾校账户余额不足，无法发放分销员分润',
|
||
accountName: '顺达驾校',
|
||
amount: 1250.00,
|
||
status: 'pending',
|
||
createTime: '2026-01-29 10:15:30'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '账户余额不足',
|
||
description: '驾校账户余额不足，无法发放分销员分润',
|
||
accountName: '顺达驾校',
|
||
amount: 890.50,
|
||
status: 'pending',
|
||
createTime: '2026-01-29 09:45:12'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '账户余额不足',
|
||
description: '驾校账户余额不足，无法发放分销员分润',
|
||
accountName: '顺达驾校',
|
||
amount: 678.20,
|
||
status: 'resolved',
|
||
createTime: '2026-01-28 16:30:45'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '账户余额不足',
|
||
description: '驾校账户余额不足，无法发放分销员分润',
|
||
accountName: '顺达驾校',
|
||
amount: 1560.80,
|
||
status: 'resolved',
|
||
createTime: '2026-01-28 14:20:18'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '账户余额不足',
|
||
description: '驾校账户余额不足，无法发放分销员分润',
|
||
accountName: '顺达驾校',
|
||
amount: 980.00,
|
||
status: 'resolved',
|
||
createTime: '2026-01-28 11:05:33'
|
||
}
|
||
])
|
||
|
||
// 过滤标签
|
||
const filterTabs = ref([
|
||
{ label: '全部', value: 'all' },
|
||
{ label: '待处理', value: 'pending' },
|
||
{ label: '已解决', value: 'resolved' }
|
||
])
|
||
|
||
const currentFilter = ref('all')
|
||
|
||
// 过滤后的异常列表
|
||
const filteredExceptions = computed(() => {
|
||
if (currentFilter.value === 'all') {
|
||
return exceptions.value
|
||
}
|
||
return exceptions.value.filter(exception => exception.status === currentFilter.value)
|
||
})
|
||
|
||
// 返回上一页
|
||
function goBack() {
|
||
uni.navigateBack({ delta: 1 })
|
||
}
|
||
|
||
// 刷新数据
|
||
function refreshData() {
|
||
uni.showLoading({ title: '刷新中...' })
|
||
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '刷新成功', icon: 'success' })
|
||
}, 1000)
|
||
}
|
||
|
||
// 获取状态文本
|
||
function getStatusText(status) {
|
||
switch (status) {
|
||
case 'pending':
|
||
return '待处理'
|
||
case 'resolved':
|
||
return '已解决'
|
||
default:
|
||
return '未知'
|
||
}
|
||
}
|
||
|
||
// 查看异常详情
|
||
function viewExceptionDetail(exceptionId) {
|
||
uni.navigateTo({
|
||
url: `/pages/exception/profit-detail?id=${exceptionId}`
|
||
})
|
||
}
|
||
|
||
// 处理异常
|
||
function resolveException(exceptionId) {
|
||
uni.showModal({
|
||
title: '处理异常',
|
||
content: '是否确认处理该异常？\n\n处理后系统会自动重试分润发放',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.showLoading({ title: '处理中...' })
|
||
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '处理成功', icon: 'success' })
|
||
|
||
// 更新异常状态
|
||
const exception = exceptions.value.find(e => e.id === exceptionId)
|
||
if (exception) {
|
||
exception.status = 'resolved'
|
||
// 更新统计数据
|
||
exceptionStats.value.pending--
|
||
exceptionStats.value.resolved++
|
||
}
|
||
}, 1500)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 实际项目中应从接口获取异常数据
|
||
// fetchExceptionData()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #f5f7fa;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
view {
|
||
font-size: 14px;
|
||
line-height: inherit;
|
||
}
|
||
/* #endif */
|
||
|
||
.profit-exception-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 页面头部 */
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 120rpx;
|
||
background-color: #fff;
|
||
padding: 0 32rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header-left {
|
||
width: 60rpx;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 40rpx;
|
||
color: #303133;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
.header-right {
|
||
width: 60rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.refresh-btn {
|
||
font-size: 28rpx;
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 异常统计 */
|
||
.stats-section {
|
||
padding: 32rpx;
|
||
background-color: #fff;
|
||
margin: 16rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.stats-grid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.stat-card {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
background-color: #f9f9f9;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 48rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.stat-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 异常列表 */
|
||
.exception-section {
|
||
flex: 1;
|
||
padding: 32rpx;
|
||
background-color: #fff;
|
||
margin: 0 16rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.filter-tabs {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.filter-tab {
|
||
padding: 12rpx 24rpx;
|
||
background-color: #f9f9f9;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.filter-tab.active {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
|
||
.exception-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.exception-item {
|
||
padding: 24rpx;
|
||
border: 1rpx solid #e4e7ed;
|
||
border-radius: 12rpx;
|
||
background-color: #f9f9f9;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.exception-item.pending {
|
||
border-left: 8rpx solid #f56c6c;
|
||
}
|
||
|
||
.exception-item.resolved {
|
||
border-left: 8rpx solid #67c23a;
|
||
}
|
||
|
||
.exception-item:active {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.exception-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.exception-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.exception-status {
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.exception-item.pending .exception-status {
|
||
background-color: #fef0f0;
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.exception-item.resolved .exception-status {
|
||
background-color: #f0f9eb;
|
||
color: #67c23a;
|
||
}
|
||
|
||
.exception-content {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.exception-desc {
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
margin-bottom: 16rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.exception-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 22rpx;
|
||
color: #909399;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.exception-actions {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-btn.primary {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
|
||
.action-btn.secondary {
|
||
background-color: #f9f9f9;
|
||
color: #606266;
|
||
border: 1rpx solid #e4e7ed;
|
||
}
|
||
|
||
/* 操作提示 */
|
||
.tips-section {
|
||
padding: 32rpx;
|
||
background-color: #ecf5ff;
|
||
margin: 0 16rpx 32rpx;
|
||
border-radius: 16rpx;
|
||
border-left: 8rpx solid #409eff;
|
||
}
|
||
|
||
.tips-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #409eff;
|
||
margin-bottom: 16rpx;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.tips-content {
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.tip-item {
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 100rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
/* 平板和大屏响应式 */
|
||
@media screen and (min-width: 768px) {
|
||
.profit-exception-container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.stats-section {
|
||
margin: 32rpx;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.exception-section {
|
||
margin: 0 32rpx 24rpx;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.tips-section {
|
||
margin: 0 32rpx 32rpx;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.page-header {
|
||
padding: 0 48rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.refresh-btn {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.stats-grid {
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 56rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.filter-tab {
|
||
padding: 16rpx 32rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.exception-item {
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.exception-title {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.exception-status {
|
||
padding: 12rpx 24rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.exception-desc {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 16rpx 32rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.tips-title {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.tips-content {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
/* 大屏设备响应式 */
|
||
@media screen and (min-width: 1024px) {
|
||
.profit-exception-container {
|
||
max-width: 1000px;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.refresh-btn {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 64rpx;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.filter-tab {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.exception-title {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.exception-desc {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tips-title {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.tips-content {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
</style> |