jy/src/web/staticres/common-module/pc-dialog/js/leave-info-dialog.js

// 模板字符串
var temp = `
  <div>
    <div class="user-data-dialog" id="collectUserInfoDialog" v-if="showForm">
      <div class="mask"></div>
      <div class="dialog-container">
        <div class="dialog-header"></div>
        <div class="dialog-content">
          <el-form class="user-form" :model="form" :rules="rules" ref="ruleForm">
            <!-- 基本信息 -->
            <div class="basic clearfix">
              <div class="form-title">基本信息</div>
              <div class="form-main clearfix">
                <div class="short-control fl">
                  <el-form-item label="姓名 :" prop="name">
                    <el-input v-model.trim="form.name"  class="item-input" placeholder="请输入姓名" @focus="nameFocus" required>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="short-control fr">
                  <el-form-item label="邮箱 :" prop="mail">
                    <el-input v-model.trim="form.mail"  class="item-input" placeholder="请输入邮箱" @focus="mailFocus"></el-input>
                  </el-form-item>
                </div>
                <div class="short-control fl">
                  <el-form-item label="手机号 :" prop="phone">
                    <el-input v-model.trim="form.phone" maxlength="11" @input="inputPhone"  class="item-input" placeholder="请输入手机号" @focus="phoneFocus"></el-input>
                  </el-form-item>
                </div>
                <div class="short-control fr" v-if="showCode">
                  <el-form-item label="验证码 :" prop="code">
                    <el-input v-model.trim="form.code" maxlength="6" @change="checkCode" class="item-input code-input" placeholder="请输入手机验证码" @focus="codeFocus">
                      <el-button slot="append" :disabled="sendCodeBtn" @click="sendCode">@@codeText@@</el-button>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="company clearfix">
              <div class="form-title">公司信息</div>
              <div class="form-main">
                <div class="long-control" style="position: relative;">
                  <el-form-item label="公司名称 :" prop="companyName">
                    <el-input
                    v-model.trim="form.companyName"
                    data-long-input
                    class="item-input company-name"
                    @focus="companyFocus"
                    @input="searchCompany"
                    placeholder="请输入公司名称">
                    </el-input>
                  </el-form-item>
                  <div class="company-result" v-if="showSearchResult">
                    <div class="company-list" v-for="item in companyList" :key="item" @click="selectCompany(item)" v-html="item"></div>
                  </div>
                </div>
                <div class="long-control">
                  <el-form-item label="职位 :" prop="job">
                    <el-select v-model="form.job" placeholder="请选择职位"  class="item-input short-input" clearable>
                      <el-option v-for="item in jobData" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select v-show="showBranch" v-model="form.branch" placeholder="请选择部门" class="item-input short-input" clearable>
                      <el-option v-for="item in branchData" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="dialog-footer">
              <el-button class="cancel-btn" @click="cancelForm">暂不提供</el-button>
              <el-button class="submit-btn" @click="submitForm('ruleForm')">提交</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div id="success-dialog" style="display: none;" v-show="showSuccess">
      <div class="mask"></div>
      <div class="success-dialog-container">
        <div class="success-title">提交成功</div>
        <div class="success-content" v-if="defaultSource">我们的客户经理会在24小时内尽快与您联系。</div>
        <div class="success-content" v-else>我们稍后将以邮件的形式发送数据样例。</div>
        <div class="success-footer">
          <button type="button" class="custom-btn go-know" @click="showSuccess = false">我知道了</button>
        </div>
        <div class="dialog-adv"  v-if="!defaultSource" @click="dataExport">
          <img src="/common-module/pc-dialog/image/data-export.png" />
        </div>
      </div>
    </div>
    <div id="export-dialog" v-show="showExport">
      <div class="mask"></div>
      <div class="export-dialog-container">
        <div class="export-title">
          <span class="export-close" @click="showExport = false"></span>
        </div>
        <div class="export-content">您可以通过剑鱼标讯提供的全国招投标数据自助导出功能，指定关键词、发布时间、地区或行业等筛选条件，以Excel表格的形式打包下载，精准获取所需数据。</div>
        <div class="export-footer">
          <button type="button" class="custom-btn go-know" @click="dataExport">数据自助导出</button>
        </div>
      </div>
    </div>
  </div>
  `
