@titaui/pc 1.7.12 → 1.7.13

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

@@ -1,470 +0,0 @@
-import React,{ useEffect, useState,useRef,useCallback } from "react";
-// import {  message } from 'antd';
-import axios from 'axios'
-import ReactDOM from 'react-dom'
-// const isMobile = window.userAgent === 'mobile'
-const isMobile =  document.body.clientWidth  <1230
-import Input from './input'
-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 },
-];
-const okrClassifyList1 = [
-    { 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)
-
-    const [name,setName] = useState('')
-    const [errMsg,setErrMsg] = useState('')
-
-    const [phone,setPhone] = useState('')
-    const [errMsg1,setErrMsg1] = useState('')
-
-    const [company,setCompany] = useState('')
-    const [errMsg2,setErrMsg2] = useState('')
-
-    const [errMsgNum,setErrMsgNum] = useState('')
-    const [errMsgIde,setErrMsgIde] = useState('')
-    const [errMsgModule,setErrMsgMoudle] = useState('')
-
-    const [modules,setModules] = useState([])
-
-    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('')
-        }
-    }
-    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 onChangePhone = (val)=>{
-        setPhone(val)
-        if(val==''){
-            setErrMsg1('手机号不能为空')
-        }else{
-            setErrMsg1('')
-        }
-    }
-    const onBlurCompany = ()=>{
-        if(company==''){
-            setErrMsg2('公司名称不能为空')
-        }else{
-            setErrMsg2('')
-        }
-    }
-    const onChangeCompany = (val)=>{
-        setCompany(val)
-        if(val==''){
-            setErrMsg2('公司名称不能为空')
-        }else{
-            setErrMsg2('')
-        }
-    }
-    const onChangeCode = (val)=>{
-        setCode(val)
-        if(val==''){
-            setErrMsg3('验证码不能为空')
-        }else{
-            setErrMsg3('')
-        }
-    }
-    const onBlurCode = ()=>{
-        if(code==''){
-            setErrMsg3('验证码不能为空')
-        }else{
-            setErrMsg3('')
-        }
-    }
-
-    //下拉框系列产品
-    const [selectValue, setSelectValue] = useState(0);
-    const handleSelectOkrClassify = useCallback((item) => {
-        setErrMsgNum('')
-
-        setSelectValue(item.value)
-    }, [])
-
-    const [selectValue1, setSelectValue1] = useState(0);
-    const handleSelectOkrClassify1 = useCallback((item) => {
-        setErrMsgIde('')
-
-        setSelectValue1(item.value)
-    }, [])
-
-    // 深度克隆
-
-    // 模块系列产品
-    const has = (module) =>{
-        for(let i=0;i<modules.length;i++){
-            if(modules[i]==module){
-                return true
-            }
-        }
-        return false
-    }
-
-    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)
-    }
-
-    // 验证码系列产品
-
-
-    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;
-    }
-
-    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)
-            })
-        }
-        
-
-    }
-
-    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>
-                    <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="姓名" 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="请输入手机号" 
-                        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={true} 
-                        value={company}  
-                        onChange={(val)=>onChangeCompany(val)}
-                        onBlur={onBlurCompany}
-                        />
-                        <SelectLayer
-                        className="appointment-demo-pc-popup-right-form-item"
-                        items={okrClassifyList}
-                        initValue={selectValue}
-                        renderSuffixIcon
-                        initText="请选择"
-                        onChangeClassify={handleSelectOkrClassify}
-                        title="公司人数"
-                        errMsg={errMsgNum}
-                        />
-                        <SelectLayer
-                        className="appointment-demo-pc-popup-right-form-item"
-                        items={okrClassifyList1}
-                        initValue={selectValue1}
-                        renderSuffixIcon
-                        initText="请选择"
-                        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('绩效考核')?'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 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}
-                        >提交</div>
-                        </div>
-                    </div>
-                
-            </div>
-        </div>
-        :
-        <div className="appointment-demo-h5" >
-            <div className="appointment-demo-h5-logo">
-                <img src={logo}></img>
-            </div>
-            <div className="appointment-demo-h5-title">
-                立即获取 OKR 行业案例
-            </div>
-            <div className="appointment-demo-h5-subtitle">
-                现在预约你将获得 15-30 分钟免费的 1对1 人工在线服务
-            </div>
-            <div className="appointment-demo-h5-form" >
-
-            <div className="appointment-demo-h5-form-item">
-                <Input  
-                label="姓名" 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="请输入手机号" 
-                id="phone"
-                errMsg={errMsg1}
-                required={true} 
-                value={phone}  
-                onChange={(val)=>onChangePhone(val)}
-                onBlur={onBlurPhone}
-                />
-            </div>
-
-                <Input className="appointment-demo-h5-form-item"
-                label="公司名称" placeholder="请输入公司全称" 
-                id="company"
-                errMsg={errMsg2}
-                required={true} 
-                value={company}  
-                onChange={(val)=>onChangeCompany(val)}
-                onBlur={onBlurCompany}
-                />
-                <SelectLayer
-                className="appointment-demo-h5-form-item"
-                items={okrClassifyList}
-                initValue={selectValue}
-                renderSuffixIcon
-                initText="请选择"
-                onChangeClassify={handleSelectOkrClassify}
-                title="公司人数"
-                errMsg={errMsgNum}
-                />
-                <SelectLayer
-                className="appointment-demo-h5-form-item"
-                items={okrClassifyList1}
-                initValue={selectValue1}
-                renderSuffixIcon
-                initText="请选择"
-                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={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>
-                </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('绩效考核')?'appointment-demo-h5-form-item-modules-item-active':''} appointment-demo-h5-form-item-modules-item`}
-                    onClick={()=>onClickAddModules('绩效考核')}
-                    >绩效考核</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>
-                </div>
-                <div className="appointment-demo-h5-form-submit-bck">
-                    <div className="appointment-demo-h5-form-submit" onClick={onClickSubmit}>提交</div>
-                </div>
-
-            </div>
-
-        </div>
-        }
-    </div>
-    }
-
-    return visibile && ReactDOM.createPortal(renderModal(), document.body);
-
-    
-}
-// static defaultProps = {
-//     label: "", //文本名称
-//     value: "", //输入框 的value
-//     isError: false, // 校验状态
-//     errMsg: "", //错误信息
-//     info: "", //提示信息
-//     type: "text",
-//     required: false, //是否渲染 *
-//     style: {},
-//     placeholder: "",
-//     maxLength: "",
-//     id: "",
-//     autoComplete: "off", //是否关闭自动完成事件
-//     onChange(val) { },
-//     onBlur(val) { },
-//     onFocus(val) { },
-//     onKeyPress(val) { },
-//   }