金豆新增充值

.env.development

@@ -3,10 +3,10 @@
 #  VITE_API_BASE='http://18.143.76.3:10704/'
 #  VITE_API_BASE='http://192.168.9.52:10705/'
 VITE_UPLOAD_URL=http://39.101.133.168:8828/hljw/api/aws/upload
- VITE_API_BASE='http://192.168.9.28:8081/'
+#  VITE_API_BASE='http://192.168.9.28:8081/'
 #  VITE_API_BASE='http://192.168.9.28:8081/'
 # sunjiabei
 #  VITE_API_BASE='http://192.168.9.28:8081/'
 #  VITE_API_BASE='http://192.168.5.92:8081/'
 # zhangyong
-#  VITE_API_BASE='http://192.168.3.83:8081/'
+ VITE_API_BASE='http://192.168.9.62:8081/'

src/router/index.js

@@ -161,21 +161,21 @@ const routes = [
                         path: 'add',
                         name: "addBeanRecharge",
                         component: () => import("../views/recharge/addBeanRecharge.vue"),
-                        meta: {permissionId: 17} // 对应"提交金币充值"id=17
+                        meta: {permissionId: 46} // 对应"提交金豆充值"id=46
                     },
                     // 金豆系统充值
                     {
                         path: 'system',
                         name: "beanSystemRecharge",
                         component: () => import("../views/recharge/beanSystemRecharge.vue"),
-                        meta: {permissionId: 18} // 对应"查看金币充值明细"id=18
+                        meta: {permissionId: 47} // 对应"查看金豆系统充值明细"id=47
                     },
                     // 金豆线上充值
                     {
                         path: 'online',
                         name: "beanOnlineRecharge",
                         component: () => import("../views/recharge/beanOnlineRecharge.vue"),
-                        meta: {permissionId: 18} // 对应"查看金币充值明细"id=18
+                        meta: {permissionId: 48} // 对应"查看金豆线上充值明细"id=48
                     }
                 ]
             },

src/views/recharge/addBeanRecharge.vue

@@ -6,27 +6,28 @@ import axios from 'axios'
 import { ElMessageBox } from 'element-plus'
 import API from '@/util/http'
 import { uploadFile } from '@/util/request';
+import request from '@/util/http'
 import moment from 'moment'
-import { range, re } from 'mathjs'
+import { e, range, re } from 'mathjs'
 import { utils, read } from 'xlsx'
 import throttle from 'lodash/throttle'
-
+import { useAdminStore } from "@/store/index.js";
+import { storeToRefs } from "pinia";
 const user = ref({})
 const getUser = async function (jwcode) {
   if (addForm.value.jwcode) {
     addForm.value.jwcode = addForm.value.jwcode.replace(/\s/g, '');
+  } else {
+    ElMessage.error('请先输入精网号')
+    return false
   }
   try {
-
-
     const result = await API({
-      url: '/user/selectUser',
+      url: '/beanUser/userCard',
       data: {
         jwcode: addForm.value.jwcode
       }
     })
-
-
     if (result.code === 0) {
       ElMessage.error(result.msg);
     } else if (result.data === null) {
@@ -48,87 +49,70 @@ const addForm = ref({
   remark: '',
   adminId: ''
 })
-const Ref = ref(null)
-
-// const rules = reactive({
-//   jwcode: [{ required: true, validator: validateJwCode, trigger: 'blur' }],
-//   gode: [
-//     { required: true, message: '请输入永久金币数', trigger: 'blur' },
-//     {
-//       validator: (rule, value, callback) => {
-//         // 检查是否包含特殊符号
-//         if (/[^0-9.]/.test(value)) {
-//           callback(new Error('不能包含特殊符号或负数'));
-//           return;
-//         }
+const formRef = ref(null)
+const adminStore = useAdminStore()
+const { adminData } = storeToRefs(adminStore)
+const rules = reactive({
+  jwcode: [
+    { required: true, message: '请输入精网号', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (!value) {
+          callback(new Error('精网号不能为空'));
+          return;
+        }
+        if (/[^0-9]/.test(value)) {
+          callback(new Error('精网号只能包含数字'));
+          return;
+        }
+        callback();
+      }, trigger: 'blur'
+    }],
+  gode: [
+    { required: true, message: '请输入永久金豆数', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        // 检查是否为非负整数
+        if (!/^\d+$/.test(value)) {
+          callback(new Error('请输入非负整数'));
+          return;
+        }
 
-//         // 检查整数位数
-//         const integerPart = value.split('.')[0];
-//         if (integerPart.length > 6) {
-//           callback(new Error('整数位数不能超过6位'));
-//           return;
-//         }
+        // 检查位数
+        if (value.length > 6) {
+          callback(new Error('整数位数不能超过6位'));
+          return;
+        }
+        callback();
+      },
 
-//         // 检查小数位数
-//         if (value.includes('.')) {
-//           const decimalPart = value.split('.')[1];
-//           if (decimalPart.length > 2) {
-//             callback(new Error('小数位数不能超过两位'));
-//             return;
-//           }
-//         }
-
-//         const numValue = Number(value);
-//         if (isNaN(numValue)) {
-//           callback(new Error('请输入有效的数字'));
-//         } else if (numValue < 0) {
-//           callback(new Error('输入金额不能小于0'));
-//         } else {
-//           callback();
-//         }
-//       },
-//       trigger: 'blur'
-//     }
-//   ],
-//   freeGode: [
-//     { required: true, message: '请输入免费金币数', trigger: 'blur' },
-//     {
-//       validator: (rule, value, callback) => {
-//         // 检查是否包含特殊符号
-//         if (/[^0-9.]/.test(value)) {
-//           callback(new Error('不能包含特殊符号或负数'));
-//           return;
-//         }
-
-//         // 检查整数位数
-//         const integerPart = value.split('.')[0];
-//         if (integerPart.length > 6) {
-//           callback(new Error('整数位数不能超过6位'));
-//           return;
-//         }
-
-//         // 检查小数位数
-//         if (value.includes('.')) {
-//           const decimalPart = value.split('.')[1];
-//           if (decimalPart.length > 2) {
-//             callback(new Error('小数位数不能超过两位'));
-//             return;
-//           }
-//         }
+      trigger: 'blur'
+    }
+  ],
+  freeGode: [
+    { required: true, message: '请输入免费金豆数', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        // 检查是否为非负整数
+        if (!/^\d+$/.test(value)) {
+          callback(new Error('请输入非负整数'));
+          return;
+        }
 
-//         const numValue = Number(value);
-//         if (isNaN(numValue)) {
-//           callback(new Error('请输入有效的数字'));
-//         } else if (numValue < 0) {
-//           callback(new Error('输入金额不能小于0'));
-//         } else {
-//           callback();
-//         }
-//       },
-//       trigger: 'blur'
-//     }
-//   ],
-// });
+        // 检查位数
+        if (value.length > 6) {
+          callback(new Error('整数位数不能超过6位'));
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur'
+    }
+  ],
+  remark: [
+    { required: true, message: '请输入备注', trigger: 'blur' }
+  ]
+});
 
 //重置表单
 const deleteAddForm = function () {
@@ -141,118 +125,110 @@ const deleteAddForm = function () {
   }
 }
 
-const handleAddForm = () => {
+const handleAddForm = async () => {
+  try {
+    await new Promise((resolve, reject) => {
+      formRef.value.validate((valid) => {
+        if (valid) {
+          if (Number(addForm.value.gode) === 0 && Number(addForm.value.freeGode) === 0) {
+            reject(new Error('永久金豆和付费金豆不能同时为0'));
+          }
+          resolve(); // 验证通过，继续执行后续代码
+        } else {
+          reject(new Error('请检查并完善表单信息')); // 验证失败，抛出错误
+        }
+      });
+    });
+    console.log('adminData', adminData.value);
 
+    const result = await request({
+      url: '/bean/add',
+      data: {
+        jwcode: addForm.value.jwcode,
+        gode: addForm.value.gode,
+        freeGode: addForm.value.freeGode,
+        remark: addForm.value.remark,
+        adminId: adminData.adminId
+      }
+    })
+  } catch (error) {
+    console.log('金豆新增充值失败');
+    ElMessage.error(error.message || '操作失败');
+  }
 }
 </script>
 <template>
   <div>
-    <el-form :model="addForm" ref="Ref"  label-width="auto" style="max-width: 600px" class="add-form">
-      <el-form-item prop="jwcode" label="精网号">
+    <el-form :model="addForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px" class="add-form">
+      <el-form-item prop="jwcode" label="精网号" label-position="left">
         <el-input v-model="addForm.jwcode" style="width: 220px" />
         <el-button type="primary" @click="getUser(addForm.jwcode)" style="margin-left: 20px">查询</el-button>
       </el-form-item>
-
-      <el-form-item prop="permanentGold" label="付费金豆">
+      <el-form-item prop="gode" label="付费金豆" label-position="left">
         <el-input v-model="addForm.gode" style="width: 100px" />
-        <p>个</p>
-
       </el-form-item>
-      <el-form-item prop="freeGold" label="免费金豆">
-
+      <el-form-item prop="freeGode" label="免费金豆" label-position="left">
         <el-input v-model="addForm.freeGode" style="width: 100px" />
-        <p>个</p>
       </el-form-item>
-      <el-form-item prop="remark" label="备注">
-        <el-input v-model="addForm.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
+      <el-form-item prop="remark" label="备注" label-position="left">
+        <el-input v-model="addForm.remark" style="width: 300px" :rows="5" maxlength="100" show-word-limit
           type="textarea" />
       </el-form-item>
-      <el-form-item prop="adminId" label="提交人">
+      <!-- <el-form-item prop="adminId" label="提交人">
         <el-input style="width: 300px" :value="adminData.adminName" disabled placeholder="提交人姓名" />
-      </el-form-item>
+      </el-form-item> -->
       <el-button @click="deleteAddForm" style="margin-left: 280px" type="success">重置</el-button>
       <el-button type="primary" @click="handleAddForm"> 提交 </el-button>
     </el-form>
 
     <!-- 客户信息栏 -->
-   <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
+    <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>
+              <p style="color: #2fa1ff; margin-right: 5px">{{ user.name }}</p>
             </el-form-item>
           </el-col>
           <el-col :span="14">
-            <el-form-item label="历史金币总数">
-              <!-- 检查 user.historySumGold 是否为有效的数字 -->
-              <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
-                {{ Number(user.historySumGold) / 100 }}
+            <el-form-item label="当前付费金豆:">
+              <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.permanentBean))">
+                {{ Number(user.permanentBean) }}
               </p>
-
               <!-- 如果不是有效的数字，显示默认值 -->
               <p v-else></p>
             </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 }};免费金币:{{
-                  (user.historyFreeGold) / 100
-                }};任务金币:{{ user.historyTaskGold / 100 }})</span>
-            </el-form-item>
           </el-col>
         </el-row>
 
