42 Commits
81a041bb62
...
f5be3cb4ab
donghaolin
zry
zhaoln
38 changed files with 11951 additions and 4439 deletions
-
1gold-system/.env.development
-
1gold-system/.env.production
-
1gold-system/.env.test
-
872gold-system/package-lock.json
-
9gold-system/package.json
-
15gold-system/src/main.ts
-
14gold-system/src/router/index.js
-
12gold-system/src/store/area.js
-
62gold-system/src/util/http.js
-
44gold-system/src/util/request.js
-
661gold-system/src/views/audit/rechargeAudit.vue
-
592gold-system/src/views/audit/refundAudit.vue
-
47gold-system/src/views/consume/addConsume.vue
-
389gold-system/src/views/consume/allConsume.vue
-
210gold-system/src/views/goldBeen/addGoldenBeen.vue
-
234gold-system/src/views/goldBeen/goldenBeenBalance.vue
-
307gold-system/src/views/goldBeen/goldenBeenConsum.vue
-
486gold-system/src/views/goldBeen/goldenBeenDetail.vue
-
494gold-system/src/views/goldBeen/onLineDetail.vue
-
178gold-system/src/views/index.vue
-
87gold-system/src/views/login.vue
-
356gold-system/src/views/managerecharge/activity.vue
-
507gold-system/src/views/managerecharge/rate.vue
-
451gold-system/src/views/permissions/index.vue
-
910gold-system/src/views/recharge/addRecharge.vue
-
550gold-system/src/views/recharge/adminRecharge.vue
-
517gold-system/src/views/recharge/allRecharge.vue
-
311gold-system/src/views/refund/addRefund.vue
-
541gold-system/src/views/refund/allRefund.vue
-
530gold-system/src/views/usergold/index.vue
-
356gold-system/src/views/usergoldInfo/index.vue
-
1369gold-system/src/views/workspace/index.vue
-
197gold-system/src/views/z.vue
-
4949gold-system/stats.html
-
19gold-system/tsconfig.app.json
-
14gold-system/tsconfig.node.json
-
1gold-system/tsconfig.tsbuildinfo
-
96gold-system/vite.config.ts
@ -0,0 +1 @@ |
|||
VITE_API_BASE='http://54.251.137.151:10704/' |
|||
@ -0,0 +1 @@ |
|||
VITE_API_BASE='http://54.251.137.151:10702/' |
|||
@ -0,0 +1 @@ |
|||
VITE_API_BASE='http://54.251.137.151:10704/' |
|||
872
gold-system/package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,12 @@ |
|||
import { defineStore } from 'pinia' |
|||
|
|||
export const useAreaStore = defineStore('area', { |
|||
state: () => ({ |
|||
currentArea: '全部', |
|||
}), |
|||
actions: { |
|||
updateArea(newVal) { |
|||
this.currentArea = newVal |
|||
}, |
|||
}, |
|||
}) |
|||
@ -1,48 +1,26 @@ |
|||
import axios from 'axios'; |
|||
import request from './request' |
|||
|
|||
export default function(options) { |
|||
const { method = 'post', url, data = {}, params = {}, headers = {} } = options |
|||
|
|||
export default function (options) { |
|||
//配置每次发送请求都从localStorage中获取名字叫token的数据,
|
|||
//添加到请求头部的Authorization属性中
|
|||
const token = localStorage.getItem('token'); |
|||
//Object.assign用于合并对象的数据
|
|||
|
|||
options.data.token = token; |
|||
// options.headers = Object.assign(
|
|||
// { token: token },
|
|||
// options.headers || {}
|
|||
// );
|
|||
|
|||
//axios() 返回一个promise对象，用于异步请求
|
|||
//options是一个对象，其中包含了许多用于配置请求的参数，
|
|||
//例如请求的url、请求方法（GET、POST等）、请求头等
|
|||
return axios(options) |
|||
return request({ |
|||
method, |
|||
url, |
|||
data, |
|||
params, |
|||
headers |
|||
}) |
|||
.then(({ status, data, statusText }) => { |
|||
//该函数在请求成功并返回数据时被调用
|
|||
//status：HTTP状态码，例如200表示请求成功。
|
|||
//data：服务器返回的数据。
|
|||
// statusText：HTTP状态文本，例如"OK"表示请求成功。
|
|||
// console.log(data);
|
|||
if (status == 200) { |
|||
return data; |
|||
if (status === 200) { |
|||
return data |
|||
} else { |
|||
throw new e(statusText); |
|||
throw new Error(statusText) |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
if (error?.needsLogin) { |
|||
return { needsLogin: true } |
|||
} |
|||
return Promise.reject(error) |
|||
}) |
|||
.catch(e=>{ |
|||
// 检查是否是因为token过期导致的401错误
|
|||
if (e.response && e.response.status === 401) { |
|||
// 获取机器码
|
|||
const machineId = localStorage.getItem('machineId'); |
|||
// 清除localStorage中的token
|
|||
localStorage.removeItem('token'); |
|||
// // 执行重新登录的逻辑，例如跳转到登录页面
|
|||
router.push("/login?machineId=" + machineId); |
|||
// 可以在这里返回一个特定的值或者对象，以便调用者知道需要重新登录
|
|||
return { needsLogin: true }; |
|||
} else { |
|||
// 其他类型的错误，直接抛出
|
|||
return Promise.reject(e); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
import axios from 'axios' |
|||
const service = axios.create({ |
|||
baseURL: import.meta.env.VITE_API_BASE, |
|||
timeout: 10000, |
|||
headers: { |
|||
'Content-Type': 'application/json' |
|||
}, |
|||
// 设置默认请求方法为 POST
|
|||
}) |
|||
|
|||
// 请求拦截器
|
|||
service.interceptors.request.use(config => { |
|||
const token = localStorage.getItem('token') |
|||
if (token) { |
|||
if (config.data) { |
|||
config.data.token = token; |
|||
} else { |
|||
config.data = { token }; |
|||
} |
|||
// config.headers.Authorization = `${token}`
|
|||
} |
|||
return config |
|||
}, error => { |
|||
return Promise.reject(error) |
|||
}) |
|||
|
|||
// 响应拦截器
|
|||
service.interceptors.response.use( |
|||
response => { |
|||
return response |
|||
}, |
|||
error => { |
|||
// const { response } = error
|
|||
// if (response && response.status === 401) {
|
|||
// const machineId = localStorage.getItem('machineId')
|
|||
// localStorage.removeItem('token')
|
|||
// window.location.href = `/login?machineId=${machineId}`
|
|||
// return Promise.resolve({ needsLogin: true })
|
|||
// }
|
|||
return Promise.reject(error) |
|||
} |
|||
) |
|||
|
|||
export default service |
|||
@ -0,0 +1,210 @@ |
|||
<template> |
|||
<div class="add-goldenbeen"> |
|||
<div class="head-top">新增充值</div> |
|||
<div class="add-box"> |
|||
<el-form |
|||
:model="beenObj" |
|||
ref="ruleFormRef" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
class="add-form" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input v-model="beenObj.jwcode" style="width: 220px" /> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(beenObj.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="type" label="充值类型"> |
|||
<el-radio-group v-model="beenObj.type"> |
|||
<el-radio :value="0">增加</el-radio> |
|||
<el-radio :value="1">减少</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<div style="display: flex"> |
|||
<el-form-item prop="payBeean" label="付费金豆"> |
|||
<el-input-number |
|||
v-model="beenObj.payBeean" |
|||
:controls="false" |
|||
:min="0" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="freeBeean" label="免费金豆"> |
|||
<el-input-number |
|||
v-model="beenObj.freeBeean" |
|||
:controls="false" |
|||
:min="0" |
|||
/> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="beenObj.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="submitter" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="beenObj.submitter" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> --> |
|||
<el-form-item> |
|||
<div class="btn-group"> |
|||
<el-button @click="resetData(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="addBean(ruleFormRef)"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 客户信息栏 --> |
|||
<el-card> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<div class="custom-box"> |
|||
<el-text>姓名:{{ user.nickname }}</el-text> |
|||
<el-text>当前付费金豆:{{ user.jinbiBuy }}</el-text> |
|||
<el-text>精网号:{{ user.jwcode }}</el-text> |
|||
<el-text>当前免费金豆:{{ user.jinbiFree }}</el-text> |
|||
<!-- <el-text>负责客服:</el-text> --> |
|||
<el-text>消费次数:{{ user.number }}</el-text> |
|||
<el-text>所属门店:{{ user.masterShop }}</el-text> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue' |
|||
import API from '@/util/http' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
type userType = { |
|||
[key: string]: number | string |
|||
} |
|||
const ruleFormRef = ref<FormInstance>() |
|||
const beenObj = ref({ |
|||
jwcode: '', |
|||
remark: '', |
|||
type: 0, //0是加1是减 |
|||
payBeean: 0, |
|||
freeBeean: 0 |
|||
}) |
|||
let user: userType = reactive({}) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
remark: [{ required: true, message: '请输入备注', trigger: 'blur' }], |
|||
// submitter: [{ required: true, message: '请输入提交人', trigger: 'blur' }], |
|||
type: [{ required: true, message: '请选择充值类型', trigger: 'change' }], |
|||
payBeean: [{ required: true, message: '请输入付费金豆', trigger: 'blur' }], |
|||
freeBeean: [{ required: true, message: '请输入免费金豆', trigger: 'blur' }] |
|||
}) |
|||
const addBean = (formEl) => { |
|||
// 提交表单 |
|||
try { |
|||
formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
// 处理表单提交逻辑 |
|||
const result = await API({ |
|||
url: '/dou/add', |
|||
data: { |
|||
jwcode: beenObj.value.jwcode, |
|||
content: beenObj.value.remark, |
|||
moneyFree: Number(beenObj.value.freeBeean), |
|||
moneyBuy: Number(beenObj.value.payBeean), |
|||
time: Math.floor(Date.now() / 1000), |
|||
data: beenObj.value.type |
|||
} |
|||
}) |
|||
if (result.code === 200) { |
|||
ElMessage.success('充值成功') |
|||
beenObj.value.jwcode = '' |
|||
beenObj.value.remark = '' |
|||
beenObj.value.payBeean = 0 |
|||
beenObj.value.freeBeean = 0 |
|||
} else if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
return |
|||
} |
|||
console.log('请求成功', result) |
|||
} else { |
|||
ElMessage.error('表单验证失败') |
|||
} |
|||
}) |
|||
} catch (error) { |
|||
ElMessage.error('提交失败') |
|||
} |
|||
} |
|||
const resetData = (formEl) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
const getUser = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/search', |
|||
data: { |
|||
jwcode: jwcode |
|||
} |
|||
}) |
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
} else { |
|||
if (!result.data.jwcode) { |
|||
ElMessage.error('精网号不存在') |
|||
return |
|||
} |
|||
Object.assign(user, result.data) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败，请检查精网号是否正确') |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.add-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
column-gap: 50px; |
|||
} |
|||
.btn-group { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
width: 100%; |
|||
} |
|||
.custom-box { |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
row-gap: 20px; |
|||
box-sizing: border-box; |
|||
.el-text { |
|||
width: 200px; |
|||
} |
|||
} |
|||
.el-card { |
|||
width: 500px; |
|||
} |
|||
.head-top { |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="area" label="地区"> |
|||
<el-select |
|||
v-model="detailY.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaArray" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" size="small" @click="search()" |
|||
>查询</el-button |
|||
> |
|||
<el-button type="primary" size="small" @click="reset(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<p> |
|||
现有金豆: 付费金豆:{{ getObj.jinbiBuy }} 免费金豆:{{ |
|||
getObj.jinbiFree |
|||
}} 历史消费:{{ getObj.jinbiCostTotal }} |
|||
</p> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
:default-sort="{ prop: 'jinbiCostTotal', order: 'descending' }" |
|||
height="584px" |
|||
@sort-change="handleSortChange" |
|||
> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="所属地区" width="120" /> |
|||
|
|||
<el-table-column prop="jinbi" sortable label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiBuy" sortable label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiFree" sortable label="免费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
width="120" |
|||
prop="jinbiCostTotal" |
|||
label="历史消费" |
|||
></el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
prop="jinbiCostbeenTotal" |
|||
width="160" |
|||
label="历史付费金豆" |
|||
></el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
prop="jinbifreebeenTotal" |
|||
width="160" |
|||
label="历史免费金豆" |
|||
></el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, reactive } from 'vue' |
|||
|
|||
import type { FormInstance } from 'element-plus' |
|||
|
|||
import API from '@/util/http' |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
//搜索表单数据 |
|||
const detailY = reactive({ jwcode: '', area: '' }) |
|||
const ruleFormRef = ref<FormInstance>() |
|||
let areaArray = ref<string[]>([]) |
|||
let getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
jinbiBuy: 0, |
|||
jinbiCostTotal: 0, |
|||
jinbiFree: 0 |
|||
}) |
|||
const search = function () { |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
//初始化 |
|||
const getInit = async function ({ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getYve', |
|||
data: { |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize, |
|||
yve: { |
|||
jwcode: detailY.jwcode, |
|||
ipAddress: detailY.area, |
|||
sortField: sortField, |
|||
sortOrder: sortOrder |
|||
} |
|||
} |
|||
}) |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const handleSortChange = (column) => { |
|||
const { prop, order } = column |
|||
if (order === 'ascending') { |
|||
getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
} else if (order === 'descending') { |
|||
getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
} |
|||
} |
|||
|
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl: FormInstance | undefined) { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
|
|||
const getArea = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getIp' |
|||
}) |
|||
console.log('获取地区', result.data) |
|||
if (result.code == 200) { |
|||
areaArray.value = result.data |
|||
} |
|||
} |
|||
const getCount = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getYveTotal' |
|||
}) |
|||
if (result.code == 200) { |
|||
const { jinbiBuy, jinbiFree, jinbiCostTotal } = result.data |
|||
getObj.value.jinbiBuy = jinbiBuy |
|||
getObj.value.jinbiFree = jinbiFree |
|||
getObj.value.jinbiCostTotal = jinbiCostTotal |
|||
} |
|||
} |
|||
getArea() |
|||
getCount() |
|||
getInit({}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,307 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="ipAddress" label="地区"> |
|||
<el-select |
|||
v-model="detailY.ipAddress" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="sourceType" label="消费类型"> |
|||
<el-select |
|||
v-model="detailY.sourceType" |
|||
placeholder="请选择消费类型" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in consumList" |
|||
:key="item.value" |
|||
:label="item.text" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="channel" label="频道"> |
|||
<el-select |
|||
v-model="detailY.channel" |
|||
placeholder="请选择频道" |
|||
style="width: 240px" |
|||
clearable |
|||
filterable |
|||
> |
|||
<el-option |
|||
v-for="item in channelList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item prop="sourceName" label="直播间"> |
|||
<el-input |
|||
v-model="detailY.sourceName" |
|||
placeholder="请输入直播间" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="createTime" label="消费时间"> |
|||
<el-date-picker |
|||
v-model="detailY.createTime" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
style="width: 240px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<p>合计数:实际用户金豆数:{{ beenCount }}</p> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="地区" width="120" /> |
|||
<el-table-column prop="sourceType" label="消费类型" width="120"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
consumList.find((item) => item.value === scope.row.sourceType)?.text |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiCostTotal" label="金豆价格" width="120"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="chanel" label="频道" width="120"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="room" label="直播间" width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
label="消费时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column fixed="right" label="操作" min-width="120"> |
|||
<template #default> |
|||
<el-tooltip class="box-item" effect="light" placement="top-start"> |
|||
<template #default> |
|||
<el-button link type="primary" size="small"> 返还金豆 </el-button> |
|||
</template> |
|||
<template #content> |
|||
<div>是否申请返还该条消费</div> |
|||
<el-button size="small">确定 </el-button> |
|||
<el-button size="small">取消 </el-button> |
|||
</template> |
|||
</el-tooltip> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const areaList = ref<string[]>([]) |
|||
const beenCount = ref(0) |
|||
const consumList = ref<any>([ |
|||
{ value: 1, text: '发礼物' }, |
|||
{ value: 2, text: '发红包' }, |
|||
{ value: 3, text: '发福袋' }, |
|||
{ value: 4, text: '付费直播' }, |
|||
{ value: 5, text: '加⼊粉丝团' }, |
|||
{ value: 6, text: '发弹幕' }, |
|||
{ value: 7, text: '铁粉单次付费' }, |
|||
{ value: 8, text: '铁粉连续包⽉' }, |
|||
{ value: 9, text: '打赏⽂章' }, |
|||
{ value: 10, text: '打赏视频' }, |
|||
{ value: 11, text: '付费购买' } |
|||
]) |
|||
const channelList = ref<string[]>([]) |
|||
const liveroomList = ref<string[]>([]) |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
ipAddress: '', |
|||
createTime: '', |
|||
// channel: '', //频道 |
|||
sourceName: '', //直播间 |
|||
sourceType: '' //消费类型 |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//初始化 |
|||
const getInit = async function () { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const [startTime, endTime] = detailY.value.createTime |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getSpend', |
|||
method: 'post', |
|||
data: { |
|||
...getObj.value, |
|||
spend: { |
|||
jwcode: detailY.value.jwcode, //精网号 |
|||
ipAddress: detailY.value.ipAddress, //地区 |
|||
sourceName: detailY.value.sourceName, //直播间 |
|||
sourceType: detailY.value.sourceType, //消费类型 |
|||
startTime, //开始时间 |
|||
endTime //结束时间 |
|||
} |
|||
} |
|||
}) |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
getInit() |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit() |
|||
} |
|||
|
|||
//合计数接口 |
|||
const getCount = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getSpendTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
ipAddress: detailY.value.ipAddress, |
|||
sourceName: detailY.value.sourceName, |
|||
sourceType: detailY.value.sourceType, |
|||
startTime: detailY.value.createTime[0], |
|||
endTime: detailY.value.createTime[1] |
|||
} |
|||
}) |
|||
if (result.code == 200) { |
|||
//const { jinbiBuy, jinbiFree, jinbiCostTotal } = result.data |
|||
console.log('合计数', result.data) |
|||
beenCount.value = result.data || 0 |
|||
} |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 挂载 |
|||
getInit() |
|||
getCount() |
|||
getArea() |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,486 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="deptName" label="地区"> |
|||
<el-select |
|||
v-model="detailY.deptName" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderNo" label="订单号"> |
|||
<el-input |
|||
v-model="detailY.orderNo" |
|||
placeholder="请输入订单号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="type" label="充值类型"> |
|||
<el-input |
|||
v-model="detailY.type" |
|||
placeholder="请输入充值类型" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="payStyle" label="充值平台"> |
|||
<el-select |
|||
v-model="detailY.payStyle" |
|||
placeholder="请选择充值平台" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platformList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item prop="createTime" label="充值时间"> |
|||
<el-date-picker |
|||
v-model="detailY.createTime" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:unlinkPanels="true" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="exportExcel">导出excel</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<el-card |
|||
>金豆总数：充值金豆总数：{{ countValue }}合计金额数:{{ |
|||
priceValue |
|||
}}</el-card |
|||
> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="地区" width="120" /> |
|||
<el-table-column prop="orderNo" label="订单号" width="120" /> |
|||
<el-table-column prop="money" label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyBuy" label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyFree" label="免费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="price" label="金额"></el-table-column> |
|||
<el-table-column prop="type" label="类型"></el-table-column> |
|||
<!-- <el-table-column prop="payStyle" label="充值平台" width="140"> |
|||
</el-table-column> |
|||
<el-table-column prop="notes" label="备注" width="210"></el-table-column> --> |
|||
<el-table-column |
|||
prop="time" |
|||
label="充值时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
!!scope.row.time |
|||
? moment.unix(scope.row.time).format('YYYY-MM-DD HH:mm:ss') |
|||
: '-' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
<!-- 这是导出excel的弹窗 --> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="请选择导出条件" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
@close=" |
|||
() => { |
|||
dialogVisible = false |
|||
isExport = false |
|||
} |
|||
" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="excelData" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="activityName" label="精网号:"> |
|||
<el-input |
|||
v-model="excelData.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="所属地区：" |
|||
><el-select |
|||
v-model="excelData.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="更新时间："> |
|||
<el-radio-group v-model="excelData.timegap"> |
|||
<el-radio value="1">今天</el-radio> |
|||
<el-radio value="3">近三天</el-radio> |
|||
<el-radio value="7">近一周</el-radio> |
|||
<el-radio value="30">近一个月</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="exportConfirm()" |
|||
>确定</el-button |
|||
> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue' |
|||
import { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import { utils, write } from 'xlsx' |
|||
import { saveAs } from 'file-saver' |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const dialogVisible = ref(false) |
|||
const excelData = reactive({ |
|||
jwcode: '', |
|||
area: '', |
|||
timegap: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
}) |
|||
const priceValue = ref(0) |
|||
const countValue = ref(0) |
|||
const areaList = ref<string[]>([]) |
|||
const isExport = ref<boolean>(false) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
area: [{ required: true, message: '请选择所属地区', trigger: 'change' }] |
|||
}) |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
const platformList = ref<string[]>([ |
|||
// 'stripe', |
|||
// 'ios', |
|||
// 'FirstData', |
|||
// 'paymentasia', |
|||
// 'system', |
|||
// '金币系统' |
|||
]) |
|||
const typeList = ref<string[]>([ |
|||
'金币换金豆', |
|||
'金币换免费金豆', |
|||
'赠送金豆', |
|||
'购买金豆', |
|||
'客服操作' |
|||
]) |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
deptName: '', |
|||
orderNo: '', |
|||
payStyle: '', |
|||
type: '', |
|||
createTime: '' |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
const exportExcel = function () { |
|||
dialogVisible.value = true |
|||
isExport.value = true |
|||
} |
|||
const exportConfirm = function () { |
|||
if (excelData.timegap == '1') { |
|||
excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '3') { |
|||
excelData.startTime = moment() |
|||
.subtract(3, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '7') { |
|||
excelData.startTime = moment() |
|||
.subtract(7, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '30') { |
|||
excelData.startTime = moment() |
|||
.subtract(30, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} |
|||
getInit( |
|||
{ |
|||
sortField: '', |
|||
sortOrder: '' |
|||
}, |
|||
(data) => { |
|||
console.log('导出数据', data) |
|||
//导出的数据将字段映射 |
|||
data = data.map((item) => { |
|||
return { |
|||
姓名: item.name, |
|||
精网号: item.jwcode, |
|||
地区: item.deptName, |
|||
订单号: item.orderNo, |
|||
充值平台: item.payStyle, |
|||
金豆数量: item.count, |
|||
充值时间: moment(item.successTime).format('YYYY-MM-DD'), |
|||
金额: item.price |
|||
} |
|||
}) |
|||
if (data.length == 0) { |
|||
ElMessage.error('没有数据') |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
return |
|||
} |
|||
console.log('导出数据', data) |
|||
excelExport(data) |
|||
} |
|||
) |
|||
} |
|||
//数据导出excel |
|||
const excelExport = async function (data) { |
|||
const worksheet = utils.json_to_sheet(data) |
|||
const workbook = utils.book_new() |
|||
utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
saveAs( |
|||
new Blob([wbout], { type: 'application/octet-stream' }), |
|||
'数据导出.xlsx' |
|||
) |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
} |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//初始化 |
|||
const getInit = async function ( |
|||
{ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}, |
|||
callback?: Function |
|||
) { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const [startTime, endTime] = detailY.value.createTime |
|||
console.log(startTime, endTime) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: isExport.value ? excelData.jwcode : detailY.value.jwcode, |
|||
deptName: isExport.value ? excelData.area : detailY.value.deptName, |
|||
startTime: isExport.value ? excelData.startTime : startTime || '', |
|||
endTime: isExport.value ? excelData.endTime : endTime || '', |
|||
payStyle: isExport.value ? '' : detailY.value.payStyle, |
|||
type: isExport.value ? '' : detailY.value.type, |
|||
orderNo: isExport.value ? '' : detailY.value.orderNo, |
|||
sortField, |
|||
sortOrder |
|||
}, |
|||
pageNum: isExport.value ? '' : getObj.value.pageNum, |
|||
pageSize: isExport.value ? '' : getObj.value.pageSize |
|||
} |
|||
}) |
|||
|
|||
if (isExport.value) { |
|||
!!callback && callback(result.data) |
|||
} else { |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// const handleSortChange = (column) => { |
|||
// const { prop, order } = column |
|||
// if (order === 'ascending') { |
|||
// getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
// } else if (order === 'descending') { |
|||
// getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
// } |
|||
// } |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getPayIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取支付方式接口 |
|||
const getPayType = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
// typeList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取金豆数接口 |
|||
const getCount = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
//deptName: detailY.value.deptName, |
|||
startTime: detailY.value.createTime[0], |
|||
endTime: detailY.value.createTime[1], |
|||
orderNo: detailY.value.orderNo, |
|||
type: detailY.value.type |
|||
// payStyle: detailY.value.payStyle |
|||
} |
|||
}) |
|||
if (!!result.data) { |
|||
const { price, count } = result.data |
|||
console.log('金豆总数', price, count) |
|||
priceValue.value = price |
|||
countValue.value = count |
|||
} else { |
|||
priceValue.value = 0 |
|||
countValue.value = 0 |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
getInit({}) |
|||
getArea() |
|||
getPayType() |
|||
getCount() |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,494 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="deptName" label="地区"> |
|||
<el-select |
|||
v-model="detailY.deptName" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderNo" label="订单号"> |
|||
<el-input |
|||
v-model="detailY.orderNo" |
|||
placeholder="请输入订单号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="type" label="充值类型"> |
|||
<el-input |
|||
v-model="detailY.type" |
|||
placeholder="请输入充值类型" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> --> |
|||
<el-form-item prop="payStyle" label="充值平台"> |
|||
<el-select |
|||
v-model="detailY.payStyle" |
|||
placeholder="请选择充值平台" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platformList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="createTime" label="充值时间"> |
|||
<el-date-picker |
|||
v-model="detailY.createTime" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:unlinkPanels="true" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="exportExcel">导出excel</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<p>金豆总数：充值金豆总数：{{ countValue }}合计金额数:{{ priceValue }}</p> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="name" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="deptName" label="地区" width="120" /> |
|||
<el-table-column prop="orderNo" label="订单号" width="120" /> |
|||
<el-table-column prop="count" label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="moneyBuy" label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyFree" label="免费金豆" width="120"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="price" label="金额"></el-table-column> |
|||
<!-- <el-table-column prop="type" label="类型"></el-table-column> --> |
|||
<el-table-column prop="payStyle" label="充值平台" width="140"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="notes" label="备注" width="210"></el-table-column> --> |
|||
<el-table-column |
|||
prop="successTime" |
|||
label="充值时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
!!scope.row.successTime |
|||
? moment.unix(scope.row.time).format('YYYY-MM-DD HH:mm:ss') |
|||
: '-' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
<!-- 这是导出excel的弹窗 --> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="请选择导出条件" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
@close=" |
|||
() => { |
|||
dialogVisible = false |
|||
isExport = false |
|||
} |
|||
" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="excelData" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="activityName" label="精网号:"> |
|||
<el-input |
|||
v-model="excelData.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="所属地区：" |
|||
><el-select |
|||
v-model="excelData.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="更新时间："> |
|||
<el-radio-group v-model="excelData.timegap"> |
|||
<el-radio value="1">今天</el-radio> |
|||
<el-radio value="3">近三天</el-radio> |
|||
<el-radio value="7">近一周</el-radio> |
|||
<el-radio value="30">近一个月</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="exportConfirm()" |
|||
>确定</el-button |
|||
> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue' |
|||
import { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import { utils, write } from 'xlsx' |
|||
import { saveAs } from 'file-saver' |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const dialogVisible = ref(false) |
|||
const excelData = reactive({ |
|||
jwcode: '', |
|||
area: '', |
|||
timegap: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
}) |
|||
const priceValue = ref(0) |
|||
const countValue = ref(0) |
|||
const areaList = ref<string[]>([]) |
|||
const isExport = ref<boolean>(false) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
area: [{ required: true, message: '请选择所属地区', trigger: 'change' }] |
|||
}) |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
const platformList = ref<string[]>([ |
|||
// 'stripe', |
|||
// 'ios', |
|||
// 'FirstData', |
|||
// 'paymentasia', |
|||
// 'system', |
|||
// '金币系统' |
|||
]) |
|||
const typeList = ref<string[]>([ |
|||
'金币换金豆', |
|||
'金币换免费金豆', |
|||
'赠送金豆', |
|||
'购买金豆', |
|||
'客服操作' |
|||
]) |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
deptName: '', |
|||
orderNo: '', |
|||
payStyle: '', |
|||
type: '', |
|||
createTime: '' |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
const exportExcel = function () { |
|||
dialogVisible.value = true |
|||
isExport.value = true |
|||
} |
|||
const exportConfirm = function () { |
|||
if (excelData.timegap == '1') { |
|||
excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '3') { |
|||
excelData.startTime = moment() |
|||
.subtract(3, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '7') { |
|||
excelData.startTime = moment() |
|||
.subtract(7, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '30') { |
|||
excelData.startTime = moment() |
|||
.subtract(30, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} |
|||
getInit( |
|||
{ |
|||
sortField: '', |
|||
sortOrder: '' |
|||
}, |
|||
(data) => { |
|||
console.log('导出数据', data) |
|||
//导出的数据将字段映射 |
|||
data = data.map((item) => { |
|||
return { |
|||
姓名: item.name, |
|||
精网号: item.jwcode, |
|||
地区: item.deptName, |
|||
订单号: item.orderNo, |
|||
充值平台: item.payStyle, |
|||
金豆数量: item.count, |
|||
充值时间: moment(item.successTime).format('YYYY-MM-DD'), |
|||
金额: item.price |
|||
} |
|||
}) |
|||
if (data.length == 0) { |
|||
ElMessage.error('没有数据') |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
return |
|||
} |
|||
console.log('导出数据', data) |
|||
excelExport(data) |
|||
} |
|||
) |
|||
} |
|||
//数据导出excel |
|||
const excelExport = async function (data) { |
|||
const worksheet = utils.json_to_sheet(data) |
|||
const workbook = utils.book_new() |
|||
utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
saveAs( |
|||
new Blob([wbout], { type: 'application/octet-stream' }), |
|||
'数据导出.xlsx' |
|||
) |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
} |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//初始化 |
|||
const getInit = async function ( |
|||
{ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}, |
|||
callback?: Function |
|||
) { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const [startTime, endTime] = detailY.value.createTime |
|||
console.log(startTime, endTime) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/SearchPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: isExport.value ? excelData.jwcode : detailY.value.jwcode, |
|||
deptName: isExport.value ? excelData.area : detailY.value.deptName, |
|||
startTime: isExport.value ? excelData.startTime : startTime || '', |
|||
endTime: isExport.value ? excelData.endTime : endTime || '', |
|||
payStyle: isExport.value ? '' : detailY.value.payStyle, |
|||
// type: isExport.value ? '' : detailY.value.type, |
|||
orderNo: isExport.value ? '' : detailY.value.orderNo, |
|||
sortField, |
|||
sortOrder |
|||
}, |
|||
pageNum: isExport.value ? '' : getObj.value.pageNum, |
|||
pageSize: isExport.value ? '' : getObj.value.pageSize |
|||
} |
|||
}) |
|||
|
|||
if (isExport.value) { |
|||
!!callback && callback(result.data) |
|||
} else { |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// const handleSortChange = (column) => { |
|||
// const { prop, order } = column |
|||
// if (order === 'ascending') { |
|||
// getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
// } else if (order === 'descending') { |
|||
// getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
// } |
|||
// } |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
//充值平台接口 |
|||
const getPayPlatform = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/SearchStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/SearchPayIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取支付方式接口 |
|||
const getPayType = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
// typeList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取金豆数接口 |
|||
const getCount = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getRechargeTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.createTime[0], |
|||
endTime: detailY.value.createTime[1], |
|||
orderNo: detailY.value.orderNo, |
|||
payStyle: detailY.value.payStyle |
|||
} |
|||
}) |
|||
if (!!result.data) { |
|||
console.log('合计数', result.data) |
|||
const { priceTotal, countTotal } = result.data |
|||
console.log('金豆总数', priceTotal, countTotal) |
|||
priceValue.value = priceTotal |
|||
countValue.value = countTotal |
|||
} else { |
|||
priceValue.value = 0 |
|||
countValue.value = 0 |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
getInit({}) |
|||
getArea() |
|||
getPayType() |
|||
getCount() |
|||
getPayPlatform() |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
910
gold-system/src/views/recharge/addRecharge.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1369
gold-system/src/views/workspace/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,125 +1,140 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed, nextTick } from "vue"; |
|||
import { ref, onMounted, reactive, computed, nextTick } from 'vue' |
|||
|
|||
// 变量 |
|||
const allData = ref([]); |
|||
const tableData = ref([]); |
|||
const elTableHeight = ref(''); |
|||
const theadHeight = ref(''); |
|||
const contentHeight = ref(0); |
|||
const showRowCount = ref(0); |
|||
const falseBox = ref(null); |
|||
const scollBoxHeight = ref(0); |
|||
const scrollTopRowCount = ref(0); |
|||
const allData = ref([]) |
|||
const tableData = ref([]) |
|||
const elTableHeight = ref('') |
|||
const theadHeight = ref('') |
|||
const contentHeight = ref(0) |
|||
const showRowCount = ref(0) |
|||
const falseBox = ref(null) |
|||
const scollBoxHeight = ref(0) |
|||
const scrollTopRowCount = ref(0) |
|||
|
|||
// 方法 |
|||
onMounted(async function () { |
|||
allData.value = []; |
|||
for (let i = 0; i < 10000; i++) { |
|||
allData.value.push({ |
|||
name: '张三' + i, |
|||
age: 20 + i, |
|||
address: '北京市海淀区' + i, |
|||
salary: 50000 + i, |
|||
date: '2022-01-01' |
|||
}) |
|||
} |
|||
scollBoxHeight.value = 45 * allData.value.length + 45; //多加一行，要不然滚动到底差一行 |
|||
nextTick(() => { |
|||
elTableHeight.value = document.querySelector('.table-box .el-table').offsetHeight; |
|||
theadHeight.value = document.querySelector('.table-box .el-table__header-wrapper').offsetHeight; |
|||
console.log("elTableHeight", elTableHeight.value); |
|||
console.log("theadHeight", theadHeight.value); |
|||
contentHeight.value = elTableHeight.value - theadHeight.value; |
|||
console.log("contentHeight", contentHeight.value); |
|||
showRowCount.value = Math.floor(contentHeight.value / 45); |
|||
console.log("showRowCount", showRowCount.value); |
|||
// 获取默认显示的前 <showRowCount> 条 |
|||
tableData.value = JSON.parse(JSON.stringify(allData.value)).splice(0, showRowCount.value); |
|||
allData.value = [] |
|||
for (let i = 0; i < 10000; i++) { |
|||
allData.value.push({ |
|||
name: '张三' + i, |
|||
age: 20 + i, |
|||
address: '北京市海淀区' + i, |
|||
salary: 50000 + i, |
|||
date: '2022-01-01' |
|||
}) |
|||
falseBox.value = document.querySelector('.false-box'); |
|||
falseBox.value.addEventListener('scroll', function (e) { |
|||
scrollTopRowCount.value = Math.ceil(e.target.scrollTop / 45); |
|||
// 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条 |
|||
tableData.value = JSON.parse(JSON.stringify(allData.value)).splice(scrollTopRowCount.value, showRowCount.value); |
|||
}); |
|||
} |
|||
scollBoxHeight.value = 45 * allData.value.length + 45 //多加一行，要不然滚动到底差一行 |
|||
nextTick(() => { |
|||
elTableHeight.value = document.querySelector( |
|||
'.table-box .el-table' |
|||
).offsetHeight |
|||
theadHeight.value = document.querySelector( |
|||
'.table-box .el-table__header-wrapper' |
|||
).offsetHeight |
|||
console.log('elTableHeight', elTableHeight.value) |
|||
console.log('theadHeight', theadHeight.value) |
|||
contentHeight.value = elTableHeight.value - theadHeight.value |
|||
console.log('contentHeight', contentHeight.value) |
|||
showRowCount.value = Math.floor(contentHeight.value / 45) |
|||
console.log('showRowCount', showRowCount.value) |
|||
// 获取默认显示的前 <showRowCount> 条 |
|||
tableData.value = JSON.parse(JSON.stringify(allData.value)).splice( |
|||
0, |
|||
showRowCount.value |
|||
) |
|||
}) |
|||
falseBox.value = document.querySelector('.false-box') |
|||
falseBox.value.addEventListener('scroll', function (e) { |
|||
scrollTopRowCount.value = Math.ceil(e.target.scrollTop / 45) |
|||
// 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条 |
|||
tableData.value = JSON.parse(JSON.stringify(allData.value)).splice( |
|||
scrollTopRowCount.value, |
|||
showRowCount.value |
|||
) |
|||
}) |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div class="box" style="width: 1000px; height: 500px; overflow: hidden; position: relative;"> |
|||
<!-- false-box这是一个用来显示滚动条的方法 --> |
|||
<div class="false-box" |
|||
style="width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; overflow: auto;"> |
|||
<div class="scroll-box" :style="{ 'height': scollBoxHeight + 'px' }"> |
|||
<!-- scroll-box是用来撑起盒子的方法 --> |
|||
</div> |
|||
</div> |
|||
<div class="table-box"> |
|||
<el-table class="el-table" :data="allData" style="width: 100%"> |
|||
<el-table-column prop="name" label="姓名" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="age" label="年龄" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" label="地址"> |
|||
</el-table-column> |
|||
<el-table-column prop="salary" label="薪资" width="180"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="date" label="日期" width="180"> |
|||
</el-table-column> |
|||
|
|||
|
|||
</el-table> |
|||
</div> |
|||
<div |
|||
class="box" |
|||
style="width: 1000px; height: 500px; overflow: hidden; position: relative" |
|||
> |
|||
<!-- false-box这是一个用来显示滚动条的方法 --> |
|||
<div |
|||
class="false-box" |
|||
style=" |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
overflow: auto; |
|||
" |
|||
> |
|||
<div class="scroll-box" :style="{ height: scollBoxHeight + 'px' }"> |
|||
<!-- scroll-box是用来撑起盒子的方法 --> |
|||
</div> |
|||
</div> |
|||
<div class="table-box"> |
|||
<el-table class="el-table" :data="allData" style="width: 100%"> |
|||
<el-table-column prop="name" label="姓名" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="age" label="年龄" width="180"> </el-table-column> |
|||
<el-table-column prop="address" label="地址"> </el-table-column> |
|||
<el-table-column prop="salary" label="薪资" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="date" label="日期" width="180"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.box { |
|||
width: 1000px; |
|||
height: 500px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
width: 1000px; |
|||
height: 500px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.false-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
overflow: auto; |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.scroll-box { |
|||
width: 100%; |
|||
height: 1000px; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
width: 100%; |
|||
height: 1000px; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
} |
|||
|
|||
.table-box { |
|||
width: calc(100% - 20px); |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
width: calc(100% - 20px); |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
} |
|||
|
|||
|
|||
::v-deep .el-table { |
|||
width: 100%; |
|||
height: 100%; |
|||
:deep(.el-table) { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.el-table .el-table__row { |
|||
height: 45px; |
|||
height: 45px; |
|||
} |
|||
|
|||
.el-table .el-table__row td { |
|||
padding: 0px |
|||
padding: 0px; |
|||
} |
|||
</style> |
|||
</style> |
|||
4949
gold-system/stats.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1 @@ |
|||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/app.vue","./src/views/index.vue","./src/views/login.vue","./src/views/nopermissionpage.vue","./src/views/z.vue","./src/views/audit/rechargeaudit.vue","./src/views/audit/refundaudit.vue","./src/views/consume/addconsume.vue","./src/views/consume/allconsume.vue","./src/views/goldbeen/addgoldenbeen.vue","./src/views/goldbeen/goldenbeenbalance.vue","./src/views/goldbeen/goldenbeendetail.vue","./src/views/managerecharge/activity.vue","./src/views/managerecharge/rate.vue","./src/views/permissions/index.vue","./src/views/recharge/addrecharge.vue","./src/views/recharge/adminrecharge.vue","./src/views/recharge/allrecharge.vue","./src/views/refund/addrefund.vue","./src/views/refund/allrefund.vue","./src/views/usergold/index.vue","./src/views/usergoldinfo/index.vue","./src/views/workspace/index.vue"],"errors":true,"version":"5.6.3"} |
|||
@ -1,42 +1,70 @@ |
|||
import { defineConfig } from 'vite' |
|||
import { defineConfig, loadEnv } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import' |
|||
import legacy from '@vitejs/plugin-legacy'; |
|||
import legacy from '@vitejs/plugin-legacy' |
|||
import path from 'path' |
|||
import { visualizer } from 'rollup-plugin-visualizer' |
|||
|
|||
// https://vite.dev/config/
|
|||
export default defineConfig({ |
|||
esbuild: { |
|||
supported: { |
|||
bigint: true |
|||
} |
|||
}, |
|||
plugins: [vue(), |
|||
legacy({ |
|||
targets: ['defaults', 'not IE 11', 'chrome >=73'], |
|||
modernPolyfills: true |
|||
}), |
|||
lazyImport({ |
|||
resolvers: [ |
|||
VxeResolver({ |
|||
libraryName: 'vxe-table' |
|||
export default defineConfig(({ mode }) => { |
|||
const env = loadEnv(mode, process.cwd()) |
|||
console.log('当前环境:', mode) |
|||
console.log('当前环境变量:', env) |
|||
return { |
|||
esbuild: { |
|||
supported: { |
|||
bigint: true |
|||
}, |
|||
treeShaking: true |
|||
}, |
|||
plugins: [ |
|||
vue(), |
|||
visualizer({ |
|||
open: true, // 打包完成后自动展示
|
|||
gzipSize: true, // 显示gzip压缩后的大小
|
|||
brotliSize: true // 显示brotli压缩后的大小
|
|||
}), |
|||
legacy({ |
|||
targets: ['defaults', 'not IE 11', 'chrome >=73'], |
|||
modernPolyfills: true |
|||
}), |
|||
VxeResolver({ |
|||
libraryName: 'vxe-pc-ui' |
|||
lazyImport({ |
|||
resolvers: [ |
|||
VxeResolver({ |
|||
libraryName: 'vxe-table' |
|||
}), |
|||
VxeResolver({ |
|||
libraryName: 'vxe-pc-ui' |
|||
}) |
|||
] |
|||
}) |
|||
] |
|||
}) |
|||
], |
|||
server: { |
|||
proxy: { |
|||
'/hwjb': { |
|||
// target: 'http://54.251.137.151:10704',
|
|||
target: 'http://192.168.8.93:10702', |
|||
// target: 'http://54.251.137.151:10702',
|
|||
changeOrigin: true, |
|||
rewrite: (path) => path.replace(/^\/hwjb/, ''), |
|||
}, |
|||
], |
|||
resolve: { |
|||
alias: { |
|||
'@': path.resolve(__dirname, './src') |
|||
} |
|||
}, |
|||
}, |
|||
// base: process.env.NODE_ENV === "production" ? "/gold_html_dev/" : "/",
|
|||
base: process.env.NODE_ENV === "production" ? "./" : "/", |
|||
base: process.env.NODE_ENV === 'production' ? './' : '/', |
|||
build: { |
|||
sourcemap: false, // 关闭 sourcemap
|
|||
minify: 'terser', |
|||
terserOptions: { |
|||
compress: { |
|||
drop_console: true, // 生产环境去除console
|
|||
drop_debugger: true // 生产环境去除 debugger
|
|||
} |
|||
}, |
|||
rollupOptions: { |
|||
output: { |
|||
manualChunks: { |
|||
echarts: ['echarts'], |
|||
xlsx: ['xlsx'], |
|||
lodash: ['lodash'], |
|||
vue: ['vue', 'vue-router', 'pinia'], |
|||
elementPlus: ['element-plus'] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue