feat(recharge): 添加金币充值重复充值检测

src/views/recharge/gold/addCoinRecharge.vue

@@ -1,15 +1,12 @@
 <script setup>
-import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import {onMounted, reactive, ref} from 'vue'
+import {ElIcon, ElMessage, ElMessageBox} from 'element-plus'
+import {Plus, WarnTriangleFilled} from '@element-plus/icons-vue'
 import axios from 'axios'
-import { ElMessageBox } from 'element-plus'
 import API from '@/util/http.js'
-import { uploadFile } from '@/util/request.js';
 import moment from 'moment'
-import { range, re } from 'mathjs'
-import { utils, read } from 'xlsx'
-import throttle from 'lodash/throttle'
+import Cookies from 'js-cookie';
+import dayjs from "dayjs";
 // 定义 fixedAdminId
 // const fixedAdminId = 1;
 
@@ -74,6 +71,14 @@ const recharge = ref({
   remark: '', // remark 字段
   rechargeRatio: ''
 })
+// 用来写的 cookie 的 key
+const WriteCookies = ref(null)
+// 用来写的 cookie 的 value
+const WriteCookiesTime = ref(null)
+// 用来读的 cookie 的 key
+const ReadCookies = ref(null)
+// 用来读的 cookie 的 value
+const ReadCookiesTime = ref(null)
 // 这是添加充值信息的接口
 const add = async function () {
   try {
@@ -98,7 +103,15 @@ const add = async function () {
     }
 
     console.log('开始添加充值信息', recharge.value)
+    //存一下 用户的jwcode
+    // 拼接 jwcode:permanentGold:freeGold
+    WriteCookies.value = `${recharge.value.jwcode}:${recharge.value.permanentGold}:${recharge.value.freeGold}`
+    //value 为充值时间
+    WriteCookiesTime.value = recharge.value.payTime
+    // 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天
+    Cookies.set(WriteCookies.value, WriteCookiesTime.value, {expires: 1, path: '/'});
     // 发送POST请求
+    addDisabled.value = true
     const result = await API({
       url: '/recharge/add',
       data: formattedRecharge
@@ -121,61 +134,119 @@ const add = async function () {
   }
 }
 
+// 充值对话框显示状态
+const RechargeDialogVisible = ref(false);
+
+// 关闭对话框
+const RechargeDialogVisiblehandleClose = () => {
+  RechargeDialogVisible.value = false;
+  // 重置表单数据
+  deleteRecharge()
+  user.value = {}
+};
+
+// 确认使用cookie继续充值
+const RechargeDialogVisibleContinue = () => {
+  RechargeDialogVisible.value = false;
+  add();
+};
+
+const RechargeDialogVisibleCancel = () => {
+  RechargeDialogVisible.value = false
+  //todo
+  /*  deleteRecharge()
+    user.value = {}*/
+};
+
+// 实际执行充值操作
+const proceedWithRecharge = () => {
+  ElMessageBox.confirm('确认充值？')
+      .then(() => {
+        add();
+        console.log('充值成功');
+      })
+      .catch(() => {
+        console.log('取消充值');
+      });
+};
+
 // 添加充值信息前的按钮点击事件，进行表单验证和用户确认操作
 const addBefore = () => {
+  // 为未输入的金币字段设置默认值
   if (!recharge.value.permanentGold) {
-        recharge.value.permanentGold ='0'
+    recharge.value.permanentGold = '0';
   }
   if (!recharge.value.freeGold) {
-        recharge.value.freeGold ='0'
+    recharge.value.freeGold = '0';
   }
+
+  // 表单验证
   Ref.value.validate(async (valid) => {
-    if (valid) {
+    if (!valid) {
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      });
+      return;
+    }
+
+    // 验证金币不能同时为0
     if (Number(recharge.value.permanentGold) === 0 && Number(recharge.value.freeGold) === 0) {
       ElMessage({
         type: 'error',
         message: '永久金币和免费金币不能同时为0'
-        })
-        return
+      });
+      return;
     }
 
-      if (recharge.value.rateName == null || recharge.value.rateName == '' || recharge.value.rateName == undefined) {
+    // 验证币种选择
+    if (!recharge.value.rateName) {
       ElMessage({
         type: 'error',
         message: '请选择币种'
-        })
-        return
+      });
+      return;
     }
-      if (recharge.value.money == null || recharge.value.money == '' || recharge.value.money == undefined) {
+
+    // 验证充值金额
+    if (!recharge.value.money) {
       ElMessage({
         type: 'error',
         message: '请输入充值金额'
-        })
-        return
+      });
+      return;
     }
-      // 根据选择的货币名称找到对应的 rateId
-      const selectedRate = rateName.find(item => item.value === recharge.value.rateName)
+
+    // 设置对应的rateId
+    const selectedRate = rateName.find(item => item.value === recharge.value.rateName);
     if (selectedRate) {
-        recharge.value.rateId = selectedRate.rateId
+      recharge.value.rateId = selectedRate.rateId;
     }
-      ElMessageBox.confirm('确认充值？')
-        .then(() => {
-          addDisabled.value = true
-          add()
-          console.log('充值成功')
-        })
-        .catch(() => {
-          console.log('取消充值')
-        })
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
+
+    // 检查是否有用户信息
+    if (!user.value.jwcode) {
+      ElMessage.warning('请先查询用户信息')
+      return
     }
-  })
+
+    // 检查cookie
+    // 拼接 jwcode:permanentGold:freeGold
+    ReadCookies.value = `${recharge.value.jwcode}:${recharge.value.permanentGold}:${recharge.value.freeGold}`
+
+    // 获取cookie
+    const cookie = Cookies.get(ReadCookies.value)
+    console.log("time", WriteCookiesTime.value)
+    // 格式化时间
+    ReadCookiesTime.value = moment(cookie).format('YYYY-MM-DD HH:mm:ss')
+    console.log('cookie', cookie)
+    // 如果存在cookie，显示确认对话框；否则直接进入充值确认
+    if (cookie) {
+      RechargeDialogVisible.value = true;
+    } else {
+      proceedWithRecharge();
     }
