feat：新增第一次弹窗

src/views/consume/gold/addCoinConsume.vue

@@ -363,18 +363,43 @@ const ConsumeDialogVisibleCancel = () => {
   resetForm()
   user.value = {}
 };
-// 实际执行充值操作
-const proceedWithConsume = () => {
-  ElMessageBox.confirm('确认购买?')
-      .then(() => {
-        add();
-        console.log('添加成功');
-      })
-      .catch(() => {
-        console.log('取消添加');
-      });
+
+// 第一次弹窗
+// 充值对话框显示状态
+const FirstConsumeDialogVisible = ref(false);
+
+// 关闭对话框
+const FirstConsumeDialogVisiblehandleClose = () => {
+  FirstConsumeDialogVisible.value = false;
+  // 重置表单数据
+  resetForm()
+  user.value = {}
 };
 
+// 确认使用cookie继续充值
+const FirstConsumeDialogVisibleContinue = () => {
+  FirstConsumeDialogVisible.value = false;
+  add();
+};
+
+const FirstConsumeDialogVisibleCancel = () => {
+  FirstConsumeDialogVisible.value = false
+  resetForm()
+  user.value = {}
+};
+
+// 实际执行充值操作
+// const proceedWithConsume = () => {
+//   ElMessageBox.confirm('确认购买?')
+//       .then(() => {
+//         add();
+//         console.log('添加成功');
+//       })
+//       .catch(() => {
+//         console.log('取消添加');
+//       });
+// };
+
 // 添加前验证
 const addBefore = () => {
   Ref.value.validate(async (valid) => {
@@ -395,7 +420,7 @@ const addBefore = () => {
     if (cookie) {
       ConsumeDialogVisible.value = true;
     } else {
-      proceedWithConsume();
+      FirstConsumeDialogVisible.value = true;
     }
   });
 };
@@ -733,6 +758,64 @@ onMounted(async function () {
         </div>
       </template>
     </el-dialog>
+
+    <el-dialog
+        v-model="FirstConsumeDialogVisible"
+        title="操作确认"
+        :before-close="FirstConsumeDialogVisiblehandleClose"
+        :close-on-click-modal="false"
+        width="480px"
+    >
+      <!-- 内容整体居中且收窄 -->
+      <div class="confirm-body">
+        <!-- 用户信息 -->
+        <div>
+          <div class="field-label">用户信息</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="addConsume.goodsName" disabled/>
+        </div>
+        <!--金币总数   -->
+        <div class="field">
+          <div class="field-label">金币总数</div>
+          <el-input v-model="addConsume.sumGold" disabled/>
+        </div>
+        <!-- 金币详细信息（同一行左右排列） -->
+        <el-row :gutter="20" class="coins-row">
+          <el-col :span="8">
+            <div class="field">
+              <div class="field-label">永久金币</div>
+              <el-input v-model="addConsume.permanentGold" disabled/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="field">
+              <div class="field-label">免费金币</div>
+              <el-input v-model="addConsume.freeGold" disabled/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="field">
+              <div class="field-label">任务金币</div>
+              <el-input v-model="addConsume.taskGold" disabled/>
+            </div>
+          </el-col>
+
+        </el-row>
+      </div>
+
+      <!-- 底部按钮（居中） -->
+      <template #footer>
+        <div class="dialog-footer-center">
+          <el-button @click="FirstConsumeDialogVisibleCancel">取 消</el-button>
+          <el-button type="primary" @click="FirstConsumeDialogVisibleContinue">确认购买</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
   </div>
 
   <!-- 金币消耗明细的布局------------------------------------------------------- -->

src/views/recharge/gold/addCoinRecharge.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
-import { ElIcon, ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, WarnTriangleFilled } 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 API from '@/util/http.js'
 import moment from 'moment'
@@ -82,7 +82,7 @@ const ReadCookiesTime = ref(null)
 const add = async function () {
   try {
 
-    const formattedRecharge = { ...recharge.value }
+    const formattedRecharge = {...recharge.value}
 
     // 将永久金币数、免费金币数和充值金额数乘以 100
     if (formattedRecharge.permanentGold) {
@@ -108,7 +108,7 @@ const add = async function () {
     //value 为充值时间
     WriteCookiesTime.value = recharge.value.payTime
     // 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天
-    Cookies.set(WriteCookies.value, WriteCookiesTime.value, { expires: 1, path: '/' });
+    Cookies.set(WriteCookies.value, WriteCookiesTime.value, {expires: 1, path: '/'});
     // 发送POST请求
     addDisabled.value = true
     const result = await API({
@@ -133,10 +133,20 @@ const add = async function () {
   }
 }
 
-// 充值对话框显示状态
+// 二次校验充值对话框显示状态
 const RechargeDialogVisible = ref(false);
+// 第一次弹窗
+const FirstRechargeDialogVisible = ref(false);
 
-// 关闭对话框
+// 关闭第一次对话框
+const FirstRechargeDialogVisiblehandleClose = () => {
+  FirstRechargeDialogVisible.value = false;
+  // 重置表单数据
+  deleteRecharge()
+  user.value = {}
+};
+
+// 关闭第二次对话框
 const RechargeDialogVisiblehandleClose = () => {
   RechargeDialogVisible.value = false;
   // 重置表单数据
@@ -156,16 +166,21 @@ const RechargeDialogVisibleCancel = () => {
   user.value = {}
 };
 
-// 实际执行充值操作
-const proceedWithRecharge = () => {
-  ElMessageBox.confirm('确认充值？')
-    .then(() => {
-      add();
-      console.log('充值成功');
-    })
-    .catch(() => {
-      console.log('取消充值');
-    });
+// 第一次实际执行充值操作
+// const proceedWithRecharge = () => {
+//   FirstRechargeDialogVisible.value = false
+//   add()
+// };
+
+const FistRechargeDialogVisibleContinue = () => {
+  FirstRechargeDialogVisible.value = false
+  add()
+};
+// 第一次取消
+const FirstRechargeDialogVisibleCancel = () => {
+  FirstRechargeDialogVisible.value = false
+  deleteRecharge()
+  user.value = {}
 };
 
 // 添加充值信息前的按钮点击事件，进行表单验证和用户确认操作
@@ -241,7 +256,7 @@ const addBefore = () => {
     if (cookie) {
       RechargeDialogVisible.value = true;
     } else {
-      proceedWithRecharge();
+      FirstRechargeDialogVisible.value = true;
     }
   });
 };
@@ -263,9 +278,9 @@ const rules = reactive({
       callback();
     }, trigger: 'blur'
   }],
-  activity: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
+  activity: [{required: true, message: '请选择活动名称', trigger: 'blur'}],
   permanentGold: [
-    { required: true, message: '请输入永久金币数', trigger: 'change' },
+    {required: true, message: '请输入永久金币数', trigger: 'change'},
     {
       validator: (rule, value, callback) => {
         if (!value) {
@@ -306,7 +321,7 @@ const rules = reactive({
     }
   ],
   freeGold: [
-    { required: true, message: '请输入免费金币数', trigger: 'change' },
+    {required: true, message: '请输入免费金币数', trigger: 'change'},
     {
       validator: (rule, value, callback) => {
         if (!value) {
@@ -353,7 +368,7 @@ const rules = reactive({
   }],
 
   money: [
-    { required: true, message: '请输入充值金额', trigger: 'blur' },
+    {required: true, message: '请输入充值金额', trigger: 'blur'},
     {
       validator: (rule, value, callback) => {
         // 检查是否包含特殊符号
@@ -390,8 +405,8 @@ const rules = reactive({
       trigger: 'blur'
     }
   ],
-  payModel: [{ required: true, message: '请选择付款方式', trigger: 'blur' }],
-  payTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' }]
+  payModel: [{required: true, message: '请选择付款方式', trigger: 'blur'}],
+  payTime: [{required: true, message: '请选择交款时间', trigger: 'blur'}]
 });
 
 // 查找客户信息的方法
@@ -645,48 +660,48 @@ onMounted(() => {
 <template>
   <div>
     <el-form :model="recharge" ref="Ref" :rules="rules" label-width="auto" label-position="right"
-      style="max-width: 600px" class="add-form">
+             style="max-width: 600px" class="add-form">
       <el-form-item prop="jwcode" label="精网号">
-        <el-input v-model="recharge.jwcode" style="width: 220px" />
+        <el-input v-model="recharge.jwcode" style="width: 220px"/>
         <el-button type="primary" @click="getUser(recharge.jwcode)" style="margin-left: 20px">查询</el-button>
       </el-form-item>
       <el-form-item prop="activity" label="活动名称">
-        <el-input v-model="recharge.activity" placeholder="请输入活动名称" style="width: 300px" />
+        <el-input v-model="recharge.activity" placeholder="请输入活动名称" style="width: 300px"/>
       </el-form-item>
       <el-form-item prop="permanentGold" label="永久金币">
-        <el-input v-model="recharge.permanentGold" placeholder="0" style="width: 100px" />
+        <el-input v-model="recharge.permanentGold" placeholder="0" style="width: 100px"/>
         <p>&nbsp;个</p>
       </el-form-item>
       <el-form-item prop="freeGold" label="免费金币">
-        <el-input v-model="recharge.freeGold" placeholder="0" style="width: 100px" />
+        <el-input v-model="recharge.freeGold" placeholder="0" style="width: 100px"/>
         <p>&nbsp;个</p>
       </el-form-item>
       <el-form-item label="充值金额" required>
         <el-form-item prop="rateName" style="display: inline-block; margin-left:0;">
           <el-select v-model="recharge.rateName" placeholder="货币名称" style="width: 100px">
-            <el-option v-for="item in rateName" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option v-for="item in rateName" :key="item.value" :label="item.label" :value="item.value"/>
           </el-select>
         </el-form-item>
         <el-form-item prop="money" style="display: inline-block; margin-left:10px;">
-          <el-input v-model="recharge.money" style="width: 190px" />
+          <el-input v-model="recharge.money" style="width: 190px"/>
         </el-form-item>
       </el-form-item>
 
       <el-form-item prop="payModel" label="收款方式">
         <el-select v-model="recharge.payModel" placeholder="请选择" style="width: 300px">
-          <el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value"/>
         </el-select>
       </el-form-item>
       <el-form-item prop="payTime" label="交款时间">
         <!-- 修改 type 属性为 datetime 以支持时分秒选择 -->
-        <el-date-picker v-model="recharge.payTime" type="datetime" style="width: 300px" />
+        <el-date-picker v-model="recharge.payTime" type="datetime" style="width: 300px"/>
       </el-form-item>
       <el-form-item prop="voucher" label="交款凭证" style="margin-bottom: 5px">
         <el-upload :http-request="customUpload" class="avatar-uploader" :show-file-list="false"
-          :before-upload="beforeAvatarUpload" style="width: 100px; height: 115px">
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 115px" />
+                   :before-upload="beforeAvatarUpload" style="width: 100px; height: 115px">
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 115px"/>
           <el-icon v-else class="avatar-uploader-icon" style="width: 100px; height: 100px">
-            <Plus />
+            <Plus/>
           </el-icon>
         </el-upload>
         <p style="margin-left: 10px; color: rgb(177, 176, 176)">
@@ -695,7 +710,7 @@ onMounted(() => {
       </el-form-item>
       <el-form-item prop="remark" label="备注">
         <el-input v-model="recharge.remark" style="width: 300px" :rows="4" maxlength="100" show-word-limit
-          type="textarea" />
+                  type="textarea"/>
       </el-form-item>
 
       <el-button @click="deleteRecharge" style="margin-left: 220px;margin-top:20px" type="success">重置</el-button>
@@ -726,7 +741,7 @@ 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">(永久金币:{{
+                    v-if="user.historyPermanentGold !== undefined">(永久金币:{{
                   user.historyPermanentGold / 100
                 }};免费金币:{{
                   (user.historyFreeGold) / 100
@@ -745,15 +760,15 @@ onMounted(() => {
           <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>
+                  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>
@@ -793,44 +808,45 @@ onMounted(() => {
     </el-card>
 
     <el-dialog v-model="RechargeDialogVisible" title="操作确认" :before-close="RechargeDialogVisiblehandleClose"
-      :close-on-click-modal="false" width="480px">
+               :close-on-click-modal="false" width="480px">
       <!-- 内容整体居中且收窄 -->
       <div class="confirm-body">
         <!-- 用户信息 -->
         <div>
           <div class="field-label">用户信息</div>
-          <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled />
+          <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 />
+          <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 />
+              <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 />
+              <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 />
+            <WarnTriangleFilled/>
           </el-icon>
           <p>重复充值风险提示</p>
         </div>
         <!-- 记录 + 虚线分隔 -->
         <div>
-          <el-divider border-style="dashed" />
+          <el-divider border-style="dashed"/>
           <p>检测到该用户近期有相似充值记录：</p>
           · {{ ReadCookiesTime }} 充值永久金币: {{ recharge.permanentGold }}
           免费金币: {{ recharge.freeGold }}(操作人：{{ adminData.adminName }})
@@ -839,6 +855,7 @@ onMounted(() => {
           <p>是否继续操作？</p>
 
         </div>
+
       </div>
 
       <!-- 底部按钮（居中） -->
@@ -850,6 +867,47 @@ onMounted(() => {
       </template>
     </el-dialog>
 
+
+    <el-dialog v-model="FirstRechargeDialogVisible" title="操作确认" :before-close="FirstRechargeDialogVisiblehandleClose"
+               :close-on-click-modal="false" width="400px">
+      <!-- 内容整体居中且收窄 -->
+      <div class="confirm-body">
+        <!-- 用户信息 -->
+        <div>
+          <div class="field-label">用户信息</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>
+
+      <!-- 底部按钮（居中） -->
+      <template #footer>
+        <div class="dialog-footer-center">
+          <el-button @click="FirstRechargeDialogVisibleCancel">取 消</el-button>
+          <el-button type="primary" @click="FistRechargeDialogVisibleContinue">确认充值</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -868,7 +926,7 @@ p {
 }
 
 /* 上传图片的格式 */
-.avatar-uploader  {
+.avatar-uploader {
   width: 50px;
   height: 50px;
   display: block;
@@ -895,7 +953,6 @@ p {
   text-align: center;
 }
 
-
 .add-form {
   margin-top: 50px;
   max-width: 50%;
@@ -908,4 +965,22 @@ p {
   margin-right: 300px;
   margin-top: 150px;
 }
+
+.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>