feat: 添加充值页面，还在继续写着
This commit is contained in:
孙晓龙
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
@@ -1,4 +1,6 @@
|
||||
{
|
||||
"typescript.tsdk": "node_modules\\typescript\\lib",
|
||||
"vue3snippets.enable-compile-vue-file-on-did-save-code": true
|
||||
"vue3snippets.enable-compile-vue-file-on-did-save-code": true,
|
||||
"terminal.integrated.enableImages": true,
|
||||
"diffEditor.codeLens": true
|
||||
}
|
||||
@@ -99,5 +99,6 @@
|
||||
"bin-wrapper": "npm:bin-wrapper-china",
|
||||
"rollup": "^2.56.3",
|
||||
"gifsicle": "5.2.0"
|
||||
}
|
||||
},
|
||||
"packageManager": "pnpm@9.1.1+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195"
|
||||
}
|
||||
|
||||
10196
pnpm-lock.yaml
generated
Normal file
10196
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,53 @@
|
||||
import axios from 'axios';
|
||||
import qs from 'query-string';
|
||||
import {
|
||||
CommonPageParams,
|
||||
CommonPageResult,
|
||||
CommonStrIdParams,
|
||||
} from './common';
|
||||
|
||||
export interface AppleCardRecord {
|
||||
account: string;
|
||||
password: string;
|
||||
status: 0 | 1 | 2 | 3; // 账号状态
|
||||
|
||||
blance: number;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export interface AppleCardParams
|
||||
extends Partial<AppleCardRecord>,
|
||||
CommonPageParams {}
|
||||
|
||||
export interface AppleCardResRecord
|
||||
extends AppleCardRecord,
|
||||
CommonStrIdParams {}
|
||||
|
||||
export interface AppleCardRecordWithID
|
||||
extends AppleCardRecord,
|
||||
CommonStrIdParams {}
|
||||
|
||||
// 获取苹果账号列表
|
||||
export function queryAppleCardList(params: AppleCardParams) {
|
||||
return axios.get<CommonPageResult<AppleCardResRecord>>(
|
||||
'/cardInfo/appleCard/getList',
|
||||
{
|
||||
params,
|
||||
paramsSerializer: (obj) => {
|
||||
return qs.stringify(obj);
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function createAppleCard(data: AppleCardRecord) {
|
||||
return axios.post('/cardInfo/appleCard/create', data);
|
||||
}
|
||||
|
||||
export function updateMerchantDeploy(data: AppleCardRecordWithID) {
|
||||
return axios.put('/cardInfo/appleCard/modify', data);
|
||||
}
|
||||
|
||||
export function deleteAppleCard(params: CommonStrIdParams) {
|
||||
return axios.delete('/cardInfo/appleCard/delete', { params });
|
||||
}
|
||||
|
||||
56
src/api/apple-card-recharge-history.ts
Normal file
56
src/api/apple-card-recharge-history.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import axios from 'axios';
|
||||
import qs from 'query-string';
|
||||
import { CommonPageParams } from './common';
|
||||
import { PolicyRecord } from './list';
|
||||
|
||||
export interface AppleCardRechargeHistoryRecord {
|
||||
id: number;
|
||||
amount: number; // 充值金额
|
||||
balance: number; // 账户余额
|
||||
|
||||
createAt: string; // 订单创建时间，发起充值时间
|
||||
}
|
||||
|
||||
export interface AppleCardInfoParams
|
||||
extends Partial<AppleCardRechargeHistoryRecord>,
|
||||
CommonPageParams {}
|
||||
|
||||
export interface AppleCardOperationHistoryList {
|
||||
id: number;
|
||||
rechargeHistoryId: string;
|
||||
operation: string; // 操作
|
||||
status: 0 | 1; // 0 失败，1 成功
|
||||
createdAt: string; // 操作时间
|
||||
}
|
||||
|
||||
export interface AppleCardOperationHistoryParams
|
||||
extends Partial<AppleCardOperationHistoryList>,
|
||||
CommonPageParams {}
|
||||
|
||||
// 获取充值列表
|
||||
export function getAppleCardRechargeHistoryList(params: AppleCardInfoParams) {
|
||||
return axios.get<AppleCardRechargeHistoryRecord>(
|
||||
'/applCardRechargeHistory/getList',
|
||||
{
|
||||
params,
|
||||
paramsSerializer: (obj) => {
|
||||
return qs.stringify(obj);
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// 获取充值操作记录
|
||||
export function getAppleCardOperationHistoryList(
|
||||
params: AppleCardOperationHistoryParams
|
||||
) {
|
||||
return axios.get<AppleCardOperationHistoryList>(
|
||||
'/applCardRechargeHistory/getList',
|
||||
{
|
||||
params,
|
||||
paramsSerializer: (obj) => {
|
||||
return qs.stringify(obj);
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
234
src/views/apple-card-info/card-info/index.vue
Normal file
234
src/views/apple-card-info/card-info/index.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '苹果账户管理']" />
|
||||
<a-card class="general-card" title="苹果账户管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="merchantName" label="账户名称">
|
||||
<a-input
|
||||
v-model="formModel.account"
|
||||
placeholder="请输入账户名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-row style="margin-bottom: 16px">
|
||||
<a-col :span="12">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="showAddModel">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
添加账户
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-table
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:bordered="false"
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<a-switch
|
||||
v-model="record.status"
|
||||
checked-value="active"
|
||||
unchecked-value="unactive"
|
||||
@change="(value) => changeStatus(record, value)"
|
||||
>
|
||||
<template #checked> 激活 </template>
|
||||
<template #unchecked> 冻结 </template>
|
||||
</a-switch>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-button size="small" @click="showDeploy(record.merchantUid)"
|
||||
>充值记录</a-button
|
||||
>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<!-- <add-modal v-model:visible="state.addModalVisible" />
|
||||
<deploy-modal
|
||||
v-model:visible="state.deployModalVisible"
|
||||
:uid="state.selectedUid"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
MerchantConfigResRecord,
|
||||
switchMerchantStatus,
|
||||
} from '@/api/merchant-list';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { Pagination } from '@/types/global';
|
||||
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import {
|
||||
AppleCardParams,
|
||||
AppleCardResRecord,
|
||||
queryAppleCardList,
|
||||
} from '@/api/apple-card-info';
|
||||
|
||||
const basePagination: Pagination = {
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
};
|
||||
const pagination = reactive({
|
||||
...basePagination,
|
||||
});
|
||||
const columns: TableColumnData[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
slotName: 'index',
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'account',
|
||||
},
|
||||
{
|
||||
title: '密码',
|
||||
dataIndex: 'password',
|
||||
},
|
||||
{
|
||||
title: '今日充值金额',
|
||||
dataIndex: 'todayRechargeAmount',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: '今日充值笔数',
|
||||
dataIndex: 'todayRechargeCount',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
slotName: 'status',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operations',
|
||||
slotName: 'operations',
|
||||
},
|
||||
];
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
account: '',
|
||||
password: '',
|
||||
};
|
||||
};
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const renderData = ref<AppleCardResRecord[]>([]);
|
||||
const formModel = ref(generateFormModel());
|
||||
const state = reactive({
|
||||
addModalVisible: false,
|
||||
deployModalVisible: false,
|
||||
selectedUid: '',
|
||||
});
|
||||
|
||||
const fetchData = async (
|
||||
params: AppleCardParams = { current: 1, pageSize: 20 }
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const {
|
||||
data: { list, total },
|
||||
} = await queryAppleCardList(params);
|
||||
renderData.value = list;
|
||||
pagination.current = params.current;
|
||||
pagination.total = total;
|
||||
} catch (err) {
|
||||
// you can report use errorHandler or other
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (current: number) => {
|
||||
fetchData({ ...basePagination, current });
|
||||
};
|
||||
const search = () => {
|
||||
fetchData({
|
||||
...basePagination,
|
||||
...formModel.value,
|
||||
} as unknown as AppleCardParams);
|
||||
};
|
||||
const reset = () => {
|
||||
formModel.value = generateFormModel();
|
||||
};
|
||||
const showAddModel = () => {
|
||||
state.addModalVisible = true;
|
||||
};
|
||||
const changeStatus = async (
|
||||
record: MerchantConfigResRecord,
|
||||
status: string | number | boolean
|
||||
) => {
|
||||
try {
|
||||
await switchMerchantStatus({
|
||||
merchantUid: record.merchantUid,
|
||||
status: status as string,
|
||||
});
|
||||
search();
|
||||
} finally {
|
||||
// /
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => state.addModalVisible,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
search();
|
||||
}
|
||||
}
|
||||
);
|
||||
const showDeploy = (uid: string) => {
|
||||
state.deployModalVisible = true;
|
||||
state.selectedUid = uid;
|
||||
};
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +1,229 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '充值记录']" />
|
||||
<a-card class="general-card" title="充值记录">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="merchantName" label="账户名称">
|
||||
<a-input
|
||||
v-model="formModel.account"
|
||||
placeholder="请输入账户名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-row style="margin-bottom: 16px">
|
||||
<a-col :span="12">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="showAddModel">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
添加账户
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-table
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:bordered="false"
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<a-switch
|
||||
v-model="record.status"
|
||||
checked-value="active"
|
||||
unchecked-value="unactive"
|
||||
@change="(value) => changeStatus(record, value)"
|
||||
>
|
||||
<template #checked> 激活 </template>
|
||||
<template #unchecked> 冻结 </template>
|
||||
</a-switch>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-button size="small" @click="showDeploy(record.merchantUid)"
|
||||
>充值记录</a-button
|
||||
>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<!-- <add-modal v-model:visible="state.addModalVisible" /> -->
|
||||
<!-- <deploy-modal
|
||||
v-model:visible="state.deployModalVisible"
|
||||
:uid="state.selectedUid"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
MerchantConfigResRecord,
|
||||
switchMerchantStatus,
|
||||
} from '@/api/merchant-list';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { Pagination } from '@/types/global';
|
||||
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
// import AddModal from './components/add-modal.vue';
|
||||
// import DeployModal from './components/deploy-modal.vue';
|
||||
import {
|
||||
AppleCardParams,
|
||||
AppleCardResRecord,
|
||||
queryAppleCardList,
|
||||
} from '@/api/apple-card-info';
|
||||
|
||||
const basePagination: Pagination = {
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
};
|
||||
const pagination = reactive({
|
||||
...basePagination,
|
||||
});
|
||||
const columns: TableColumnData[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
slotName: 'index',
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'account',
|
||||
},
|
||||
{
|
||||
title: '充值金额',
|
||||
dataIndex: 'amount',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
slotName: 'status',
|
||||
},
|
||||
{
|
||||
title: '充值时间',
|
||||
dataIndex: 'createAt',
|
||||
slotName: 'createAt',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operations',
|
||||
slotName: 'operations',
|
||||
},
|
||||
];
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
account: '',
|
||||
password: '',
|
||||
};
|
||||
};
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const renderData = ref<AppleCardResRecord[]>([]);
|
||||
const formModel = ref(generateFormModel());
|
||||
const state = reactive({
|
||||
addModalVisible: false,
|
||||
deployModalVisible: false,
|
||||
selectedUid: '',
|
||||
});
|
||||
|
||||
const fetchData = async (
|
||||
params: AppleCardParams = { current: 1, pageSize: 20 }
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const {
|
||||
data: { list, total },
|
||||
} = await queryAppleCardList(params);
|
||||
renderData.value = list;
|
||||
pagination.current = params.current;
|
||||
pagination.total = total;
|
||||
} catch (err) {
|
||||
// you can report use errorHandler or other
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (current: number) => {
|
||||
fetchData({ ...basePagination, current });
|
||||
};
|
||||
const search = () => {
|
||||
fetchData({
|
||||
...basePagination,
|
||||
...formModel.value,
|
||||
} as unknown as AppleCardParams);
|
||||
};
|
||||
const reset = () => {
|
||||
formModel.value = generateFormModel();
|
||||
};
|
||||
const showAddModel = () => {
|
||||
state.addModalVisible = true;
|
||||
};
|
||||
const changeStatus = async (
|
||||
record: MerchantConfigResRecord,
|
||||
status: string | number | boolean
|
||||
) => {
|
||||
try {
|
||||
await switchMerchantStatus({
|
||||
merchantUid: record.merchantUid,
|
||||
status: status as string,
|
||||
});
|
||||
search();
|
||||
} finally {
|
||||
// /
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => state.addModalVisible,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
search();
|
||||
}
|
||||
}
|
||||
);
|
||||
const showDeploy = (uid: string) => {
|
||||
state.deployModalVisible = true;
|
||||
state.selectedUid = uid;
|
||||
};
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user