From 5f424a62db39bcf8b7f1cb202eb4068d24c27133 Mon Sep 17 00:00:00 2001
From: ZhangYong <zyqinghu@163.com>
Date: Thu, 25 Sep 2025 16:43:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E6=AC=BE=E6=98=8E=E7=BB=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../moneyManage/receiveDetail/receiveDetail.vue    | 239 +++++++++++++--------
 1 file changed, 152 insertions(+), 87 deletions(-)

diff --git a/src/views/moneyManage/receiveDetail/receiveDetail.vue b/src/views/moneyManage/receiveDetail/receiveDetail.vue
index b06b888..bd9b1e1 100644
--- a/src/views/moneyManage/receiveDetail/receiveDetail.vue
+++ b/src/views/moneyManage/receiveDetail/receiveDetail.vue
@@ -1,61 +1,87 @@
 <template>
     <div class="content">
-        <el-card style="margin-bottom: 0.5vh; min-height: 110px;">
-            <div class="row">
-                <div class="rowItem">
-                    <el-text style="width: 4vw;">精网号</el-text>
-                    <el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input>
-                </div>
-                <div class="rowItem">
-                    <text style="width: 4vw;">客户姓名</text>
-                    <el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
-                </div>
-                <div class="rowItem">
-                    <text style="width: 4vw;">所属地区</text>
-                    <el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select>
-                </div>
-                <div class="rowItem">
-                    <text style="width: 4vw;">订单状态</text>
-                    <el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select>
-                </div>
-                <div class="rowItem">
-                    <text style="width: 4vw;">支付方式</text>
-                    <el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select>
-                </div>
-            </div>
-            <div class="row" style="margin-top: 10px;">
-                <div class="rowItem">
-                    <text style="width: 4vw;">活动名称</text>
-                    <el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select>
-                </div>
-                <div class="rowItem">
-                    <text style="width: 4vw;">产品名称</text>
-                    <el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select>
+        <div class="card1">
+            <el-card style="margin-bottom: 0.5vh; min-height: 110px;">
+                <div class="row">
+                    <div class="rowItem">
+                        <el-text style="width: 4vw;">精网号</el-text>
+                        <el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input>
+                    </div>
+                    <div class="rowItem">
+                        <text style="width: 4vw;">客户姓名</text>
+                        <el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
+                    </div>
+                    <div class="rowItem">
+                        <text style="width: 4vw;">所属地区</text>
+                        <el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select>
+                    </div>
+                    <div class="rowItem">
+                        <text style="width: 4vw;">订单状态</text>
+                        <el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select>
+                    </div>
+                    <div class="rowItem">
+                        <text style="width: 4vw;">支付方式</text>
+                        <el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select>
+                    </div>
                 </div>
-                <div class="rowItem" style="width: 30vw">
-                    <text style="width: 4vw; margin-left: 0.5vw;">付款时间</text>
-                    <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
-                        end-placeholder="结束时间" style="width: 22vw; " @change="handleDatePickerChange"
-                        :default-time="defaultTime" :disabled-date="disabledDate" />
+                <div class="row" style="margin-top: 10px;">
+                    <div class="rowItem">
+                        <text style="width: 4vw;">活动名称</text>
+                        <el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select>
+                    </div>
+                    <div class="rowItem">
+                        <text style="width: 4vw;">产品名称</text>
+                        <el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select>
+                    </div>
+                    <div class="rowItem" style="width: 30vw">
+                        <text style="width: 4vw; margin-left: 0.5vw;">付款时间</text>
+                        <el-date-picker v-model="getTime" type="datetimerange" range-separator="至"
+                            start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; "
+                            @change="handleDatePickerChange" :default-time="defaultTime"
+                            :disabled-date="disabledDate" />
+                    </div>
                 </div>
-            </div>
-            <div class="row" style="margin-top: 10px;">
-                <div class="buttons">
-                    <el-button type="primary">查询</el-button>
-                    <el-button type="success">重置</el-button>
-                    <el-button type="primary">导出excel</el-button>
-                    <el-button type="primary" style="background-color: #5870FF;">导出列表</el-button>
+                <div class="row" style="margin-top: 10px;">
+                    <div class="buttons">
+                        <el-button type="primary">查询</el-button>
+                        <el-button type="success">重置</el-button>
+                        <el-button type="primary">导出excel</el-button>
+                        <el-button type="primary" style="background-color: #5870FF;">导出列表</el-button>
+                    </div>
                 </div>
-            </div>
-        </el-card>
+            </el-card>
+        </div>
+
 
-        <div class="detail">
+        <div class="card2">
             <el-card>
-                <div class="btnAdd">
-                    <el-button @click="openAddForm" type="success">新增收款</el-button>
+                <div class="btns">
+                    <div class="tabs">
+                        <el-button-group>
+                            <el-button class="btnItem"
+                                :style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }"
+                                @click="navigateTo('wait')">
+                                待审核
+                            </el-button>
+                            <el-button class="btnItem"
+                                :style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }"
+                                @click="navigateTo('pass')">
+                                已通过
+                            </el-button>
+                            <el-button class="btnItem"
+                                :style="{ backgroundColor: activeTab === 'reject' ? '#2741DE' : '#E5EBFE', color: activeTab === 'reject' ? 'white' : '#666' }"
+                                @click="navigateTo('reject')">
+                                已驳回
+                            </el-button>
+                        </el-button-group>
+                    </div>
+                    <div class="btnAdd">
+                        <el-button @click="openAddForm" type="success">添加收款</el-button>
+                    </div>
                 </div>