-        <!-- 第二行：精网号 + 当前金币（独立行） -->
-        <el-row style="margin-top:-23px">
+        <!-- 第二行：精网号 + 免费金豆 -->
+        <el-row >
           <el-col :span="9">
             <el-form-item label="精网号">
-              <p>{{ user.jwcode }}</p>
+              <p style="color: #2fa1ff; margin-right: 5px">{{ user.jwcode }}</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
-                /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.nowFreeGold / 100 }};
-                任务金币:{{ user.nowTaskGold / 100 }})</span>
+            <el-form-item label="当前免费金豆:">
+              <span style="color: #2fa1ff; margin-right: 5px" v-if="user.freeBean !== undefined">{{ user.freeBean }}
+              </span>
             </el-form-item>
           </el-col>
         </el-row>
-
-        <!-- 第三行：首次充值日期 + 充值次数 -->
-        <el-row style="margin-top:-23px">
-          <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-col :span="14">
-            <el-form-item label="充值次数">
-              <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <!-- 第四行：消费次数 + 所属门店 -->
+        <!-- 第三行：消费次数 + 所属门店 -->
         <el-row>
           <el-col :span="9">
-            <el-form-item label="消费次数">
-              <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
+            <el-form-item label="所属门店">
+              <p style="color: #2fa1ff">{{ user.market }}</p>
             </el-form-item>
           </el-col>
           <el-col :span="9">
