src/lib/http/api.ts

@@ -26,6 +26,7 @@ export const adList = `${import.meta.env.VITE_API_URL}/ad/union/ad/findByConditi
 export const createAd = `${import.meta.env.VITE_API_URL}/ad/union/ad/add`
 export const openAd = `${import.meta.env.VITE_API_URL}/ad/union/ad/open`
 export const closeAd = `${import.meta.env.VITE_API_URL}/ad/union/ad/close`
+export const getAdType = `${import.meta.env.VITE_API_URL}/ad/union/ad/getAdType`
 
 export default {
 }

src/pages/Manage/components/AdManage/components/ContentTable/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import { throttle } from 'lodash'
 import styles from './index.module.css'
-import { adTypes } from '../../const'
+import adTypeState from '@src/store/globalStates/adTypeState'
 import type { ColumnsType } from 'antd/es/table'
 import type { 
   PropsType, RowDataType, 
@@ -20,6 +20,12 @@ export default function ContentTable ({
   onSwitchStatus,
 }:PropsType) {
   const [height, setHeight] = useState(500)
+  const adTypes = adTypeState.useGlobalState()  
+  const adTypeMap = Object.entries(adTypes || {}).reduce((obj,[name,{code}])=>{
+    obj[code] = name
+    return obj
+  }, {} as MapType<string>)
+
   useEffect(()=>{
     const otherHeight = 60 + 64 + 48 + 48 + 55 // 预留的高度
     setHeight(window.innerHeight - otherHeight)
@@ -32,11 +38,11 @@ export default function ContentTable ({
  
   const columns:ColumnsType<RowDataType> = [
     {
-      title: '广告名称',
+      title: '广告位名称',
       dataIndex: 'unionAdName',
     },
     {
-      title: '广告ID',
+      title: '广告位ID',
       dataIndex: 'unionAdId',
     },
     {
@@ -44,9 +50,9 @@ export default function ContentTable ({
       dataIndex: 'unionAppName',
     },
     {
-      title: '广告类型',
+      title: '广告位类型',
       dataIndex: 'unionAdPosition',
-      render: (v) => adTypes[v] || v
+      render: (v) => adTypeMap[v] || v
     },
     {
       title: '状态',

src/pages/Manage/components/AdManage/components/CreateModal/index.tsx

@@ -1,6 +1,6 @@
 import { Modal, Form, Select, Input, Radio } from 'antd'
 import { forwardRef, useImperativeHandle, useState } from 'react'
-import { adTypes } from '../../const'
+import adTypeState from '@src/store/globalStates/adTypeState'
 import styles from './index.module.css'
 import type { RowDataType } from '../ContentTable/types'
 import type { 
@@ -9,9 +9,8 @@ import type {
 } from './types'
 
 const { Item, useForm } = Form
-const adTypesOptions:RadioOptionsType = Object.entries(adTypes).map(([value,label])=>({value: +value,label}))
 const initialValues = {
-  unionAdPosition: 0, // 广告类型
+  unionAdPosition: 0, // 广告位类型
 }
 
 const CreateModal = forwardRef(({ allAppList, onCreate, onUpdate }:PropsType, ref) => {
@@ -20,8 +19,10 @@ const CreateModal = forwardRef(({ allAppList, onCreate, onUpdate }:PropsType, re
   const [form] = useForm()
   const [editRow, setEditRow] = useState<RowDataType>()
   const isEdit = action === 'edit'
-  const title = isEdit ? '编辑广告' : '新建广告'
+  const title = isEdit ? '编辑广告位' : '新建广告位'
   const allAppOptions:OptionsItemType[] = allAppList.map(({id, unionAppName})=>({label:unionAppName, value:id}))
+  const adTypes = adTypeState.useGlobalState()  
+  const adTypesOptions:RadioOptionsType = Object.entries(adTypes || {}).map(([label,{code}])=>({value: +code,label}))
 
   useImperativeHandle(ref,()=>({
     open: (editRow?:RowDataType) => {
@@ -30,8 +31,8 @@ const CreateModal = forwardRef(({ allAppList, onCreate, onUpdate }:PropsType, re
       if (editRow) {
         const {
           applicationId, // 应用id
-          unionAdName, // 广告名称
-          unionAdPosition // 广告类型
+          unionAdName, // 广告位名称
+          unionAdPosition // 广告位类型
         } =  editRow 
         form.setFieldsValue({
           applicationId,
@@ -97,15 +98,15 @@ const CreateModal = forwardRef(({ allAppList, onCreate, onUpdate }:PropsType, re
         </Item>
         <Item
           name='unionAdName'
-          label='广告名称'
-          rules={[{ required: true, message: '请输入广告名称' }]}
+          label='广告位名称'
+          rules={[{ required: true, message: '请输入广告位名称' }]}
         >
-          <Input placeholder='请输入广告名称' showCount maxLength={ 20 } />
+          <Input placeholder='请输入广告位名称' showCount maxLength={ 20 } />
         </Item>
         <Item
           name='unionAdPosition'
-          label='广告类型'
-          rules={[{ required: true, message: '请选择广告类型' }]}
+          label='广告位类型'
+          rules={[{ required: true, message: '请选择广告位类型' }]}
         >
           <Radio.Group options={adTypesOptions} />
         </Item>

src/pages/Manage/components/AdManage/components/HeaderFilter/index.tsx

@@ -22,7 +22,7 @@ export default function HeaderFilter({ onCreate }:PropsType) {
               type='primary'
               icon={<PlusOutlined />} 
               onClick={createApp}
-            >新建广告</Button>
+            >新建广告位</Button>
           </>
         }
       />

src/pages/Manage/components/AdManage/const.ts

@@ -1,5 +1,6 @@
-export const adTypes:MapType<string> =  {
-  0: '视频插屏广告'
-}
+// export const adTypes:MapType<string> =  {
+//   0: '视频广告',
+//   1: '图片广告'
+// }
 
 

src/pages/Manage/components/AdManage/index.tsx

@@ -3,12 +3,14 @@ import HeaderFilter from './components/HeaderFilter'
 import ContentTable from './components/ContentTable'
 import CreateModal from './components/CreateModal'
 import { useGlobalStateUpdate } from '@src/store/globalStates/loadingState'
+import { useGlobalStateUpdate as useAdTypeStateUpdate } from '@src/store/globalStates/adTypeState'
 import { 
   createAd as createAdRequest,
   getAdList,
   openAd,
   clsoeAd,
-  getAllAppList
+  getAllAppList,
+  getAdTypesMap
 } from './request'
 import type { 
   RowDataType, 
@@ -18,17 +20,18 @@ import type {
   RefType, 
   FormDataType 
 } from './components/CreateModal/types'
-import { AllAppListItemType } from './types'
+import type { AllAppListItemType } from './types'
 
 
 
 export function AdManage(){
   const [tableData, setTableData] = useState<RowDataType[]>([])
   const [total, setTotal] = useState(0)
-  const [paginationParams, setPaginationParams] = useState<PaginationParamsType>({ pageNumber: 1, pageSize: 10})
+  const [paginationParams, setPaginationParams] = useState<PaginationParamsType>({ pageNumber:1, pageSize:10})
   const [allAppList, setAllAppList] = useState<AllAppListItemType[]>([])
   const createModalRef = useRef<RefType>()
   const setloading = useGlobalStateUpdate()
+  const setAdTypes = useAdTypeStateUpdate()
 
   useEffect(()=>{
     getAllAppList().then(res=>{
@@ -36,6 +39,12 @@ export function AdManage(){
         setAllAppList(res)
       }
     })
+
+    getAdTypesMap().then(res=>{
+      if (res) {
+        setAdTypes(res)
+      }
+    })
   },[])
 
   useEffect(()=>{
@@ -58,7 +67,7 @@ export function AdManage(){
     setloading(false)
   }
 
-  const onPaginationChange =async (params: PaginationParamsType) => {
+  const onPaginationChange =async (params:PaginationParamsType) => {
     setPaginationParams(params)
   }
 
@@ -67,17 +76,15 @@ export function AdManage(){
   }
 
   const onSwitchStatus = async ({row, checked}:{row:RowDataType, checked:boolean}) => {
-    console.log(row, checked)
     setloading(true)
     const res =  checked ? await openAd(row.id) : await clsoeAd(row.id)
     setloading(false)
     if (res) {
       getTableData()
     }
-
   }
 
-  const createAd = async (form: FormDataType, cb:EventFunctionType<[]>) => {
+  const createAd = async (form:FormDataType, cb:EventFunctionType<[]>) => {
     setloading(true)
     const res = await createAdRequest(form)
     setloading(false)
@@ -87,7 +94,7 @@ export function AdManage(){
     }
   }
 
-  const updateAd = (form: RowDataType,  cb:EventFunctionType<[]>) => {
+  const updateAd = (form:RowDataType,  cb:EventFunctionType<[]>) => {
     console.log('更新',form)
     // TODO 更新接口
     cb()

src/pages/Manage/components/AdManage/request.ts

@@ -5,11 +5,13 @@ import {
   createAd as createAdPath, 
   openAd as openAdPath,
   closeAd as closeAdPath,
-  allAppList
+  allAppList,
+  getAdType
 } from '@src/lib/http/api'
 import type { 
   AdListRequestParamsType, 
   AllAppListItemType,
+  AdTypesMapType
 } from './types'
 import type { RowDataType } from './components/ContentTable/types'
 import type { FormDataType } from './components/CreateModal/types'
@@ -66,3 +68,12 @@ export const getAllAppList = async (): Promise<AllAppListItemType[]|undefined> =
     message.error(msg ||'获取全部应用列表失败')
   } catch (error) { /* empty */ }
 }
+
+export const getAdTypesMap = async (): Promise<AdTypesMapType |undefined> => {
+  try {
+    const res = await http.get(getAdType)
+    const {data, code, msg} = res as ApiResponse<AdTypesMapType>
+    if (code===0) return data
+    message.error(msg ||'获取广告位列表失败')
+  } catch (error) { /* empty */ }
+}

src/pages/Manage/components/AdManage/types.d.ts

@@ -12,4 +12,15 @@ export interface AllAppListItemType {
     createTime: string, // 创建时间
     thirdMpAppId?: string, // 小程序appid
     thirdAppDomain?: string // H5链接
-}
+}
+
+export interface AdTypeItemType {
+    name: string,
+    code: number,
+    creativePattern: number[]
+}
+
+export type AdTypesMapType = MapType<{
+    code: number,
+    creativePattern: number[]
+}>

src/pages/Manage/index.tsx

@@ -55,7 +55,7 @@ const items: MenuItem[] = [
         key: '/manage/app-manage'
       },
       {
-        label: '广告列表',
+        label: '广告位列表',
         key: '/manage/ad-manage',
       }
     ]

src/store/GlobalStateProvider.tsx

@@ -2,13 +2,16 @@ import { PropsWithChildren} from 'react'
 import loadingState from './globalStates/loadingState'
 import userState from './globalStates/userState'
 import userAuthState from './globalStates/userAuthState'
+import adTypeState from './globalStates/adTypeState'
 
 export default function GlobalStateProvider({children}: PropsWithChildren) {
   return (
     <userAuthState.GlobalStateProvider>
       <loadingState.GlobalStateProvider>
         <userState.GlobalStateProvider>
-          {children}
+          <adTypeState.GlobalStateProvider>
+            {children}
+          </adTypeState.GlobalStateProvider>
         </userState.GlobalStateProvider>
       </loadingState.GlobalStateProvider>
     </userAuthState.GlobalStateProvider>

src/store/globalStates/adTypeState.ts

@@ -0,0 +1,8 @@
+import createGlobalStateHook from '../stateCreater'
+import type { AdTypesMapType } from '@src/pages/Manage/components/AdManage/types'
+
+const {useGlobalState,useGlobalStateUpdate,GlobalStateProvider} = createGlobalStateHook<AdTypesMapType>({} as AdTypesMapType)
+
+export default { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
+export { useGlobalState, useGlobalStateUpdate, GlobalStateProvider }
+