From 68234a2b9c1f14d4d8812137601e60ae447d03bc Mon Sep 17 00:00:00 2001
From: hongxilin <17663930442@163.com>
Date: Wed, 27 Nov 2024 17:36:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E7=94=A8=E6=88=B7=E5=AF=BC=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/gold-system/README.md                          |  14 ++
 vue/gold-system/package-lock.json                  |  10 +
 vue/gold-system/package.json                       |   1 +
 vue/gold-system/src/views/index.vue                |  84 ++++---
 .../src/views/managerecharge/activity.vue          | 252 ++++++++++++++++++++-
 5 files changed, 328 insertions(+), 33 deletions(-)

diff --git a/vue/gold-system/README.md b/vue/gold-system/README.md
index 33895ab..856ed63 100644
--- a/vue/gold-system/README.md
+++ b/vue/gold-system/README.md
@@ -3,3 +3,17 @@
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+
+npm install 下载依赖包
+
+npm run dev  启动项目
+
+npm install vue-router 下载vue-router组件
+
+npm install axios 下载axios组件
+
+npm install element-plus --save  下载element-plus组件
+
+npm install @element-plus/icons-vue  下载element-plus图标库
+
+npm install vue-icons-plus --save  下载外部图标库
\ No newline at end of file
diff --git a/vue/gold-system/package-lock.json b/vue/gold-system/package-lock.json
index 11738d7..e5569d7 100644
--- a/vue/gold-system/package-lock.json
+++ b/vue/gold-system/package-lock.json
@@ -12,6 +12,7 @@
         "axios": "^1.7.8",
         "element-plus": "^2.8.8",
         "vue": "^3.5.12",
+        "vue-icons-plus": "^0.1.7",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -1621,6 +1622,15 @@
         }
       }
     },
+    "node_modules/vue-icons-plus": {
+      "version": "0.1.7",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/vue-icons-plus/-/vue-icons-plus-0.1.7.tgz",
+      "integrity": "sha512-ioLw608iLUaQgtmbdj4arFG48+Q3SgnSR96PP4HIA1nEne9n/n8hjrnLKrufPbztax7k4g2hcPYe4J5xHf1BPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": ">=2.7.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/vue-router/-/vue-router-4.5.0.tgz",
diff --git a/vue/gold-system/package.json b/vue/gold-system/package.json
index 25fdc26..4de5971 100644
--- a/vue/gold-system/package.json
+++ b/vue/gold-system/package.json
@@ -13,6 +13,7 @@
     "axios": "^1.7.8",
     "element-plus": "^2.8.8",
     "vue": "^3.5.12",
+    "vue-icons-plus": "^0.1.7",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
diff --git a/vue/gold-system/src/views/index.vue b/vue/gold-system/src/views/index.vue
index d889952..bf5e68e 100644
--- a/vue/gold-system/src/views/index.vue
+++ b/vue/gold-system/src/views/index.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, reactive, computed } from "vue";
 import { useRouter } from "vue-router";
 import ElementPlus from "element-plus";
+import { VscGlobe } from 'vue-icons-plus/vsc'
 
 const router = useRouter();
 
@@ -12,29 +13,25 @@ const router = useRouter();
 <template>
   <div class="common-layout">
     <el-container>
-      <el-aside>
+      <el-aside style="width: 250px;">
         <div class="logo">
-            <img src="../assets/金币管理系统logo.png" alt="logo"  style="width: 30px;height: 30px;"/>
-            <div style="font-size: 16px; font-weight: bold;">海外金币管理系统</div>
+          <img src="../assets/金币管理系统logo.png" alt="logo" style="width: 30px;height: 30px;" />
+          <div style="font-size: 16px; font-weight: bold;">海外金币管理系统</div>
         </div>
-        <el-menu
-          router="true"
-          background-color="#08193d"
-          active-text-color="#ffd04b"
-          text-color="white"
-          class="el-menu-vertical-demo"
-          default-active="2"
-          @open="handleOpen"
-          @close="handleClose"
-        >
+        <el-menu router="true" background-color="#08193d" active-text-color="#ffd04b" text-color="white"
+          class="el-menu-vertical-demo" default-active="2" @open="handleOpen" @close="handleClose">
           <el-menu-item index="/workspace">
-            <el-icon><Folder /></el-icon>
+            <el-icon>
+              <Folder />
+            </el-icon>
             工作台
-            </el-menu-item>
+          </el-menu-item>
 
           <el-sub-menu index="2">
             <template #title>
-              <el-icon><Folder /></el-icon>
+              <el-icon>
+                <Folder />
+              </el-icon>
               <span>财务审核</span>
             </template>
             <el-menu-item index="/rechargeAudit">充值审核</el-menu-item>
@@ -43,7 +40,9 @@ const router = useRouter();
 
           <el-sub-menu index="3">
             <template #title>
