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.
515 lines
14 KiB
515 lines
14 KiB
<template>
|
|
<!-- 这是线上充值明细页面 -->
|
|
<div class="filter-box">
|
|
<el-form :model="detailY" ref="ruleFormRef">
|
|
<el-form-item prop="jwcode" >
|
|
<el-text class="mx-1" size="large">精网号：</el-text>
|
|
<el-input
|
|
v-model="detailY.jwcode"
|
|
placeholder="请输入精网号"
|
|
style="width: 220px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="deptName">
|
|
<el-text class="mx-1" size="large">地区：</el-text>
|
|
<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">
|
|
<el-text class="mx-1" size="large">订单号：</el-text>
|
|
<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">
|
|
<el-text class="mx-1" size="large">充值平台：</el-text>
|
|
<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">
|
|
<el-text class="mx-1" size="large">充值时间：</el-text>
|
|
<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-col :span="10">
|
|
<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-col>
|
|
|
|
</el-form>
|
|
</div>
|
|
<div class="table-box">
|
|
<div>金豆总数：充值金豆总数：{{ countValue }}，合计金额数：{{ priceValue }}</div>
|
|
<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 trimJwCode = () => {
|
|
if (detailY.value.jwcode) {
|
|
detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, '');
|
|
}
|
|
if (detailY.value.orderNo) {
|
|
detailY.value.orderNo = detailY.value.orderNo.replace(/\s/g, '');
|
|
}
|
|
}
|
|
// 搜索
|
|
const search = function () {
|
|
trimJwCode();
|
|
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>
|