From e9be44263952cfa147b4a3ea2a5adc957824c570 Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Tue, 26 Aug 2025 18:07:04 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E9=9C=80=E6=B1=82?=
 =?UTF-8?q?=EF=BC=8C=E9=87=91=E5=B8=81=E9=80=80=E6=AC=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                        |   6 +
 src/util/request.js                        |   2 +-
 src/utils/menuTreePermission.js            |   3 +
 src/views/refund/gold/addNewCoinRefund.vue | 723 +++++++++++++++++++++++++++++
 src/views/refund/gold/coinRefund.vue       |  11 +-
 5 files changed, 742 insertions(+), 3 deletions(-)
 create mode 100644 src/views/refund/gold/addNewCoinRefund.vue

diff --git a/src/router/index.js b/src/router/index.js
index d750fce..73cd248 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -206,6 +206,12 @@ const routes = [
                         name: "coinRefundDetail",
                         component: () => import("../views/refund/gold/coinRefundDetail.vue"),
                         meta: {permissionId: 22} // 对应"查看金币退款明细"id=22
+                    },
+                    {
+                        path: 'addRefund',
+                        name: "addNewCoinRefund",
+                        component: () => import("../views/refund/gold/addNewCoinRefund.vue"),
+                        meta: {permissionId: 58}
                     }
                 ]
             },
