feat: 添加营销能力

config/config.ts

@@ -56,7 +56,7 @@ export default defineConfig({
     // 所有less文件都会引入的变量
     modifyVars: {
       // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
-      'hack': `true; @import "~@/global/styles/theme.less";`
+      'hack': `true; @import "~@/global/styles/theme.less";@import "~@/global/styles/index.less";`
     }
   },
   dynamicImport: {

src/global/config/global.d.ts

@@ -41,7 +41,7 @@ export interface ShopInfo {
 	describe: string;
 	state: number;
 	url: string;
-	isDefault: number;
+	isDefault?: any;
 }
 
 export interface OrderMode {
@@ -60,7 +60,7 @@ export interface SiteInfo {
 	name: string;
 	logo: string;
 	siteUrl: string;
-	symbol: string;
+	symbol?: any;
 }
 
 export interface Site {

src/pages/marketing/marketingActivitiesManagement/activePage/add/index.tsx

 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import React from 'react';
+import React, { useState } from 'react';
 import NiceForm from '@/components/NiceForm';
 import RangeTime  from '@/components/RangeTime/FormilyRangeTime';
 import { Button, Space } from 'antd'
@@ -9,6 +9,7 @@ import ReutrnEle from '@/components/ReturnEle';
 import { history } from 'umi';
 import { BgColorsOutlined, SaveOutlined } from '@ant-design/icons';
 import { createFormActions } from '@formily/antd';
+import FormilyTemplateDrawer from '../components/TemplateDrawer/formilyTemplateDrawer';
 const actions = createFormActions()
 
 const Add = () => {
@@ -34,9 +35,17 @@ const Add = () => {
           onSubmit={onSubmit}
           schema={schema}
           actions={actions}
-          components={{RangeTime}}
+          components={{RangeTime, FormilyTemplateDrawer}}
+          value={{
+            template: {
+              id: 1,
+              template: '嘻嘻嘻',
+              image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201601%2F19%2F20160119142753_dB5a3.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630132740&t=c7f669f0e84521b179cb6776f98ffccb'
+            }
+          }}
         />
       </div>
+
     </PageHeaderWrapper>
   )
 }

src/pages/marketing/marketingActivitiesManagement/activePage/add/schema.tsx

@@ -33,8 +33,8 @@ const schema: ISchema = {
               required: true,
             },
             template: {
-              type: 'string',
-              enum: [],
+              type: 'object',
+              "x-component": 'FormilyTemplateDrawer',
               title: '活动模板',
               required: true,
             },

src/pages/marketing/marketingActivitiesManagement/activePage/components/ActivityTemplateItem/index.less

+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+
+  .info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+
+    .img {
+      width: 64px;
+      height: 64px;
+      margin: 0 16px;
+      border-radius: 4px;
+      background-color: red;
+      overflow: hidden;
+    }
+    .content {
+      display: flex;
+      flex-direction: column;
+
+      & > h1 {
+        color: #252D37;
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
+      & > p {
+        color: #909399;
+        font-size: 12px;
+        margin-bottom: 0px;
+      }
+    }
+    .tag {
+      margin-left: auto;
+    }
+  }
+
+  & + .container {
+    margin-top: 8px;
+  }
+}

src/pages/marketing/marketingActivitiesManagement/activePage/components/ActivityTemplateItem/index.tsx

+import StatusTag from '@/components/StatusTag';
+import { Checkbox } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+interface Iprops {
+  checked: boolean
+  onSelect?: ((selected: boolean, postData: any) => void) | null,
+  dataSource: {
+    id: number,
+  } & {
+    [key: string]: string | number
+  }
+}
+
+const ActivityTemplateItem: React.FC<Iprops> = (props: Iprops) => {
+  const { checked, onSelect = null, dataSource } = props;
+  const onChange = (selected: boolean) => {
+    const postData = dataSource;
+    onSelect?.(selected, postData);
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.checkbox}>
+        <Checkbox checked={checked} onChange={(e) => onChange(e.target.checked)}></Checkbox>
+      </div>
+      <div className={styles.info}>
+        <img className={styles.img} />
+        <div className={styles.content}>
+          <h1>模板001-APP 中秋主题活动模板</h1>
+          <p>此模板转为中秋节日风格设计，适用于中秋专题活动</p>
+        </div>
+        <div className={styles.tag}>
+          <StatusTag type="primary" title="app" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ActivityTemplateItem

src/pages/marketing/marketingActivitiesManagement/activePage/components/TemplateDrawer/formilyTemplateDrawer.tsx

+import React from 'react';
+import { Button } from 'antd';
+import { useToggle } from '@umijs/hooks';
+import TemplateDrawer from '.';
+import styles from './index.less'
+
+type ValueType = {
+  id: number,
+  template: string,
+  image: string
+}
+
+interface Iprops {
+  value: ValueType | null,
+  mutators: {
+    change: (params: ValueType) => void
+  },
+}
+
+const FormilyTemplateDrawer: React.FC<Iprops> & { isFieldComponent: boolean } = (props: Iprops) => {
+  const { state: visible, toggle: setVisible } = useToggle(false);
+  const { value = null, mutators } = props
+
+  const onConfirm = (record: ValueType) => {
+    mutators.change(record);
+    setVisible(false);
+  }
+
+  return (
+    <div className={styles.container}>
+      <img className={styles.image} src={value?.image}/>
+      <span className={styles.templateName}>{value?.template}</span>
+      <div className={styles.btn}>
+        <Button onClick={() => setVisible(true)}>选择</Button>
+      </div>
+      <TemplateDrawer
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        onSubmit={onConfirm}
+        // value={templateRecord}
+        value={value}
+      />
+    </div>
+  )
+}
+
+FormilyTemplateDrawer.isFieldComponent = true
+
+export default FormilyTemplateDrawer

src/pages/marketing/marketingActivitiesManagement/activePage/components/TemplateDrawer/index.less

+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .image {
+    width: 32px;
+    height: 32px;
+    // background-color: red;
+    overflow: hidden;
+    border-radius: 4px;
+    margin-right: 8px;
+  }
+
+  .templateName {
+    font-size: 12px;
+    color: #252d37;
+  }
+
+  .btn {
+    margin-left: auto;
+  }
+}

src/pages/marketing/marketingActivitiesManagement/activePage/components/TemplateDrawer/index.tsx

+import React, { useEffect, useMemo, useState } from 'react';
+import { Drawer, Space, Button } from 'antd';
+import ActivityTemplateItem from '../ActivityTemplateItem';
+
+interface Iprops {
+  visible: boolean,
+  onSubmit?: ((data: any) => void) | null,
+  onCancel?: (() => void)| null,
+  submitLoading?: boolean,
+  value?: {
+    id: number,
+  } | null
+}
+
+const data = [
+  {
+    id: 1,
+    template: '哈哈哈',
+    content: '母鸡啊'
+  },
+  {
+    id: 2,
+    template: '哈哈哈1',
+    content: '母鸡啊2'
+  }
+]
+
+const TemplateDrawer: React.FC<Iprops> = (props: Iprops) => {
+  const { visible, onSubmit = null, onCancel = null, submitLoading = false, value = null } = props;
+  const [selectRow, setSelectRow] = useState<null | {id: number}>(value)
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    setSelectRow(value)
+  }, [visible, value])
+
+  const drawerStyle = useMemo(() => {
+    return {
+      backgroundColor: '#FAFBFC'
+    }
+  }, [])
+
+  /** 这里需要修改类型 */
+  const handleSubmit = () => {
+    onSubmit?.(selectRow as any);
+  }
+
+  const handleCancel = () => {
+    setSelectRow(value)
+    onCancel?.();
+  }
+
+  const onSelect = (selected: boolean, postData: { id: number }) => {
+    if (!selected) {
+      return;
+    }
+
+    setSelectRow(postData)
+  }
+
+  return (
+    <Drawer
+      title="选择活动模板"
+      width={800}
+      visible={visible}
+      drawerStyle={drawerStyle}
+      headerStyle={drawerStyle}
+      footerStyle={drawerStyle}
+      footer={
+        <div style={{display: 'flex', flexDirection: 'row-reverse'}}>
+          <Space>
+            <Button onClick={handleCancel}>取消</Button>
+            <Button type="primary" loading={submitLoading} onClick={handleSubmit}>确定</Button>
+          </Space>
+        </div>
+      }
+    >
+      {
+        data.map((_item) => {
+          const checked = selectRow?.id === _item.id;
+          return (
+            <ActivityTemplateItem key={_item.id} dataSource={_item} checked={checked} onSelect={onSelect}/>
+          )
+        })
+      }
+    </Drawer>
+  )
+}
+
+export default TemplateDrawer;

src/pages/marketing/marketingActivitiesManagement/activePage/index.tsx

@@ -3,7 +3,7 @@ import { Card, Input, Button, Pagination } from 'antd';
 import SearchPannel from './components/SearchPannel';
 import styles from './index.less';
 import { PlusOutlined } from '@ant-design/icons';
-import ActiveItem from './components/ActiveItem';
+import ActivityItem from './components/ActivityItem';
 import { unstable_batchedUpdates } from 'react-dom';
 import { useDebounce } from '@umijs/hooks';
 
@@ -56,7 +56,7 @@ const ActivePage = () => {
             list.map((_item, key) => {
               return (
                 <div className={styles.tableItem} key={key} >
-                  <ActiveItem />
+                  <ActivityItem />
                 </div>
               )
             })

src/pages/message/addMessage.tsx

@@ -39,7 +39,7 @@ const AddMessage: React.FC<{}> = () => {
     }
     const { data, code } = await PublicApi.postMessageMessagePlatformSend(postData);
     setLoading(false)
-    if(data.code === 1000) {
+    if(code === 1000) {
       history.push('/message/messageList');
     }
   }