@titaui/pc 1.9.49 → 1.9.50

package/src/pages/appointment-demo/index.js

@@ -1,501 +1,456 @@
-import React, {
-  useEffect, useState, useRef, useCallback,
-} from "react";
+import React,{ useEffect, useState,useRef,useCallback } from "react";
 // import {  message } from 'antd';
-import axios from "axios";
-import ReactDOM from "react-dom";
-import Input from "./input";
-import { getLocale } from "../../utils/getLocale";
-import SelectLayer from "./drop-down-box";
-import close from "./image/icon-canceled.svg";
-import logo from "./image/logo.svg";
-import "./index.scss";
+import axios from 'axios'
+import ReactDOM from 'react-dom'
 // const isMobile = window.userAgent === 'mobile'
-const isMobile = document.body.clientWidth < 1230;
+const isMobile =  document.body.clientWidth  <1230
+import Input from './input'
+import {getLocale} from '../../utils/getLocale'
+import SelectLayer from "./drop-down-box";
+import close from "./image/icon-canceled.svg"
+import logo from "./image/logo.svg"
+import './index.scss';
 const okrClassifyList = [
-  { label: "1-10", value: 1 },
-  { label: "11-20", value: 2 },
-  { label: "21-50", value: 3 },
-  { label: "51-100", value: 4 },
-  { label: "101-200", value: 5 },
-  { label: "201-500", value: 6 },
-  { label: "501-1000", value: 7 },
-  { label: "1001-5000", value: 8 },
-  { label: "5001-10000", value: 9 },
-  { label: "10000+", value: 10 },
-  { label: "我代表一组公司", value: 11 },
+    { label: "1-10", value: 1 },
+    { label: "11-20", value: 2 },
+    { label: "21-50", value: 3 },
+    { label: "51-100", value: 4 },
+    { label: "101-200", value: 5 },
+    { label: "201-500", value: 6 },
+    { label: "501-1000", value: 7 },
+    { label: "1001-5000", value: 8 },
+    { label: "5001-10000", value: 9 },
+    { label: "10000+", value: 10 },
+    { label: "我代表一组公司", value: 11 },
 ];
 const okrClassifyList1 = [
-  { label: "企业 CEO", value: 1 },
-  { label: "HDR", value: 2 },
-  { label: "HR 专员", value: 3 },
-  { label: "IT 负责人", value: 4 },
-  { label: "采购专员", value: 5 },
-  { label: "业务部门主管", value: 6 },
+    { label: "企业 CEO", value: 1 },
+    { label: "HDR", value: 2 },
+    { label: "HR 专员", value: 3 },
+    { label: "IT 负责人", value: 4 },
+    { label: "采购专员", value: 5 },
+    { label: "业务部门主管", value: 6 },
 ];
-export default (props) => {
-  const { visibile, setVisible } = props;
-  // console.log(isMobile)
-  // console.log(document.body.clientWidth<800)
-  // const [visibile,setVisible] = useState(true)
+export default (props)=>{
+    const {visibile,setVisible} = props
+    // console.log(isMobile)
+    // console.log(document.body.clientWidth<800)
+    // const [visibile,setVisible] = useState(true)
 
-  const [name, setName] = useState("");
-  const [errMsg, setErrMsg] = useState("");
+    const [name,setName] = useState('')
+    const [errMsg,setErrMsg] = useState('')
 
-  const [phone, setPhone] = useState("");
-  const [errMsg1, setErrMsg1] = useState("");
+    const [phone,setPhone] = useState('')
+    const [errMsg1,setErrMsg1] = useState('')
 
-  const [company, setCompany] = useState("");
-  const [errMsg2, setErrMsg2] = useState("");
+    const [company,setCompany] = useState('')
+    const [errMsg2,setErrMsg2] = useState('')
 
-  const [errMsgNum, setErrMsgNum] = useState("");
-  const [errMsgIde, setErrMsgIde] = useState("");
-  const [errMsgModule, setErrMsgMoudle] = useState("");
+    const [errMsgNum,setErrMsgNum] = useState('')
+    const [errMsgIde,setErrMsgIde] = useState('')
+    const [errMsgModule,setErrMsgMoudle] = useState('')
 
-  const [modules, setModules] = useState([]);
+    const [modules,setModules] = useState([])
 
-  const [code, setCode] = useState("");
-  const [errMsg3, setErrMsg3] = useState("");
-  const [yzm_guid, setYzm_guid] = useState(null);
+    const [code,setCode]=useState('')
+    const [errMsg3,setErrMsg3] = useState('')
+    const [yzm_guid,setYzm_guid]=useState(null)
 
-  useEffect(() => {
-    setYzm_guid(renderCode());
-  }, []);
-  // 输入框系列产品
-  const onBlurName = () => {
-    if (name == "") {
-      setErrMsg("姓名不能为空");
-    } else {
-      setErrMsg("");
+    useEffect(()=>{
+        setYzm_guid(renderCode())
+    },[])
+    // 输入框系列产品
+    const onBlurName = ()=>{
+        if(name==''){
+            setErrMsg('姓名不能为空')
+        }else{
+            setErrMsg('')
+        }
     }
-  };
-  const onChangeName = (val) => {
-    setName(val);
-    if (val == "") {
-      setErrMsg("姓名不能为空");
-    } else {
-      setErrMsg("");
+    const onChangeName = (val)=>{
+        setName(val)
+        if(val==''){
+            setErrMsg('姓名不能为空')
+        }else{
+            setErrMsg('')
+        }
     }
-  };
-  const onBlurPhone = () => {
-    if (phone == "") {
-      setErrMsg1("手机号不能为空");
-    } else if (!/^1\d{10}$/.test(phone)) {
-      setErrMsg1("手机号格式不正确");
-    } else {
-      setErrMsg1("");
+    const onBlurPhone = ()=>{
+        if(phone==''){
+            setErrMsg1('手机号不能为空')
+        }else if(!/^1\d{10}$/.test(phone)){
+            setErrMsg1('手机号格式不正确')
+        }else{
+            setErrMsg1('')
+        }
     }
-  };
-  const onChangePhone = (val) => {
-    setPhone(val);
-    if (val == "") {
-      setErrMsg1("手机号不能为空");
-    } else {
-      setErrMsg1("");
+    const onChangePhone = (val)=>{
+        setPhone(val)
+        if(val==''){
+            setErrMsg1('手机号不能为空')
+        }else{
+            setErrMsg1('')
+        }
     }
-  };
-  const onBlurCompany = () => {
-    if (company == "") {
-      setErrMsg2("公司名称不能为空");
-    } else {
-      setErrMsg2("");
+    const onBlurCompany = ()=>{
+        if(company==''){
+            setErrMsg2('公司名称不能为空')
+        }else{
+            setErrMsg2('')
+        }
     }
-  };
-  const onChangeCompany = (val) => {
-    setCompany(val);
-    if (val == "") {
-      setErrMsg2("公司名称不能为空");
-    } else {
-      setErrMsg2("");
+    const onChangeCompany = (val)=>{
+        setCompany(val)
+        if(val==''){
+            setErrMsg2('公司名称不能为空')
+        }else{
+            setErrMsg2('')
+        }
     }
-  };
-  const onChangeCode = (val) => {
-    setCode(val);
-    if (val == "") {
-      setErrMsg3("验证码不能为空");
-    } else {
-      setErrMsg3("");
+    const onChangeCode = (val)=>{
+        setCode(val)
+        if(val==''){
+            setErrMsg3('验证码不能为空')
+        }else{
+            setErrMsg3('')
+        }
     }
-  };
-  const onBlurCode = () => {
-    if (code == "") {
-      setErrMsg3("验证码不能为空");
-    } else {
-      setErrMsg3("");
+    const onBlurCode = ()=>{
+        if(code==''){
+            setErrMsg3('验证码不能为空')
+        }else{
+            setErrMsg3('')
+        }
     }
-  };
 
-  // 下拉框系列产品
-  const [selectValue, setSelectValue] = useState(0);
-  const handleSelectOkrClassify = useCallback((item) => {
-    setErrMsgNum("");
+    //下拉框系列产品
+    const [selectValue, setSelectValue] = useState(0);
+    const handleSelectOkrClassify = useCallback((item) => {
+        setErrMsgNum('')
 
-    setSelectValue(item.value);
-  }, []);
+        setSelectValue(item.value)
+    }, [])
 
-  const [selectValue1, setSelectValue1] = useState(0);
-  const handleSelectOkrClassify1 = useCallback((item) => {
-    setErrMsgIde("");
+    const [selectValue1, setSelectValue1] = useState(0);
+    const handleSelectOkrClassify1 = useCallback((item) => {
+        setErrMsgIde('')
 
-    setSelectValue1(item.value);
-  }, []);
+        setSelectValue1(item.value)
+    }, [])
 
-  // 深度克隆
+    // 深度克隆
 
-  // 模块系列产品
-  const has = (module) => {
-    for (let i = 0; i < modules.length; i++) {
-      if (modules[i] == module) {
-        return true;
-      }
+    // 模块系列产品
+    const has = (module) =>{
+        for(let i=0;i<modules.length;i++){
+            if(modules[i]==module){
+                return true
+            }
+        }
+        return false
     }
-    return false;
-  };
 
-  const onClickAddModules = (module) => {
-    if (errMsgModule) {
-      setErrMsgMoudle("");
-    }
-    let data = JSON.parse(JSON.stringify(modules));
-    if (has(module)) {
-      data = data.filter((item) => item != module);
-    } else {
-      data.push(module);
+    const onClickAddModules = (module) =>{
+        if(errMsgModule){
+            setErrMsgMoudle('')
+        }
+        let data = JSON.parse(JSON.stringify(modules));
+        if(has(module)){
+            data=data.filter(item=>{return item!=module})
+        }else{
+            data.push(module)
+        }
+        setModules(data)
     }
-    setModules(data);
-  };
 
-  // 验证码系列产品
+    // 验证码系列产品
 
-  const handelChangeImage = (e) => {
-    const yzm = `${renderCode()}?v=${(new Date()).getTime()}`;
-    setYzm_guid(yzm);
-  };
-  const renderCode = () => {
-    let yzm_guid = `${new Date().getTime()}`;
-    for (let i = 0; i < 10; i++) {
-      yzm_guid += Math.floor(Math.random() * 10);
+
+    const handelChangeImage = (e) => {
+        let yzm=renderCode() + "?v=" + (new Date()).getTime()
+        setYzm_guid(yzm)
+    }
+    const renderCode = () => {
+        let yzm_guid = new Date().getTime() + '';
+        for (let i = 0; i < 10; i++) {
+            yzm_guid += Math.floor(Math.random() * 10);
+        }
+        return yzm_guid;
     }
-    return yzm_guid;
-  };
 
-  const onClickSubmit = () => {
-    const num = selectValue ? okrClassifyList[selectValue - 1].label : "";
-    const identity = selectValue1 ? okrClassifyList1[selectValue1 - 1].label : "";
-    if (!name || !phone || !company || !num || !identity || !modules.length > 0 || !code) {
-      if (!name) {
-        setErrMsg("姓名不能为空");
-      }
-      if (!phone) {
-        setErrMsg1("手机号码不能为空");
-      }
-      if (!company) {
-        setErrMsg2("公司名称不能为空");
-      }
-      if (!num) {
-        setErrMsgNum("公司人数不能为空");
-      }
-      if (!identity) {
-        setErrMsgIde("您的身份不能为空");
-      }
-      if (!code) {
-        setErrMsg3("验证码不能为空");
-      }
-      if (!modules.length > 0) {
-        setErrMsgMoudle("请至少选择一项");
-      }
-    } else {
-      axios({
-        method: "post",
-        url: `${window.location.origin}/api/v1/markEmail/SendKefu`,
-        data: {
-          title: "预约演示",
-          content: `用户：${name}，手机号：${phone}，公司名称:${company}，公司人数：${num}，身份：${identity}，我感兴趣的模块是：${modules.join()}}`,
-          code,
-          keyRandomV2: yzm_guid.indexOf("?") !== -1 ? yzm_guid.slice(0, yzm_guid.indexOf("?")) : yzm_guid,
-          source: 8622,
-        },
-      }).then((res) => {
-        if (res.data.Code) {
-          // message.success('提交成功')
-          window.location.href = "/#/ordersucc";
-        } else {
-          setCode("");
-          handelChangeImage();
-          setErrMsg3(res.data.Message);
-          // message.error(res.data.Message)
+    const onClickSubmit = () =>{
+        let num = selectValue?okrClassifyList[selectValue-1].label:''
+        let identity = selectValue1?okrClassifyList1[selectValue1-1].label:''
+        if(!name || !phone || !company || !num || !identity ||  !modules.length>0 || !code){
+            if(!name){
+                setErrMsg('姓名不能为空')
+            }
+            if(!phone){
+                setErrMsg1('手机号码不能为空')
+            }
+            if(!company){
+                setErrMsg2('公司名称不能为空')
+            }
+            if(!num){
+                setErrMsgNum('公司人数不能为空')
+            }
+            if(!identity){
+                setErrMsgIde('您的身份不能为空')
+            }
+            if(!code){
+                setErrMsg3('验证码不能为空')
+            }
+            if( !modules.length>0){
+                setErrMsgMoudle('请至少选择一项')
+            }
+        }else{
+            axios({
+                method: 'post',
+                url: `${window.location.origin}/api/v1/markEmail/SendKefu`,
+                data: {
+					title: '预约演示',
+					content: `用户：${name}，手机号：${phone}，公司名称:${company}，公司人数：${num}，身份：${identity}，我感兴趣的模块是：${modules.join()}}`,
+					code:code,
+					keyRandomV2:yzm_guid.indexOf('?') !== -1 ? yzm_guid.slice(0, yzm_guid.indexOf('?')) : yzm_guid,
+					source: 8622,
+				},
+            }).then((res) => {
+                if (res.data.Code) {
+                    // message.success('提交成功')
+                    window.location.href = '/#/ordersucc'
+                } else {
+                    setCode('')
+                    handelChangeImage()
+                    setErrMsg3(res.data.Message)
+                    // message.error(res.data.Message)
+                }
+            }).catch((error) => {
+                console.log(error)
+            })
         }
-      }).catch((error) => {
-        console.log(error);
-      });
+        
+
     }
-  };
 
-  const renderModal = () => (
-    <div className="appointment-demo">
-      {!isMobile
-        ? (
-          <div className="appointment-demo-pc">
+    const renderModal = () =>{
+        return < div className="appointment-demo" >
+        {!isMobile?
+        <div  className="appointment-demo-pc" >
             <div className="appointment-demo-pc-popup">
-              <div
-                className="appointment-demo-pc-popup-close"
-                onClick={() => setVisible(false)}
-              >
-                <img src={close} />
-              </div>
-              <div className="appointment-demo-pc-popup-bcg" />
-              <div className="appointment-demo-pc-popup-left">
-                <div className="appointment-demo-pc-popup-left-title">
-                  立即获取 OKR 行业案例
-                </div>
-                <div className="appointment-demo-pc-popup-left-subtitle">
-                  现在预约你将获得 15-30 分钟免费的 1对1 人工在线服务
-                </div>
-              </div>
-              <div className="appointment-demo-pc-popup-right">
-                <div className="appointment-demo-pc-popup-right-form">
+                <div className="appointment-demo-pc-popup-close"
+                    onClick={()=>setVisible(false)}
+                ><img src={close} /></div>
+                <div className="appointment-demo-pc-popup-bcg"></div>
+                    <div className="appointment-demo-pc-popup-left">
+                        <div className="appointment-demo-pc-popup-left-title">
+                            立即获取 OKR 行业案例
+                        </div>
+                        <div className="appointment-demo-pc-popup-left-subtitle">
+                            现在预约你将获得 15-30 分钟免费的 1对1 人工在线服务
+                        </div>
+                    </div>
+                    <div className="appointment-demo-pc-popup-right">
+                        <div className="appointment-demo-pc-popup-right-form">
 
-                  <Input
-                    className="appointment-demo-pc-popup-right-form-item"
-                    label={getLocale("Mod_UserName")}
-                    placeholder="请输入您的名称"
-                    id="name"
-                    errMsg={errMsg}
-                    required
-                    value={name}
-                    onChange={(val) => onChangeName(val)}
-                    onBlur={onBlurName}
-                  />
-                  <Input
-                    className="appointment-demo-pc-popup-right-form-item"
-                    label="手机号码"
-                    placeholder={getLocale("Pro_page_Ext_Tab_PhoneNumber")}
-                    id="phone"
-                    errMsg={errMsg1}
-                    required
-                    value={phone}
-                    onChange={(val) => onChangePhone(val)}
-                    onBlur={onBlurPhone}
-                  />
+                        <Input className="appointment-demo-pc-popup-right-form-item"
+                        label={getLocale('Mod_UserName')} placeholder="请输入您的名称" 
+                        id="name"
+                        errMsg={errMsg}
+                        required={true} 
+                        value={name}  
+                        onChange={(val)=>onChangeName(val)}
+                        onBlur={onBlurName}
+                        />
+                        <Input  className="appointment-demo-pc-popup-right-form-item"
+                        label="手机号码" placeholder={getLocale('Pro_page_Ext_Tab_PhoneNumber')} 
+                        id="phone"
+                        errMsg={errMsg1}
+                        required={true} 
+                        value={phone}  
+                        onChange={(val)=>onChangePhone(val)}
+                        onBlur={onBlurPhone}
+                        />
 
-                  <Input
-                    className="appointment-demo-pc-popup-right-form-item"
-                    label="公司名称"
-                    placeholder="公司全称"
-                    id="company"
-                    errMsg={errMsg2}
-                    required
-                    value={company}
-                    onChange={(val) => onChangeCompany(val)}
-                    onBlur={onBlurCompany}
-                  />
-                  <SelectLayer
-                    className="appointment-demo-pc-popup-right-form-item"
-                    items={okrClassifyList}
-                    initValue={selectValue}
-                    renderSuffixIcon
-                    initText={getLocale("Mod_Pleaseselect")}
-                    onChangeClassify={handleSelectOkrClassify}
-                    title="公司人数"
-                    errMsg={errMsgNum}
-                  />
-                  <SelectLayer
-                    className="appointment-demo-pc-popup-right-form-item"
-                    items={okrClassifyList1}
-                    initValue={selectValue1}
-                    renderSuffixIcon
-                    initText={getLocale("Mod_Pleaseselect")}
-                    onChangeClassify={handleSelectOkrClassify1}
-                    title="您的身份"
-                    errMsg={errMsgIde}
-                  />
-                  <div className="appointment-demo-pc-popup-right-form-code">
-                    <Input
-                      className="appointment-demo-pc-popup-right-form-code-left"
-                      label="验证码"
-                      placeholder="请输入验证码"
-                      id="code"
-                      errMsg={errMsg3}
-                      required
-                      value={code}
-                      onChange={(val) => onChangeCode(val)}
-                      onBlur={onBlurCode}
-                    />
-                    <img src={`${window.location.origin}/Account/Account/GetCaptchaImgV2/${yzm_guid}`} alt="" onClick={handelChangeImage} />
-                  </div>
-                  <div className="appointment-demo-pc-popup-right-form-item ">
-                    <div className="appointment-demo-pc-popup-right-form-item-module-errmsg">{errMsgModule && errMsgModule}</div>
-                    <div className="appointment-demo-pc-popup-right-form-item-module">
-                      您感兴趣的模块是（可多选）
-                      <span className="required">*</span>
-                    </div>
-                    <div className="appointment-demo-pc-popup-right-form-item-modules">
-                      <div
-                        className={`${has("OKR 目标管理") ? "appointment-demo-pc-popup-right-form-item-modules-item-active" : ""} appointment-demo-pc-popup-right-form-item-modules-item`}
-                        onClick={() => onClickAddModules("OKR 目标管理")}
-                      >
-                        OKR 目标管理
-                      </div>
-                      <div
-                        className={`${has(getLocale("Menu_Title_Performance")) ? "appointment-demo-pc-popup-right-form-item-modules-item-active" : ""} appointment-demo-pc-popup-right-form-item-modules-item`}
-                        onClick={() => onClickAddModules(getLocale("Menu_Title_Performance"))}
-                      >
-                        {getLocale("Menu_Title_Performance")}
-                      </div>
-                      <div
-                        className={`${has("项目管理") ? "appointment-demo-pc-popup-right-form-item-modules-item-active" : ""} appointment-demo-pc-popup-right-form-item-modules-item`}
-                        onClick={() => onClickAddModules("项目管理")}
-                      >
-                        项目管理
-                      </div>
-                      <div
-                        className={`${has("计划管理") ? "appointment-demo-pc-popup-right-form-item-modules-item-active" : ""} appointment-demo-pc-popup-right-form-item-modules-item`}
-                        onClick={() => onClickAddModules("计划管理")}
-                      >
-                        计划管理
-                      </div>
+                        <Input className="appointment-demo-pc-popup-right-form-item"
+                        label="公司名称" placeholder="公司全称" 
+                        id="company"
+                        errMsg={errMsg2}
+                        required={true} 
+                        value={company}  
+                        onChange={(val)=>onChangeCompany(val)}
+                        onBlur={onBlurCompany}
+                        />
+                        <SelectLayer
+                        className="appointment-demo-pc-popup-right-form-item"
+                        items={okrClassifyList}
+                        initValue={selectValue}
+                        renderSuffixIcon
+                        initText={getLocale('Mod_Pleaseselect')}
+                        onChangeClassify={handleSelectOkrClassify}
+                        title="公司人数"
+                        errMsg={errMsgNum}
+                        />
+                        <SelectLayer
+                        className="appointment-demo-pc-popup-right-form-item"
+                        items={okrClassifyList1}
+                        initValue={selectValue1}
+                        renderSuffixIcon
+                        initText={getLocale('Mod_Pleaseselect')}
+                        onChangeClassify={handleSelectOkrClassify1}
+                        title="您的身份"
+                        errMsg={errMsgIde}
+                        />
+                        <div className="appointment-demo-pc-popup-right-form-code">
+                            <Input className="appointment-demo-pc-popup-right-form-code-left"
+                            label="验证码" placeholder="请输入验证码" 
+                            id="code"
+                            errMsg={errMsg3}
+                            required={true} 
+                            value={code}  
+                            onChange={(val)=>onChangeCode(val)}
+                            onBlur={onBlurCode}
+                            />
+                            <img src={`${window.location.origin}/Account/Account/GetCaptchaImgV2/${yzm_guid}`} alt='' onClick={handelChangeImage}   />
+                        </div>
+                        <div className="appointment-demo-pc-popup-right-form-item ">
+                            <div className="appointment-demo-pc-popup-right-form-item-module-errmsg">{errMsgModule&&errMsgModule}</div> 
+                            <div className="appointment-demo-pc-popup-right-form-item-module">
+                            您感兴趣的模块是（可多选）<span className="required">*</span>
+                            </div>
+                            <div className="appointment-demo-pc-popup-right-form-item-modules">
+                                <div className={`${has('OKR 目标管理')?'appointment-demo-pc-popup-right-form-item-modules-item-active':''} appointment-demo-pc-popup-right-form-item-modules-item`}
+                                onClick={()=>onClickAddModules('OKR 目标管理')}
+                                >OKR 目标管理</div>
+                                <div className={`${has(getLocale('Menu_Title_Performance'))?'appointment-demo-pc-popup-right-form-item-modules-item-active':''} appointment-demo-pc-popup-right-form-item-modules-item`}
+                                onClick={()=>onClickAddModules(getLocale('Menu_Title_Performance'))}
+                                >{getLocale('Menu_Title_Performance')}</div>
+                                <div className={`${has('项目管理')?'appointment-demo-pc-popup-right-form-item-modules-item-active':''} appointment-demo-pc-popup-right-form-item-modules-item`}
+                                onClick={()=>onClickAddModules('项目管理')}
+                                >项目管理</div>
+                                <div className={`${has('计划管理')?'appointment-demo-pc-popup-right-form-item-modules-item-active':''} appointment-demo-pc-popup-right-form-item-modules-item`}
+                                onClick={()=>onClickAddModules('计划管理')}
+                                >计划管理</div>
+                            </div>
+                        </div>
+                        <div className="appointment-demo-pc-popup-right-form-submit"
+                            onClick={onClickSubmit}
+                        >{getLocale('Pro_detail_Submission')}</div>
+                        </div>
                     </div>
-                  </div>
-                  <div
-                    className="appointment-demo-pc-popup-right-form-submit"
-                    onClick={onClickSubmit}
-                  >
-                    {getLocale("Pro_detail_Submission")}
-                  </div>
-                </div>
-              </div>
-
+                
             </div>
-          </div>
-        )
-        : (
-          <div className="appointment-demo-h5">
+        </div>
+        :
+        <div className="appointment-demo-h5" >
             <div className="appointment-demo-h5-logo">
-              <img src={logo} />
+                <img src={logo}></img>
             </div>
             <div className="appointment-demo-h5-title">
-              立即获取 OKR 行业案例
+                立即获取 OKR 行业案例
             </div>
             <div className="appointment-demo-h5-subtitle">
-              现在预约你将获得 15-30 分钟免费的 1对1 人工在线服务
+                现在预约你将获得 15-30 分钟免费的 1对1 人工在线服务
             </div>
-            <div className="appointment-demo-h5-form">
+            <div className="appointment-demo-h5-form" >
 
-              <div className="appointment-demo-h5-form-item">
-                <Input
-                  label={getLocale("Mod_UserName")}
-                  placeholder="请输入您的名称"
-                  id="name"
-                  errMsg={errMsg}
-                  required
-                  value={name}
-                  onChange={(val) => onChangeName(val)}
-                  onBlur={onBlurName}
+            <div className="appointment-demo-h5-form-item">
+                <Input  
+                label={getLocale('Mod_UserName')} placeholder="请输入您的名称" 
+                id="name"
+                errMsg={errMsg}
+                required={true} 
+                value={name}  
+                onChange={(val)=>onChangeName(val)}
+                onBlur={onBlurName}
                 />
-              </div>
-              <div className="appointment-demo-h5-form-item">
-                <Input
-                  label="手机号码"
-                  placeholder={getLocale("Pro_page_Ext_Tab_PhoneNumber")}
-                  id="phone"
-                  errMsg={errMsg1}
-                  required
-                  value={phone}
-                  onChange={(val) => onChangePhone(val)}
-                  onBlur={onBlurPhone}
+            </div>
+            <div className="appointment-demo-h5-form-item">
+                <Input  
+                label="手机号码" placeholder={getLocale('Pro_page_Ext_Tab_PhoneNumber')}
+                id="phone"
+                errMsg={errMsg1}
+                required={true} 
+                value={phone}  
+                onChange={(val)=>onChangePhone(val)}
+                onBlur={onBlurPhone}
                 />
-              </div>
+            </div>
 
-              <Input
-                className="appointment-demo-h5-form-item"
-                label="公司名称"
-                placeholder="请输入公司全称"
+                <Input className="appointment-demo-h5-form-item"
+                label="公司名称" placeholder="请输入公司全称" 
                 id="company"
                 errMsg={errMsg2}
-                required
-                value={company}
-                onChange={(val) => onChangeCompany(val)}
+                required={true} 
+                value={company}  
+                onChange={(val)=>onChangeCompany(val)}
                 onBlur={onBlurCompany}
-              />
-              <SelectLayer
+                />
+                <SelectLayer
                 className="appointment-demo-h5-form-item"
                 items={okrClassifyList}
                 initValue={selectValue}
                 renderSuffixIcon
-                initText={getLocale("Mod_Pleaseselect")}
+                initText={getLocale('Mod_Pleaseselect')}
                 onChangeClassify={handleSelectOkrClassify}
                 title="公司人数"
                 errMsg={errMsgNum}
-              />
-              <SelectLayer
+                />
+                <SelectLayer
                 className="appointment-demo-h5-form-item"
                 items={okrClassifyList1}
                 initValue={selectValue1}
                 renderSuffixIcon
-                initText={getLocale("Mod_Pleaseselect")}
+                initText={getLocale('Mod_Pleaseselect')}
                 onChangeClassify={handleSelectOkrClassify1}
                 title="您的身份"
                 errMsg={errMsgIde}
-              />
-              <div className="appointment-demo-h5-form-code">
-                <Input
-                  className="appointment-demo-h5-form-code-left"
-                  label="验证码"
-                  placeholder="请输入验证码"
-                  id="code"
-                  errMsg={errMsg3}
-                  required
-                  value={code}
-                  onChange={(val) => onChangeCode(val)}
-                  onBlur={onBlurCode}
                 />
-                <img src={`${window.location.origin}/Account/Account/GetCaptchaImgV2/${yzm_guid}`} alt="" onClick={handelChangeImage} />
-              </div>
-              <div className="appointment-demo-h5-form-item">
+                <div className="appointment-demo-h5-form-code">
+                    <Input className="appointment-demo-h5-form-code-left"
+                    label="验证码" placeholder="请输入验证码" 
+                    id="code"
+                    errMsg={errMsg3}
+                    required={true} 
+                    value={code}  
+                    onChange={(val)=>onChangeCode(val)}
+                    onBlur={onBlurCode}
+                    />
+                    <img src={`${window.location.origin}/Account/Account/GetCaptchaImgV2/${yzm_guid}`} alt='' onClick={handelChangeImage}   />
+                </div>
+                <div className="appointment-demo-h5-form-item">
                 <div className="appointment-demo-h5-form-item-module">
-                  您感兴趣的模块是（可多选）
-                  <span className="required">*</span>
+                    您感兴趣的模块是（可多选）<span className="required">*</span>
                 </div>
                 <div className="appointment-demo-h5-form-item-modules">
-                  <div
-                    className={` ${has("OKR 目标管理") ? "appointment-demo-h5-form-item-modules-item-active" : ""} appointment-demo-h5-form-item-modules-item`}
-                    onClick={() => onClickAddModules("OKR 目标管理")}
-                  >
-                    OKR 目标管理
-                  </div>
-                  <div
-                    className={` ${has(getLocale("Menu_Title_Performance")) ? "appointment-demo-h5-form-item-modules-item-active" : ""} appointment-demo-h5-form-item-modules-item`}
-                    onClick={() => onClickAddModules(getLocale("Menu_Title_Performance"))}
-                  >
-                    {getLocale("Menu_Title_Performance")}
-                  </div>
-                  <div
-                    className={` ${has("项目管理") ? "appointment-demo-h5-form-item-modules-item-active" : ""} appointment-demo-h5-form-item-modules-item`}
-                    onClick={() => onClickAddModules("项目管理")}
-                  >
-                    项目管理
-                  </div>
+                    <div className={` ${has('OKR 目标管理')?'appointment-demo-h5-form-item-modules-item-active':''} appointment-demo-h5-form-item-modules-item`}
+                    onClick={()=>onClickAddModules('OKR 目标管理')}
+                    >OKR 目标管理</div>
+                    <div className={` ${has(getLocale('Menu_Title_Performance'))?'appointment-demo-h5-form-item-modules-item-active':''} appointment-demo-h5-form-item-modules-item`}
+                    onClick={()=>onClickAddModules(getLocale('Menu_Title_Performance'))}
+                    >{getLocale('Menu_Title_Performance')}</div>
+                    <div className={` ${has('项目管理')?'appointment-demo-h5-form-item-modules-item-active':''} appointment-demo-h5-form-item-modules-item`}
+                    onClick={()=>onClickAddModules('项目管理')}
+                    >项目管理</div>
                 </div>
-                <div
-                  className={` ${has("计划管理") ? "appointment-demo-h5-form-item-modules-item-active" : ""} appointment-demo-h5-form-item-modules-item else`}
-                  onClick={() => onClickAddModules("计划管理")}
-                >
-                  计划管理
+                <div className={` ${has('计划管理')?'appointment-demo-h5-form-item-modules-item-active':''} appointment-demo-h5-form-item-modules-item else`}
+                    onClick={()=>onClickAddModules('计划管理')}
+                    >计划管理</div>
+                </div>
+                <div className="appointment-demo-h5-form-submit-bck">
+                    <div className="appointment-demo-h5-form-submit" onClick={onClickSubmit}>{getLocale('Pro_detail_Submission')}</div>
                 </div>
-              </div>
-              <div className="appointment-demo-h5-form-submit-bck">
-                <div className="appointment-demo-h5-form-submit" onClick={onClickSubmit}>{getLocale("Pro_detail_Submission")}</div>
-              </div>
 
             </div>
 
-          </div>
-        )}
+        </div>
+        }
     </div>
-  );
+    }
+
+    return visibile && ReactDOM.createPortal(renderModal(), document.body);
 
-  return visibile && ReactDOM.createPortal(renderModal(), document.body);
-};
+    
+}
 // static defaultProps = {
 //     label: "", //文本名称
 //     value: "", //输入框 的value
@@ -513,4 +468,4 @@ export default (props) => {
 //     onBlur(val) { },
 //     onFocus(val) { },
 //     onKeyPress(val) { },
-//   }
+//   }