-                <div class="form">
-                    <el-table :data="tableData" style="width: 80vw;height:54vh" @sort-change="handleSortChange"
+
+                <div class="table">
+                    <el-table :data="tableData" style="width: 80vw;height:54vh;" @sort-change="handleSortChange"
                         :row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }"
                         :cell-style="{ textAlign: 'center' }">
                         <el-table-column type="index" label="序号" width="100px" fixed="left">
@@ -93,12 +119,12 @@
                         <el-table-column fixed="right" prop="adminName" label="订单状态" width="100px" />
                         <el-table-column fixed="right" prop="rejectReason" label="操作" width="100px" />
                     </el-table>
-                    <div class="pagination">
-                        <el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-                            layout="total, sizes, prev, pager, next, jumper" :total="total"
-                            @size-change="handlePagination('size', $event)"
-                            @current-change="handlePagination('page', $event)"></el-pagination>
-                    </div>
+                </div>
+                <div class="pagination">
+                    <el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+                        layout="total, sizes, prev, pager, next, jumper" :total="total"
+                        @size-change="handlePagination('size', $event)"
+                        @current-change="handlePagination('page', $event)"></el-pagination>
                 </div>
             </el-card>
         </div>
@@ -132,9 +158,9 @@
                     <el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" />
                 </el-form-item>
                 <el-form-item label="转账凭证" required>
-                    <el-upload ref="uploadRef" class="uploader" :show-file-list="false" 
-                        list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
-                        :on-error="handelImgErr" :on-change="handleImageChange" :http-request="customUpload">
+                    <el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card"
+                        :auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr"
+                        :on-change="handleImageChange" :http-request="customUpload">
                         <img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar"
                             style="height: 100%; width: 100%;  object-fit: cover;" />
                         <el-icon v-else class="avatar-uploader-icon">
@@ -150,7 +176,8 @@
             <template #footer>
                 <span class="dialog-footer">
                     <el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button>
-                    <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleReject">确定</el-button>
+                    <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
+                        @click="handleReject">确定</el-button>
                 </span>
             </template>
         </el-dialog>
@@ -161,6 +188,19 @@ import { ref } from 'vue';
 import { ElMessage } from 'element-plus'
 import API from '@/util/http.js'
 
+//====================   标签切换  =========================
+const activeTab = ref('wait')
+
+const navigateTo = (tab) => {
+    if (tab === 'wait') {
+        activeTab.value = 'wait'
+    } else if (tab === 'pass') {
+        activeTab.value = 'pass'
+    }
+    else if (tab === 'reject') {
+        activeTab.value = 'reject'
+    }
+}
 //=================  客服新增弹窗   ==================
 const addFormData = ref({
 
@@ -170,9 +210,9 @@ const uploadRef = ref()
 const openAddForm = () => {
     addFormisible.value = true
 }
-const closeAddForm=()=>{
+const closeAddForm = () => {
     addFormisible.value = false
-    addFormData.value={}
+    addFormData.value = {}
 }
 
 const handleImgSuccess = (response, uploadFile) => {
@@ -314,50 +354,74 @@ const tableData = [
 <style scoped lang="scss">
 .content {
     height: 100%;
-    width: 80vw;
-    background-color: #E7F4FD !important;
+    width: 83vw;
 
-    .row {
-        height: 4vh;
-        width: 80vw;
-        display: flex;
-        min-height: 40px;
+    .card1 {
+        width: 100%;
 
-        .rowItem {
+        .row {
+            height: 4vh;
+            width: 80vw;
             display: flex;
-            width: 15vw;
-            align-items: center;
-            justify-content: center;
-            margin-right: 0.5vw;
-        }
+            min-height: 40px;
 
-        .buttons {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: 10px;
+            .rowItem {
+                display: flex;
+                width: 15vw;
+                align-items: center;
+                justify-content: center;
+                margin-right: 0.5vw;
+            }
+
+            .buttons {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-left: 10px;
+            }
         }
     }
 
-    .detail {
+
+    .card2 {
+        width: 100%;
+
         margin-top: 2vh;
 
-        .el-card__body {}
+        .btns {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .tabs{
+                min-width: 300px;
+                .btnItem {
+                margin-left: 10px;
+                border-radius: 5px;
+            }
+            }
+            .btnAdd {
+                flex: 1;
+                justify-content: flex-end;
+                margin-right: 1vw;
+            }
+        }
+
 
-        .btnAdd {}
 
-        .form {
-            background-color: #E7F4FD !important;
+        .table {
+            margin: 10px 3vw;
+            border-radius: 20px;
         }
 
         .pagination {
             margin-top: 10px;
+            padding: 10px 10px;
         }
     }
 
     :deep(.adddialog) {
         min-width: 450px;
-        background-color: #E7F4FD !important;
+        background-color: #F3FAFE !important;
 
         .addForm {
             padding: 0 3vw 1vh 1vw;
@@ -368,7 +432,8 @@ const tableData = [
 
             }
         }
-        .dialog-footer{
+
+        .dialog-footer {
             display: flex;
             justify-content: center;
             padding-bottom: 1.5vh;