+  });
+};
 
 // 表单验证
 // 开始时间改变时，重新验证结束时间
@@ -351,7 +422,6 @@ const getUser = async function (jwcode) {
     })
 
 
-
     if (result.code === 0) {
       ElMessage.error(result.msg);
     } else if (result.data === null) {
@@ -391,7 +461,6 @@ const activity = ref([])
 // }
 
 
-
 //货币条目
 const rateName = [
   {
@@ -549,7 +618,8 @@ onMounted(() => {
 <template>
   <div>
 
-    <el-form :model="recharge" ref="Ref" :rules="rules" label-width="auto" label-position="right" style="max-width: 600px" class="add-form">
+    <el-form :model="recharge" ref="Ref" :rules="rules" label-width="auto" label-position="right"
+             style="max-width: 600px" class="add-form">
       <el-form-item prop="jwcode" label="精网号">
         <el-input v-model="recharge.jwcode" style="width: 220px"/>
         <el-button type="primary" @click="getUser(recharge.jwcode)" style="margin-left: 20px">查询</el-button>
@@ -668,7 +738,9 @@ onMounted(() => {
             </el-form-item>
             <el-form-item style="margin-top: -23px">
               <span style="display: inline; white-space: nowrap; color: #b1b1b1"
-                v-if="user.historyPermanentGold !== undefined">(永久金币:{{ user.historyPermanentGold / 100 }};免费金币:{{
+                    v-if="user.historyPermanentGold !== undefined">(永久金币:{{
+                  user.historyPermanentGold / 100
+                }};免费金币:{{
                   (user.historyFreeGold) / 100
                 }};任务金币:{{ user.historyTaskGold / 100 }})</span>
             </el-form-item>
@@ -684,13 +756,16 @@ onMounted(() => {
           </el-col>
           <el-col :span="14">
             <el-form-item label="当前金币总数" style="width: 500px">
-              <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{ user.nowSumGold
-                /100}}</span>
+              <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
+                  user.nowSumGold
+                  / 100
+                }}</span>
             </el-form-item>
             <!-- 金币详情独立显示 -->
             <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
               <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
-                user.nowPermanentGold /100}};
+                  user.nowPermanentGold / 100
+                }};
                 免费金币:{{ user.nowFreeGold / 100 }};
                 任务金币:{{ user.nowTaskGold / 100 }})</span>
             </el-form-item>
@@ -729,6 +804,68 @@ onMounted(() => {
       </el-form>
     </el-card>
 
+    <el-dialog
+        v-model="RechargeDialogVisible"
+        title="操作确认"
+        :before-close="RechargeDialogVisiblehandleClose"
+        :close-on-click-modal="false"
+        width="600px"
+    >
+      <!-- 内容整体居中且收窄 -->
+      <div class="confirm-body">
+        <!-- 用户信息 -->
+        <div>
+          <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled/>
+
+        </div>
+        <!-- 活动名称 -->
+        <div class="field">
+          <div class="field-label">活动名称</div>
+          <el-input v-model="recharge.activity" disabled/>
+        </div>
+        <!-- 金币信息（同一行左右排列） -->
+        <el-row :gutter="20" class="coins-row">
+          <el-col :span="12">
+            <div class="field">
+              <div class="field-label">永久金币</div>
+              <el-input v-model="recharge.permanentGold" disabled/>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="field">
+              <div class="field-label">免费金币</div>
+              <el-input v-model="recharge.freeGold" disabled/>
+            </div>
+          </el-col>
+        </el-row>
+        <!-- 风险提示 -->
+        <div style="display: flex; align-items: center; margin-top: 20px;">
+          <el-icon :size="24" color="#FFD700">
+            <WarnTriangleFilled/>
+          </el-icon>
+          <p>重复充值风险提示</p>
+        </div>
+        <!-- 记录 + 虚线分隔 -->
+        <div>
+          <el-divider border-style="dashed"/>
+          <p>检测到该用户近期有相似充值记录：</p>
+          · {{ ReadCookiesTime }} 充值永久金币: {{ recharge.permanentGold }}
+          免费金币: {{ recharge.freeGold }}(操作人：{{ adminData.adminName }})
+        </div>
+        <div style="margin-top: 10px">
+          <p>是否继续操作？</p>
+
+        </div>
+      </div>
+
+      <!-- 底部按钮（居中） -->
+      <template #footer>
+        <div class="dialog-footer-center">
+          <el-button @click="RechargeDialogVisibleCancel">取 消</el-button>
+          <el-button type="primary" @click="RechargeDialogVisibleContinue">确认充值</el-button>
+        </div>
+      </template>
+    </el-dialog>
 
   </div>
 </template>
@@ -753,6 +890,9 @@ p {
   height: 50px;
   display: block;
 }
+</style>
+
+<style>
 .error-message {
   color: red;
   font-size: 8px;
@@ -792,5 +932,40 @@ p {
 .customer-info {
   max-width: 60%;
 }
-</style>
 
+/* 标题居中 */
+.el-dialog__header {
+  text-align: center;
+}
+
+
+.confirm-body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+/* 字段块与标签样式 */
+.field {
+  margin-bottom: 14px;
+}
+
+.field-label {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 6px;
+}
+
+/* 金币行紧凑 */
+.coins-row .field {
+  margin-bottom: 0;
+}
+
+/* 底部按钮居中 */
+.dialog-footer-center {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+
+</style>