detail

src/pages/h5SampleManager/h5Sample/detail.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, InputNumber, Checkbox, Row, Col} from 'antd';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, InputNumber, Checkbox, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import XForm, { FieldTypes } from '../../../components/XForm';
 import router from 'umi/router';
@@ -18,33 +18,33 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 
 const header = props => {
-  const sampleId  = props.location.query.id;
+  const sampleId = props.location.query.id;
   const [demandData, setDemandData] = useState({})
   const [demandNum, setDemandNum] = useState()
 
   useEffect(() => {
     getDemandData(sampleId);
-  },[])
+  }, [])
 
   // 查询列表
   const getDemandData = (demandId) => {
-      request({ ...apis.taH5SampleManager.taH5SampleById, urlData: {id: sampleId} }).then((data) => {
-          setDemandData(data)
-          setDemandNum(data.demandNum)
-          props.form.setFieldsValue(data)
-      })
+    request({ ...apis.taH5SampleManager.taH5SampleById, urlData: { id: sampleId } }).then((data) => {
+      setDemandData(data)
+      setDemandNum(data.demandNum)
+      props.form.setFieldsValue(data)
+    })
   }
 
   // 跳转到编辑
   const toDetail = rowData => () => {
-    if(rowData) {
+    if (rowData) {
       router.push({
-      pathname: '/h5SampleManager/h5Sample/add',
-      query: {
-        id: sampleId,
-        sampleName: demandData.sampleName
-      },
-    });
+        pathname: '/h5SampleManager/h5Sample/add',
+        query: {
+          id: sampleId,
+          sampleName: demandData.sampleName
+        },
+      });
       return
     }
   }
@@ -52,7 +52,7 @@ const header = props => {
     router.go(-1)
   }
 