diff --git a/src/util/request.js b/src/util/request.js
index 5fea421..913c4e0 100644
--- a/src/util/request.js
+++ b/src/util/request.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 // 创建axios实例
 const service = axios.create({
   baseURL: import.meta.env.VITE_API_BASE,//.env.development
-  timeout: 10000,
+  timeout: 1000000,
   headers: {
     'Content-Type': 'application/json'
   },
diff --git a/src/utils/menuTreePermission.js b/src/utils/menuTreePermission.js
index 60ec710..3d3f8ee 100644
--- a/src/utils/menuTreePermission.js
+++ b/src/utils/menuTreePermission.js
@@ -46,6 +46,9 @@ export const permissionMapping = {
 
     Submit_Gold_Coin_Refund: 21,    // 提交金币退款 // coinRefund页面
     View_Gold_Coin_Refund_Details: 22, // 查看金币退款明细 // coinRefund页面
+    Submit_Gold_Coin_RefundS: 58,    // 提交金币退款 // coinRefund页面
+
+
 
     View_Gold_Coin_Details: 23,     // 查看金币明细 //usergold页面
     View_Gold_Coin_Balance: 24,     // 查看金币余额 //usergold页面
diff --git a/src/views/refund/gold/addNewCoinRefund.vue b/src/views/refund/gold/addNewCoinRefund.vue
new file mode 100644
index 0000000..4d4a703
--- /dev/null
+++ b/src/views/refund/gold/addNewCoinRefund.vue
@@ -0,0 +1,723 @@
+<script setup>
+import {onMounted, reactive, ref, watch} from "vue";
+import {ElMessage} from "element-plus";
+import moment from "moment";
+import request from "@/util/http.js";
+import Cookies from 'js-cookie';
+import {useAdminStore} from "@/store/index.js";
+import {storeToRefs} from "pinia";
+import {WarnTriangleFilled} from "@element-plus/icons-vue";
+import dayjs from "dayjs";
+
+const adminStore = useAdminStore();
+const { adminData, menuTree } = storeToRefs(adminStore);
+
+const addDisabled = ref(false);
+
+const user = ref({
+  jwcode: null,
+  name: "",
+  market: "",
+  historySumGold: null,
+  historyPermanentGold: null,
+  historyFreeGold: null,
+  historyTaskGold: null,
+  rechargeNum: null,
+  consumeNum: null,
+  firstRecharge: "",
+  nowPermanentGold: null,
+  nowFreeJune: null,
+  nowTaskGold: null,
+  nowFreeDecember: null,
+  nowFreeGold: null,
+  nowSumGold: null
+});
+
+const addConsume = ref({
+  jwcode: null,
+  goodsName: "金币退款",
+  sumGold: null,
+  freeGold: null,
+  permanentGold: null,
+  taskGold: null,
+  remark: "",
+  refundModel: null,
+  adminId: adminData.value.id,
+  adminName: adminData.value.adminName
+});
+
+const Ref = ref(null);
+
+const rules = reactive({
+  jwcode: [
+    { required: true, message: "请输入精网号", trigger: "blur" },
+  ],
+
+  permanentGold: [
+    { required: true, message: "请输入永久金币数", trigger: "blur" },
+    {
+      validator: (rule, value, callback) => {
+        if (value === null || value === undefined || !Number.isInteger(value) || value < 0) {
+          callback(new Error("永久金币必须为非负整数"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  freeGold: [
+    { required: true, message: "请输入免费金币数", trigger: "blur" },
+    {
+      validator: (rule, value, callback) => {
+        if (value === null || value === undefined || !Number.isInteger(value) || value < 0) {
+          callback(new Error("免费金币必须为非负整数"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  taskGold: [
+    { required: true, message: "请输入任务金币数", trigger: "blur" },
+    {
+      validator: (rule, value, callback) => {
+        if (value === null || value === undefined || !Number.isInteger(value) || value < 0) {
+          callback(new Error("任务金币必须为非负整数"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  sumGold: [
+    {
+      validator: (rule, value, callback) => {
+        if ((value || 0) <= 0) {
+          callback(new Error("三类金币总数必须大于0"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+// watch 三类金币变化，自动计算总和
+watch(
+    () => [addConsume.value.freeGold, addConsume.value.permanentGold, addConsume.value.taskGold],
+    ([free, permanent, task]) => {
+      const sum = (parseInt(free) || 0) + (parseInt(permanent) || 0) + (parseInt(task) || 0);
+      addConsume.value.sumGold = sum;
+    },
+    { deep: true }
+);
+
+// 提交前校验 sumGold > 0
+function validateInputToFreeGold() {
+  if (!user.value.jwcode) {
+    ElMessage.warning("请先查询用户信息");
+    resetForm()
+    return false;
+
+  }
+
+  const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value;
+  if(freeGold > user.value.nowFreeGold){
+    ElMessage.warning("该用户免费金币不足，请重新输入！");
+    addConsume.value.freeGold = null;
+    return
+  }
+
+  return true;
+}
+
+// 提交前校验 sumGold > 0
+function validateInputToPermanentGold() {
+  if (!user.value.jwcode) {
+    ElMessage.warning("请先查询用户信息");
+    resetForm()
+    return false;
+
+  }
+  const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value;
+  if(permanentGold > user.value.nowPermanentGold){
+    ElMessage.warning("该用户永久金币不足，请重新输入！");
+    addConsume.value.permanentGold = null;
+    return
+
+  }
+
+  return true;
+}
+
+// 提交前校验 sumGold > 0
+function validateInputToTaskGold() {
+  if (!user.value.jwcode) {
+    ElMessage.warning("请先查询用户信息");
+    resetForm()
+    return false;
+
+  }
+  const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value;
+  if(taskGold > user.value.nowTaskGold){
+    ElMessage.warning("该用户任务金币不足，请重新输入！");
+    addConsume.value.taskGold = null;
+    return
+
+  }
+
+
+  return true;
+}
+
+
+// 提交前校验 sumGold > 0
+function validateInputTOSumGold() {
+  if (!user.value.jwcode) {
+    ElMessage.warning("请先查询用户信息");
+    resetForm()
+    return false;
+
+  }
+  const { freeGold, permanentGold, taskGold, sumGold } = addConsume.value;
+
+  if (sumGold <= 0) {
+    ElMessage.warning("三类金币总数必须大于0");
+    resetForm()
+    return false;
+  }
+
+  return true;
+}
+
+// 充值对话框显示状态
+const ConsumeDialogVisible = ref(false);
+
+// 关闭对话框
+const ConsumeDialogVisiblehandleClose = () => {
+  ConsumeDialogVisible.value = false;
+  // 重置表单数据
+  resetForm()
+  user.value = {}
+};
+``
+// 确认使用cookie继续充值
+const ConsumeDialogVisibleContinue = () => {
+  ConsumeDialogVisible.value = false;
+  add();
+};
+
+const ConsumeDialogVisibleCancel = () => {
+  ConsumeDialogVisible.value = false
+  resetForm()
+  user.value = {}
+};
+
+// 第一次弹窗
+// 充值对话框显示状态
+const FirstConsumeDialogVisible = ref(false);
+
+// 关闭对话框
+const FirstConsumeDialogVisiblehandleClose = () => {
+  FirstConsumeDialogVisible.value = false;
+  // 重置表单数据
+  resetForm()
+  user.value = {}
+};
+
+// 第一次消耗
+const FirstConsumeDialogVisibleContinue = () => {
+  FirstConsumeDialogVisible.value = false;
+  add();
+};
+
+const FirstConsumeDialogVisibleCancel = () => {
+  FirstConsumeDialogVisible.value = false
+  resetForm()
+  user.value = {}
+};
+
+// 查询商品列表
+const goods = ref([]);
+
+
+// 用来写的 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 () {
+  addDisabled.value = true;
+
+  try {
+    const result = await request({
+      url: "/consume/addRefund",
+      data: {
+        jwcode: addConsume.value.jwcode,
+        adminId: adminData.value.id,
+        sumGold: addConsume.value.sumGold ,
+        freeGold: addConsume.value.freeGold ,
+        taskGold: addConsume.value.taskGold ,
+        permanentGold: addConsume.value.permanentGold,
+        remark: addConsume.value.remark,
+        adminName: adminData.value.adminName
+      }
+    });
+
+    //存一下 用户的jwcode
+    // 拼接 jwcode:permanentGold:freeGold
+    WriteCookies.value = `coinRefund:${addConsume.value.jwcode}:${addConsume.value.goodsName}`
+    //value 为当前消耗时间
+    WriteCookiesTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
+    // 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天
+    Cookies.set(WriteCookies.value, WriteCookiesTime.value, {
+      expires:
+          1, path: '/'
+    });
+    addDisabled.value = false;
+
+    if (result.code === 200) {
+      ElMessage.success("添加成功");
+      resetForm();
+    } else {
+      ElMessage.error(result.msg || "添加失败");
+    }
+  } catch (err) {
+    console.error(err);
+    ElMessage.error("添加失败，请检查网络");
+    addDisabled.value = false;
+  }
+};
+
+// 重置表单
+function resetForm() {
+  Ref.value.resetFields();
+  addConsume.value.sumGold = null;
+  addConsume.value.freeGold = null;
+  addConsume.value.permanentGold = null;
+  addConsume.value.taskGold = null;
+  addConsume.value.sumGold = null;
+  addConsume.value.remark = "";
+  addConsume.value.jwcode = null;
+
+  user.value = {
+    jwcode: null,
+    name: "",
+    market: "",
+    historySumGold: null,
+    historyPermanentGold: null,
+    historyFreeGold: null,
+    historyTaskGold: null,
+    rechargeNum: null,
+    consumeNum: null,
+    firstRecharge: "",
+    nowPermanentGold: null,
+    nowFreeJune: null,
+    nowTaskGold: null,
+    nowFreeDecember: null,
+    nowFreeGold: null,
+    nowSumGold: null
+  };
+}
+
+// 获取商品信息
+const getGoods = async function () {
+  try {
+    const result = await request({ url: "https://api.homilychart.com/live_mall/api/product/all" });
+    goods.value = result.data.map(item => ({ id: item.id, label: item.name, value: item.name }));
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+// 添加前验证
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    // 验证cookie
+    if (!valid) {
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      });
+      return;
+    }
+    // 手动校验 sumGold > 0
+    if (!validateInputTOSumGold()) return;
+
+    ReadCookies.value = `coinRefund:${addConsume.value.jwcode}:${addConsume.value.goodsName}`
+    // 获取cookie
+    const cookie = Cookies.get(ReadCookies.value)
+    console.log("cookie++++++++++++++++++++++", cookie)
+    console.log("time", WriteCookiesTime.value)
+    // 格式化时间
+    ReadCookiesTime.value = moment(cookie).format('YYYY-MM-DD HH:mm:ss')
+    console.log("cookie========", cookie)
+    if (cookie) {
+      ConsumeDialogVisible.value = true;
+    } else {
+      FirstConsumeDialogVisible.value = true;
+    }
+  });
+};
+
+// 查询用户
+const getUser = async function (jwcode) {
+  if (!jwcode || !/^\d{1,9}$/.test(jwcode)) {
+    ElMessage.warning("精网号不能为空或格式不正确");
+    return;
+  }
+
+  try {
+    const result = await request({ url: "/user/selectUser", data: { jwcode } });
+
+    if (result.code === 200 && result.data) {
+      user.value = { ...result.data };
+      ElMessage.success("查询成功");
+    } else {
+      ElMessage.warning(result.msg || "用户不存在");
+    }
+  } catch (err) {
+    console.error(err);
+    ElMessage.error("查询失败，请检查网络或精网号");
+  }
+};
+
+onMounted(async function () {
+  await getGoods();
+});
+</script>
+
+<template>
+  <div class="father1">
+    <div class="left">
+      <el-form :model="addConsume" ref="Ref" :rules="rules" style="min-width: 420px;" class="add-form"
+               label-width="auto" label-position="right">
+        <el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
+          <el-input v-model="addConsume.jwcode" style="width: 200px;" />
+          <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">查询
+          </el-button>
+        </el-form-item>
+
+        <el-form-item prop="goodsName" label="商品名称" >
+          <el-input v-model="addConsume.goodsName" disabled style="width: 120px" />
+        </el-form-item>
+
+        <!-- 三类金币可编辑 -->
+        <el-form-item prop="permanentGold" label="永久金币">
+          <el-input v-model.number="addConsume.permanentGold" style="width: 120px"  @input="validateInputToPermanentGold()"/>
+          <p>&nbsp;&nbsp;个</p>
+        </el-form-item>
+
+        <el-form-item prop="freeGold" label="免费金币">
+          <el-input v-model.number="addConsume.freeGold" style="width: 120px" @input="validateInputToFreeGold()" />
+          <p>&nbsp;&nbsp;个</p>
+        </el-form-item>
+
+        <el-form-item prop="taskGold" label="任务金币">
+          <el-input v-model.number="addConsume.taskGold" style="width: 120px" @input="validateInputToTaskGold()" />
+          <p>&nbsp;&nbsp;个</p>
+        </el-form-item>
+
+        <el-form-item prop="sumGold" label="消耗金币总数">
+          <el-input v-model.number="addConsume.sumGold" style="width: 120px" disabled />
+        </el-form-item>
+
+        <el-form-item prop="remark" label="备注">
+          <el-input v-model="addConsume.remark" style="width: 250px" :rows="4" maxlength="100" show-word-limit
+                    type="textarea" />
+        </el-form-item>
+
+        <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
+        <el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px"> 提交</el-button>
+      </el-form>
+    </div>
+
+    <div class="right">
+      <!-- 客户信息栏 -->
+      <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
+        <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
+          <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+
+          <!-- 第一行：姓名 + 历史金币 -->
+          <el-row style="margin-top: 20px">
+            <el-col :span="9">
+              <el-form-item label="姓名">
+                <p>{{ user.name }}</p>
+              </el-form-item>
+            </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
+                  }}</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
+                  }};
+                  免费金币:{{ user.nowFreeGold }};
+                  任务金币:{{ user.nowTaskGold }})</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行：精网号 + 当前金币（独立行） -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="精网号">
+                <p>{{ user.jwcode }}</p>
+              </el-form-item>
+            </el-col>
+            <el-col :span="14">
+              <el-form-item label="消费次数">
+                <p style="color: #2fa1ff">{{ user.consumeNum }} </p>
+              </el-form-item>
+              <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
+                <p style="font-size: small; color: #b1b1b1">(仅统计2025-01-01后的数据)</p>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第三行：首次充值日期 + 充值次数 -->
+          <!-- <el-row >
+          <el-col :span="9">
+            <el-form-item label="首次充值日期">
+              <p v-if="user.firstRecharge">
+                {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
+              </p>
+            </el-form-item>
+          </el-col>
+
+        </el-row> -->
+
+          <!-- 第四行：消费次数 + 所属门店 -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="所属门店">
+                <p>{{ user.market }}</p>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+
+
+      <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 class="field">
+            <div class="field-label">备注</div>
+            <el-input v-model="addConsume.remark" disabled />
+          </div>
+        </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>
+
+
+      <el-dialog v-model="ConsumeDialogVisible" title="操作确认" :before-close="ConsumeDialogVisiblehandleClose"
+                 :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 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 }} 退款 【{{ addConsume.goodsName }}】(操作人: {{ adminData.adminName }})
+          </div>
+          <div style="margin-top: 10px">
+            <p>是否继续操作？</p>
+
+          </div>
+        </div>
+
+        <!-- 底部按钮（居中） -->
+        <template #footer>
+          <div class="dialog-footer-center">
+            <el-button @click="ConsumeDialogVisibleCancel">取 消</el-button>
+            <el-button type="primary" @click="ConsumeDialogVisibleContinue">确认退款</el-button>
+          </div>
+        </template>
+      </el-dialog>
+
+    </div>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+p {
+  margin: 0px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+
+.add-form {
+  width: 400px;
+  float: left;
+}
+
+/* 标题居中 */
+.el-dialog__header {
+  text-align: center;
+}
+
+.confirm-body {
+  width: 350px;
+  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;
+}
+
+.father1 {
+  width: 82vw;
+  height: 80vh;
+  display: flex;
+
+  .left {
+    width: 500px;
+    float: left;
+    display: flex;
+  }
+
+  .right {
+    flex: 1;
+    height: 50vh;
+    display: flex;
+    align-items: center;
+
+    .customer-info {
+      width: 300px;
+      margin-left: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/refund/gold/coinRefund.vue b/src/views/refund/gold/coinRefund.vue
index c84f2bc..3b0525b 100644
--- a/src/views/refund/gold/coinRefund.vue
+++ b/src/views/refund/gold/coinRefund.vue
@@ -11,6 +11,10 @@
         @click="navigateTo('coinRefundDetail')" :disabled="!hasDetail">
         金币退款明细
       </el-button>
+      <el-button :type="activeTab === 'addNewCoinRefund' ? 'primary' : 'default'" @click="navigateTo('addNewCoinRefund')"
+                 :disabled="!hasAdd">
+        金币退款
+      </el-button>
     </el-button-group>
     <!-- 渲染子路由组件 -->
   </div>
@@ -34,6 +38,7 @@ const { menuTree } = storeToRefs(adminStore);
 const activeTab = ref('');
 const hasAdd = ref(false);
 const hasDetail = ref(false);
+const hasNewAdd = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
@@ -47,6 +52,7 @@ const initPermissions = () => {
 
   hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Gold_Coin_Refund);
   hasDetail.value = hasMenuPermission(menuTree.value, permissionMapping.View_Gold_Coin_Refund_Details);
+  hasNewAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Gold_Coin_RefundS);
 };
 
 // 默认跳转逻辑
@@ -54,13 +60,14 @@ const getDefaultAuditRoute = () => {
   initPermissions();
   if (hasAdd.value) return 'addCoinRefund';
   if (hasDetail.value) return 'coinRefundDetail';
+  if(hasNewAdd.value) return 'addNewCoinRefund';
   return 'addCoinRefund';
 };
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
   initPermissions()
-  if (newName === 'addCoinRefund' || newName === 'coinRefundDetail') {
+  if (newName === 'addCoinRefund' || newName === 'coinRefundDetail' || newName === 'addNewCoinRefund') {
     activeTab.value = newName;
   } else if (newName === 'coinRefund') {
     // 每次访问 /coinConsume 都进行默认跳转
@@ -77,7 +84,7 @@ onMounted(() => {
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'addCoinRefund' || route.name === 'coinRefundDetail') {
+    if (route.name === 'addCoinRefund' || route.name === 'coinRefundDetail' || route.name === 'addNewCoinRefund') {
       activeTab.value = route.name;
     }
   }