var jobJson = [
  '总裁',
  '总经理',
  '总监',
  '经理',
  '主管',
  '职员'
]
var branchJson = [
  '市场',
  '产品',
  '销售',
  '渠道',
  '其他'
]
var jobData = jobJson.map(function (item) {
  return {
    value: item,
    label: item
  }
})
// 防抖
function debounce(fn, delay) {
  var timer
  return function () {
    var context = this
    var args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}
// 部门数据处理
var branchData = branchJson.map(function(item) {
  return {
    value: item,
    label: item
  }
})
var vm = new Vue({
  el: '#vue-collect-user-info',
  delimiters: ['@@', '@@'],
  props: ['type'],
  template: temp,
  data: function () {
    var validName = function(rule,value,callback) {
      if(value === '') {
        return callback(new Error('姓名为必填项'));
      } else {
        if (value.length < 2) {
          return callback(new Error('姓名填写不正确'));
        }
        callback();
      }
    }
    var validPhone = function(rule,value,callback) {
      var status = /^1[3456789]\d{9}$/.test(value)
      if(value === '') {
        return callback(new Error('手机号为必填项'));
      } else if (!status) {
        return callback(new Error('手机号填写不正确'));
      } else {
        callback();
      }
    }
    var validCode = function(rule,value,callback) {
      var status = /\d{6}/.test(value)
      if(value === '') {
        return callback(new Error('短信验证码为必填项'));
      } else if (!status) {
        return callback(new Error('验证码格式不正确'));
      } else {
        setTimeout(function() {
          if (!vm.codeStatus) {
            return callback(new Error('短信验证码不正确'));
          } else {
            callback();
          }
        }, 500)
      }
    }
    var validEmail = function(rule,value,callback) {
      var status = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
      if (value === '') {
        return callback(new Error('邮箱为必填项'));
      } else {
        if (!status) {
          return callback(new Error('邮箱填写不正确'));
        } else {
          callback();
        }
      }
    }
    var validCompany = function(rule,value,callback) {
      if (value === '') {
        return callback(new Error('公司名称为必填项'));
      } else {
        if (value.length < 2) {
          return callback(new Error('公司名称至少输入2个字'));
        } else {
          callback();
        }
      }
    }
    var validJob = function(rule,value,callback) {
      if(value === '') {
        return callback(new Error('职位为必填项'));
        return callback();
      } else {
        if (value === '其他' && vm.form.otherJob === '') {
          return callback();
        } else {
          callback();
        }
      }
    }
    return {
      dialogTitle: '为给您匹配精准的推荐信息，请完善个人信息',
      jobData: jobData, // 职位数据
      branchData: branchData,
      form: {
        oldPhone: '', // 带出来的手机号，用于判断是否需要短信验证码
        name: '', // 姓名
        phone: '', // 手机号
        mail: '', // 邮箱
        code: '', // 短信验证码
        companyName: '', // 公司名称
        job: '', // 职位值
        otherJob: '', //自定义职位
        branch: ''
      },
      codeText: '获取验证码',
      sendCodeBtn: false,
      countdown: 0,
      codeStatus: true,
      rules: {
        name: [
          {
            required: true,
            validator: validName,
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            validator: validPhone,
            trigger: 'blur'
          }
        ],
        mail: [
          {
            required: true,
            validator: validEmail,
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            validator: validCode,
            message: '',
            trigger: 'blur'
          }
        ],
        companyName: [
          {
            required: true,
            validator: validCompany,
            trigger: 'blur'
          }
        ],
        job: [
          {
            required: true,
            validator: validJob,
            trigger: 'blur'
          }
        ]
      },
      showSearchResult: false,
      companyList: [],
      showForm: false,  // 显示表单填写弹框
      showSuccess: false, // 显示提交成功弹框
      showExport: false,
      isForce: false, // 是否强制
      source: '' // 来源模块
    }
  },
  computed: {
    showOtherJob: function() {
      return this.form.job == '其他'
    },
    showCode: function () {
      return (this.form.phone !== this.form.oldPhone && this.form.phone.length === 11) || !this.form.oldPhone
    },
    defaultSource: function() {
      // 默认提交成功不显示广告图和邮箱文案 如果是结构化数据则显示
      return this.source.indexOf('structed') === -1
    },
    showBranch: function () {
      // 切换到总裁或总经理之后 把之前选择的部门清空
      if (this.form.job.indexOf('总裁') > -1 || this.form.job.indexOf('总经理') > -1) {
        this.form.branch = ''
      }
      var zc = this.form.job.indexOf('总裁') > -1
      var zjl = this.form.job.indexOf('总经理') > -1
      return !(zc || zjl) && this.form.job
    }
  },
  mounted() {
    var that = this;
    $(document).on('click', function (e) {
      let dom = $('.company-name')[0];
      if (dom) {
        // 如果点击的区域不在自定义dom范围
        if (!dom.contains((e.target))) {
          that.showSearchResult = false
        }
      }
    })
    $(window).on('resize', this.changeTop)
  },
  beforeDestroy() {
    $(document).off('click')
  },
  methods: {
    changeTop: function () {
      this.$nextTick(function () {
        var dialogDom = $('#collectUserInfoDialog .dialog-container')
        var diffHeight = window.innerHeight - dialogDom.height() - 240
        if (diffHeight < 0) {
          dialogDom.css('margin-top', diffHeight.toString() + 'px')
        }
      })
    },
    nameFocus:function(){
      this.$refs['ruleForm'].clearValidate(['name']);
    },
    phoneFocus:function(){
      this.$refs['ruleForm'].clearValidate(['phone']);
    },
    mailFocus:function(){
      this.$refs['ruleForm'].clearValidate(['mail']);
    },
    codeFocus: function() {
      this.$refs['ruleForm'].clearValidate(['code']);
    },
    // 公司名称获取焦点时
    companyFocus: function() {
      this.$refs['ruleForm'].clearValidate(['companyName']);
      this.getResult(this.form.companyName)
    },
    otherFocus:function() {
      this.$refs['ruleForm'].clearValidate(['job','otherJob']);
    },
    // 发送验证码
    sendCode: function() {
      var status = /^1[3456789]\d{9}$/.test(this.form.phone)
      var _this = this
      if (!status) return
      $.ajax({
        type:'POST',
        url:'/salesLeads/sendMsg',
        data: {
          phoneNum: _this.form.phone
        },
        success:function (res) {
          if (res.data && res.data.success) {
            _this.sendCodeBtn = true
            _this.countdown = 60
            _this.codeText = '重新获取' + _this.countdown + 's'
            var timeInt = setInterval(function() {
              _this.countdown--
              _this.codeText = '重新获取' + _this.countdown + 's'
              if (_this.countdown <= 0) {
                _this.sendCodeBtn = false
                _this.codeText = '获取验证码'
                window.clearInterval(timeInt)
              }
            }, 1000)
          } else {
            _this.$message.error('短信验证码发送失败');
          }
        }
      })
    },
    // 校验验证码
    checkCode: function(val) {
      console.log(val)
      var _this = this
      if (val.length !== 6) return
      $.ajax({
        type:'POST',
        url:'/salesLeads/checkCode',
        data: {
          code: _this.form.code,
          phoneNum: _this.form.phone
        },
        success:function (res) {
          if (res.data && res.data.flag) {
            _this.$message.success('验证成功')
            _this.codeStatus = true
          } else {
            _this.codeStatus = false
          }
        }
      })
    },
    // 日志统计
    logAjax: function(source) {
      $.ajax({
        type:'POST',
        url:'/front/portraitClassify?source=' + source,
        success:function (res) {
          console.log(res)
        }
      })
    },
    // 是否留资
    isNeedSubmit: function(source, callback, dom) {
      if (!loginflag) {
        openLoginDig()
        return
      }
      this.source = source
      this.logAjax(source)
      var _this = this
      $.ajax({
        type:'POST',
        url:'/salesLeads/retainedCapital',
        data: {
          source: source
        },
        success:function (res) {
          // 判断当前信息否在其他页面留资  如果全部留资 直接弹窗提交成功
          var checkKeys = ['name', 'phone', 'company', 'mail', 'branch', 'position']
          var result = checkRequiredKeys(checkKeys, res.info)
          if (result) {
            callback && callback()
          } else if (res.data) {
            _this.isForce = res.data.fource
            if (res.data.retainedCapital) {
              _this.showForm = true
              _this.changeTop()
              if (res.info) {
                echoRequiredValues(_this.form, res.info, ['name', 'phone', 'mail', 'branch'])
                // 原有赋值回显逻辑
                _this.form.oldPhone = res.info.phone ? res.info.phone : ''
                _this.form.companyName = res.info.company ? res.info.company : ''
                if (res.info.position) {
                  if (jobJson.indexOf(res.info.position) == -1) {
                    // _this.form.job = '其他'
                    // _this.form.otherJob = res.data.position.replace('其他/', '')
                    _this.form.job = ''
                    _this.form.otherJob = ''
                  } else {
                    _this.form.job = res.info.position
                  }
                } else {
                  _this.form.job = ''
                }
              }
            } else {
              callback && callback()
            }
          }
        }
      })
    },
    // 表单提交事件
    submitForm: function(formName) {
      var _this = this
      this.$refs[formName].validate(function (valid) {
        if (valid) {
          _this.formAjax(_this.source)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 表单提交请求
    formAjax: function(source) {
      var params = {
        source: source,
        name: this.form.name,
        phone: this.form.phone,
        mail: this.form.mail,
        company: this.form.companyName, // 公司名称
        position: this.form.job == '其他' ?  this.form.job + '/' + this.form.otherJob : this.form.job,
        code: this.form.code,
        agree: true, // 原来留资模块的同意协议字段，，，默认传一个true 方便后端处理
        branch: this.form.branch.indexOf('总裁') > -1 || this.form.branch.indexOf('总经理') > -1 || !this.form.job ? '' : this.form.branch
      }
      var _this = this
      $.ajax({
        type:'POST',
        url:'/salesLeads/collectInfo',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(params),
        success:function (res) {
          if (res.data) {
            _this.showForm = false
            _this.showSuccess = true
          } else {
            _this.$message.error(res.error_msg);
          }
        }
      })
    },
    // 手机号输入框input事件
    inputPhone: function(val) {
      this.form.phone = val.replace(/[^\d]/g,'')
    },
    // 企业名称联想
    getResult:function(name) {
      // 名称为空或长度小于2不发请求
      if (!name || name.length < 2) return
      var _this = this
      $.ajax({
        type:'POST',
        url:'/jypay/user/company/association',
        data: {
          name: name
        },
        heads : {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success:function (res) {
          console.log(res)
          if (res.data && res.data.length > 0) {
            var result = []
            res.data.map(function(item){
              item = _this.brightKeyword(item)
              result.push(item)
              return result
            })
            _this.companyList = result
            _this.showSearchResult = true
          }
        }
      })
    },
    searchCompany: debounce(function(val){
      if(val === '') { this.showSearchResult = false}
      this.getResult(val)
    }, 600),
    // 选择联想出来的公司名称
    selectCompany: function(item) {
      this.form.companyName = item.replace(/<.*?>/ig, '')
      this.showSearchResult = false
    },
    // 关键词高亮
    brightKeyword: function (val) {
      var name = this.form.companyName
      if (val.indexOf(name) !== -1) {
        return val.replace(name, `<span style='color:#2ABED1;'>${name}</span>`)
      } else {
        return val
      }
    },
    // 暂不提供
    cancelForm: function() {
      this.form.name = ''
      this.form.phone = ''
      this.form.mail = ''
      this.form.companyName = ''
      this.form.job = ''
      this.form.otherJob = ''
      this.form.code = ''
      if (this.source.indexOf('structed') > -1) {
        this.showForm = false
        this.showExport = true
      } else {
        this.showForm = false
      }
    },
    // 数据导出
    dataExport: function() {
      location.href = "/front/dataExport/toSieve"
    }
  }
})