Merge branch 'feature/position-type' of Web/ad-alliance into main

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)
@@ -46,7 +52,7 @@ export default function ContentTable ({
     {
       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) => {

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

@@ -1,6 +1,6 @@
-export const adTypes:MapType<string> =  {
-  0: '视频广告',
-  1: '图片广告'
-}
+// 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, 
@@ -29,6 +31,7 @@ export function AdManage(){
   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(()=>{

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/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 }
+