充值明细页

vue/gold-system/src/views/managerecharge/activity.vue

@@ -8,7 +8,7 @@ const tableData = [
         startTime: '2023-12-22 00:00:00',
         endTime: '2024-12-22 23:59:59',
         rechargeRatio: '10:1',
-        address: '进行中',
+        status: '进行中',
         adminName: '张三',
         createTime: '2023-01-01 00:00:00',
     },
@@ -17,7 +17,7 @@ const tableData = [
         startTime: '2023-12-22 00:00:00',
         endTime: '2024-12-22 23:59:59',
         rechargeRatio: '5:1',
-        address: '进行中',
+        status: '进行中',
         adminName: '张三',
         createTime: '2023-01-01 00:00:00',
     },
@@ -26,7 +26,7 @@ const tableData = [
         startTime: '2024-12-22 00:00:00',
         endTime: '2025-12-22 23:59:59',
         rechargeRatio: '10:1',
-        address: '未开始',
+        status: '未开始',
         adminName: '张三',
         createTime: '2023-01-01 00:00:00',
     },
@@ -35,7 +35,7 @@ const tableData = [
         startTime: '2024-12-22 00:00:00',
         endTime: '2025-12-22 23:59:59',
         rechargeRatio: '5:1',
-        address: '未开始',
+        status: '未开始',
         adminName: '张三',
         createTime: '2023-01-01 00:00:00',
     },
@@ -44,7 +44,7 @@ const tableData = [
         startTime: '2023-01-01 00:00:00',
         endTime: '2023-12-22 23:59:59',
         rechargeRatio: '10:1',
-        address: '已结束',
+        status: '已结束',
         adminName: '张三',
         createTime: '2023-01-01 00:00:00',
     },
@@ -53,7 +53,7 @@ const tableData = [
         startTime: '2023-01-01 00:00:00',
         endTime: '2023-12-22 23:59:59',
         rechargeRatio: '5:1',
-        address: '已结束',
+        status: '已结束',
         adminName: '张三',
         createTime: '2023-01-01 00:00:00',
     },