-              <el-icon><Folder /></el-icon>
+              <el-icon>
+                <Folder />
+              </el-icon>
               <span>充值管理</span>
             </template>
             <el-menu-item index="/activity">活动管理</el-menu-item>
@@ -52,7 +51,9 @@ const router = useRouter();
 
           <el-sub-menu index="4">
             <template #title>
-              <el-icon><Folder /></el-icon>
+              <el-icon>
+                <Folder />
+              </el-icon>
               <span>金币充值</span>
             </template>
             <el-menu-item index="/addRecharge">新增充值</el-menu-item>
@@ -62,7 +63,9 @@ const router = useRouter();
 
           <el-sub-menu index="5">
             <template #title>
-              <el-icon><Folder /></el-icon>
+              <el-icon>
+                <Folder />
+              </el-icon>
               <span>金币消费</span>
             </template>
             <el-menu-item index="/addConsume">新增消费</el-menu-item>
@@ -71,7 +74,9 @@ const router = useRouter();
 
           <el-sub-menu index="6">
             <template #title>
-              <el-icon><Folder /></el-icon>
+              <el-icon>
+                <Folder />
+              </el-icon>
               <span>金币退款</span>
             </template>
             <el-menu-item index="/addRefund">新增退款</el-menu-item>
@@ -79,16 +84,33 @@ const router = useRouter();
           </el-sub-menu>
 
           <el-menu-item index="/usergold">
-            <el-icon><Folder /></el-icon>
+            <el-icon>
+              <Folder />
+            </el-icon>
             客户金币明细
-            </el-menu-item>
+          </el-menu-item>
 
         </el-menu>
       </el-aside>
       <el-container>
-        <el-header> 用戶信息 </el-header>
+        <el-header>
+          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
+            @select="handleSelect">
+            <el-sub-menu index="1" class="admin">
+              <template #title>
+                <img style="width: 30px;height: 30px; border-radius: 50%;" src="../assets/金币管理系统logo.png" alt="出错了" />
+                <span style="margin-left: 10px;">用户名</span>
+              </template>
+              <el-menu-item index="1-1">查看个人信息</el-menu-item>
+              <el-menu-item index="1-2">退出登录</el-menu-item>
+            </el-sub-menu>
+            <el-menu-item index="2">
+              <VscGlobe />
+            </el-menu-item>
+          </el-menu>
+        </el-header>
         <el-main>
-            <router-view></router-view>
+          <router-view></router-view>
         </el-main>
       </el-container>
     </el-container>
@@ -96,15 +118,19 @@ const router = useRouter();
 </template>
 
 <style scoped>
+.admin {
+  margin-left: auto;
+}
+
 .el-aside {
   background-color: #08193d;
   height: 100vh;
   width: 200px;
 }
-.logo{
-    color: white;
-    margin: 20px 0px 20px 20px;
-    display: flex;
-}
 
+.logo {
+  color: white;
+  margin: 20px 0px 20px 20px;
+  display: flex;
+}
 </style>
\ No newline at end of file
diff --git a/vue/gold-system/src/views/managerecharge/activity.vue b/vue/gold-system/src/views/managerecharge/activity.vue
index b2dbfe9..cc6e9f2 100644
--- a/vue/gold-system/src/views/managerecharge/activity.vue
+++ b/vue/gold-system/src/views/managerecharge/activity.vue
@@ -1,13 +1,257 @@
 <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 addActivityVisible = ref(false)
+//打开新增活动弹出框
+const openAddActivityVisible = function () {
+    addActivityVisible.value = true
+}
+//关闭新增窗口弹出框
+const closeAddActivityVisible = function () {
+    addActivityVisible.value = false
+}
+//添加活动按钮
+const addActicity = function () {
+    openAddActivityVisible();
+}
+
+const form = reactive({
+    activityName: '',
+    freeGold: '',
+    rechargeRatio:'',
+    startTime:'',
+    endTime:'',
+    adminName:'',
+})
+
+
+const Delete = function (index, row) {
+    console.log(index, row)
+}
+
 </script>
 
 <template>
-    <div>
-        <h1>Activity</h1>
-    </div>
+    <el-row>
+        <el-col>
+            <el-card style="margin-bottom: 20px">
+                <div class="head-card">
+                    <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>
+                    <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>
+                    <div class="head-card-btn">
+                        <el-button>重置</el-button>
+                        <el-button type="primary">查询</el-button>
+                    </div>
+                </div>
+            </el-card>
+        </el-col>
+    </el-row>
+    <el-row>
+        <el-col>
+            <el-card>
+                <div>
+                    <el-button plain @click="addActicity()"
+                        style="color: #048EFB; border:1px solid #048EFB">新增活动</el-button>
+                </div>
+                <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-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>
+.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;
+}
+
+.head-card {
+    display: flex;
+}
+
+.head-card-element {
+    margin-right: 20px;
+}
 
+.head-card-btn {
+    margin-left: auto;
+}
 </style>
\ No newline at end of file