diff --git a/src/pages/app/plugin/index.tsx b/src/pages/app/plugin/index.tsx
new file mode 100644
index 0000000..a9d2e0f
--- /dev/null
+++ b/src/pages/app/plugin/index.tsx
@@ -0,0 +1,77 @@
+import {Button, Card, List, message, Select} from 'antd'
+import React, {useState} from 'react'
+import {useStyle} from './style'
+import {useAtomValue} from "jotai";
+import {appAllListAtom, appPluginBuyAtom, appPluginListAtom} from "@/store/app/package.ts";
+import ListPageLayout from "@/layout/ListPageLayout.tsx";
+import {DollarOutlined} from "@ant-design/icons";
+import {APP} from "@/types/app/package";
+
+const i18nPrefix = 'appPackages.list'
+
+const AppPackage = () => {
+
+ const {styles, cx} = useStyle()
+ const {data} = useAtomValue(appPluginListAtom)
+
+ const {mutate: buyPlugin, isPending: buyPending} = useAtomValue(appPluginBuyAtom)
+ const {data: allApp} = useAtomValue(appAllListAtom)
+
+ const [whitelistApp, setWhitelistApp] = useState(0);
+
+ const buy = (item: APP.IAppPlugin) => {
+ if (item.code == "traffic") {
+ buyPlugin({plugin_id: item.id, code: item.code})
+ } else if (item.code == "whitelist") {
+ if (whitelistApp == 0) {
+ message.warning('请先选择应用')
+ return
+ }
+ buyPlugin({plugin_id: item.id, code: item.code, app_id: whitelistApp})
+ }
+ }
+
+ return (
+
+ (
+
+
+ {allApp?.map((item) => (
+
+ ))}
+ ) : null,
+ ,
+ ]}
+ >
+ {item.description}
+
+
+ )}
+ />
+
+ )
+}
+
+export default AppPackage
\ No newline at end of file
diff --git a/src/pages/app/plugin/style.ts b/src/pages/app/plugin/style.ts
new file mode 100644
index 0000000..6255d3b
--- /dev/null
+++ b/src/pages/app/plugin/style.ts
@@ -0,0 +1,15 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
+ const prefix = `${prefixCls}-${token?.proPrefix}-appPackage-plugin-page`
+
+ const container = css`
+ .zcss-kfly0u{
+ background: transparent;
+ }
+ `
+
+ return {
+ container: cx(prefix, props?.className, container),
+ }
+})
\ No newline at end of file
diff --git a/src/service/app/package.ts b/src/service/app/package.ts
index 602bf19..844039f 100644
--- a/src/service/app/package.ts
+++ b/src/service/app/package.ts
@@ -28,6 +28,18 @@ const appPackage = {
getPkgStatus: async (params: any) => {
return await request.get(`/package/status`, { ...params })
},
+
+ getPluginList: async () => {
+ return await request.get>(`/package/plugin/list`)
+ },
+
+ getAppAllList: async () => {
+ return await request.get>(`/package/allList`)
+ },
+
+ buyPlugin: async (params: any) => {
+ return await request.post(`/package/plugin/buy`, { ...params })
+ },
}
export default appPackage
\ No newline at end of file
diff --git a/src/store/app/package.ts b/src/store/app/package.ts
index 8ae35b4..9627e00 100644
--- a/src/store/app/package.ts
+++ b/src/store/app/package.ts
@@ -114,3 +114,45 @@ export const packageAppAtom = atomWithMutation((get) => {
}
}
})
+
+/**
+ * 插件列表
+ */
+export const appPluginListAtom = atomWithQuery(() => {
+ return {
+ queryKey: [ 'appPlugin' ],
+ queryFn: async ({ queryKey: [ , ] }) => {
+ const list = await aPPServ.getPluginList()
+ return list.data
+ }
+ }
+})
+
+/**
+ * 插件购买
+ */
+export const appPluginBuyAtom = atomWithMutation(() => {
+ return {
+ mutationKey: [ 'appPlugin' ],
+ mutationFn: async (param: any) => {
+ const list = await aPPServ.buyPlugin(param)
+ return list.data
+ },
+ onSuccess: () => {
+ message.success('购买成功')
+ }
+ }
+})
+
+/**
+ * 获取所有应用
+ */
+export const appAllListAtom = atomWithQuery(() => {
+ return {
+ queryKey: [ 'appAllList' ],
+ queryFn: async ({ queryKey: [ , ] }) => {
+ const list = await aPPServ.getAppAllList()
+ return list.data.list
+ }
+ }
+})
diff --git a/src/types/app/package.d.ts b/src/types/app/package.d.ts
index 6def281..c1002a4 100644
--- a/src/types/app/package.d.ts
+++ b/src/types/app/package.d.ts
@@ -32,6 +32,13 @@ export namespace APP {
}
/**
+ * Bool类型返回结果
+ */
+ export interface IBaseArrRes {
+ list: T[];
+ }
+
+ /**
* 打包状态
*/
export interface IAppPkgStatus {
@@ -44,4 +51,24 @@ export namespace APP {
position: number;
total: number;
}
+
+ /**
+ * 打包状态
+ */
+ export interface IAppPlugin {
+ id: number;
+ name: string;
+ description: string;
+ status: number;
+ month_price: number;
+ quarter_price: number;
+ half_year_price: number;
+ year_price: number;
+ two_year_price: number;
+ three_year_price: number;
+ onetime_price: number;
+ reset_price: number;
+ extra: number; //备用字段,如果是流量套餐则是流量额度
+ code: string;
+ }
}
\ No newline at end of file