系统，线上新增界面接口对接

src/views/permissions/permission.vue

@@ -1161,16 +1161,6 @@ const selectParentNodesForSubmit = (treeData, nodeId, checkedKeys) => {
 
 
 
-
-// // 挂载 怎么有俩挂载，注掉一个
-// onMounted(async function () {
-//   await get()
-//   await getArea()
-//   await getStore()
-//   await getRoleList()
-//   await getAdminData()
-// })
-
 const Rolerules = reactive({
   roleName: [
     { required: true, message: '请输入角色名称', trigger: 'blur' },

src/views/recharge/addBeanRecharge.vue

@@ -13,6 +13,7 @@ import { utils, read } from 'xlsx'
 import throttle from 'lodash/throttle'
 import { useAdminStore } from "@/store/index.js";
 import { storeToRefs } from "pinia";
+import _ from 'lodash'
 const user = ref({})
 const getUser = async function (jwcode) {
   if (addForm.value.jwcode) {
@@ -44,10 +45,10 @@ const getUser = async function (jwcode) {
 }
 const addForm = ref({
   jwcode: '',
-  gode: '',
-  freeGode: '',
+  permanentBean: '',
+  freeBean: '',
   remark: '',
-  adminId: ''
+  adminName: ''
 })
 const formRef = ref(null)
 const adminStore = useAdminStore()
@@ -68,7 +69,7 @@ const rules = reactive({
         callback();
       }, trigger: 'blur'
     }],
-  gode: [
+  permanentBean: [
     { required: true, message: '请输入永久金豆数', trigger: 'blur' },
     {
       validator: (rule, value, callback) => {
@@ -89,7 +90,7 @@ const rules = reactive({
       trigger: 'blur'
     }
   ],
-  freeGode: [
+  freeBean: [
     { required: true, message: '请输入免费金豆数', trigger: 'blur' },
     {
       validator: (rule, value, callback) => {
@@ -118,10 +119,10 @@ const rules = reactive({
 const deleteAddForm = function () {
   addForm.value = {
     jwcode: '',
-    gode: '',
-    freeGode: '',
+    permanentBean: '',
+    freeBean: '',
     remark: '',
-    adminId: ''
+    adminName: ''
   }
 }
 
@@ -130,7 +131,7 @@ const handleAddForm = async () => {
     await new Promise((resolve, reject) => {
       formRef.value.validate((valid) => {
         if (valid) {
-          if (Number(addForm.value.gode) === 0 && Number(addForm.value.freeGode) === 0) {
+          if (Number(addForm.value.permanentBean) === 0 && Number(addForm.value.freeBean) === 0) {
             reject(new Error('永久金豆和付费金豆不能同时为0'));
           }
           resolve(); // 验证通过，继续执行后续代码
@@ -141,21 +142,46 @@ const handleAddForm = async () => {
     });
     console.log('adminData', adminData.value);
 
+    await ElMessageBox.confirm(
+      '确认充值吗？',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: "primary",
+        lockScroll: false,
+      }
+    )
     const result = await request({
-      url: '/bean/add',
+      url: '/beanRecharge/add',
       data: {
         jwcode: addForm.value.jwcode,
-        gode: addForm.value.gode,
-        freeGode: addForm.value.freeGode,
+        permanentBean: addForm.value.permanentBean,
+        freeBean: addForm.value.freeBean,
         remark: addForm.value.remark,
-        adminId: adminData.adminId
+        adminName: adminData.value.adminName
       }
     })
+    if (result.code == 200) {
+      ElMessage.success('新增成功')
+      addForm.value = {
+        jwcode: '',
+        permanentBean: '',
+        freeBean: '',
+        remark: '',
+        adminName: ''
+      }
+    }else{
+      ElMessage.error(result.msg)
+    }
   } catch (error) {
     console.log('金豆新增充值失败');
-    ElMessage.error(error.message || '操作失败');
+    ElMessage.error(error.message || '操作取消');
   }
 }
+const throttledHandleAddFormt = _.throttle(handleAddForm, 5000, {
+  trailing: false
+})
 </script>
 <template>
   <div>
@@ -164,21 +190,21 @@ const handleAddForm = async () => {
         <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="gode" label="付费金豆" label-position="left">
-        <el-input v-model="addForm.gode" style="width: 100px" />
+      <el-form-item prop="permanentBean" label="付费金豆" label-position="left">
+        <el-input v-model="addForm.permanentBean" style="width: 100px" />
       </el-form-item>
-      <el-form-item prop="freeGode" label="免费金豆" label-position="left">
-        <el-input v-model="addForm.freeGode" style="width: 100px" />
+      <el-form-item prop="freeBean" label="免费金豆" label-position="left">
+        <el-input v-model="addForm.freeBean" style="width: 100px" />
       </el-form-item>
       <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="adminName" label="提交人">
         <el-input style="width: 300px" :value="adminData.adminName" disabled placeholder="提交人姓名" />
       </el-form-item> -->
       <el-button @click="deleteAddForm" style="margin-left: 280px" type="success">重置</el-button>
-      <el-button type="primary" @click="handleAddForm"> 提交 </el-button>
+      <el-button type="primary" @click="throttledHandleAddFormt"> 提交 </el-button>
     </el-form>
 
     <!-- 客户信息栏 -->
@@ -205,7 +231,7 @@ const handleAddForm = async () => {
         </el-row>
 
         <!-- 第二行：精网号 + 免费金豆 -->
-        <el-row >
+        <el-row>
           <el-col :span="9">
             <el-form-item label="精网号">
               <p style="color: #2fa1ff; margin-right: 5px">{{ user.jwcode }}</p>
@@ -227,7 +253,7 @@ const handleAddForm = async () => {
           </el-col>
           <el-col :span="9">
             <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-if="user.consumeNum != null">{{ user.consumeNum }}</p>
               <p style="color: #2fa1ff; margin-right: 5px" v-else>{{ 0 }}</p>
             </el-form-item>
           </el-col>

src/views/recharge/beanOnlineRecharge.vue

@@ -14,6 +14,31 @@ const selectData = ref({
     endTime: '',
 
 })
+
+const permanentBeans = ref(0)
+const beanNum = ref(0)
+const money = ref(0)
+
+//获取当齐全条件的金豆总数
+const getTotalBeans = async () => {
+    try {
+        const result = await API({
+            url: '/beanRecharge/statsOnlineBean',
+            data: {
+                ...selectData.value,
+            }
+        })
+        if (result.code == 200) {
+            permanentBeans.value = result.data.permanentBean
+            beanNum.value = result.data.beanNum
+            money.value = result.data.money
+            console.log('金豆总数获取成功');
+        }
+        console.log('获取金豆总数失败：', result.msg);
+    } catch (error) {
+        console.log('获取金豆总数出错');
+    }
+}
 //时间格式化
 const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
 const tableData = ref([])
@@ -24,10 +49,21 @@ const getTime = ref([])
 const activeTimeRange = ref('')
 const handleDatePickerChange = () => {
     activeTimeRange.value = ''
+    console.log('当前选中时间范围', getTime.value);
+
 }
 //获取所有地区
-const getArea = () => {
-
+const getArea = async () => {
+    const result = await API({
+        url: '/beanConsume/getDept',
+        data: {}
+    })
+    if (result.code == 200) {
+        market.value = result.data
+        console.log('线上充值地区获取成功', market.value)
+    } else {
+        ElMessage.error('线上充值地区获取失败')
+    }
 }
 //获取今天日期
 const getToday = () => {
@@ -99,11 +135,12 @@ const reset = () => {
 const search = () => {
     getObj.value.pageNum = 1
     get()
+    getTotalBeans()
 }
 //获取表格数据
 const get = async () => {
     try {
-        if (getTime != null) {
+        if ( getTime.value != null) {
             selectData.value.startTime = formatTime(getTime.value[0])
             selectData.value.endTime = formatTime(getTime.value[1])
         } else {
@@ -112,19 +149,20 @@ const get = async () => {
         }
         const data = {
             ...getObj.value,
-            ...selectData.value,
+            beanRechargeInfo: {
+                ...selectData.value
+            },
             sortField: sortField.value,
             sortOrder: sortOrder.value,
         }
         console.log('请求参数：', data);
         const result = await API({
-            url: '/beanRecharge/selectOnline',
+            url: '/beanRecharge/selectByOnline',
             data: data
         })
         if (result.code == 200) {
             tableData.value = result.data.list
             total.value = result.data.total
-            ElMessage.success('数据查询成功')
         } else {
             ElMessage.error(result.message)
         }
@@ -132,6 +170,18 @@ const get = async () => {
         console.log('搜索失败', error);
     }
 }
+
+//充值平台
+const platform = [
+    {
+        value: 1,
+        label: 'PC'
+    },
+    {
+        value: 2,
+        label: '手机'
+    }
+]
 //排序字段
 //处理表格排序事件
 const sortField = ref('')
@@ -170,6 +220,7 @@ const handleCurrentChange = (value) => {
 onMounted(async function () {
     await get()
     await getArea()
+    await getTotalBeans()
 })
 </script>
 <template>
@@ -186,21 +237,26 @@ onMounted(async function () {
                     <el-col :span="6">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">所属地区：</el-text>
-                            <el-cascader v-model="selectData.market" :options="market" placeholder="请选择所属地区" clearable
-                                style="width:150px" />
+                            <el-select v-model="selectData.market" placeholder="请选择所属地区" clearable style="width:150px">
+                                <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+                            </el-select>
                         </div>
                     </el-col>
                     <el-col :span="5">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">订单号：</el-text>
-                            <el-input v-model="selectData.OrderNumber" placeholder="请输入订单号" style="width: 150px" clearable />
+                            <el-input v-model="selectData.orderNo" placeholder="请输入订单号" style="width: 150px"
+                                clearable />
                         </div>
                     </el-col>
                     <el-col :span="6">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">充值平台：</el-text>
-                            <el-cascader v-model="selectData.PayPlatform" :options="market" placeholder="请选择充值平台" clearable
-                                style="width:150px" />
+                            <el-select v-model="selectData.platform" placeholder="请选择充值平台" clearable
+                                style="width:150px">
+                                <el-option v-for="item in platform" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
                         </div>
                     </el-col>
 
@@ -235,22 +291,31 @@ onMounted(async function () {
     <el-row>
         <el-col>
             <el-card>
-                <!-- <div>
-                    充值金额：{{ (permanentGolds) / 100 }}新币，永久金币：{{
-                        permanentGolds / 100
-                    }}金币，免费金币：{{ freeGolds / 100 }}金币
-                </div> -->
+                <div class="bean-info">
+                    <!-- 汉字用 <strong> 加粗，动态数据用 <span> 包一层单独改色 -->
+                    <strong>金豆总数：</strong><span class="data-text">{{ beanNum }}</span>
+                    <strong>, 充值金豆数：</strong><span class="data-text">{{ permanentBeans }}</span>
+                    <strong>, 合计新币数：</strong><span class="data-text">{{ money }}</span>。
+                </div>
                 <!-- 设置表格容器的高度和滚动样式 -->
                 <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
                     <el-table :data="tableData" style="width: 100%" height="520px" @sort-change="handleSortChange">
-                        <el-table-column type="id" label="ID" min-width="80px" fixed="left"></el-table-column>
-                        <el-table-column fixed="left" prop="name" label="姓名" min-width="100" />
+                        <el-table-column type="id" prop='id' label="ID" min-width="80px" fixed="left"></el-table-column>
+                        <el-table-column fixed="left" prop="name" label="姓名" min-width="120" />
                         <el-table-column fixed="left" prop="jwcode" label="精网号" min-width="110px" />
                         <el-table-column prop="market" label="所属地区" min-width="100px" />
-                        <el-table-column prop="permanentBean" label="订单号"  min-width="110px" />
-                        <el-table-column prop="freeBean" label="数量" sortable="custom" min-width="110px" />
-                        <el-table-column prop="remark" label="金额" sortable="custom" min-width="150px" show-overflow-tooltip />
-                        <el-table-column prop="remark" label="充值平台" min-width="150px" show-overflow-tooltip />
+                        <el-table-column prop="orderNo" header-align="center" align="center" label="订单号"
+                            min-width="210px" />
+                        <el-table-column prop="num" label="数量" sortable="custom" min-width="110px" />
+                        <el-table-column prop="money" label="金额" sortable="custom" min-width="150px"
+                            show-overflow-tooltip />
+                        <el-table-column prop="platform" label="充值平台" min-width="150px" show-overflow-tooltip>
+                            <template #default=scope>
+                                <span v-if="scope.row.platform == 1">PC</span>
+                                <span v-else-if="scope.row.platform == 2">手机</span>
+                                <span v-else>其他</span>
+                            </template>
+                        </el-table-column>
                         <el-table-column prop="rechargeTime" sortable label="充值时间" min-width="200px">
                             <template #default="scope">
                                 {{ moment(scope.row.payTime).format('YYYY-MM-DD HH:mm:ss') }}

src/views/recharge/beanSystemRecharge.vue

@@ -1,4 +1,4 @@
-<script setup >
+<script setup>
 import { ref, onMounted, reactive, computed } from 'vue'
 import ElementPlus from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -14,20 +14,53 @@ const selectData = ref({
     endTime: '',
 
 })
+const permanentBeans = ref(0)
+const beanNum = ref(0)
+const money = ref(0)
+
 //时间格式化
 const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
 const tableData = ref([])
 //存储所有的地区数据
-const market = ref()
+const market = ref([])
 const getTime = ref([])
 //记录当前选中时间按钮状态
 const activeTimeRange = ref('')
 const handleDatePickerChange = () => {
     activeTimeRange.value = ''
 }
+//获取当齐全条件的金豆总数
+const getTotalBeans = async () => {
+    try {
+        const result = await API({
+            url: '/beanRecharge/statsSystemBean',
+            data: {
+                ...selectData.value,
+            }
+        })
+        if (result.code == 200) {
+            permanentBeans.value = result.data.permanentBean
+            beanNum.value = result.data.beanNum
+            money.value = result.data.money
+            console.log('金豆总数获取成功');
+        }
+        console.log('获取金豆总数失败：', result.msg);
+    } catch (error) {
+        console.log('获取金豆总数出错');
+    }
+}
 //获取所有地区
-const getArea =()=>{
-    
+const getArea = async () => {
+    const result = await API({
+        url: '/beanRecharge/systemMarket',
+        data: {}
+    })
+    if (result.code == 200) {
+        market.value = result.data
+        console.log('系统充值地区获取成功', market.value)
+    } else {
+        ElMessage.error('系统充值地区获取失败')
+    }
 }
 //获取今天日期
 const getToday = () => {
@@ -99,11 +132,12 @@ const reset = () => {
 const search = () => {
     getObj.value.pageNum = 1
     get()
+    getTotalBeans()
 }
 //获取表格数据
 const get = async () => {
     try {
-        if (getTime != null) {
+        if (getTime.value != null) {
             selectData.value.startTime = formatTime(getTime.value[0])
             selectData.value.endTime = formatTime(getTime.value[1])
         } else {
@@ -112,9 +146,11 @@ const get = async () => {
         }
         const data = {
             ...getObj.value,
-            ...selectData.value,
-            sortField: sortField.value,
-            sortOrder: sortOrder.value,
+            "beanRechargeInfo": {
+                ...selectData.value,
+                sortField: sortField.value,
+                sortOrder: sortOrder.value,
+            },
         }
         console.log('请求参数：', data);
         const result = await API({
@@ -124,7 +160,6 @@ const get = async () => {
         if (result.code == 200) {
             tableData.value = result.data.list
             total.value = result.data.total
-            ElMessage.success('数据查询成功')
         } else {
             ElMessage.error(result.message)
         }
@@ -141,7 +176,7 @@ const handleSortChange = (column) => {
     console.log('排序方式：', column.order)
 
     // 直接使用允许的排序字段列表进行过滤
-    const allowedFields = ['money', 'freeGold', 'payTime', 'createTime', 'permanentGold'];
+    const allowedFields = ['money', 'freeBean', 'rechargeTime', 'createTime', 'permanentBean'];
     if (allowedFields.includes(column.prop)) {
         sortField.value = column.prop;
     }
@@ -151,7 +186,7 @@ const handleSortChange = (column) => {
     console.log('传递给后端的排序字段：', sortField.value)
     console.log('传递给后端的排序方式：', sortOrder.value)
 
-    // get();
+    get();
 }
 //========================分页===========================
 // 搜索对象
@@ -168,8 +203,9 @@ const handleCurrentChange = (value) => {
 }
 
 onMounted(async function () {
-  await get()
-  await getArea()
+    await get()
+    await getArea()
+    await getTotalBeans()
 })
 </script>
 <template>
@@ -186,8 +222,9 @@ onMounted(async function () {
                     <el-col :span="4">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">所属地区：</el-text>
-                            <el-cascader v-model="selectData.market" :options="market" placeholder="请选择所属地区" clearable
-                                style="width:150px" />
+                            <el-select v-model="selectData.market" placeholder="请选择所属地区" clearable style="width:150px">
+                                <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+                            </el-select>
                         </div>
                     </el-col>
                     <el-col :span="15">
@@ -221,24 +258,25 @@ onMounted(async function () {
     <el-row>
         <el-col>
             <el-card>
-                <!-- <div>
-                    充值金额：{{ (permanentGolds) / 100 }}新币，永久金币：{{
-                        permanentGolds / 100
-                    }}金币，免费金币：{{ freeGolds / 100 }}金币
-                </div> -->
+                <div class="bean-info">
+                    <!-- 汉字用 <strong> 加粗，动态数据用 <span> 包一层单独改色 -->
+                    <strong>金豆总数：</strong><span class="data-text">{{ beanNum }}</span>
+                    <strong>, 充值金豆数：</strong><span class="data-text">{{ permanentBeans }}</span>
+                    <strong>, 合计新币数：</strong><span class="data-text">{{ money }}</span>。
+                </div>
                 <!-- 设置表格容器的高度和滚动样式 -->
                 <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
                     <el-table :data="tableData" style="width: 100%" height="520px" @sort-change="handleSortChange">
-                        <el-table-column type="id" label="ID" min-width="80px" fixed="left"></el-table-column>
+                        <el-table-column type="id" prop="id" label="ID" min-width="80px" fixed="left"></el-table-column>
                         <el-table-column fixed="left" prop="name" label="姓名" min-width="100" />
                         <el-table-column fixed="left" prop="jwcode" label="精网号" min-width="110px" />
                         <el-table-column prop="market" label="所属地区" min-width="100px" />
                         <el-table-column prop="permanentBean" label="永久金豆" sortable="custom" min-width="110px" />
                         <el-table-column prop="freeBean" label="免费金豆" sortable="custom" min-width="110px" />
                         <el-table-column prop="remark" label="备注" min-width="150px" show-overflow-tooltip />
-                        <el-table-column prop="rechargeTime" sortable label="充值时间" min-width="200px">
+                        <el-table-column prop="rechargeTime" label="充值时间" min-width="200px">
                             <template #default="scope">
-                                {{ moment(scope.row.payTime).format('YYYY-MM-DD HH:mm:ss') }}
+                                {{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }}
                             </template>
                         </el-table-column>
                     </el-table>
@@ -286,4 +324,20 @@ onMounted(async function () {
     </template>
   </el-dialog> -->
 </template>
-<style></style>
+<style>
+.bean-info {
+    background-color: #eaf5ff;
+    padding: 12px 16px;
+    border-radius: 6px;
+    font-size: 16px;
+    color: #333;
+}
+
+.bean-info strong {
+    font-weight: 700;
+}
+
+.bean-info .data-text {
+    color: #007bff;
+}
+</style>