-  function viewDemand(){
+  function viewDemand() {
     router.push({
       pathname: '/h5SampleManager/h5Demand/list',
       query: {
@@ -67,55 +67,60 @@ const header = props => {
     message.info('复制成功')
   }
 
-  function handleSubmit (e) {
+  function handleSubmit(e) {
   }
 
-  function newTab(e){
+  function newTab(e) {
     console.log(e, 'eeeeeeee')
     const newWin = window.open('about:blank');
-    newWin.location.href= e
+    newWin.location.href = e
   }
 
   const { getFieldDecorator } = props.form;
 
   return (
     <>
-      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} style={{ position: 'relative' }} onSubmit={handleSubmit}>
         <Form.Item label="样例名">
           <span>{demandData.sampleName}</span>
         </Form.Item>
         {demandData.sampleTryLink != '' && demandData.sampleTryLink != null && <Form.Item label="样例体验链接">
-          <span>{demandData.sampleTryLink}</span><span style={{marginLeft:'10px'}}><a onClick={(e) => copyLink(demandData.sampleTryLink)} style={{ color: 'orange' }}> <img src={copyImg} height="16px" width="14px" /> 复制链接</a></span>
+          <span>{demandData.sampleTryLink}</span><span style={{ marginLeft: '10px' }}><a onClick={(e) => copyLink(demandData.sampleTryLink)} style={{ color: 'orange' }}> <img src={copyImg} height="16px" width="14px" /> 复制链接</a></span>
         </Form.Item>}
-        {demandData.sampleTryCode != '' && demandData.sampleTryCode != null &&<Form.Item label="样例体验小程序码/二维码" help="请使用微信扫码查看样例体验">
-            <img src={demandData.sampleTryCode} height="100px" width="120px" />
+        {demandData.sampleTryCode != '' && demandData.sampleTryCode != null && <Form.Item label="样例体验小程序码/二维码" help="请使用微信扫码查看样例体验">
+          <img src={demandData.sampleTryCode} height="100px" width="120px" />
         </Form.Item>}
-        {demandData.taContactList != null &&demandData.taContactList != ''   && <Form.Item label="联系人">
-            <span style={{color:'rgba(0, 0, 0, 0.45)', fontSize:'14px'}}>若您想在您的小程序举办类似活动，请联系以下联系人咨询，或直接点击底部的 提交需求 按钮下单，下单后与联系人沟通定制活动</span>
-            <DragableUploadImageList sampleId={sampleId}></DragableUploadImageList>
+        {demandData.taContactList != null && demandData.taContactList != '' && <Form.Item label="联系人">
+          <span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>若您想在您的小程序举办类似活动，请联系以下联系人咨询，或直接点击底部的 提交需求 按钮下单，下单后与联系人沟通定制活动</span>
+          <DragableUploadImageList sampleId={sampleId}></DragableUploadImageList>
         </Form.Item>}
         <Form.Item label="样例内容">
-            {demandData.sampleType === 'rich' ? getFieldDecorator('sampleContent')(<Wangedit contenteditable={false}/>) : getFieldDecorator('sampleContentLink')(<a href={demandData.sampleContentLink} target="_blank">{demandData.sampleContentLink}</a>)}
+          {demandData.sampleType === 'rich' ? getFieldDecorator('sampleContent')(<Wangedit contenteditable={false} />) : getFieldDecorator('sampleContentLink')(<a href={demandData.sampleContentLink} target="_blank">{demandData.sampleContentLink}</a>)}
         </Form.Item>
         <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
-          <div>
-          <Button type="primary"  onClick={toDetail(sampleId)} style={{marginRight:'20px'}}>
-            提交需求
+          <div style={{ margin: '0.16rem 0 0.06rem' }}>
+            <Button type="primary" onClick={toDetail(sampleId)} style={{ marginRight: '20px' }}>
+              提交需求
           </Button>
-          <Button danger  onClick={() => toCancel()} style={{marginLeft:'20px'}}>
-            取消
+            <Button danger onClick={() => toCancel()} style={{ marginLeft: '20px' }}>
+              取消
           </Button>
-          {demandNum != 0 && <span style={{marginLeft:'25%'}}>已有{demandNum}需求单> >
-            <Button danger  onClick={() => viewDemand()}>
-            查看已有需求单
-            </Button>
-            </span>
-          }
-            
           </div>
-          
-          
         </Form.Item>
+        <div style={{ position: 'absolute', right: '0', bottom: '-16px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', minWidth: '1.1rem', justifyContent: 'space-between' }}>我想办类似活动 <span style={{ color: '#EF273A', margin: '0 0.1rem' }}>>></span>
+            <Button type="primary" onClick={toDetail(sampleId)} >
+              提交需求
+              </Button>
+          </div>
+
+          {demandNum != 0 && <div style={{ display: 'flex', alignItems: 'center', minWidth: '1.1rem', justifyContent: 'space-between', marginTop: '10px' }}>已有{demandNum + '个'}需求单 <span style={{ margin: '0 0.1rem' }}>>></span>
+            <Button danger onClick={() => viewDemand()}>
+              查看需求
+            </Button>
+          </div>
+          }
+        </div>
       </Form>
     </>
   )

src/pages/h5SampleManager/h5Sample/list.jsx

@@ -55,7 +55,7 @@ function CartBody(props) {
       {/* 因为 background 方式设置图片背景，如果 图片url 存在空格或者其他特殊字符，导致显示不出来，需要进行 encodeURI(xxx) 转码 */}
       {tagList.length > 0 && <div className={Styles.recommderTagBox}>
         {tagList.map((tag, index) =>
-          <span key={index + 'tag'} style={index % 2 == 0 ? { background: '#34BD28' } : { background: '#4886FF' }} className={Styles.recommderTag}>{tag}</span>
+          <span key={index + 'tag'} style={index % 2 == 0 ? { background: '#4886FF' } : { background: '#34BD28' }} className={Styles.recommderTag}>{tag}</span>
         )}
       </div>