-            <el-form-item label="所属门店">
-              <p>{{ user.market }}</p>
+            <el-form-item label="消费次数">
+              <p style="color: #2fa1ff; margin-right: 5px" v-if="user.consumeNum!=null">{{ user.consumeNum }}</p>
+              <p style="color: #2fa1ff; margin-right: 5px" v-else>{{ 0 }}</p>
             </el-form-item>
           </el-col>
         </el-row>
@@ -262,4 +238,22 @@ const handleAddForm = () => {
 
   </div>
 </template>
-<style></style>
+<style scoped>
+.add-form {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
+
+.customer-info {
+  max-width: 60%;
+}
+
+p {
+  margin: 0px;
+}
+
+.el-form-item {
+  margin-left: 50px;
+}
+</style>

src/views/recharge/addCoinRecharge.vue

@@ -77,9 +77,9 @@ const recharge = ref({
 const add = async function () {
   try {
 
-    const formattedRecharge = { ...recharge.value}
+    const formattedRecharge = { ...recharge.value }
 
-     // 将永久金币数、免费金币数和充值金额数乘以 100
+    // 将永久金币数、免费金币数和充值金额数乘以 100
     if (formattedRecharge.permanentGold) {
       formattedRecharge.permanentGold = Number(formattedRecharge.permanentGold) * 100;
     }
@@ -154,7 +154,7 @@ const addBefore = () => {
         })
         return
       }
-      if(recharge.value.money == null || recharge.value.money == '' || recharge.value.money == undefined){
+      if (recharge.value.money == null || recharge.value.money == '' || recharge.value.money == undefined) {
         ElMessage({
           type: 'error',
           message: '请输入充值金额'
@@ -187,21 +187,20 @@ const addBefore = () => {
 // 表单验证
 // 开始时间改变时，重新验证结束时间
 const Ref = ref(null)
-
-const validateJwCode = (rule, value, callback) => {
-  if (!value) {
-    callback(new Error('精网号不能为空'));
-    return;
-  }
-  if (/[^0-9]/.test(value)) {
-    callback(new Error('精网号只能包含数字'));
-    return;
-  }
-  callback();
-};
-
 const rules = reactive({
-  jwcode: [{ required: true,  validator: validateJwCode, trigger: 'blur' }],
+  jwcode: [{
+    required: true, validator: (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('精网号不能为空'));
+        return;
+      }
+      if (/[^0-9]/.test(value)) {
+        callback(new Error('精网号只能包含数字'));
+        return;
+      }
+      callback();
+    }, trigger: 'blur'
+  }],
   activity: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
   permanentGold: [
     { required: true, message: '请输入永久金币数', trigger: 'blur' },
@@ -539,25 +538,12 @@ onMounted(() => {
 <template>
   <div>
 
-  <el-form
-    :model="recharge"
-    ref="Ref"
-    :rules="rules"
-    label-width="auto"
-    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
-      >
-    </el-form-item>
-    <!-- <el-form-item prop="activity" label="活动名称">
+    <el-form :model="recharge" ref="Ref" :rules="rules" label-width="auto" 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>
+      </el-form-item>
+      <!-- <el-form-item prop="activity" label="活动名称">
       <el-select
         v-model="recharge.activity"
         placeholder="请选择"
@@ -572,24 +558,20 @@ onMounted(() => {
         />
       </el-select>
     </el-form-item> -->
-    <el-form-item prop="activity" label="活动名称">
-      <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" style="width: 100px" />
-      <p>个</p>
-    
-    </el-form-item>
-    <el-form-item prop="freeGold" label="免费金币">
-      
-    <el-input v-model="recharge.freeGold" style="width: 100px" />
-      <p>个</p>
-    </el-form-item>
-    <!-- <el-form-item label="充值金额">
+      <el-form-item prop="activity" label="活动名称">
+        <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" style="width: 100px" />
+        <p>个</p>
+
+      </el-form-item>
+      <el-form-item prop="freeGold" label="免费金币">
+
+        <el-input v-model="recharge.freeGold" style="width: 100px" />
+        <p>个</p>
+      </el-form-item>
+      <!-- <el-form-item label="充值金额">
       <el-select
         prop="moneys"
         v-model="rateName"
@@ -607,203 +589,139 @@ onMounted(() => {
       <el-input prop="money" v-model="recharge.money" style="width: 200px" aria-required="true"/>
     </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-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-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-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-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"
-        />
-        <el-icon
-          v-else
-          class="avatar-uploader-icon"
-          style="width: 100px; height: 100px"
-        >
-          <Plus />
-        </el-icon>
-      </el-upload>
-      <p style="margin-left: 10px; color: rgb(177, 176, 176)">
-        仅支持.jpg .png格式，文件≤1MB
-      </p>
-    </el-form-item>
-    <el-form-item prop="remark" label="备注">
-      <el-input
-        v-model="recharge.remark"
-        style="width: 300px"
-        :rows="2"
-        maxlength="100"
-        show-word-limit
-        type="textarea"
-      />
-    </el-form-item>
-    <el-form-item prop="adminName" label="提交人">
-      <el-input
-        style="width: 300px"
-        :value="adminData.adminName"
-        disabled
-        placeholder="提交人姓名"
-      />
-    </el-form-item>
-    <el-button @click="deleteRecharge" style="margin-left: 280px" type="success"
-      >重置</el-button
-    >
-    <el-button type="primary" @click="addBefore"> 提交 </el-button>
-  </el-form>
-
-  <!-- 客户信息栏 -->
-  <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="历史金币总数">
-            <!-- 检查 user.historySumGold 是否为有效的数字 -->
-            <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
-              {{ Number(user.historySumGold ) /100 }}
-            </p>
-           
-            <!-- 如果不是有效的数字，显示默认值 -->
-            <p v-else></p>
-          </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 }};免费金币:{{
-                (user.historyFreeGold) /100
-              }};任务金币:{{ user.historyTaskGold /100}})</span>
+      <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-select>
         </el-form-item>
-      </el-col>
-    </el-row>
-
-    <!-- 第二行：精网号 + 当前金币（独立行） -->
-    <el-row style="margin-top:-23px">
-      <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="当前金币总数" style="width: 500px">
-          <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.nowFreeGold /100}};
-            任务金币:{{ user.nowTaskGold /100}})</span>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <!-- 第三行：首次充值日期 + 充值次数 -->
-    <el-row style="margin-top:-23px">
-      <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-col :span="14">
-        <el-form-item label="充值次数">
-          <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <!-- 第四行：消费次数 + 所属门店 -->
-    <el-row>
-      <el-col :span="9">
-        <el-form-item label="消费次数">
-          <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
-        </el-form-item>
-      </el-col>
-      <el-col :span="9">
-        <el-form-item label="所属门店">
-          <p>{{ user.market }}</p>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
-</el-card>
 
-  
-</div>
+        <!-- 充值金额 -->
+        <el-form-item prop="money" style="display: inline-block; margin-left:10px;">
+          <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-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-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" />
+          <el-icon v-else class="avatar-uploader-icon" style="width: 100px; height: 100px">
+            <Plus />
+          </el-icon>
+        </el-upload>
+        <p style="margin-left: 10px; color: rgb(177, 176, 176)">
+          仅支持.jpg .png格式，文件≤1MB
+        </p>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注">
+        <el-input v-model="recharge.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
+          type="textarea" />
+      </el-form-item>
+      <el-form-item prop="adminName" label="提交人">
+        <el-input style="width: 300px" :value="adminData.adminName" disabled placeholder="提交人姓名" />
+      </el-form-item>
+      <el-button @click="deleteRecharge" style="margin-left: 280px" type="success">重置</el-button>
+      <el-button type="primary" @click="addBefore"> 提交 </el-button>
+    </el-form>
+
+    <!-- 客户信息栏 -->
+    <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="历史金币总数">
+              <!-- 检查 user.historySumGold 是否为有效的数字 -->
+              <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
+                {{ Number(user.historySumGold) / 100 }}
+              </p>
+
+              <!-- 如果不是有效的数字，显示默认值 -->
+              <p v-else></p>
+            </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 }};免费金币:{{
+                  (user.historyFreeGold) / 100
+                }};任务金币:{{ user.historyTaskGold / 100 }})</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第二行：精网号 + 当前金币（独立行） -->
+        <el-row style="margin-top:-23px">
+          <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="当前金币总数" style="width: 500px">
+              <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.nowFreeGold / 100 }};
+                任务金币:{{ user.nowTaskGold / 100 }})</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第三行：首次充值日期 + 充值次数 -->
+        <el-row style="margin-top:-23px">
+          <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-col :span="14">
+            <el-form-item label="充值次数">
+              <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第四行：消费次数 + 所属门店 -->
+        <el-row>
+          <el-col :span="9">
+            <el-form-item label="消费次数">
+              <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item label="所属门店">
+              <p>{{ user.market }}</p>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+
+  </div>
 </template>
 
 <style scoped>

src/views/recharge/beanRecharge.vue

@@ -7,9 +7,7 @@ import {useAdminStore} from "@/store/index.js";
 const router = useRouter();// 获取路由实例
 const route = useRoute();// 获取当前路由信息
 // 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'addBeanRecharge' ? 'detail' : 'add');
-//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinConsume，所以默认是add
+const activeTab = ref(route.name === 'beanSystemRecharge' ? 'system' : 'add');
 const adminStore = useAdminStore();
 const {menuTree} = storeToRefs(adminStore);
 const goToAdd = () => {
@@ -52,8 +50,8 @@ const hasMenuPermission = (tree, targetName) => {
 // 默认路由判断
 const getDefaultRoute = () => {
   if (!menuTree.value) return 'add';
-  const hasRecharge = hasMenuPermission(menuTree.value, '提交金币充值');
-  return hasRecharge ? 'add' : 'detail';
+  const hasRecharge = hasMenuPermission(menuTree.value, '提交金豆充值');
+  return hasRecharge ? 'add' : 'system';
 };
 
 
@@ -61,7 +59,7 @@ const getDefaultRoute = () => {
 watch(() => route.name, (newName) => {
   if (newName === 'add' || newName === 'system' || newName =='online') {
     activeTab.value = newName;
-  } else if (newName === 'coinRecharge') {
+  } else if (newName === 'beanRecharge') {
     const defaultRoute = getDefaultRoute();
     navigateTo(defaultRoute);
   }
@@ -69,12 +67,14 @@ watch(() => route.name, (newName) => {
 
 // 初始化逻辑
 onMounted(() => {
-  if (route.name === 'coinRecharge') {
+  if (route.name === 'beanRecharge') {
     const defaultRoute = getDefaultRoute();
+    console.log('defaultRoute',defaultRoute);
+    
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'add' || route.name === 'detail' || route.name =='online') {
+    if (route.name === 'add' || route.name === 'system' || route.name =='online') {
       activeTab.value = route.name;
     }
   }