@@ -135,19 +135,19 @@ const Delete = function (index, row) {
                         <el-table-column prop="startTime" label="开始时间" />
                         <el-table-column prop="endTime" label="结束时间" />
                         <el-table-column prop="rechargeRatio" label="免费兑换比" />
-                        <el-table-column prop="address" label="状态">
+                        <el-table-column prop="status" label="状态">
                             <template #default="scope">
                                 <div class="status">
-                                    <span v-if="scope.row.address === '进行中'">
+                                    <span v-if="scope.row.status === '进行中'">
                                         <span class="green-dot"></span>
                                     </span>
-                                    <span v-if="scope.row.address === '未开始'">
+                                    <span v-if="scope.row.status === '未开始'">
                                         <span class="red-dot"></span>
                                     </span>
-                                    <span v-if="scope.row.address === '已结束'">
+                                    <span v-if="scope.row.status === '已结束'">
                                         <span class="grey-dot"></span>
                                     </span>
-                                    <span>{{ scope.row.address }}</span>
+                                    <span>{{ scope.row.status }}</span>
                                 </div>
                             </template>
                         </el-table-column>

vue/gold-system/src/views/recharge/adminRecharge.vue

@@ -1,60 +1,89 @@
 <script setup>
 import { ref, onMounted, reactive, computed } from "vue";
 import ElementPlus from "element-plus";
+import { AiFillRead } from "vue-icons-plus/ai";
 
 const tableData = [
     {
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
         activityName: '这是活动名称',
-        startTime: '2023-12-22 00:00:00',
-        endTime: '2024-12-22 23:59:59',
-        rechargeRatio: '10:1',
-        address: '进行中',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
         adminName: '张三',
+        status: '进行中',
+        reason: '原因驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由',
+        rechargeTime: '2023-12-22 00:00:00',
         createTime: '2023-01-01 00:00:00',
     },
     {
-        activityName: '这是活动名称2',
-        startTime: '2023-12-22 00:00:00',
-        endTime: '2024-12-22 23:59:59',
-        rechargeRatio: '5:1',
-        address: '进行中',
-        adminName: '张三',
-        createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称3',
-        startTime: '2024-12-22 00:00:00',
-        endTime: '2025-12-22 23:59:59',
-        rechargeRatio: '10:1',
-        address: '未开始',
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
         adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
         createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称4',
-        startTime: '2024-12-22 00:00:00',
-        endTime: '2025-12-22 23:59:59',
-        rechargeRatio: '5:1',
-        address: '未开始',
+    },{
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
         adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
         createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称5',
-        startTime: '2023-01-01 00:00:00',
-        endTime: '2023-12-22 23:59:59',
-        rechargeRatio: '10:1',
-        address: '已结束',
+    },{
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
         adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
         createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称6',
-        startTime: '2023-01-01 00:00:00',
-        endTime: '2023-12-22 23:59:59',
-        rechargeRatio: '5:1',
-        address: '已结束',
+    },{
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
         adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
         createTime: '2023-01-01 00:00:00',
     },
 
@@ -67,16 +96,37 @@ const getObj = ref({
 })
 //分页总条目
 const total = ref(100)
+//默认高亮选项
+const activeName = ref('all')
 
-
-const form = reactive({
-    activityName: '',
-    freeGold: '',
-    rechargeRatio: '',
-    startTime: '',
-    endTime: '',
-    adminName: '',
-})
+//全部充值明细
+const adminAll = function () {
+    console.log('adminAll');
+}
+//待审核充值明细
+const adminWait = function () {
+    console.log('adminWait');
+}
+//已通过充值明细
+const adminPass = function () {
+    console.log('adminPass');
+}
+//已驳回充值明细
+const adminReject = function () {
+    console.log('adminReject');
+}
+//点击标签页
+const handleClick = function (tab, event) {
+    if (tab.props.name === 'all') {
+        adminAll();
+    } else if (tab.props.name === 'wait') {
+        adminWait();
+    } else if (tab.props.name === 'pass') {
+        adminPass();
+    } else if (tab.props.name === 'reject') {
+        adminReject();
+    }
+}
 
 
     const Delete = function (index, row) {
@@ -89,82 +139,95 @@ const Delete = function (index, row) {
     <el-row>
         <el-col>
             <el-card style="margin-bottom: 20px">
-                <div class="head-card">
-                    <table>
-                        <tr>
-                            <td>
+                <el-row style="margin-bottom: 10px;">
+                    <el-col :span="8">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">活动名称：</el-text>
                             <el-input v-model="input" style="width: 240px" clearable />
                         </div>
-                            </td>
-                            <td>
+                    </el-col>
+                    <el-col :span="8">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">充值方式：</el-text>
                             <el-input v-model="input" style="width: 240px" clearable />
                         </div>
-                            </td>
-                            <td>
+
+                    </el-col>
+                    <el-col :span="8">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">所属地区：</el-text>
                             <el-input v-model="input" style="width: 240px" placeholder="请输入活动名称" clearable />
                         </div>
-                            </td>
-                        </tr>
-                        
-                        <tr>
-                            <td>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="21">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">充值时间：</el-text>
-                                    <el-time-picker v-model="value1" is-range range-separator="至"
-                                        start-placeholder="起始时间" end-placeholder="结束时间" />
+                            <el-time-picker v-model="value1" is-range range-separator="至" start-placeholder="起始时间"
+                                end-placeholder="结束时间" />
+                            <el-button style="margin-left: 10px;">今</el-button>
+                            <el-button>昨</el-button>
+                            <el-button>近7天</el-button>
                         </div>
-                            </td>
-                            <td>
+                    </el-col>
+                    <el-col :span="3">
                         <div class="head-card-btn">
                             <el-button>重置</el-button>
                             <el-button type="primary">查询</el-button>
                         </div>
-                            </td>
-                        </tr>
-                    </table>
-                </div>
+                    </el-col>
+                </el-row>
             </el-card>
         </el-col>
     </el-row>
     <el-row>
         <el-col>
             <el-card>
+                <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+                    <el-tab-pane label="全部" name="all" @click="adminAll()"></el-tab-pane>
+                    <el-tab-pane label="待审核" name="wait" @click="adminWait()"></el-tab-pane>
+                    <el-tab-pane label="已通过" name="pass" @click="adminPass()"></el-tab-pane>
+                    <el-tab-pane label="已驳回" name="reject" @click="adminReject()"></el-tab-pane>
+                </el-tabs>
                 <div>
                     <el-table :data="tableData" style="width: 100%">
-                        <el-table-column prop="activityName" label="活动名称" />
-                        <el-table-column prop="startTime" label="开始时间" />
-                        <el-table-column prop="endTime" label="结束时间" />
-                        <el-table-column prop="rechargeRatio" label="免费兑换比" />
-                        <el-table-column prop="address" label="状态">
+                        <el-table-column prop="userName" label="姓名" width="100px"/>
+                        <el-table-column prop="homilyId" label="精网号" width="150px"/>
+                        <el-table-column prop="area" label="所属地区" width="100px"/>
+                        <el-table-column prop="activityName" label="活动名称" width="150px"/>
+                        <el-table-column prop="rechargeGold" label="充值金额"  width="100px"/>
+                        <el-table-column prop="paidGold" label="充值金币" width="100px"/>
+                        <el-table-column prop="freeGold" label="免费金币" width="100px"/>
+                        <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip/>
+                        <el-table-column prop="rechargeWay" label="支付方式" width="100px"/>
+                        <el-table-column prop="rechargeVoucher" label="支付凭证" width="150px"/>
+                        <el-table-column prop="adminName" label="提交人" width="100px"/>
+                        <el-table-column prop="status" label="状态" width="100px">
                             <template #default="scope">
                                 <div class="status">
-                                    <span v-if="scope.row.address === '进行中'">
+                                    <span v-if="scope.row.status === '进行中'">
                                         <span class="green-dot"></span>
                                     </span>
-                                    <span v-if="scope.row.address === '未开始'">
+                                    <span v-if="scope.row.status === '未开始'">
                                         <span class="red-dot"></span>
                                     </span>
-                                    <span v-if="scope.row.address === '已结束'">
+                                    <span v-if="scope.row.status === '已结束'">
                                         <span class="grey-dot"></span>
                                     </span>
-                                    <span>{{ scope.row.address }}</span>
+                                    <span>{{ scope.row.status }}</span>
                                 </div>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="adminName" label="添加人" />
-                        <el-table-column prop="createTime" label="添加时间" />
-                        <el-table-column prop="operation" label="操作">
+                        <el-table-column prop="reason" label="驳回理由" width="200px" show-overflow-tooltip/>
+                        <el-table-column prop="rechargeTime" label="交款时间" width="200px"/>
+                        <el-table-column prop="createTime" label="提交时间" width="200px"/>
+                        <el-table-column fixed="right" prop="operation" label="操作" width="150px">
                             <template #default="scope">
                                 <el-popconfirm title="确定将此条活动删除吗？">
                                     <template #reference>
                                         <el-button type="primary" text @click="Delete(scope.$index, scope.row)">
-                                            删除
+                                            修改
                                         </el-button>
                                     </template>
                                     <template #actions="{ confirm, cancel }">
@@ -187,49 +250,6 @@ const Delete = function (index, row) {
         </el-col>
     </el-row>
 
-    <el-dialog v-model="addActivityVisible" title="新增活动" width="500" :before-close="closeAddActivityVisible">
-        <template #footer>
-
-            <el-form :model="form" label-width="auto" style="max-width: 600px">
-
-                <el-form-item label="活动名称">
-                    <el-input v-model="form.activityName" placeholder="请输入活动名称" />
-                </el-form-item>
-
-                <el-form-item label="免费金币">
-                    <el-radio-group v-model="form.freeGold">
-                        <el-radio value="0">无赠送</el-radio>
-                        <el-radio value="1">有赠送</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-
-                <el-form-item label="免费金币兑换比">
-                    <el-input v-model="form.rechargeRatio" placeholder="请输入" style="width: 80px;" />：1
-                    <div style="color: grey;">(提示：当前规则每10新币可兑换1免费金币)</div>
-                </el-form-item>
-
-                <el-form-item label="开始时间">
-                    <el-time-picker v-model="form.startTime" />
-                </el-form-item>
-
-                <el-form-item label="结束时间">
-                    <el-time-picker v-model="form.endTime" />
-                </el-form-item>
-
-                <el-form-item label="添加人">
-                    <el-input v-model="form.adminName" disabled />
-                </el-form-item>
-
-            </el-form>
-
-            <div class="dialog-footer">
-                <el-button @click="closeAddActivityVisible">取消</el-button>
-                <el-button type="primary" @click="closeAddActivityVisible">
-                    提交
-                </el-button>
-            </div>
-        </template>
-    </el-dialog>
 </template>
 
 <style scoped>

vue/gold-system/src/views/recharge/allRecharge.vue

@@ -1,13 +1,271 @@
 <script setup>
+import { ref, onMounted, reactive, computed } from "vue";
+import ElementPlus from "element-plus";
+import { AiFillRead } from "vue-icons-plus/ai";
+
+const tableData = [
+    {
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
+        adminName: '张三',
+        status: '进行中',
+        reason: '原因驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由驳回理由',
+        rechargeTime: '2023-12-22 00:00:00',
+        createTime: '2023-01-01 00:00:00',
+    },
+    {
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
+        adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
+        createTime: '2023-01-01 00:00:00',
+    },{
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
+        adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
+        createTime: '2023-01-01 00:00:00',
+    },{
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
+        adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
+        createTime: '2023-01-01 00:00:00',
+    },{
+        userName: '梁凡',
+        homilyId: '123456',
+        area: '北京',
+        activityName: '这是活动名称',
+        rechargeGold: '1000',
+        paidGold: '500',
+        freeGold: '500',
+        remark: '这是备注',
+        rechargeWay: '微信',
+        rechargeVoucher: '123456789',
+        adminName: '张三',
+        status: '进行中',
+        reason: '原因',
+        rechargeTime: '2023-12-22 00:00:00',
+        createTime: '2023-01-01 00:00:00',
+    },
+
+]
+
+//分页对象
+const getObj = ref({
+    page: 1,
+    size: 10,
+})
+//分页总条目
+const total = ref(100)
+//默认高亮选项
+const activeName = ref('all')
+
+//全部充值明细
+const adminAll = function () {
+    console.log('adminAll');
+}
+//待审核充值明细
+const adminWait = function () {
+    console.log('adminWait');
+}
+//已通过充值明细
+const adminPass = function () {
+    console.log('adminPass');
+}
+//已驳回充值明细
+const adminReject = function () {
+    console.log('adminReject');
+}
+//点击标签页
+const handleClick = function (tab, event) {
+    if (tab.props.name === 'all') {
+        adminAll();
+    } else if (tab.props.name === 'wait') {
+        adminWait();
+    } else if (tab.props.name === 'pass') {
+        adminPass();
+    } else if (tab.props.name === 'reject') {
+        adminReject();
+    }
+}
+
+
+    const Delete = function (index, row) {
+        console.log(index, row)
+    }
 
 </script>
 
 <template>
+    <el-row>
+        <el-col>
+            <el-card style="margin-bottom: 20px">
+                <el-row style="margin-bottom: 10px;">
+                    <el-col :span="8">
+                        <div class="head-card-element">
+                            <el-text class="mx-1" size="large">活动名称：</el-text>
+                            <el-input v-model="input" style="width: 240px" clearable />
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="head-card-element">
+                            <el-text class="mx-1" size="large">充值方式：</el-text>
+                            <el-input v-model="input" style="width: 240px" clearable />
+                        </div>
+
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="head-card-element">
+                            <el-text class="mx-1" size="large">所属地区：</el-text>
+                            <el-input v-model="input" style="width: 240px" placeholder="请输入活动名称" clearable />
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="21">
+                        <div class="head-card-element">
+                            <el-text class="mx-1" size="large">充值时间：</el-text>
+                            <el-time-picker v-model="value1" is-range range-separator="至" start-placeholder="起始时间"
+                                end-placeholder="结束时间" />
+                            <el-button style="margin-left: 10px;">今</el-button>
+                            <el-button>昨</el-button>
+                            <el-button>近7天</el-button>
+                        </div>
+                    </el-col>
+                    <el-col :span="3">
+                        <div class="head-card-btn">
+                            <el-button>重置</el-button>
+                            <el-button type="primary">查询</el-button>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-col>
+    </el-row>
+    <el-row>
+        <el-col>
+            <el-card>
+                <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+                    <el-tab-pane label="全部" name="all" @click="adminAll()"></el-tab-pane>
+                    <el-tab-pane label="待审核" name="wait" @click="adminWait()"></el-tab-pane>
+                    <el-tab-pane label="已通过" name="pass" @click="adminPass()"></el-tab-pane>
+                    <el-tab-pane label="已驳回" name="reject" @click="adminReject()"></el-tab-pane>
+                </el-tabs>
                 <div>
-        <h1>All Recharge</h1>
+                    <el-table :data="tableData" style="width: 100%">
+                        <el-table-column prop="userName" label="姓名" width="100px"/>
+                        <el-table-column prop="homilyId" label="精网号" width="150px"/>
+                        <el-table-column prop="area" label="所属地区" width="100px"/>
+                        <el-table-column prop="activityName" label="活动名称" width="150px"/>
+                        <el-table-column prop="rechargeGold" label="充值金额"  width="100px"/>
+                        <el-table-column prop="paidGold" label="充值金币" width="100px"/>
+                        <el-table-column prop="freeGold" label="免费金币" width="100px"/>
+                        <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip/>
+                        <el-table-column prop="rechargeWay" label="支付方式" width="100px"/>
+                        <el-table-column prop="rechargeVoucher" label="支付凭证" width="150px"/>
+                        <el-table-column prop="adminName" label="提交人" width="100px"/>
+                        <el-table-column prop="status" label="状态" width="100px">
+                            <template #default="scope">
+                                <div class="status">
+                                    <span v-if="scope.row.status === '进行中'">
+                                        <span class="green-dot"></span>
+                                    </span>
+                                    <span v-if="scope.row.status === '未开始'">
+                                        <span class="red-dot"></span>
+                                    </span>
+                                    <span v-if="scope.row.status === '已结束'">
+                                        <span class="grey-dot"></span>
+                                    </span>
+                                    <span>{{ scope.row.status }}</span>
                                 </div>
                             </template>
+                        </el-table-column>
+                        <el-table-column prop="reason" label="驳回理由" width="200px" show-overflow-tooltip/>
+                        <el-table-column prop="rechargeTime" label="交款时间" width="200px"/>
+                        <el-table-column prop="createTime" label="提交时间" width="200px"/>
+                        <el-table-column fixed="right" prop="operation" label="操作" width="150px">
+                            <template #default="scope">
+                                <el-popconfirm title="确定将此条活动删除吗？">
+                                    <template #reference>
+                                        <el-button type="primary" text @click="Delete(scope.$index, scope.row)">
+                                            修改
+                                        </el-button>
+                                    </template>
+                                    <template #actions="{ confirm, cancel }">
+                                        <el-button size="small" @click="cancel">取消</el-button>
+                                        <el-button type="primary" size="small" @click="confirm">
+                                            确定
+                                        </el-button>
+                                    </template>
+                                </el-popconfirm>
+                            </template>
+
+                        </el-table-column>
+                    </el-table>
+                </div>
+
+                <!-- 分页 -->
+                <el-pagination background layout="prev, pager, next" :total="total" />
+
+            </el-card>
+        </el-col>
+    </el-row>
+
+</template>
 
 <style scoped>
+.status {
+    display: flex;
+}
+
+.head-card {
+    display: flex;
+}
+
+.head-card-element {
+    margin-right: 20px;
+}
 
+.head-card-btn {
+    margin-left: auto;
+}
 </style>