linquan
2 days ago
11 changed files with 3736 additions and 574 deletions
@ -0,0 +1,184 @@
|
||||
<template> |
||||
<div class="game-order-container"> |
||||
<el-card shadow="hover"> |
||||
<div class="game-order-search mb15"> |
||||
<el-form label-position="right" :inline="true"> |
||||
<el-form-item label="起始时间" prop="times"> |
||||
<el-date-picker |
||||
type="datetimerange" |
||||
size="default" |
||||
v-model="tableData.param.times" |
||||
style="width: 400px" |
||||
range-separator="-" |
||||
start-placeholder="开始" |
||||
end-placeholder="结束" |
||||
format="YYYY-MM-DD HH:mm:ss" |
||||
value-format="x" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="商户单号" prop="order"> |
||||
<el-input size="default" v-model="tableData.param.order" placeholder="请输入商户单号" clearable /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button size="default" type="primary" class="ml10" @click="orderList"> |
||||
<el-icon> |
||||
<ele-Search /> |
||||
</el-icon> |
||||
查询 |
||||
<div v-if="!!tableData.param.continuationToken">下一页</div> |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<el-table :data="tableData.data" style="width: 100%" stripe border> |
||||
<el-table-column prop="orderNo" label="商户单号" width="300"></el-table-column> |
||||
<el-table-column prop="productName" label="商品名称" width="180"></el-table-column> |
||||
<el-table-column prop="tradeType" label="交易类型" width="100"> |
||||
<template #default="scope"> |
||||
<div v-if="scope.row.tradeType">支付</div> |
||||
<div v-else>退款</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="tradeState" label="订单状态" width="100"> |
||||
<template #default="scope"> |
||||
<div v-if="scope.row.tradeState==0">成功</div> |
||||
<div v-else-if="scope.row.tradeState==2">失败</div> |
||||
<div v-else-if="scope.row.tradeState==4">未支付</div> |
||||
<div v-else>{{scope.row.tradeState}}</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="payMoney" label="支付金额(元)" width="120"></el-table-column> |
||||
<el-table-column prop="couponAmt" label="优惠券金额(元)" width="130"></el-table-column> |
||||
<el-table-column prop="currency" label="币种" width="70"></el-table-column> |
||||
<el-table-column prop="country" label="country" width="100"></el-table-column> |
||||
<el-table-column prop="orderTime" label="下单时间" show-overflow-tooltip width="200"> |
||||
<template #default="scope"> |
||||
{{new Date(scope.row.orderTime).toLocaleString()}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="tradeTime" label="支付时间" show-overflow-tooltip width="200"> |
||||
<template #default="scope"> |
||||
{{new Date(scope.row.tradeTime).toLocaleString()}} |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue'; |
||||
import { allChannelList, ServerCategorize, serverList, ServerList } from '/@/utils/game'; |
||||
import RechargeConfigCategory from '/@/api/config/RechargeConfigCategory.json'; |
||||
import { gSwitchServer } from '/@/utils/utils'; |
||||
import { getHuaWeiOrderList } from '/@/api/game/order'; |
||||
import { ElMessage } from 'element-plus/es'; |
||||
|
||||
// 定义接口来定义对象的类型 |
||||
interface TableData { |
||||
id: string; |
||||
CreateTime: string; |
||||
CfgId: number; |
||||
Rmb: number; |
||||
SilverPiece: number; |
||||
Identity: string; |
||||
timeStr: string; |
||||
uid: string; |
||||
RealName: string; |
||||
StringId: string; |
||||
} |
||||
|
||||
interface TableDataState { |
||||
serverSwitch: number; |
||||
serverCategorize: object; |
||||
tableData: { |
||||
data: Array<TableData>; |
||||
total: number; |
||||
param: { |
||||
times: string[]; |
||||
order: string; |
||||
continuationToken: string; |
||||
}; |
||||
order: object; |
||||
}; |
||||
servers: object; |
||||
channels: object; |
||||
rechargeInfo: object[]; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'apiV1GameOrderHuaWeiOrder', |
||||
setup() { |
||||
const state = reactive<TableDataState>({ |
||||
serverSwitch: 0, |
||||
serverCategorize: ServerCategorize, |
||||
tableData: { |
||||
data: [], |
||||
total: 0, |
||||
param: { |
||||
times: [], |
||||
order: '', |
||||
continuationToken: '', |
||||
}, |
||||
order: [], |
||||
}, |
||||
servers: ServerList, |
||||
channels: [], |
||||
rechargeInfo: RechargeConfigCategory, |
||||
}); |
||||
|
||||
const orderList = (reset) => { |
||||
if (!reset) { |
||||
state.tableData.total = 0; |
||||
} |
||||
state.tableData.param.startAt = state.tableData.param.times[0]; |
||||
state.tableData.param.endAt = state.tableData.param.times[1]; |
||||
if (!state.tableData.param.endAt || !state.tableData.param.startAt) { |
||||
ElMessage.error('请填写时间！'); |
||||
return; |
||||
} |
||||
if (state.tableData.param.endAt - state.tableData.param.startAt > 48 * 60 * 60 * 1000) { |
||||
ElMessage.error('时间指定在48小时之内！'); |
||||
return; |
||||
} |
||||
getHuaWeiOrderList(state.tableData.param).then((res) => { |
||||
if (!res.data || !res.data.order) { |
||||
return; |
||||
} |
||||
console.log(res); |
||||
state.tableData.param.continuationToken = res.data.order.continuationToken; |
||||
state.tableData.data = res.data.order.orderInfoList || []; |
||||
if (state.tableData.param.order.length > 0) { |
||||
state.tableData.data = state.tableData.data.filter((item) => { |
||||
return item.orderNo == state.tableData.param.order; |
||||
}); |
||||
if (state.tableData.data.length == 0 && !!state.tableData.param.continuationToken && state.tableData.total < 5) { |
||||
orderList(true); |
||||
state.tableData.total++; |
||||
} |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
// 页面加载时 |
||||
onMounted(() => { |
||||
serverList().then((res) => { |
||||
state.servers = res; |
||||
}); |
||||
allChannelList().then((res) => { |
||||
state.channels = res; |
||||
}); |
||||
}); |
||||
|
||||
const switchServer = () => { |
||||
return gSwitchServer(state.serverSwitch, state.servers); |
||||
}; |
||||
|
||||
return { |
||||
switchServer, |
||||
orderList, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
@ -0,0 +1,198 @@
|
||||
<template> |
||||
<div class="system-edit-post-container"> |
||||
<el-form size="default" label-width="80px"> |
||||
<el-card shadow="hover" header="战令历史"> |
||||
<template #header> |
||||
战令历史 |
||||
<el-button v-show="item.show === false" @click="item.show = true" class="button-caret" type="text"> |
||||
<el-icon> |
||||
<ele-CaretBottom /> |
||||
</el-icon> |
||||
</el-button> |
||||
<el-button v-show="item.show === true" @click="item.show = false" class="button-caret" type="text"> |
||||
<el-icon> |
||||
<ele-CaretTop /> |
||||
</el-icon> |
||||
</el-button> |
||||
</template> |
||||
<div v-show="item.show"> |
||||
<div class="flex-warp"> |
||||
<el-form :inline="true"> |
||||
<el-form-item label="服务器"> |
||||
<el-select v-model="serverSwitch" class="m-2" placeholder="选择服务器" size="large" style="width: 80px"> |
||||
<el-option v-for="item in serverCategorize" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
<el-select v-model="query.serverId" placeholder="选择服务器" @change="getProp" filterable> |
||||
<el-option v-for="item in switchServer()" :key="item.id" :label="item.name" :value="item.id" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div class="flex-warp"> |
||||
<el-table ref="tableRef" :data="tableData.list" style="width: 100%" border> |
||||
<el-table-column prop="PeriodId" label="当前期数" width="85"> |
||||
<template #default="scope"> {{ scope.row.PeriodId }}期</template> |
||||
</el-table-column> |
||||
<el-table-column prop="State" label="状态" width="100"> |
||||
<template #default="scope"> |
||||
<div v-if="scope.row.State == 1" style="color: #f81f26">开启</div> |
||||
<div v-else-if="scope.row.State == 2">关闭</div> |
||||
<div v-else-if="scope.row.State == 3" style="color: #66b7cf">未开启</div> |
||||
<div v-else>{{ scope.row.State }}</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="BeginTime" label="开始时间" width="100" /> |
||||
<el-table-column prop="EndTime" label="结束时间" width="100" /> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
<script lang="ts"> |
||||
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'; |
||||
import { gameGMGetBattlePass } from '/@/api/game/gameConfig'; |
||||
import BattlePassConfigCategory from '/@/api/config/BattlePassConfigCategory.json'; |
||||
import { ElLoading } from 'element-plus'; |
||||
import { ServerCategorize, serverList } from '/@/utils/game'; |
||||
import { gSwitchServer, uniquePeriodId } from '/@/utils/utils'; |
||||
|
||||
interface TableDataState { |
||||
query: object; |
||||
tableData: { list: object[] }; |
||||
battlePassConfig: object; |
||||
servers: object; |
||||
serverCategorize: object[]; |
||||
serverSwitch: number; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'apiV1ServerBattlePassLog', |
||||
setup: function () { |
||||
const tableRef = ref(); |
||||
const state = reactive<TableDataState>({ |
||||
item: { topShow: true, show: true }, |
||||
query: { |
||||
serverId: '', |
||||
periodId: '', |
||||
}, |
||||
tableData: { list: [] }, |
||||
battlePassConfig: BattlePassConfigCategory, |
||||
servers: [], |
||||
serverCategorize: ServerCategorize, |
||||
serverSwitch: 0, |
||||
}); |
||||
|
||||
onMounted(() => { |
||||
serverList().then((res) => { |
||||
state.servers = res; |
||||
console.log('serverList:', res); |
||||
state.query.serverId = res[0].id; |
||||
getProp(); |
||||
}); |
||||
}); |
||||
const getProp = () => { |
||||
const loading = ElLoading.service({ |
||||
lock: true, |
||||
text: 'Loading', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}); |
||||
state.tableData.list = []; |
||||
gameGMGetBattlePass({ serverId: state.query.serverId }) |
||||
.then((res) => { |
||||
console.log('gameGMGetBattlePass: ', res); |
||||
if (res.code != 0 || !res.data || !res.data.list) { |
||||
return; |
||||
} |
||||
state.tableData.list = res.data.list; |
||||
let now = new Date().getTime() / 1000; |
||||
console.log('gameGMGetBattlePass: time ', now); |
||||
let BattlePassConfig = unique(); |
||||
console.log('gameGMGetBattlePass: BattlePassConfig ', BattlePassConfig); |
||||
BattlePassConfig.forEach((data) => { |
||||
let item = state.tableData.list.find((r) => r.PeriodId === data.PeriodId); |
||||
if (!item) { |
||||
state.tableData.list.push({ PeriodId: data.PeriodId }); |
||||
return; |
||||
} |
||||
if (item.BeginTime >= now) { |
||||
item.State = 3; |
||||
} |
||||
item.BeginTime = new Date(item.BeginTime * 1000).toLocaleDateString(); |
||||
item.EndTime = new Date(item.EndTime * 1000).toLocaleDateString(); |
||||
}); |
||||
state.tableData.list.sort((a, b) => { |
||||
return a.PeriodId - b.PeriodId; |
||||
}); |
||||
// state.tableData.list.forEach((item) => { |
||||
// if (item.BeginTime >= now) { |
||||
// item.State = 3; |
||||
// } |
||||
// item.BeginTime = new Date(item.BeginTime * 1000).toLocaleDateString(); |
||||
// item.EndTime = new Date(item.EndTime * 1000).toLocaleDateString(); |
||||
// }); |
||||
console.log('gameGMGetBattlePass: state.tableData.data', state.tableData.list); |
||||
}) |
||||
.finally(() => { |
||||
loading.close(); |
||||
}); |
||||
}; |
||||
|
||||
const unique = () => { |
||||
return uniquePeriodId(BattlePassConfigCategory); |
||||
}; |
||||
const switchServer = () => { |
||||
return gSwitchServer(state.serverSwitch, state.servers); |
||||
}; |
||||
return { |
||||
unique, |
||||
switchServer, |
||||
tableRef, |
||||
getProp, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.el-table { |
||||
--el-table-border-color: var(--el-border-color-lighter); |
||||
--el-table-border: 2px solid var(--el-table-border-color); |
||||
} |
||||
|
||||
.table-item { |
||||
margin-top: 10px; |
||||
margin-bottom: -10px; |
||||
} |
||||
|
||||
.box-card .el-card__header { |
||||
background-color: #062ce6; |
||||
color: #fff; |
||||
} |
||||
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { |
||||
background: #f0ffd5; |
||||
} |
||||
|
||||
.warning-row { |
||||
background: #f0ffd5ff; |
||||
} |
||||
|
||||
.white-row { |
||||
background: #ffffff; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table__body tr { |
||||
background-color: #f0ffd5ff; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table--enable-row-hover .el-table__body tr:hover > td { |
||||
background-color: inherit; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table__cell { |
||||
background-color: #f0ffd5ff; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue