H5活动

config/routes.js

@@ -282,7 +282,7 @@ export default [
               },
               {
                 path: '/activity/drainage/DrainageList',
-                name: '全网投放引流',
+                name: 'H5活动',
                 component: './activity/drainage/DrainageList',
               },
               {
@@ -291,6 +291,12 @@ export default [
                 hideInMenu: true,
                 component: './activity/drainage/Detail',
               },
+              {
+                path: '/activity/drainage/DetailDrainage',
+                name: 'H5详情',
+                hideInMenu: true,
+                component: './activity/drainage/DetailDrainage',
+              },
               {
                 path: '/activity/helpActivity/detailActivity',
                 name: '活动详情',

src/layouts/BasicLayout.jsx

@@ -14,7 +14,7 @@ import RightContent from '@/components/GlobalHeader/RightContent';
 import RenderAuthorize from '@/components/Authorized';
 import { isAntDesignPro } from '@/utils/utils';
 import logo from '../assets/logo.png';
-  
+
 const footerRender = () => {
   return (
     <div
@@ -24,7 +24,13 @@ const footerRender = () => {
         fontSize: '30px',
         fontFamily: 'monospace',
         fontWeight: '200',
+        // height:'200px',
         color: 'rgba(102, 102, 102, 1)',
+        // position: 'fixed',
+        // bottom: '0',
+        // right: '0',
+        // marginTop: '20px',
+        // width:'100%'
       }}
     >
       Copy Right @ 知与行
@@ -42,7 +48,7 @@ const menuHeaderRender = (logo, title) => {
 
 const BasicLayout = props => {
   const { dispatch, children, settings } = props;
-  
+
   useEffect(() => {
     if (dispatch && !props.user.currentUser.userId) {
       dispatch({
@@ -53,7 +59,7 @@ const BasicLayout = props => {
       });
     }
   }, []);
-  
+
   const Authorized = RenderAuthorize(props.user.currentUser.roles)
 
   const handleMenuCollapse = payload => {
@@ -68,7 +74,7 @@ const BasicLayout = props => {
   const findAuthority = (path) => {
     return ((props.user.menuList || []).filter(x => x.code === path)[0] || {}).roles
   }
-  
+
   /**
    * use Authorized check all menu item
    */
@@ -92,7 +98,7 @@ const BasicLayout = props => {
       menuItemRender={(menuItemProps, defaultDom) => {
         if (menuItemProps.isUrl) {
           return defaultDom;
-        }        
+        }
         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
       }}
       breadcrumbRender={(routers = []) => [

src/layouts/BlankLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 const Layout = ({ children }) => (
-  <PageHeaderWrapper style={{height:'49px',background:'rgba(240,240,240,1)',paddingTop:'15px'}}>
+  <PageHeaderWrapper style={{height:'auto',background:'rgba(240,240,240,1)',paddingTop:'15px'}}>
     <div
       style={{
         backgroundColor: '#fff',

src/pages/activity/drainage/DrainageList.jsx

@@ -64,6 +64,25 @@ const header = (props) => {
     });
   }
 
+  const toDrainageDetail = (drainageId) => () => {
+    router.push({
+      pathname: '/activity/drainage/DetailDrainage',
+      query: {
+        drainageId
+      },
+    });
+  }
+
+  const exchangeDrainage = drainage => () => {
+    request({ ...apis.activity.exchangeDrainage, urlData: { id: drainage.drainageId }, data: drainage }).then((data) => {
+      message.info('操作成功！')
+      gettaDrainage({ pageNum: 1, pageSize: 10 })
+    }).catch((err) => {
+      console.log(err)
+      message.info(err.msg || err.message)
+    })
+  }
+
   const columns = [
     {
       title: 'H5项目编号',
@@ -85,23 +104,23 @@ const header = (props) => {
       align: 'center',
       render: (text, datas) => <>
 
-        <div style={{ color: '#66B3FF' }} onClick={() => addshowModal(datas)} >{datas.name}</div>
+        <div style={{ color: '#66B3FF', cursor: 'pointer' }} onClick={toDrainageDetail(datas.drainageId)}>{datas.name}</div>
 
       </>
     },
     {
-      title: 'appid',
-      dataIndex: 'appid',
-      key: 'appid',
+      title: '链接地址',
+      dataIndex: 'h5Address',
+      key: 'h5Address',
       align: 'center',
       // render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>, 
     },
     {
-      title: 'secret',
-      dataIndex: 'appSecret',
-      key: 'appSecret',
+      title: '上架状态',
+      dataIndex: 'status',
+      key: 'status',
       align: 'center',
-      // render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>,
+    render: (status) => <span>{status === 1 ? '已上架' : '已下架'}</span>,
     },
     {
       title: '新建时间',
@@ -115,7 +134,7 @@ const header = (props) => {
       ),
     },
     {
-      title: '截止时间',
+      title: '自动下架时间',
       dataIndex: 'endDate',
       key: 'endDate',
       align: 'center',
@@ -138,27 +157,33 @@ const header = (props) => {
       align: 'center',
       render: (text, datas) => (
         <>
-          <AuthButton name="admin.customer.recommend.edit.id.put" noRight={null}>
-            <span style={{ right: '20px', top: '20px', fontSize: ' 0.106rem', zIndex: 1, color: '#FF7E48', cursor: 'pointer' }} onClick={toEditList(datas)}>
-              查看详情
-            </span>
-          </AuthButton>
+          <span style={{ right: '20px', bottom: ' 10px', fontSize: ' 0.106rem', color: '#FF7E48', cursor: 'pointer'}} onClick={() => addshowModal(datas)}>
+            编辑
+          </span>
           <AuthButton name="admin.taDrainage.id.delete" noRight={null}>
             <span style={{ right: '20px', bottom: ' 10px', fontSize: ' 0.106rem', color: '#FF7E48', cursor: 'pointer', marginLeft: 20 }} onClick={deleteDrainage(datas.drainageId)}>
               删除
             </span>
           </AuthButton >
+          <span style={{ right: '20px', bottom: ' 10px', fontSize: ' 0.106rem', color: '#FF7E48', cursor: 'pointer', marginLeft: 20 }} onClick={exchangeDrainage(datas)}>
+            {datas.status === 1 ? '下架' : '上架'}
+          </span>
+          <AuthButton name="admin.customer.recommend.edit.id.put" noRight={null}>
+            <span style={{ right: '20px', top: '20px', fontSize: ' 0.106rem', zIndex: 1, color: '#FF7E48', cursor: 'pointer', marginLeft: 20  }} onClick={toEditList(datas)}>
+              数据
+            </span>
+          </AuthButton>
         </>
       ),
     },
   ];
   const Forms = props => {
     const { formsDate } = props
-    useEffect(() => {
-      if (formsDate) {
-        props.form.setFieldsValue({ ...formsDate, endDate: formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm') : null })
-      }
-    }, [formsDate])
+    // useEffect(() => {
+    //   if (formsDate) {
+    //     props.form.setFieldsValue({ ...formsDate, endDate: formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm') : null })
+    //   }
+    // }, [formsDate])
 
     const [hiddenStatus, setHiddenStatus] = useState(formsdate.isMiniapp)
     
@@ -238,8 +263,13 @@ const header = (props) => {
 
     return <Form {...formItemLayout} onSubmit={handleSubmit}>
 
-      <Form.Item label="是否投放小程序端">
-        {getFieldDecorator('isMiniapp')(
+      <Form.Item label="是否投放小程序端" help='选择是后,该活动可投放至小程序的轮播位以及开屏广告'>
+        {getFieldDecorator('isMiniapp',{
+          initialValue : formsDate.isMiniapp ? 1 : 0,
+          rules: [
+            { required: true, message: '请选择是否投放小程序' },
+          ],
+        })(
           <Radio.Group onChange={changeMiniapp}>
             <Radio value={1}>是</Radio>
             <Radio value={0}>否</Radio>
@@ -247,14 +277,21 @@ const header = (props) => {
         )}
       </Form.Item>
       <Form.Item label="H5项目名称">
-        {getFieldDecorator('name')(
+        {getFieldDecorator('name',{initialValue : formsDate.name,
+          rules: [
+            { required: true, message: '请输入H5项目名称' },
+          ],
+        })(
           <Input
             placeholder="请输入H5项目名称"
           />,
         )}
       </Form.Item>
-      <Form.Item label="截止时间">
-        {getFieldDecorator('endDate')(
+      <Form.Item label="下架时间">
+        {getFieldDecorator('endDate',{initialValue : formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm') : null,
+          rules: [
+            { required: true, message: '请输入下架时间' },
+          ]})(
           <DatePicker
           // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
           // placeholder={formsdate.endDate}
@@ -263,23 +300,38 @@ const header = (props) => {
         )}
       </Form.Item>
       {hiddenStatus && (<Form.Item label="活动链接地址">
-        {getFieldDecorator('h5Address')(
+        {getFieldDecorator('h5Address',{initialValue : formsDate.h5Address,
+          rules: [
+            { required: true, message: '请输入H5活动链接地址' },
+          ]})(
           <Input
             placeholder="请输入H5活动链接地址"
           />,
         )}
       </Form.Item>)}
       {hiddenStatus && (<Form.Item label="分享设置" help="建议图片尺寸：750*600px，比例5:4,格式：jpg">
-          {getFieldDecorator('shareImg')(<ImageUploader />)}
+          {getFieldDecorator('shareImg',{initialValue : formsDate.shareImg,
+          rules: [
+            { required: true, message: '请选择分享图片' },
+          ]})(<ImageUploader />)}
       </Form.Item>)}
-      {hiddenStatus && (<Form.Item label="活动分享标题">
-        {getFieldDecorator('shareTitle')(
+      {hiddenStatus && (<Form.Item label="活动分享语">
+        {getFieldDecorator('shareTitle',{initialValue : formsDate.shareTitle,
+          rules: [
+            { required: true, message: '请输入活动分享语' },
+          ]})(
           <Input
             placeholder="H5活动分享标题，不超过30字符"
             maxLength="30"
           />,
         )}
       </Form.Item>)}
+      {hiddenStatus && (<Form.Item label="中间页飞机图" help="建议图片尺寸：750*1667px，比例9:20,格式：jpg。图片底部不要放置关键信息。">
+          {getFieldDecorator('middleImg',{initialValue : formsDate.middleImg,
+          rules: [
+            { required: true, message: '请选择中间页飞机图' },
+          ]})(<ImageUploader />)}
+      </Form.Item>)}
       <Form.Item {...tailFormItemLayout}>
         <AuthButton name="admin.taDrainage.id.put" noRight={null}>
           <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
@@ -362,6 +414,12 @@ const header = (props) => {
     });
   }
 
+  //打开新页面
+  const openIndexImg = () => {
+    const newWin=window.open('about:blank');
+    newWin.location.href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3632677651,3179755979&fm=26&gp=0.jpg"
+  }
+  
   const { getFieldDecorator } = props.form;
   const { visible, confirmLoading, ModalText, title } = date;
   return (
@@ -393,6 +451,14 @@ const header = (props) => {
               <Option value="0">否</Option>
             </Select>,
           )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('status')(
+            <Select style={{ width: '180px' }} placeholder="上架状态">
+              <Option value="1">已上架</Option>
+              <Option value="0">已下架</Option>
+            </Select>,
+          )}
         </Form.Item>
           <Form.Item >
             <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
@@ -406,6 +472,7 @@ const header = (props) => {
         <AuthButton name="admin.taDrainage.add.post" noRight={null}>
           <Button type="danger" className={styles.addBtn} onClick={showModal}>新增</Button>
         </AuthButton>
+          <span style={{ color: '#66B3FF', cursor: 'pointer', marginLeft: 20 }} onClick={openIndexImg}>什么是H5活动？</span>
         <Modal
           title={title}
 

src/pages/activity/drainage/detailDrainage.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import apis from '../../../services/apis';
+import moment from 'moment';
+import router from 'umi/router';
+import request from '../../../utils/request'
+import AuthButton from '@/components/AuthButton';
+
+const cancelPage = () => {
+  router.go(-1)
+}
+
+const BasicForm = props => {
+  const { drainageId } = props.location.query
+  const [data, setData] = useState({})
+
+  useEffect(() => {
+    request({...apis.activity.detailDrainage,urlData: { id: drainageId }}).then((data) => {
+      setData(data);
+    })
+  }, [])
+
+  const Basic = Form.create({ name: 'BasicForm' })(BasicForm);
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 8 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 16 },
+    },
+  };
+  return (
+    <>
+      <Form  {...formItemLayout}>
+        <Form.Item label="H5活动编号：">
+          <span>{data.drainageId}</span>
+        </Form.Item>
+        <Form.Item label="是否投放小程序：">
+        <span>{data.isMiniapp ? "是" : "否"}</span>
+        </Form.Item>
+        <Form.Item label="H5活动名称：">
+        <span>{data.name}</span>
+        </Form.Item>
+        <Form.Item label="链接地址：">
+        <span>{data.h5Address}</span>
+        </Form.Item>
+        <Form.Item label="上架状态：">
+        <span>{data.status === 1 ? "已上架" : "未上架"}</span>
+        </Form.Item>
+        <Form.Item label="新建时间：">
+        <span>{moment(data.createDate).format('YYYY-MM-DD HH:mm:ss')}</span>
+        </Form.Item>
+        <Form.Item label="自动下架时间：">
+        <span>{moment(data.endDate).format('YYYY-MM-DD HH:mm:ss')}</span>
+        </Form.Item>
+        <Form.Item label="appid：">
+        <span>{data.appid}</span>
+        </Form.Item>
+        <Form.Item label="secret：">
+        <span>{data.appSecret}</span>
+        </Form.Item>
+        <Form.Item label="参与人数：">
+        <span>{data.enlistNum}</span>
+        </Form.Item>
+        {data.isMiniapp && <Form.Item label="分享语：">
+        <span>{data.shareTitle}</span>
+        </Form.Item>}
+        {data.isMiniapp && <Form.Item label="分享图：">
+        <img src={data.shareImg} width="75px" height="60px" />
+        </Form.Item>}
+        {data.isMiniapp && <Form.Item label="中间页飞机图：">
+        <img src={data.middleImg} width="75px" height="166.7px" />
+        </Form.Item>}
+        <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
+          <Button onClick={() => cancelPage()}>
+            取消
+          </Button>
+        </Form.Item>
+      </Form>
+    </>
+  );
+}
+
+export default BasicForm

src/services/apis.js

@@ -478,6 +478,11 @@ export default {
         method: 'GET',
         action: 'admin.taDrainage.get',
       },
+      detailDrainage: {
+        url: `${prefix}/taDrainage/:id`,
+        method: 'GET',
+        action: 'admin.taDrainage.get',
+      },
       addtaDrainage: {
         url: `${prefix}/taDrainage/add`,
         method: 'POST',
@@ -488,6 +493,11 @@ export default {
         method: 'DELETE',
         action: 'admin.taDrainage.id.delete',
       },
+      exchangeDrainage: {
+        url: `${prefix}/taDrainage/exchange/:id`,
+        method: 'PUT',
+        action: 'admin.taDrainage.id.put',
+      },
       updatetaDrainage: {
         url: `${prefix}/taDrainage/:id`,
         method: 'PUT',