367 lines
16 KiB
Vue
367 lines
16 KiB
Vue
<template>
|
||
<div class="pf-warpper">
|
||
<el-row class="table-form">
|
||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||
<el-form-item>
|
||
<el-input @clear="onClear('userId')" clearable placeholder="请输入用户ID" v-model="searchData.userId" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input @clear="onClear('uuid')" clearable placeholder="请输入设备ID" v-model="searchData.uuid" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select @clear="onClear('devType')" clearable placeholder="请选择设备类型" v-model="searchData.devType">
|
||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in devTypeList" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select @clear="onClear('rchgUse')" clearable placeholder="请选择充值用途" v-model="searchData.rchgUse">
|
||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in rchgUseList" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input @clear="onClear('tradeNo')" clearable placeholder="请输入订单号" v-model="searchData.tradeNo" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input @clear="onClear('oid')" clearable placeholder="请输入第三方订单号" v-model="searchData.oid" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input @clear="onClear('phoneNo')" clearable placeholder="请输入手机号" v-model="searchData.phoneNo" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input @clear="onClear('ipAddr')" clearable placeholder="请输入IP地址" v-model="searchData.ipAddr" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select @clear="onClear('payMode')" clearable placeholder="请选择支付模式" v-model="searchData.payMode">
|
||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in payModeList" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select @clear="onClear('sysType')" clearable placeholder="请选择系统类型" v-model="searchData.sysType" filterable>
|
||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in sysTypeList" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select @clear="onClear('isSwell')" clearable placeholder="请选择是否膨胀" v-model="searchData.isSwell" filterable>
|
||
<el-option :key="true" label="是" :value="true" />
|
||
<el-option :key="false" label="否" :value="false" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input v-model="searchData.payChannel" clearable placeholder="请输入支付渠道" @clear="onClear('payChannel')" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select @clear="onClear('status')" clearable placeholder="请选择充值状态" v-model="searchData.status">
|
||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statusList" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="订单生成">
|
||
<el-date-picker
|
||
:default-time="['00:00:00', '23:59:59']"
|
||
end-placeholder="结束日期"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
type="datetimerange"
|
||
v-model="timeG"
|
||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"/>
|
||
</el-form-item>
|
||
<el-form-item label="订单支付">
|
||
<el-date-picker
|
||
:default-time="['00:00:00', '23:59:59']"
|
||
end-placeholder="结束日期"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
type="datetimerange"
|
||
v-model="timeW"
|
||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="onSearch()" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||
<!-- <el-button @click="handleExport" icon="el-icon-download" plain type="primary">导出</el-button> -->
|
||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||
</el-form-item>
|
||
<el-form-item style="float: right" label-width="15px">
|
||
充值总金额：<span style="color: red">{{ totalRchgAmount }}</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col>
|
||
<el-table :data="tableData" element-loading-text="拼命加载中" v-loading="loading" @sort-change="sortChange" border height="700" highlight-current-row style="width: 100%">
|
||
<el-table-column align="center" fixed="left" label="用户id">
|
||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" fixed="left" label="用户名" width="150">
|
||
<template slot-scope="scope">{{ scope.row.userName }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" fixed="left" label="卡片名称" width="150">
|
||
<template slot-scope="scope">{{ scope.row.cardName }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="手机号" width="120">
|
||
<template slot-scope="scope">{{ scope.row.phoneNo }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="订单产生时间" width="160">
|
||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="订单完成日期" sortable width="160">
|
||
<template slot-scope="scope">{{ scope.row.finishedAt | BeiJingTime }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="充值用途">
|
||
<template slot-scope="scope">{{ scope.row.rchgUse | changeRchgUse }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="订单号" width="240">
|
||
<template slot-scope="scope">{{ scope.row.tradeNo }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="第三方订单号" width="240">
|
||
<template slot-scope="scope">{{ scope.row.oid }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="支付模式">
|
||
<template slot-scope="scope">{{ scope.row.payMode | changepayMode }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="支付渠道" width="150">
|
||
<template slot-scope="scope">{{ scope.row.payChannel }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="充值金额" sortable width="120">
|
||
<template slot-scope="scope">{{ scope.row.amount | changeMoneyYuan }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="实际到账金额" width="120">
|
||
<template slot-scope="scope">{{ scope.row.realAmount | changeMoneyYuan }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="状态">
|
||
<template slot-scope="scope">{{ scope.row.status | changestatus }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="是否膨胀" width="100">
|
||
<template slot-scope="scope">
|
||
<el-button :type="scope.row.isSwell ? 'success' : 'danger'" plain size="mini">{{ scope.row.isSwell ? "是" : "否" }}</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="游戏划拨订单" width="220">
|
||
<template slot-scope="scope">{{ scope.row.trfOrder }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="上下分处理状态" width="120">
|
||
<template slot-scope="scope">{{ scope.row.trfStatus | changeRtfstatus }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="系统类型">
|
||
<template slot-scope="scope">{{ scope.row.sysType | changeSysType }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="商区码" width="150">
|
||
<template slot-scope="scope">{{ scope.row.districtCode }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="充值对象">
|
||
<template slot-scope="scope">{{ scope.row.rchgFor }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="赠送金额">
|
||
<template slot-scope="scope">{{ scope.row.backGiftVal | changeMoneyYuan }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="设备类型" prop="devType" width="100">
|
||
<template slot-scope="scope">{{ scope.row.devType }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="是否是直推用户" width="120">
|
||
<template slot-scope="scope">{{ scope.row.isDirect ? '是' : '不是' }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="ip地址" width="120">
|
||
<template slot-scope="scope">{{ scope.row.ipAddr }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="支付账号">
|
||
<template slot-scope="scope">{{ scope.row.payAcc }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="代充平台支付凭证" width="150">
|
||
<template slot-scope="scope">
|
||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px" :urls="scope.row.proof"></ShowImg>
|
||
<!-- type="daichong" -->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="渠道平台充值类型">
|
||
<template slot-scope="scope">{{ scope.row.platPayMode }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="费率">
|
||
<template slot-scope="scope">{{ scope.row.payRate }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="用户折扣卡ID" width="100">
|
||
<template slot-scope="scope">{{ scope.row.userDiscountCardId }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="充值使用ID" width="100">
|
||
<template slot-scope="scope">{{ scope.row.rchgUseId }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="商人Id">
|
||
<template slot-scope="scope">{{ scope.row.traderId }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="推广序列">
|
||
<template slot-scope="scope">{{ scope.row.promSeqe }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="支付链接" width="450">
|
||
<template slot-scope="scope">
|
||
<el-button slot="reference" @click="doCopy(scope.row.payUrl)">复制链接</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="支付链接模式" width="100">
|
||
<template slot-scope="scope">{{ scope.row.payUrlMode }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="备注" width="100" show-overflow-tooltip="">
|
||
<template slot-scope="scope">{{ scope.row.remarks }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="通知第三方上分情况状态" width="200">
|
||
<template slot-scope="scope">{{ scope.row.traderNotify }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="第三方支付时间" width="160">
|
||
<template slot-scope="scope">{{ scope.row.paymentAt | BeiJingTime }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="订单修改日期" width="160">
|
||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="第三方下单成功时间" width="160">
|
||
<template slot-scope="scope">{{ scope.row.progressAt | BeiJingTime }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="设备id" width="350">
|
||
<template slot-scope="scope">{{ scope.row.uuid }}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 分页 -->
|
||
<div class="table-pagination">
|
||
<el-pagination
|
||
:current-page="searchData.pageNum"
|
||
:page-size="searchData.pageSize"
|
||
:page-sizes="[10, 20, 30, 50, 100]"
|
||
:total="totals"
|
||
@current-change="handleCurrentChange"
|
||
@size-change="handleSizeChange"
|
||
layout="total, sizes, prev, pager, next, jumper"/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { devTypeList, payModeList, statusList, rchgUseList, rcgTypeList, sysTypeList } from '@/filters/tran/recharge'
|
||
import { getRechargeList } from '@/api/tran/recharge'
|
||
import ShowImg from '@/components/ShowImg/index.vue'
|
||
export default {
|
||
name: 'Recharge',
|
||
components: {
|
||
ShowImg
|
||
},
|
||
data() {
|
||
return {
|
||
devTypeList: devTypeList(),
|
||
payModeList: payModeList(),
|
||
statusList: statusList(),
|
||
rchgUseList: rchgUseList(),
|
||
rcgTypeList: rcgTypeList(),
|
||
sysTypeList: sysTypeList(),
|
||
loading: true, // 列表加载状态
|
||
totals: 0, // 数据总条数
|
||
totalRchgAmount: undefined,
|
||
timeG: undefined,
|
||
timeW: undefined,
|
||
searchData: {
|
||
// 表单参数
|
||
userId: undefined, // 用户id
|
||
uuid: undefined, // 设备id
|
||
devType: null, // 设备类型
|
||
tradeNo: undefined, // 订单号
|
||
oid: undefined, // 第三方返回，核对账单信息
|
||
phoneNo: undefined, // 手机号
|
||
payMode: undefined, // 支付模式
|
||
status: undefined, // 订单处理状态
|
||
finishAtsort: undefined, // 交易时间 -1--倒序 1--正序
|
||
amountSort: undefined, // 金额 -1--倒序 1--正序
|
||
startAt: undefined, // 开始时间
|
||
endAt: undefined, // 结束时间
|
||
payStartAt: undefined, // 订单支付 时间
|
||
rchgUse: undefined,
|
||
rcgTypeList: undefined,
|
||
|
||
pageNum: 1,
|
||
pageSize: 20
|
||
},
|
||
|
||
tableData: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.onSubmit()
|
||
},
|
||
methods: {
|
||
doCopy(str) {
|
||
this.$copyText(str).then(() => {
|
||
this.$notify({
|
||
type: 'success',
|
||
message: '複製成功，趕快去分享吧。'
|
||
})
|
||
})
|
||
},
|
||
// TODO：请求充值列表数据
|
||
onSubmit() {
|
||
this.loading = true
|
||
if (this.timeG) {
|
||
this.searchData.startAt = this.timeG[0]
|
||
this.searchData.endAt = this.timeG[1]
|
||
} else {
|
||
this.searchData.startAt = undefined
|
||
this.searchData.endAt = undefined
|
||
}
|
||
if (this.timeW) {
|
||
this.searchData.payStartAt = this.timeW[0]
|
||
this.searchData.payEndAt = this.timeW[1]
|
||
} else {
|
||
this.searchData.payStartAt = undefined
|
||
this.searchData.payEndAt = undefined
|
||
}
|
||
getRechargeList(this.searchData).then(res => {
|
||
if (res.code === 200) {
|
||
this.tableData = res.data.orders
|
||
this.totals = res.data.totalCount
|
||
this.totalRchgAmount = res.data.totalRchgAmount / 100
|
||
} else {
|
||
this.tableData = []
|
||
this.totals = 0
|
||
this.$message.error('请求列表失败')
|
||
}
|
||
this.loading = false
|
||
})
|
||
},
|
||
onSearch() {
|
||
this.searchData.pageNum = 1
|
||
this.searchData.pageSize = 20
|
||
this.onSubmit()
|
||
},
|
||
|
||
// 升序降序
|
||
sortChange(columns) {
|
||
if (columns.order === 'ascending') {
|
||
this.searchData.finishAtsort = -1
|
||
this.searchData.amountSort = 1
|
||
} else if (columns.order === 'descending') {
|
||
this.searchData.finishAtsort = 1
|
||
this.searchData.amountSort = -1
|
||
}
|
||
this.onSubmit()
|
||
},
|
||
|
||
// 刷新
|
||
refreshView() {
|
||
this.searchData.pageNum = 1
|
||
this.searchData.pageSize = 20
|
||
this.onSubmit()
|
||
},
|
||
|
||
// 清理搜索框
|
||
onClear(key) {
|
||
this.searchData[key] = undefined
|
||
this.onSubmit()
|
||
},
|
||
|
||
// 切换列表条数
|
||
handleSizeChange(val) {
|
||
this.searchData.pageSize = Number(val)
|
||
this.onSubmit()
|
||
},
|
||
|
||
// 切换列表页码
|
||
handleCurrentChange(val) {
|
||
this.searchData.pageNum = Number(val)
|
||
this.onSubmit()
|
||
}
|
||
}
|
||
}
|
||
</script>
|