From 1779301c1263a097fb8b7b909a618d3670373ff6 Mon Sep 17 00:00:00 2001
From: hongxilin <17663930442@163.com>
Date: Wed, 27 Nov 2024 21:30:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=85=E5=80=BC=E6=98=8E=E7=BB=86=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/gold-system/src/assets/css/common.css          |  26 +++
 vue/gold-system/src/main.ts                        |   1 +
 .../src/views/managerecharge/activity.vue          |  57 ++---
 vue/gold-system/src/views/recharge/addRecharge.vue |   6 +-
 .../src/views/recharge/adminRecharge.vue           | 246 ++++++++++++++++++++-
 5 files changed, 294 insertions(+), 42 deletions(-)
 create mode 100644 vue/gold-system/src/assets/css/common.css

diff --git a/vue/gold-system/src/assets/css/common.css b/vue/gold-system/src/assets/css/common.css
new file mode 100644
index 0000000..0df6ed2
--- /dev/null
+++ b/vue/gold-system/src/assets/css/common.css
@@ -0,0 +1,26 @@
+.green-dot {
+    margin: 7px 5px 0px 0px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: block;
+    background-color: green;
+}
+
+.red-dot {
+    margin: 7px 5px 0px 0px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: block;
+    background-color: red;
+}
+
+.grey-dot {
+    margin: 7px 5px 0px 0px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: block;
+    background-color: grey;
+}
\ No newline at end of file
diff --git a/vue/gold-system/src/main.ts b/vue/gold-system/src/main.ts
index d55fa21..68a9507 100644
--- a/vue/gold-system/src/main.ts
+++ b/vue/gold-system/src/main.ts
@@ -4,6 +4,7 @@ import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import './assets/css/common.css'; // 引入公共CSS文件
 
 const app = createApp(App)
 
diff --git a/vue/gold-system/src/views/managerecharge/activity.vue b/vue/gold-system/src/views/managerecharge/activity.vue
index cc6e9f2..bf4c19d 100644
--- a/vue/gold-system/src/views/managerecharge/activity.vue
+++ b/vue/gold-system/src/views/managerecharge/activity.vue
@@ -59,6 +59,17 @@ const tableData = [
     },
 
 ]
