feat：新增第一次弹窗

src/views/consume/gold/addCoinConsume.vue

@@ -363,18 +363,43 @@ const ConsumeDialogVisibleCancel = () => {
   resetForm()
   user.value = {}
 };
-// 实际执行充值操作
-const proceedWithConsume = () => {
-  ElMessageBox.confirm('确认购买?')
-      .then(() => {
+
+// 第一次弹窗
+// 充值对话框显示状态
+const FirstConsumeDialogVisible = ref(false);
+
+// 关闭对话框
+const FirstConsumeDialogVisiblehandleClose = () => {
+  FirstConsumeDialogVisible.value = false;
+  // 重置表单数据
+  resetForm()
+  user.value = {}
+};
+
+// 确认使用cookie继续充值
+const FirstConsumeDialogVisibleContinue = () => {
+  FirstConsumeDialogVisible.value = false;
   add();
-        console.log('添加成功');
-      })
-      .catch(() => {
-        console.log('取消添加');
-      });
 };
 
+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

@@ -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;
     }
   });
 };
@@ -821,6 +836,7 @@ onMounted(() => {
             </div>
           </el-col>
         </el-row>
+
         <!-- 风险提示 -->
         <div style="display: flex; align-items: center; margin-top: 20px;">
           <el-icon :size="24" color="#FFD700">
@@ -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>
 
@@ -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>