You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

587 lines
17 KiB

  1. <script setup>
  2. import { ref, onMounted, reactive, computed } from 'vue'
  3. import ElementPlus from 'element-plus'
  4. import { ElMessage, ElMessageBox } from 'element-plus'
  5. import { AiFillRead } from 'vue-icons-plus/ai'
  6. import axios from 'axios'
  7. import moment from 'moment'
  8. import API from '@/util/http'
  9. //这是获取用户信息的接口
  10. const adminData = ref({})
  11. const getAdminData = async function () {
  12. try {
  13. const result = await API({ url: '/admin/userinfo', data: {} })
  14. adminData.value = result
  15. rechargeUser.value.adminId = adminData.value.adminId
  16. console.log('请求成功', result)
  17. console.log('用户信息', adminData.value)
  18. } catch (error) {
  19. console.log('请求失败', error)
  20. }
  21. }
  22. // 变量
  23. // 充值明细表格
  24. const tableData = ref([])
  25. // 搜索===========================================
  26. // 搜索recharge
  27. const rechargeUser = ref({
  28. adminId: adminData.value.adminId
  29. })
  30. // 搜索对象
  31. const getObj = ref({
  32. pageNum: 1,
  33. pageSize: 50
  34. })
  35. //分页总条目
  36. const total = ref(100)
  37. // 搜索对象时间
  38. const getTime = ref([])
  39. // 搜索活动列表
  40. const activity = ref([])
  41. // 所有信息
  42. const allData = ref([])
  43. // 搜索地区列表
  44. const market = ref([])
  45. //时间格式化
  46. const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
  47. // 初始化 money 和 permanentGold 和 freeGold
  48. const money = ref(0)
  49. const permanentGold = ref(0)
  50. const freeGold = ref(0)
  51. // 定义响应式变量存储金币合计数
  52. const permanentGolds = ref(0)
  53. const freeGolds = ref(0)
  54. // 支付方式选项
  55. const payModel = [
  56. {
  57. value: '微信',
  58. label: '微信'
  59. },
  60. {
  61. value: '支付宝',
  62. label: '支付宝'
  63. },
  64. {
  65. value: '银联',
  66. label: '银联'
  67. },
  68. {
  69. value: '信用卡',
  70. label: '信用卡'
  71. },
  72. {
  73. value: '借记卡',
  74. label: '借记卡'
  75. },
  76. {
  77. value: '现金充值',
  78. label: '现金充值'
  79. }
  80. ]
  81. // 删除==========================================================
  82. // 删除对象
  83. const delObj = ref({})
  84. // 获取活动名称
  85. const getActivity = async function () {
  86. try {
  87. // 发送POST请求
  88. const result = await API({ url: '/general/activity', data: {} })
  89. // 将响应结果存储到响应式数据中
  90. console.log('请求成功', result)
  91. // 检查返回的数据是否为数组
  92. if (Array.isArray(result.data)) {
  93. // 将字符串数组转换为 { value, label } 格式
  94. activity.value = result.data.map(item => ({ value: item, label: item }));
  95. } else {
  96. console.error('活动数据格式错误', result)
  97. ElMessage.error('活动数据格式错误,请联系管理员')
  98. }
  99. console.log('activity', activity.value)
  100. } catch (error) {
  101. console.log('请求失败', error)
  102. // 在这里可以处理错误逻辑,比如显示错误提示等
  103. }
  104. }
  105. // 获取地区
  106. // 获取地区
  107. const getArea = async function () {
  108. try {
  109. // 发送POST请求
  110. const result = await API({ url: '/general/market', data: {} })
  111. // 将响应结果存储到响应式数据中
  112. console.log('请求成功', result)
  113. // 存储地区信息
  114. market.value = result.data
  115. console.log('地区', market.value)
  116. } catch (error) {
  117. console.log('请求失败', error)
  118. // 在这里可以处理错误逻辑,比如显示错误提示等
  119. }
  120. }
  121. //定义充值类型的加载状态
  122. const isLoadingPlatform = ref(false)
  123. // 充值类型
  124. const platform = ref([])
  125. //获取充值类型的函数
  126. const getPlatform = async () => {
  127. isLoadingPlatform.value = true;
  128. try {
  129. const result = await API({
  130. url: '/general/platform',
  131. method: 'post',
  132. data: {}// 这里添加参数
  133. })
  134. // 假设后端返回的是字符串数组,转换为 { value, label } 格式
  135. if(Array.isArray(result.data)) {
  136. platform.value = result.data.map(item => ({ value: item, label: item }));
  137. } else {
  138. console.error('充值类型格式错误',result)
  139. ElMessage.error('充值类型格式错误,请联系管理员')
  140. }
  141. } catch (error) {
  142. console.error('获取充值类型失败:', error);
  143. ElMessage.error('获取充值类型失败,请稍后重试');
  144. } finally {
  145. isLoadingPlatform.value = false
  146. }
  147. }
  148. // 搜索===========================================================================
  149. // 搜索方法
  150. const get = async function (val) {
  151. try {
  152. // 搜索参数页码赋值
  153. if (typeof val === 'number') {
  154. getObj.value.pageNum = val
  155. }
  156. // 搜索参数时间赋值
  157. if (getTime.value != null) {
  158. if (getTime.value.startTime != '' && getTime.value.endTime != '') {
  159. rechargeUser.value.startTime = formatTime(getTime.value[0])
  160. rechargeUser.value.endTime = formatTime(getTime.value[1])
  161. }
  162. } else {
  163. rechargeUser.value.startTime = ''
  164. rechargeUser.value.endTime = ''
  165. }
  166. // 搜索参数赋值
  167. rechargeUser.value.sortField = sortField.value
  168. rechargeUser.value.sortOrder = sortOrder.value
  169. console.log('搜索参数', getObj.value)
  170. // 发送POST请求
  171. const result = await API({
  172. url: '/recharge/selectBy',
  173. data: {
  174. ...getObj.value,
  175. rechargeUser: { ...rechargeUser.value }
  176. }
  177. })
  178. // 复制一份 rechargeUser.value 并移除排序字段和排序方式
  179. const detailWithoutSort = ref({
  180. market: rechargeUser.value.market,
  181. adminId: rechargeUser.value.adminId,
  182. startTime: rechargeUser.value.startTime,
  183. endTime: rechargeUser.value.endTime,
  184. jwcode: rechargeUser.value.jwcode,
  185. goodsName: rechargeUser.value.goodsName,
  186. payPlatform: rechargeUser.value.payPlatform
  187. })
  188. const resultTotalGold = await API({
  189. url: '/recharge/statsGold',
  190. data: {
  191. ...detailWithoutSort.value
  192. }
  193. })
  194. if (resultTotalGold.code === 200 && resultTotalGold.data) {
  195. const data = resultTotalGold.data
  196. console.log('获取到的金币数据:', data)
  197. permanentGolds.value = (Number(data.permanentGolds) || 0)/100
  198. freeGolds.value = (Number(data.freeGolds) || 0)/100
  199. }
  200. // 将响应结果存储到响应式数据中
  201. console.log('请求成功', result)
  202. // 存储表格数据
  203. tableData.value = result.data.list
  204. // 处理表格中的充值金额、永久金币和免费金币数据,除以 100
  205. tableData.value = tableData.value.map(item => ({
  206. ...item,
  207. // 处理永久金币
  208. permanentGold: (Number(item.permanentGold) || 0) / 100,
  209. // 处理免费金币
  210. freeGold: (Number(item.freeGold) || 0) / 100,
  211. // 处理充值金额
  212. money: (Number(item.money) || 0) / 100
  213. }))
  214. console.log('tableData', tableData.value)
  215. // 存储分页总数
  216. total.value = result.data.total
  217. console.log('total', total.value)
  218. } catch (error) {
  219. console.log('请求失败', error)
  220. // 在这里可以处理错误逻辑,比如显示错误提示等
  221. }
  222. }
  223. // 搜索
  224. const search = function () {
  225. getObj.value.pageNum = 1
  226. get()
  227. }
  228. // 重置
  229. const reset = function () {
  230. delete rechargeUser.value.jwcode
  231. delete rechargeUser.value.activity
  232. delete rechargeUser.value.payPlatform
  233. delete rechargeUser.value.market
  234. delete rechargeUser.value.startTime
  235. delete rechargeUser.value.endTime
  236. delete sortField.value
  237. delete sortOrder.value
  238. getTime.value = {}
  239. get()
  240. }
  241. // 今天
  242. const getToday = function () {
  243. const today = new Date()
  244. const startTime = new Date(
  245. today.getFullYear(),
  246. today.getMonth(),
  247. today.getDate()
  248. )
  249. const endTime = new Date(
  250. today.getFullYear(),
  251. today.getMonth(),
  252. today.getDate() + 1
  253. )
  254. getTime.value = [startTime, endTime]
  255. console.log('getTime', getTime.value)
  256. get()
  257. }
  258. const handlePageSizeChange = function (val) {
  259. getObj.value.pageSize = val
  260. get()
  261. }
  262. const handleCurrentChange = function (val) {
  263. getObj.value.pageNum = val
  264. get()
  265. }
  266. // 昨天
  267. const getYesterday = function () {
  268. const yesterday = new Date()
  269. yesterday.setDate(yesterday.getDate() - 1)
  270. const startTime = new Date(
  271. yesterday.getFullYear(),
  272. yesterday.getMonth(),
  273. yesterday.getDate()
  274. )
  275. const endTime = new Date(
  276. yesterday.getFullYear(),
  277. yesterday.getMonth(),
  278. yesterday.getDate() + 1
  279. )
  280. getTime.value = [startTime, endTime]
  281. console.log('getTime', getTime.value)
  282. get()
  283. }
  284. // 近7天
  285. const get7Days = function () {
  286. const today = new Date()
  287. const startTime = new Date(
  288. today.getFullYear(),
  289. today.getMonth(),
  290. today.getDate() - 6
  291. )
  292. const endTime = new Date(
  293. today.getFullYear(),
  294. today.getMonth(),
  295. today.getDate() + 1
  296. )
  297. getTime.value = [startTime, endTime]
  298. console.log('getTime', getTime.value)
  299. get()
  300. }
  301. // 验证跳转输入框的数字是否合法
  302. const checkNumber = function () {
  303. if (typeof parseInt(getObj.value.pageNum) === 'number') {
  304. console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
  305. if (
  306. getObj.value.pageNum > 0 &&
  307. getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
  308. ) {
  309. getObj.value.pageNum = parseInt(getObj.value.pageNum)
  310. console.log('输入的数字合法')
  311. get()
  312. } else {
  313. //提示
  314. ElMessage({
  315. type: 'error',
  316. message: '请检查输入内容'
  317. })
  318. }
  319. } else {
  320. //提示
  321. ElMessage({
  322. type: 'error',
  323. message: '数字输入有误'
  324. })
  325. }
  326. }
  327. // 挂载
  328. onMounted(async function () {
  329. await getAdminData()
  330. await get()
  331. await getActivity()
  332. await getArea()
  333. await getPlatform()
  334. })
  335. // 新增排序字段和排序方式
  336. const sortField = ref('')
  337. const sortOrder = ref('')
  338. // 处理排序事件
  339. const handleSortChange = (column) => {
  340. console.log('排序字段:', column.prop)
  341. console.log('排序方式:', column.order)
  342. if (column.prop === 'money') {
  343. sortField.value = 'money'
  344. } else if (column.prop === 'freeGold') {
  345. sortField.value = 'freeGold'
  346. } else if (column.prop === 'payTime') {
  347. sortField.value = 'payTime'
  348. } else if (column.prop === 'createTime') {
  349. sortField.value = 'createTime'
  350. } else if(column.prop === 'permanentGold'){
  351. sortField.value = 'permanentGold'
  352. }
  353. sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
  354. console.log('传递给后端的排序字段:', sortField.value)
  355. console.log('传递给后端的排序方式:', sortOrder.value)
  356. get()
  357. }
  358. </script>
  359. <template>
  360. <el-row>
  361. <el-col>
  362. <el-card style="margin-bottom: 20px;margin-top: 10px">
  363. <el-row style="margin-bottom: 10px">
  364. <el-col :span="5">
  365. <div class="head-card-element">
  366. <el-text class="mx-1" size="large">精网号</el-text>
  367. <el-input v-model="rechargeUser.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
  368. </div>
  369. </el-col>
  370. <el-col :span="6">
  371. <div class="head-card-element">
  372. <el-text class="mx-1" size="large">活动名称</el-text>
  373. <el-select v-model="rechargeUser.activity" placeholder="请选择活动名称" style="width: 180px"
  374. clearable>
  375. <el-option v-for="item in activity" :key="item.value" :label="item.label"
  376. :value="item.value" />
  377. </el-select>
  378. </div>
  379. </el-col>
  380. <el-col :span="6">
  381. <div class="head-card-element" >
  382. <el-text class="mx-1" size="large">所属地区</el-text>
  383. <el-select v-model="rechargeUser.market" placeholder="请选择所属地区" style="width: 180px" clearable>
  384. <el-option v-for="item in market" :key="item" :label="item" :value="item" />
  385. </el-select>
  386. </div>
  387. </el-col>
  388. <el-col :span="6">
  389. <div class="head-card-element">
  390. <el-text class="mx-1" size="large">充值类型</el-text>
  391. <el-select v-model="rechargeUser.payPlatform" placeholder="请选择充值方式" style="width: 180px" clearable>
  392. <el-option v-for="item in platform" :key="item.value" :label="item.label" :value="item.value" />
  393. </el-select>
  394. </div>
  395. </el-col>
  396. </el-row>
  397. <el-row>
  398. <el-col :span="21">
  399. <div class="head-card-element">
  400. <el-text class="mx-1" size="large">充值时间</el-text>
  401. <el-date-picker
  402. v-model="getTime"
  403. type="datetimerange"
  404. range-separator="至"
  405. start-placeholder="起始时间"
  406. end-placeholder="结束时间"
  407. />
  408. <el-button style="margin-left: 10px" @click="getToday()"
  409. ></el-button
  410. >
  411. <el-button @click="getYesterday()"></el-button>
  412. <el-button @click="get7Days()">近7天</el-button>
  413. <!-- </div>
  414. </el-col>
  415. <el-col :span="3">
  416. <div class="head-card-btn"> -->
  417. <el-button type="success" @click="reset()">重置</el-button>
  418. <el-button type="primary" @click="search()">查询</el-button>
  419. <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
  420. </div>
  421. </el-col>
  422. </el-row>
  423. </el-card>
  424. </el-col>
  425. </el-row>
  426. <el-row>
  427. <el-col>
  428. <el-card>
  429. <div>
  430. 充值金额{{ permanentGolds.toFixed(2) }}新币永久金币{{
  431. permanentGolds.toFixed(2)
  432. }}金币免费金币{{ freeGolds }}金币
  433. </div>
  434. <!-- 设置表格容器的高度和滚动样式 -->
  435. <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
  436. <el-table
  437. :data="tableData"
  438. style="width: 100%"
  439. height="520px"
  440. @sort-change="handleSortChange"
  441. >
  442. <el-table-column
  443. type="index"
  444. label="序号"
  445. width="80px"
  446. fixed="left"
  447. >
  448. <template #default="scope">
  449. <span>{{
  450. scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
  451. }}</span>
  452. </template>
  453. </el-table-column>
  454. <el-table-column
  455. fixed="left"
  456. prop="name"
  457. label="姓名"
  458. width="80px"
  459. />
  460. <el-table-column
  461. fixed="left"
  462. prop="jwcode"
  463. label="精网号"
  464. width="80px"
  465. />
  466. <el-table-column prop="market" label="所属地区" width="100px" />
  467. <el-table-column
  468. prop="activity"
  469. label="活动名称"
  470. width="100px"
  471. />
  472. <el-table-column prop="rateName" label="货币名称" width="110px" />
  473. <el-table-column
  474. prop="money"
  475. sortable="custom"
  476. label="充值金额"
  477. width="110px"
  478. />
  479. <el-table-column
  480. prop="permanentGold"
  481. label="永久金币"
  482. sortable="custom"
  483. width="110px"
  484. />
  485. <el-table-column
  486. prop="freeGold"
  487. label="免费金币"
  488. sortable="custom"
  489. width="110px"
  490. />
  491. <el-table-column
  492. prop="payPlatform"
  493. label="充值方式"
  494. width="100px"
  495. />
  496. <el-table-column prop="payModel" label="支付方式" width="100px" />
  497. <el-table-column
  498. prop="remark"
  499. label="备注"
  500. width="150px"
  501. show-overflow-tooltip
  502. />
  503. <el-table-column prop="adminName" label="提交人" width="100px" />
  504. <el-table-column
  505. prop="payTime"
  506. sortable
  507. label="充值时间"
  508. width="200px"
  509. >
  510. <template #default="scope">
  511. {{
  512. moment(scope.row.payTime).format('YYYY-MM-DD HH:mm:ss')
  513. }}
  514. </template>
  515. </el-table-column>
  516. </el-table>
  517. </div>
  518. <!-- 分页 -->
  519. <div class="pagination" style="margin-top: 20px">
  520. <el-pagination
  521. background
  522. :page-size="getObj.pageSize"
  523. :page-sizes="[5, 10, 20, 50, 100]"
  524. layout="total, sizes, prev, pager, next, jumper"
  525. :total="total"
  526. @size-change="handlePageSizeChange"
  527. @current-change="handleCurrentChange"
  528. ></el-pagination>
  529. </div>
  530. </el-card>
  531. </el-col>
  532. </el-row>
  533. </template>
  534. <style scoped>
  535. .pagination {
  536. display: flex;
  537. }
  538. .status {
  539. display: flex;
  540. }
  541. .head-card {
  542. display: flex;
  543. }
  544. .head-card-element {
  545. margin-right: 20px;
  546. }
  547. .head-card-btn {
  548. margin-left: auto;
  549. }
  550. </style>