+
+//分页对象
+const getObj = ref({
+    page: 1,
+    size: 10,
+})
+//分页总条目
+const total = ref(100)
+
+
+//新增活动弹出框
 const addActivityVisible = ref(false)
 //打开新增活动弹出框
 const openAddActivityVisible = function () {
@@ -76,10 +87,10 @@ const addActicity = function () {
 const form = reactive({
     activityName: '',
     freeGold: '',
-    rechargeRatio:'',
-    startTime:'',
-    endTime:'',
-    adminName:'',
+    rechargeRatio: '',
+    startTime: '',
+    endTime: '',
+    adminName: '',
 })
 
 
@@ -162,6 +173,11 @@ const Delete = function (index, row) {
                         </el-table-column>
                     </el-table>
                 </div>
+
+                <!-- 分页 -->
+                <el-pagination background
+                    layout="prev, pager, next" :total="total" />
+
             </el-card>
         </el-col>
     </el-row>
@@ -172,7 +188,7 @@ const Delete = function (index, row) {
             <el-form :model="form" label-width="auto" style="max-width: 600px">
 
                 <el-form-item label="活动名称">
-                    <el-input v-model="form.activityName" placeholder="请输入活动名称"/>
+                    <el-input v-model="form.activityName" placeholder="请输入活动名称" />
                 </el-form-item>
 
                 <el-form-item label="免费金币">
@@ -183,7 +199,7 @@ const Delete = function (index, row) {
                 </el-form-item>
 
                 <el-form-item label="免费金币兑换比">
-                    <el-input v-model="form.rechargeRatio" placeholder="请输入" style="width: 80px;"/>：1
+                    <el-input v-model="form.rechargeRatio" placeholder="请输入" style="width: 80px;" />：1
                     <div style="color: grey;">(提示：当前规则每10新币可兑换1免费金币)</div>
                 </el-form-item>
 
@@ -194,9 +210,9 @@ const Delete = function (index, row) {
                 <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-input v-model="form.adminName" disabled />
                 </el-form-item>
 
             </el-form>
@@ -212,32 +228,7 @@ const Delete = function (index, row) {
 </template>
 
 <style scoped>
-.green-dot {
-    margin: 7px 5px 0px 0px;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: block;
-    background-color: green;
-}
 
-.red-dot {
-    margin: 7px 5px 0px 0px;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: block;
-    background-color: red;
-}
-
-.grey-dot {
-    margin: 7px 5px 0px 0px;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: block;
-    background-color: grey;
-}
 
 .status {
     display: flex;
diff --git a/vue/gold-system/src/views/recharge/addRecharge.vue b/vue/gold-system/src/views/recharge/addRecharge.vue
index beecab0..6a497a0 100644
--- a/vue/gold-system/src/views/recharge/addRecharge.vue
+++ b/vue/gold-system/src/views/recharge/addRecharge.vue
@@ -3,11 +3,7 @@
 </script>
 
 <template>
-    <el-form :model="form" label-width="auto" style="max-width: 600px">
-        <el-form-item label="Activity name">
-          <el-input v-model="form.name" />
-        </el-form-item>
-    </el-form>
+    <h1>Add Recharge</h1>
 </template>
 
 <style>
diff --git a/vue/gold-system/src/views/recharge/adminRecharge.vue b/vue/gold-system/src/views/recharge/adminRecharge.vue
index 61e8b33..9b74540 100644
--- a/vue/gold-system/src/views/recharge/adminRecharge.vue
+++ b/vue/gold-system/src/views/recharge/adminRecharge.vue
@@ -1,13 +1,251 @@
 <script setup>
-    
+import { ref, onMounted, reactive, computed } from "vue";
+import ElementPlus from "element-plus";
+
+const tableData = [
+    {
+        activityName: '这是活动名称',
+        startTime: '2023-12-22 00:00:00',
+        endTime: '2024-12-22 23:59:59',
+        rechargeRatio: '10:1',
+        address: '进行中',
+        adminName: '张三',
+        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: '未开始',
+        adminName: '张三',
+        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: '未开始',
+        adminName: '张三',
+        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: '已结束',
+        adminName: '张三',
+        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: '已结束',
+        adminName: '张三',
+        createTime: '2023-01-01 00:00:00',
+    },
+
+]
+
+//分页对象
+const getObj = ref({
+    page: 1,
+    size: 10,
+})
+//分页总条目
+const total = ref(100)
+
+
+const form = reactive({
+    activityName: '',
+    freeGold: '',
+    rechargeRatio: '',
+    startTime: '',
+    endTime: '',
+    adminName: '',
+})
+
+
+const Delete = function (index, row) {
+    console.log(index, row)
+}
+
 </script>
 
 <template>
-    <div>
-        <h1>Admin Recharge</h1>
-    </div>
+    <el-row>
+        <el-col>
+            <el-card style="margin-bottom: 20px">
+                <div class="head-card">
+                    <table>
+                        <tr>
+                            <td>
+                                <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>
+                                <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>
+                                <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>
+                                <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="结束时间" />
+                                </div>
+                            </td>
+                            <td>
+                                <div class="head-card-btn">
+                                    <el-button>重置</el-button>
+                                    <el-button type="primary">查询</el-button>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </el-card>
+        </el-col>
+    </el-row>
+    <el-row>
+        <el-col>
+            <el-card>
+                <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="状态">
+                            <template #default="scope">
+                                <div class="status">
+                                    <span v-if="scope.row.address === '进行中'">
+                                        <span class="green-dot"></span>
+                                    </span>
+                                    <span v-if="scope.row.address === '未开始'">
+                                        <span class="red-dot"></span>
+                                    </span>
+                                    <span v-if="scope.row.address === '已结束'">
+                                        <span class="grey-dot"></span>
+                                    </span>
+                                    <span>{{ scope.row.address }}</span>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="adminName" label="添加人" />
+                        <el-table-column prop="createTime" label="添加时间" />
+                        <el-table-column prop="operation" label="操作">
+                            <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>
+
+    <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>
+.status {
+    display: flex;
+}
+
+.head-card {
+    display: flex;
+}
+
+.head-card-element {
+    margin-right: 20px;
+}
 
+.head-card-btn {
+    margin-left: auto;
+}
 </style>
\ No newline at end of file