From edeb8c144de3ce63b377aabb510670108ba170a5 Mon Sep 17 00:00:00 2001
From: ZhangYong <zyqinghu@163.com>
Date: Tue, 23 Sep 2025 18:40:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=B0=E9=87=91=E7=AE=A1=E7=90=86=EF=BC=8C?=
 =?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

---
 src/utils/menuUtils.js                             |   2 +-
 .../moneyManage/receiveDetail/receiveDetail.vue    | 261 ++++++++++++++++++++-
 2 files changed, 260 insertions(+), 3 deletions(-)

diff --git a/src/utils/menuUtils.js b/src/utils/menuUtils.js
index a0d87c3..b9007c5 100644
--- a/src/utils/menuUtils.js
+++ b/src/utils/menuUtils.js
@@ -79,7 +79,7 @@ export const getRoutePath = (menu) => {
         '用户管理': '/permissions/userPermission',
         '角色管理': '/permissions/rolePermission',
 
-        '收款明细': '/receiveDetail/receiveDetail',
+        '收款明细': '/moneyManage/receiveDetail',
         '退款明细': '/moneyManage/refundDetail',
         '执行人': '/moneyManage/executor/executor',
     };
diff --git a/src/views/moneyManage/receiveDetail/receiveDetail.vue b/src/views/moneyManage/receiveDetail/receiveDetail.vue
index ce553c9..a6729f0 100644
--- a/src/views/moneyManage/receiveDetail/receiveDetail.vue
+++ b/src/views/moneyManage/receiveDetail/receiveDetail.vue
@@ -1,2 +1,259 @@
-<template></template>
-<script setup></script>
\ No newline at end of file
+<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>
+                <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 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>
+        </el-card>
+
+        <div class="detail">
+            <el-card>
+                <div class="btnAdd">
+                    <el-button @click="openAddForm" type="success">新增收款</el-button>
+                </div>
+                <div class="form">
+                    <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">
+                            <template #default="scope">
+                                <span>{{ scope.$index + 1 + (pageInfo.pageNum - 1) * pageInfo.pageSize }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column fixed="left" prop="jwcode" label="Homily ID" width="110px" />
+                        <el-table-column fixed="left" prop="name" label="姓名" width="110px" />
+                        <el-table-column prop="market" label="所属地区" width="80px" />
+                        <el-table-column prop="activity" label="活动名称" width="120px" />
+                        <el-table-column prop="rateName" label="产品名称" width="120px" />
+                        <el-table-column prop="money" label="付款币种" width="100px">
+                        </el-table-column>
+                        <el-table-column prop="permanentGold" label="付款金额" width="120px">
+                        </el-table-column>
+                        <el-table-column prop="freeGold" label="支付方式" width="110px">
+                        </el-table-column>
+                        <el-table-column prop="remark" label="付款时间" width="200px" />
+                        <el-table-column prop="payModel" label="转账凭证" width="110px">
+                            <template #default="scope">
+                                <div v-if="scope.row.voucher"
+                                    style="display: flex; justify-content: center; align-items: center; cursor: pointer;"
+                                    @click="previewImage(scope.row.voucher)">
+                                    <img :src="scope.row.payModel" alt="支付凭证" style="width: auto; height: 40px;">
+                                </div>
+                                <div v-else
+                                    style="display: flex; justify-content: center; align-items: center; height: 40px;">
+                                    --
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="" label="备注" width="150px" show-overflow-tooltip>
+                        </el-table-column>
+                        <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>
+            </el-card>
+        </div>
+        <el-dialog class="addForm" v-model="addFormisible"  width="500px">
+            <el-form>
+                <el-form-item label="驳回理由" required>
+                    <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
+                        show-word-limit />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="addFormisible = false">取消</el-button>
+                    <el-button  type="primary" @click="handleReject">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+//=================  客服新增弹窗   ==================
+const addFormisible =ref(false)
+const openAddForm =()=>{
+    addFormisible.value = true
+}
+const addFormData = ref({
+
+})
+//========================分页相关==================
+const pageInfo = ref({
+    pageSize: 10,
+    pageNum: 1
+})
+const total = ref(0)
+const tableData = [
+    {
+        jwcode: 'HW2023001',
+        name: '张三',
+        market: '北京',
+        activity: '春季促销活动',
+        rateName: '黄金投资产品A',
+        money: '人民币',
+        permanentGold: '5000.00',
+        freeGold: '银行转账',
+        remark: '2023-03-15 10:30:00',
+        voucher: 'https://example.com/images/voucher1.jpg',
+        adminName: '已支付',
+        rejectReason: '无',
+    },
+    {
+        jwcode: 'HW2023002',
+        name: '李四',
+        market: '上海',
+        activity: '夏日特惠活动',
+        rateName: '白银理财产品B',
+        money: '人民币',
+        permanentGold: '3000.00',
+        freeGold: '支付宝',
+        remark: '2023-06-20 14:15:00',
+        voucher: 'https://example.com/images/voucher2.jpg',
+        adminName: '已支付',
+        rejectReason: '无',
+    },
+    {
+        jwcode: 'HW2023003',
+        name: '王五',
+        market: '广州',
+        activity: '秋季回馈活动',
+        rateName: '铂金收藏产品C',
+        money: '美元',
+        permanentGold: '1000.00',
+        freeGold: '微信支付',
+        remark: '2023-09-10 09:20:00',
+        voucher: '',
+        adminName: '待支付',
+        rejectReason: '无',
+    },
+    {
+        jwcode: 'HW2023004',
+        name: '赵六',
+        market: '深圳',
+        activity: '冬季感恩活动',
+        rateName: '钻石尊享产品D',
+        money: '欧元',
+        permanentGold: '2000.00',
+        freeGold: '信用卡',
+        remark: '2023-12-05 16:40:00',
+        voucher: 'https://example.com/images/voucher4.jpg',
+        adminName: '已支付',
+        rejectReason: '无',
+    },
+    {
+        jwcode: 'HW2023005',
+        name: '孙七',
+        market: '成都',
+        activity: '周年庆典活动',
+        rateName: '翡翠投资产品E',
+        money: '人民币',
+        permanentGold: '8000.00',
+        freeGold: '银行转账',
+        remark: '2024-01-20 11:10:00',
+        voucher: '',
+        adminName: '已驳回',
+        rejectReason: '支付金额有误',
+    }
+];
+</script>
+<style scoped lang="scss">
+.content {
+    height: 100%;
+    width: 80vw;
+    background-color: #E7F4FD !important;
+
+    .row {
+        height: 4vh;
+        width: 80vw;
+        display: flex;
+        min-height: 40px;
+
+        .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 {
+        margin-top: 2vh;
+
+        .el-card__body {}
+
+        .btnAdd {}
+
+        .form {
+            background-color: #E7F4FD !important;
+        }
+
+        .pagination {
+            margin-top: 10px;
+        }
+    }
+
+    .addForm ::v-deep .el-dialog__body{
+        background-color: #E7F4FD !important;
+    }
+}
+</style>
\ No newline at end of file