招商开发完成1

src/api/index.ts

@@ -136,6 +136,39 @@ const api = {
             method:'get'
         })
 
+    },
+    //新增招商
+    openApiAentInfo(data:{
+        career: number;
+        careerName: string;
+        sexName: string;
+        document: string;
+        name: string;
+        phone: string;
+        project: number;
+        projectName: string;
+        reason: string;
+        sex: number;
+        wechar: string;
+    }){
+        return request({
+            method:'post',
+            url:"open-api/aent/info",
+            data
+        })
+
+    },
+    //开放端口文件上传
+    openApiFileInfoFileUp(data:FormData){
+        return request({
+            method:'put',
+            url:"open-api/file/info/fileUp",
+            data,
+            headers:{
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+
     }
 
     

src/views/inviteBusiness/index.less

@@ -1,52 +1,90 @@
 .bg {
-    // background-image: url();
-    background: #d1d1d1;
-    width: 100vw;
+  background-image: url(./../../assets/images/bg3.png);
+  background-size: 100%;
+  width: 100vw;
+  overflow: hidden;
+  padding-top: 750px;
+  padding-bottom: 90px;
+
+  .form {
+    margin-top: 95vw;
+    height: 205vw;
+    border-radius: 30px;
     overflow: hidden;
-  
-    .form {
-      margin-top: 95vw;
-  
-      padding: 0 30px;
-  
-      .content {
+    background: #fff;
+    width: 690px;
+    margin: 0 auto;
+
+    .content {
+      width: 100%;
+      height: auto;
+
+      padding-top: 60px;
+      padding-left: 30px;
+      padding-right: 30px;
+
+      .field {
+        margin-bottom: 30px;
         width: 100%;
-        height: 200vw;
-        background: #fff;
-        border-radius: 30px;
-        padding-top: 60px;
-        padding-left: 30px;
-        padding-right: 30px;
-        .field {
-          margin-bottom: 30px;
-          width: 100%;
-          border-radius: 45px;
-          background: #f2f3f5;
+        border-radius: 45px;
+        background: #f2f3f5;
+        display: flex;
+        justify-content: space-between;
+        align-content: center;
+        align-items: center;
+        font-size: 30px;
+
+        .left {
+          height: 12vw;
+          color: #0a1a33;
+          padding-left: 30px;
           display: flex;
-          justify-content: space-between;
-          align-content: center;
           align-items: center;
-          font-size: 30px;
-          > div {
-            height: 90px;
-            color: #0a1a33;
-            padding-left: 30px;
-            display: flex;
-            align-items: center;
+        }
+
+        // >img {
+        //   width: 4vw;
+        // }
+
+        .right {
+          width:50%;
+          >img{
+            width: 4vw;
           }
-          > input {
-            width: 45%;
+          >input {
+            width: 80%;
             outline: none;
-            height: 90px;
+            height: 12vw;
             border: none;
             background: transparent;
             padding-left: 30px;
           }
         }
-        .upload{
-            font-size: 30px;
-            display: inline-block;
-        }
+
+      }
+
+      .upload {
+        font-size: 30px;
+        display: inline-block;
+      }
+    }
+
+    .submit {
+      background: #fff;
+      padding-bottom: 30px;
+
+      .button1 {
+        width: 532px;
+        line-height: 80px;
+        background: #498EF5;
+        border-radius: 40px;
+        margin: 0 auto;
+        font-size: 30px;
+        text-align: center;
+        color: white;
+        cursor: pointer;
+
       }
     }
-  }
+  }
+}

src/views/inviteBusiness/index.tsx

@@ -1,65 +1,259 @@
-import { Uploader, UploaderValueItem } from 'react-vant';
+import { Dialog, Picker, Popup, Toast, Uploader, UploaderValueItem, hooks } from 'react-vant';
 import './index.less'
-import React from "react";
-import { useSetState } from 'react-vant/es/hooks';
-
+import React, { useRef, useState } from "react";
+import downArrow from './../../assets/images/downArrow.png'
+import api from '~/api';
 export const InviteBusiness: React.FC = (props: any) => {
-    const [imgList,setImgList] = useSetState([])
-    const afterUpload = function(value:UploaderValueItem[]){
-        console.log(value)
+  let imgList: UploaderValueItem[] = []
+  const [careerVisible, setCareerVisible] = useState(false)
+  const [sexVisible, setSexVisible] = useState(false)
+  const [projectVisible, setProjectVisible] = useState(false)
+  const [businessForm, updateBusinessForm] = hooks.useSetState({
+    career: 0,
+    careerName: '',
+    sexName: '',
+    document: '',
+    name: '',
+    phone: '',
+    project: 0,
+    projectName: '',
+    reason: '',
+    sex: 0,
+    wechar: ''
+  })
+  const submitBusinessForm = () => {
+    if (!businessForm.name) {
+      Toast({
+        type: 'fail',
+        message: "请填写名字"
+      })
+      return
 
     }
-    return (
-        <div className="bg">
-        <div className="form">
-          <div className="content">
-            <div className="field">
-              <div className="">姓名</div>
-              <input placeholder="请填写姓名" type="text" />
-            </div>
-            <div className="field">
-              <div className="">性别</div>
-              <input readOnly={true} placeholder="请选择性别" type="text" />
-            </div>
-            <div className="field">
-              <div className="">职业</div>
-              <input readOnly={true} placeholder="请选择职业" type="text" />
-            </div>
-            <div className='upload' style={{'background': 'transparent'}} >
-              <Uploader
-                onChange={afterUpload}
-                upload-text="上传图片"
-                maxCount={2}
-                accept='*'
-                value={imgList}
-              />
-              <div style={{color: '#adb4bf'}}>
-                请上传身份证或驾照或营业执照等 身份证明
-              </div>
+    if (!businessForm.sex) {
+      Toast({
+        type: 'fail',
+        message: "请填写性别"
+      })
+      return
+
+
+    }
+    if (!businessForm.career) {
+      Toast({
+        type: 'fail',
+        message: "请填写职业"
+      })
+      return
+
+    }
+    if (!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(businessForm.phone)) {
+      Toast({
+        type: 'fail',
+        message: "请填写正确电话号码"
+      })
+      return
+
+    }
+    if (!businessForm.wechar) {
+      Toast({
+        type: 'fail',
+        message: "请填写微信号"
+      })
+      return
+
+    }
+    if (!businessForm.project) {
+      Toast({
+        type: 'fail',
+        message: "请填写代理项目"
+      })
+      return
+
+    }
+    if (!businessForm.reason) {
+      Toast({
+        type: 'fail',
+        message: "请填写缘由"
+      })
+      return
+
+    }
+    if (imgList.length == 0) {
+      Toast({
+        type: 'fail',
+        message: "请上传图片"
+      })
+      return
+    }
+    Dialog.confirm({
+      title: '提交',
+      message: '是否提交你的表单',
+    }).then(async () => {
+
+      if (imgList.length > 0) {
+        let data1 = new FormData()
+        data1.append('coverFiles', imgList[0].file as File)
+        data1.append('businessType', '招商文件')
+        let res1
+        try {
+          res1 = await api.openApiFileInfoFileUp(data1)
+        }
+        catch (e) {
+          Toast('图片上传失败')
+        }
+
+        api.openApiAentInfo({ ...businessForm, document: res1?.data.data }).then(res => {
+          if (res.data.code == 200) {
+            Toast.success({
+              message: '上传成功'
+            })
+          }
+
+        })
+      }
+
+    })
+
+
+
+  }
+
+  return (
+    <div className="bg">
+      <div className="form">
+        <div className="content">
+          <div className="field">
+            <div className="left">姓名</div>
+            <div className='right'> <input value={businessForm.name} onChange={val => updateBusinessForm({ name: val.target.value })} placeholder="请填写姓名" type="text" /></div>
+
+          </div>
+          <div onClick={() => setSexVisible(true)} className="field">
+
+            <div className="left">性别</div>
+            <div className='right'>
+              <input readOnly={true} value={businessForm.sexName} placeholder="请选择性别" type="text" />
+              <img src={downArrow}></img>
             </div>
-            <div className="field">
-              <div className="">手机</div>
-              <input placeholder="请填写手机" type="text" />
+
+          </div>
+          <div onClick={() => setCareerVisible(true)} className="field">
+            <div className="left">职业</div>
+            <div className='right'>  <input readOnly={true} value={businessForm.careerName} placeholder="请选择职业" type="text" /> <img src={downArrow}></img></div>
+
+          </div>
+          <div className='upload' style={{ 'background': 'transparent' }} >
+            <Uploader
+              upload-text="上传图片"
+              maxCount={1}
+              accept='*'
+              onChange={v => { imgList = v, console.log(imgList) }
+              }
+            />
+            <div style={{ color: '#adb4bf' }}>
+              请上传身份证或驾照或营业执照等 身份证明
             </div>
-            <div className="field">
-              <div className="">微信</div>
-              <input placeholder="请填写微信号" type="text" />
+          </div>
+          <div className="field">
+            <div className="left">手机</div>
+            <div className='right'>
+              <input onChange={(val) => updateBusinessForm({
+                phone: val.target.value
+
+              })} value={businessForm.phone} placeholder="请填写手机" type="text" />
             </div>
-            <div className="field">
-              <div className="">代理项目</div>
-              <input placeholder="请选择代理项目" type="text" />
+
+          </div>
+          <div className="field">
+            <div className="left">微信</div>
+            <div className='right'>
+              <input onChange={(val) => updateBusinessForm({
+                wechar: val.target.value
+
+              })} value={businessForm.wechar} placeholder="请填写微信号" type="text" />
             </div>
-            <div style={{
-                
-                'borderRadius':'2.5vw',
-                'padding':'15px'
-            }} className="field">
-                <textarea style={{'background':'transparent',outline:'none','border':'none',height:'50vw',width:'100%'}} placeholder='请写出你的加盟缘由'></textarea>
+
+          </div>
+          <div onClick={() => { setProjectVisible(true) }} className="field">
+            <div className="left">代理项目</div>
+            <div className='right'>
+              <input readOnly value={businessForm.projectName} placeholder="请选择代理项目" type="text" />
+              <img src={downArrow}></img>
             </div>
+
           </div>
-          <div className=''></div>
+          <div style={{
+
+            'borderRadius': '2.5vw',
+            'padding': '1.5vw'
+          }} className="field">
+            <textarea value={businessForm.reason} onChange={val => updateBusinessForm({
+              reason: val.target.value
+            })} style={{ 'background': 'transparent', outline: 'none', 'border': 'none', height: '50vw', width: '100%' }} placeholder='请写出你的加盟缘由'></textarea>
+          </div>
+        </div>
+        <div className='submit'>
+          <div onClick={() => submitBusinessForm()} className='button1'>提交</div>
         </div>
       </div>
-    )
+      <Popup position='bottom' visible={projectVisible} onClose={() => setProjectVisible(false)}>
+        <Picker
+          title='代理项目'
+          onCancel={() => setProjectVisible(false)}
+          onConfirm={(val: string, item: string, index: number | undefined) => {
+            setProjectVisible(false)
+            updateBusinessForm({
+              project: index === undefined ? 0 : (index + 1),
+              projectName: val
+            })
+            return val
+          }}
+
+          columns={[
+            '软件代理', '书籍代理', '软件+书籍', '软件开发'
+
+          ]}
+        />
+      </Popup>
+      <Popup position='bottom' visible={careerVisible} onClose={() => setCareerVisible(false)}>
+        <Picker
+          title='职业'
+          onCancel={() => setCareerVisible(false)}
+          onConfirm={(val: string, item: string, index: number | undefined) => {
+            setCareerVisible(false)
+            updateBusinessForm({
+              career: index === undefined ? 0 : (index + 1),
+              careerName: val
+            })
+            return val
+          }}
+
+          columns={[
+            '教练', '驾校', '自媒体', '相关从业者'
+
+          ]}
+        />
+      </Popup>
+      <Popup position='bottom' visible={sexVisible} onClose={() => setSexVisible(false)}>
+        <Picker
+          title='性别'
+          onCancel={() => setSexVisible(false)}
+          onConfirm={(val: string, item: string, index: number | undefined) => {
+            setSexVisible(false)
+            updateBusinessForm({
+              sex: index === undefined ? 0 : (index + 1),
+              sexName: val
+            })
+            return val
+          }}
+
+          columns={[
+            '男', '女'
+
+          ]}
+        />
+      </Popup>
+    </div>
+  )
 
 }