Files
peko-admin-web/src/views/refund/UserRefundQuiry.vue

391 lines
11 KiB
Vue
Raw Normal View History

2024-11-25 17:06:55 +08:00
<template>
<div class="box">
<!-- 分区 -->
<div class="inquire">
<div class="block">
<span class="demonstration">分区</span>
<el-select
v-model="inquire.partitionId"
style="width: 75%"
placeholder="请选择"
>
<el-option
v-for="item in inquire.partitionArr"
:key="item.id"
:label="item.desc"
:value="item.id"
></el-option>
</el-select>
</div>
</div>
<!-- 平台ID -->
<div class="inquire">
<span>平台ID</span>
<el-input
v-model="inquire.userId"
placeholder=""
class="input"
></el-input>
</div>
<!-- 充值订单号 -->
<div class="inquire">
<span>充值订单号</span>
<el-input
v-model="inquire.rechargeNumber"
placeholder=""
class="input"
></el-input>
</div>
<!-- 第三方订单号 -->
<div class="inquire">
<span>第三方订单号</span>
<el-input
v-model="inquire.partyNumber"
placeholder=""
class="input"
></el-input>
</div>
<!-- 国家 -->
<div class="inquire">
<div class="block">
<span class="demonstration">国家</span>
<el-select
v-model="inquire.country"
style="width: 75%"
placeholder="请选择"
>
<el-option
v-for="item in inquire.countryArr"
:key="item.id"
:label="jsonFun(item.name).zh"
:value="item.id"
></el-option>
</el-select>
</div>
</div>
<!-- 状态 -->
<div class="inquire">
<div class="block">
<span class="demonstration">状态</span>
<el-select
v-model="inquire.status"
style="width: 75%"
placeholder="请选择"
>
<el-option
v-for="item in inquire.statusArr"
:key="item.id"
:label="item.desc"
:value="item.id"
></el-option>
</el-select>
</div>
</div>
<!-- 平台 -->
<div class="inquire">
<div class="block">
<span class="demonstration">平台</span>
<el-select
v-model="inquire.platform"
style="width: 75%"
placeholder="请选择"
>
<el-option
v-for="item in inquire.platformArr"
:key="item.id"
:label="item.desc"
:value="item.id"
></el-option>
</el-select>
</div>
</div>
<!-- 支付渠道 -->
<div class="inquire">
<div class="block">
<span class="demonstration">支付渠道</span>
<el-select
v-model="inquire.paymentChannels"
style="width: 75%"
placeholder="请选择"
>
<el-option
v-for="item in inquire.paymentChannelsArr"
:key="item.id"
:label="item.desc"
:value="item.id"
></el-option>
</el-select>
</div>
</div>
<!-- 时间选择器 -->
<div class="inquire">
<div class="block">
<span class="demonstration">时间</span>
<el-date-picker
v-model="inquire.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
</div>
<!-- 查询按钮 -->
<el-button class="primary" type="primary" @click="getData()"
>搜索</el-button
>
<el-button
class="primary"
type="primary"
@click="
inquire.partitionId = 0;
inquire.userId = '';
inquire.rechargeNumber = '';
inquire.partyNumber = '';
inquire.country = 0;
inquire.status = 0;
inquire.platform = '';
inquire.paymentChannels = '';
inquire.time = '';
getData();
"
>重置搜索</el-button
>
<el-button class="primary" type="primary" @click="exportInfoFun()"
>导出</el-button
>
<div v-for="(value, key) in mapObj" :key="key">
<el-button type="text">{{ key }}: {{ value }}, </el-button>
</div>
<!-- 表格 -->
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column prop="chargeStatusDesc" align="center" label="支付状态">
</el-table-column>
<el-table-column prop="chargeRecordId" align="center" label="订单ID" />
<el-table-column
prop="pingxxChargeId"
align="center"
label="第三方订单ID"
/>
<el-table-column prop="channel" align="center" label="充值渠道" />
<el-table-column prop="erbanNo" align="center" label="平台ID" />
<el-table-column prop="nick" align="center" label="昵称" />
<el-table-column prop="partitionDesc" align="center" label="地区" />
<el-table-column prop="phone" align="center" label="电话" />
<el-table-column prop="os" align="center" label="平台" />
<el-table-column prop="genderDesc" align="center" label="性别" />
<el-table-column prop="chargeIp" align="center" label="用户IP" />
<el-table-column prop="totalGold" align="center" label="金币数量" />
<el-table-column prop="amount" align="center" label="花费金额USD" />
<el-table-column
prop="localCurrencyCode"
align="center"
label="当地货币代码"
/>
<el-table-column
prop="localAmount"
align="center"
label="当地货币花费金额"
/>
<el-table-column prop="createTime" align="center" label="购买时间" />
<el-table-column prop="successTime" align="center" label="回调时间" />
<el-table-column prop="successTime" align="center" label="退款时间" />
<el-table-column prop="refundTime" align="center" label="退款金额" />
<el-table-column
prop="refundDesc"
align="center"
label="状态"
></el-table-column>
<el-table-column prop="regionName" align="center" label="国家" />
</el-table>
<!-- 分页 -->
<el-pagination
style="margin-top: 10px"
class="paginationClass"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
layout="sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import {
listPartitionInfo,
refundList,
regionInfoList,
refundExport,
} from "@/api/refund/refund";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
name: "userRefundQuiry",
data() {
return {
loading: false,
delDialog: false,
delDialogData: null,
mapObj: {},
//查询所需条件对象
inquire: {
partitionId: 0,
partitionArr: [],
userId: "",
rechargeNumber: "",
partyNumber: "",
country: "",
countryArr: [],
status: "",
statusArr: [
{ desc: "全部", id: 0 },
{ desc: "退款中", id: 2 },
{ desc: "退款成功", id: 1 },
{ desc: "退款失败", id: 3 },
],
platform: "",
platformArr: [
{ desc: "全部", id: "" },
{ desc: "Android", id: "android" },
{ desc: "iOS", id: "iOS" },
],
paymentChannels: "",
paymentChannelsArr: [
{ desc: "google内购", id: "google_play_billing" },
{ desc: "payermax", id: "payermax" },
{ desc: "myCard", id: "MyCard" },
{ desc: "startPay", id: "start_pay" },
{ desc: "ios内购", id: "ios_pay" },
{ desc: "对公打款", id: "company" },
],
time: "",
},
// 表格
tableData: [],
// 分页
total: 10, //总页数
currentPage: 1, //页码
pageSize: 10, //条数
};
},
created() {
listPartitionInfo().then((res) => {
this.inquire.partitionArr = res.data;
this.inquire.partitionId = this.inquire.partitionArr[0].id;
});
regionInfoList().then((res) => {
this.inquire.countryArr = res.data;
});
},
methods: {
// 查询接口
getData() {
this.loading = true;
let time = this.inquire.time;
let startTime = "";
let endTime = "";
if (time && time.length > 0) {
startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd 00:00:00");
endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd 23:59:59");
}
refundList({
partitionId: this.inquire.partitionId,
channel: this.inquire.paymentChannels,
chargeRecordId: this.inquire.rechargeNumber,
pingxxChargeId: this.inquire.partyNumber,
refundStatus: this.inquire.status,
regionId: this.inquire.country,
os: this.inquire.platform,
erbanNo: this.inquire.userId,
pageNo: this.currentPage,
pageSize: this.pageSize,
beginDate: startTime,
endDate: endTime,
}).then((res) => {
this.total = res.total;
this.tableData = res.rows;
this.mapObj = res.totalMap;
this.loading = false;
});
},
jsonFun(val) {
return JSON.parse(val);
},
exportInfoFun() {
let time = this.inquire.time;
let startTime = "";
let endTime = "";
if (time && time.length > 0) {
startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd 00:00:00");
endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd 23:59:59");
}
refundExport({
partitionId: this.inquire.partitionId,
channel: this.inquire.paymentChannels,
chargeRecordId: this.inquire.rechargeNumber,
pingxxChargeId: this.inquire.partyNumber,
refundStatus: this.inquire.status,
regionId: this.inquire.country,
os: this.inquire.platform,
erbanNo: this.inquire.userId,
pageNo: this.currentPage,
pageSize: this.pageSize,
beginDate: startTime,
endDate: endTime,
}).then();
},
// 分页导航
handleSizeChange() {
this.getData();
},
handleCurrentChange() {
this.getData();
},
},
};
</script>
<style lang="less" scoped>
.box {
padding-top: 20px;
background: #ecf0f5;
.inquire {
display: inline-block;
margin-right: 20px;
margin-bottom: 10px;
span {
margin-right: 10px;
}
.input {
width: 180px;
margin-right: 10px;
}
}
.dialogTableVisibleBut {
display: block;
margin: 30px 0 0 830px;
}
.paginationClass {
margin: 15px 0 5px 0px;
}
}
.selectBox {
display: flex;
height: 35px;
line-height: 35px;
margin-bottom: 20px;
}
.selectBoxImg {
height: 150px;
}
</style>