jy/src/web/staticres/js/pc-collect-user-info.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 fs18" v-if="dialogTitleTop" v-text="dialogTitleTop"></div>
        <div class="dialog-header mt-4" v-if="dialogTitle" v-html="dialogTitle"></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" data-short-input class="item-input" placeholder="请输入姓名" @focus="nameFocus" required>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="short-control fr">
                  <el-form-item label="手机号 :" prop="phone">
                    <el-input v-model.trim="form.phone" maxlength="11" @input="inputPhone" data-short-input class="item-input" placeholder="请输入手机号" @focus="phoneFocus"></el-input>
                  </el-form-item>
                </div>
                <div class="short-control fl" v-if="moduleShow.email">
                  <el-form-item label="邮箱 :" prop="mail">
                    <el-input v-model.trim="form.mail" data-short-input class="item-input" placeholder="请输入邮箱" @focus="mailFocus"></el-input>
                  </el-form-item>
                </div>
                <div class="short-control fr" v-if="moduleShow.region">
                  <el-form-item label="地区 :">
                    <el-cascader data-short-input v-model="form.region" class="item-input" :options="regionData"
                      placeholder="请选择省份城市" clearable></el-cascader>
                  </el-form-item>
                </div>
                <div class="short-control fr" v-if="moduleShow.industry">
                  <el-form-item label="行业 :">
                    <el-cascader data-short-input v-model="form.industry" class="item-input" :options="industryData"
                      placeholder="请选择所属行业" :show-all-levels="false" clearable></el-cascader>
                  </el-form-item>
                </div>
                <div class="short-control fr" v-if="moduleShow.mold">
                  <el-form-item label="受雇类型 :">
                    <el-select v-model="form.mold" data-short-input class="item-input">
                      <el-option v-for="item in moldData" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </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="公司类型 :" class="company-type" prop="companyType">
                    <el-checkbox-group v-model="form.companyType">
                      <el-checkbox label="投标企业"></el-checkbox>
                      <el-checkbox label="招标采购单位"></el-checkbox>
                      <el-checkbox label="厂商"></el-checkbox>
                      <el-checkbox label="招标代理机构"></el-checkbox>
                      <el-checkbox label="经销商"></el-checkbox>
                      <el-checkbox label="服务提供商"></el-checkbox>
                      <el-checkbox label="其他"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
                <div class="long-control">
                  <el-form-item label="职位 :" prop="job">
                    <el-select v-model="form.job" placeholder="请选择职位" data-short-input class="item-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-if="showBranch" v-model="form.branch" placeholder="请选择部门" data-short-input class="item-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 class="long-control" v-if="moduleShow.scale">
                  <el-form-item label="公司规模 :">
                    <el-select v-model="form.scale" placeholder="请选择公司规模" data-short-input class="item-input" clearable>
                      <el-option v-for="item in scaleData" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="long-control" v-if="moduleShow.business">
                  <el-form-item label="业务范围 :">
                    <el-input type="textarea" autosize resize="none" v-model="form.business" data-long-input class="item-input"
                      placeholder="请输入业务范围，让合作伙伴充分了解公司业务内容"></el-input>
                  </el-form-item>
                </div>
                <div class="long-control" v-if="moduleShow.need">
                  <el-form-item label="合作需求 :">
                    <el-input type="textarea" autosize resize="none" v-model="form.need" data-long-input class="item-input"
                      placeholder="请输入合作需求，从而创造并匹配更多合作交流机会"></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="agree-service" v-if="moduleShow.agree">
              <el-checkbox v-model="form.agreeChecked">&nbsp;我同意剑鱼标讯将业务范围及合作需求提供给潜在合作伙伴搜索、查看</el-checkbox>
            </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-html="successText"></div>
        <div class="success-footer">
          <button type="button" class="custom-btn go-know" @click="knowHandle" v-text="successConfirmText"></button>
        </div>
      </div>
    </div>
  </div>
  `
// var temp = "\n  <div>\n    <div class=\"user-data-dialog\" id=\"collectUserInfoDialog\" v-if=\"showForm\">\n      <div class=\"mask\"></div>\n      <div class=\"dialog-container\">\n        <div class=\"dialog-header fs18\" v-if=\"dialogTitleTop\" v-text=\"dialogTitleTop\"></div>\n        <div class=\"dialog-header mt-4\" v-if=\"dialogTitle\" v-html=\"dialogTitle\"></div>\n        <div class=\"dialog-content\">\n          <el-form class=\"user-form\" :model=\"form\" :rules=\"rules\" ref=\"ruleForm\">\n            <!-- \u57FA\u672C\u4FE1\u606F -->\n            <div class=\"basic clearfix\">\n              <div class=\"form-title\">\u57FA\u672C\u4FE1\u606F</div>\n              <div class=\"form-main clearfix\">\n                <div class=\"short-control fl\">\n                  <el-form-item label=\"\u59D3\u540D :\" prop=\"name\">\n                    <el-input v-model.trim=\"form.name\" data-short-input class=\"item-input\" placeholder=\"\u8BF7\u8F93\u5165\u59D3\u540D\" @focus=\"nameFocus\" required>\n                    </el-input>\n                  </el-form-item>\n                </div>\n                <div class=\"short-control fr\">\n                  <el-form-item label=\"\u624B\u673A\u53F7 :\" prop=\"phone\">\n                    <el-input v-model.trim=\"form.phone\" maxlength=\"11\" @input=\"inputPhone\" data-short-input class=\"item-input\" placeholder=\"\u8BF7\u8F93\u5165\u624B\u673A\u53F7\" @focus=\"phoneFocus\"></el-input>\n                  </el-form-item>\n                </div>\n                <div class=\"short-control fl\" v-if=\"moduleShow.email\">\n                  <el-form-item label=\"\u90AE\u7BB1 :\" prop=\"mail\">\n                    <el-input v-model.trim=\"form.mail\" data-short-input class=\"item-input\" placeholder=\"\u8BF7\u8F93\u5165\u90AE\u7BB1\" @focus=\"mailFocus\"></el-input>\n                  </el-form-item>\n                </div>\n                <div class=\"short-control fr\" v-if=\"moduleShow.region\">\n                  <el-form-item label=\"\u5730\u533A :\">\n                    <el-cascader data-short-input v-model=\"form.region\" class=\"item-input\" :options=\"regionData\"\n                      placeholder=\"\u8BF7\u9009\u62E9\u7701\u4EFD\u57CE\u5E02\" clearable></el-cascader>\n                  </el-form-item>\n                </div>\n                <div class=\"short-control fr\" v-if=\"moduleShow.industry\">\n                  <el-form-item label=\"\u884C\u4E1A :\">\n                    <el-cascader data-short-input v-model=\"form.industry\" class=\"item-input\" :options=\"industryData\"\n                      placeholder=\"\u8BF7\u9009\u62E9\u6240\u5C5E\u884C\u4E1A\" :show-all-levels=\"false\" clearable></el-cascader>\n                  </el-form-item>\n                </div>\n                <div class=\"short-control fr\" v-if=\"moduleShow.mold\">\n                  <el-form-item label=\"\u53D7\u96C7\u7C7B\u578B :\">\n                    <el-select v-model=\"form.mold\" data-short-input class=\"item-input\">\n                      <el-option v-for=\"item in moldData\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\">\n                      </el-option>\n                    </el-select>\n                  </el-form-item>\n                </div>\n              </div>\n            </div>\n            <div class=\"company clearfix\">\n              <div class=\"form-title\">\u516C\u53F8\u4FE1\u606F</div>\n              <div class=\"form-main\">\n                <div class=\"long-control\" style=\"position: relative;\">\n                  <el-form-item label=\"\u516C\u53F8\u540D\u79F0 :\" prop=\"companyName\">\n                    <el-input \n                    v-model.trim=\"form.companyName\" \n                    data-long-input\n                    class=\"item-input company-name\" \n                    @focus=\"companyFocus\"\n                    @input=\"searchCompany\"\n                    placeholder=\"\u8BF7\u8F93\u5165\u516C\u53F8\u540D\u79F0\">\n                    </el-input>\n                  </el-form-item>\n                  <div class=\"company-result\" v-if=\"showSearchResult\">\n                    <div class=\"company-list\" v-for=\"item in companyList\" :key=\"item\" @click=\"selectCompany(item)\" v-html=\"item\"></div>\n                  </div>\n                </div>\n                <div class=\"long-control\" v-if=\"moduleShow.companyType\">\n                  <el-form-item label=\"\u516C\u53F8\u7C7B\u578B :\" class=\"company-type\">\n                    <el-checkbox-group v-model=\"form.companyType\">\n                      <el-checkbox label=\"\u6295\u6807\u4F01\u4E1A\"></el-checkbox>\n                      <el-checkbox label=\"\u62DB\u6807\u91C7\u8D2D\u5355\u4F4D\"></el-checkbox>\n                      <el-checkbox label=\"\u5382\u5546\"></el-checkbox>\n                      <el-checkbox label=\"\u62DB\u6807\u4EE3\u7406\u673A\u6784\"></el-checkbox>\n                      <el-checkbox label=\"\u7ECF\u9500\u5546\"></el-checkbox>\n                      <el-checkbox label=\"\u670D\u52A1\u63D0\u4F9B\u5546\"></el-checkbox>\n                      <el-checkbox label=\"\u5176\u4ED6\"></el-checkbox>\n                    </el-checkbox-group>\n                  </el-form-item>\n                </div>\n                <div class=\"long-control\">\n                  <el-form-item label=\"\u804C\u4F4D :\" prop=\"job\">\n                    <el-select v-model=\"form.job\" placeholder=\"\u8BF7\u9009\u62E9\u804C\u4F4D\" data-short-input class=\"item-input\" clearable>\n                      <el-option v-for=\"item in jobData\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\">\n                      </el-option>\n                    </el-select>\n                    <el-select v-if=\"showBranch\" v-model=\"form.branch\" placeholder=\"\u8BF7\u9009\u62E9\u90E8\u95E8\" data-short-input class=\"item-input\" clearable>\n                      <el-option v-for=\"item in branchData\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\">\n                      </el-option>\n                    </el-select>\n                  </el-form-item>\n                </div>\n                <div class=\"long-control\" v-if=\"moduleShow.scale\">\n                  <el-form-item label=\"\u516C\u53F8\u89C4\u6A21 :\">\n                    <el-select v-model=\"form.scale\" placeholder=\"\u8BF7\u9009\u62E9\u516C\u53F8\u89C4\u6A21\" data-short-input class=\"item-input\" clearable>\n                      <el-option v-for=\"item in scaleData\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\">\n                      </el-option>\n                    </el-select>\n                  </el-form-item>\n                </div>\n                <div class=\"long-control\" v-if=\"moduleShow.business\">\n                  <el-form-item label=\"\u4E1A\u52A1\u8303\u56F4 :\">\n                    <el-input type=\"textarea\" autosize resize=\"none\" v-model=\"form.business\" data-long-input class=\"item-input\"\n                      placeholder=\"\u8BF7\u8F93\u5165\u4E1A\u52A1\u8303\u56F4\uFF0C\u8BA9\u5408\u4F5C\u4F19\u4F34\u5145\u5206\u4E86\u89E3\u516C\u53F8\u4E1A\u52A1\u5185\u5BB9\"></el-input>\n                  </el-form-item>\n                </div>\n                <div class=\"long-control\" v-if=\"moduleShow.need\">\n                  <el-form-item label=\"\u5408\u4F5C\u9700\u6C42 :\">\n                    <el-input type=\"textarea\" autosize resize=\"none\" v-model=\"form.need\" data-long-input class=\"item-input\"\n                      placeholder=\"\u8BF7\u8F93\u5165\u5408\u4F5C\u9700\u6C42\uFF0C\u4ECE\u800C\u521B\u9020\u5E76\u5339\u914D\u66F4\u591A\u5408\u4F5C\u4EA4\u6D41\u673A\u4F1A\"></el-input>\n                  </el-form-item>\n                </div>\n              </div>\n            </div>\n            <div class=\"agree-service\" v-if=\"moduleShow.agree\">\n              <el-checkbox v-model=\"form.agreeChecked\">&nbsp;\u6211\u540C\u610F\u5251\u9C7C\u6807\u8BAF\u5C06\u4E1A\u52A1\u8303\u56F4\u53CA\u5408\u4F5C\u9700\u6C42\u63D0\u4F9B\u7ED9\u6F5C\u5728\u5408\u4F5C\u4F19\u4F34\u641C\u7D22\u3001\u67E5\u770B</el-checkbox>\n            </div>\n            <div class=\"dialog-footer\">\n              <el-button class=\"cancel-btn\" @click=\"cancelForm\">\u6682\u4E0D\u63D0\u4F9B</el-button>\n              <el-button class=\"submit-btn\" @click=\"submitForm('ruleForm')\">\u63D0\u4EA4</el-button>\n            </div>\n          </el-form>\n        </div>\n      </div>\n    </div>\n    <div id=\"success-dialog\" style=\"display: none;\" v-show=\"showSuccess\">\n      <div class=\"mask\"></div>\n      <div class=\"success-dialog-container\">\n        <div class=\"success-title\">\u63D0\u4EA4\u6210\u529F</div>\n        <div class=\"success-content\" v-html=\"successText\"></div>\n        <div class=\"success-footer\">\n          <button type=\"button\" class=\"custom-btn go-know\" @click=\"knowHandle\" v-text=\"successConfirmText\"></button>\n        </div>\n      </div>\n    </div>\n  </div>\n  ";
var filterData = chinaMapJSON.filter(function (item) {
  item.name = item.name.replace(/\s*/g,"")
  return item.name !== '海外' && item.name !== '钓鱼岛'
})
filterData.forEach(function (item) {
  if (item.name == '台湾省') { item.name = '台湾'}
  item.name = item.name.replace(/自治区|特别行政区|壮族|回族|维吾尔/g, '')
  item.label = item.name
  item.value = item.name
  var filterWord = ['北京市', '上海市', '天津市', '上海市', '重庆市', '香港', '澳门', '台湾']
  if (filterWord.indexOf(item.name) == -1) {
    item.children = item.city.map(function (v) {
      return {
        value: v.name,
        label: v.name
      }
    })
  }
})
industryJson.forEach(function (item) {
  item.label = item.name
  item.value = item.name
  item.children = item.children.map(function (v) {
    return {
      value: v.name,
      label: v.name
    }
  })
})
var jobData = jobJson.map(function (item) {
  return {
    value: item,
    label: item
  }
})
var companyScaleData = companyScaleJson.map(function (item) {
  return {
    value: item,
    label: item
  }
})
// 部门数据处理
var branchData = branchJson.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 vm = new Vue({
  el: '#vue-collect-user-info',
  delimiters: ['@@', '@@'],
  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[3-9]\d{9}$/.test(value)
      if(value === '') {
        return callback(new Error('手机号为必填项'));
      } else if (!status) {
        return callback(new Error('手机号填写不正确'));
      } else {
        callback();
      }
    }
    var validEmail = function(rule,value,callback) {
      var status = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.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('职位不能为空'));
      } else {
        if ((value.indexOf('总裁') === -1 || value.indexOf('总经理') === -1) && vm.showBranch && !vm.form.branch) {
          return callback(new Error('部门不能为空'));
        } else {
          callback();
        }
      }
    }
    return {
      dialogTitleTop: '为给您匹配精准的推荐信息，请完善个人信息',
      dialogTitle: '',
      // showCompany: true, // 是否显示公司信息
      regionData: filterData, // 地区数据
      industryData: industryJson, // 行业数据
      jobData: jobData, // 职位数据
      scaleData: companyScaleData, // 公司规模数据
      branchData: branchData,
      moldData: [{ // 公司类型数据
        label: '公司',
        value: '公司'
      }, {
        label: '个体经营者',
        value: '个体经营者'
      },{
        label: '其他',
        value: '其他'
      }],
      form: {
        name: '', // 姓名
        phone: '', // 手机号
        mail: '', // 邮箱
        region: [], // 地区值
        industry: [], // 行业值
        mold: '公司', // 受雇类型值
        companyName: '', // 公司名称
        companyType: [], // 公司类型值
        job: '', // 职位值
        otherJob: '', //自定义职位
        scale: '', // 公司规模
        business: '', // 业务范围
        need: '', // 合作需求
        agreeChecked: true,
        branch: ''
      },
      rules: {
        name: [
          {
            required: true,
            validator: validName,
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            validator: validPhone,
            trigger: 'blur'
          }
        ],
        mail: [
          {
            required: true,
            validator: validEmail,
            trigger: 'blur'
          }
        ],
        companyName: [
          {
            required: true,
            validator: validCompany,
            trigger: 'blur'
          }
        ],
        companyType: [
          {
            required: true,
            message:'公司类型为必填项',
            trigger: 'blur'
          }
        ],
        job: [
          {
            required: true,
            validator: validJob,
            trigger: 'change'
          }
        ]
      },
      showSearchResult: false,
      companyList: [],
      showForm: false,  // 显示表单填写弹框
      showSuccess: false, // 显示提交成功弹框
      isForce: false, // 是否强制
      source: '', // 来源模块
      curDom: null,
      // 默认为隐藏，需要展示则需判断
      moduleShow: {
        email: false,
        region: false,
        industry: false,
        mold: false,
        companyType: false,
        scale: false,
        business: false,
        need: false,
        agree: false,
      },
      sourceTitleMap: {
        article_attach_freeuser: '请留下联系方式，立即免费体验【附件下载】1次，招标文件/采购清单一键下载，商机更完整！',
        ent_portrait_freeuser: '请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        ent_portrait_winnerNewMsg_freeuser: '请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        ent_portrait_yearData_freeuser: '请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        ent_portrait_monthData_freeuser: '请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        ent_portrait_areaData_freeuser: '请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        ent_portrait_discountRate_freeuser: '请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        ent_portrait_top10_freeuser:'请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        ent_portrait_topShow_freeuser: '请留下联系方式，立即免费体验【企业中标分析】1次，多维度可视化分析竞争对手！',
        buyer_portrait_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_getNewMsg_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_yearData_freeuser:'请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_monthData_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_moneyRange_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_bidtypeData_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_rate_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_top12_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_topShow_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_withCapitalData_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_withEstablishData_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_withAreaData_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_topAgencyData_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        buyer_portrait_contacts_freeuser: '请留下联系方式，立即免费体验【采购单位全景分析】1次，帮你全面洞察采购单位，开发新客户！',
        ent_portrait_: '请留下联系方式，我们会尽快联系您！体验企业画像分析，帮你透视企业！',
        buyer_portrait_: '请留下联系方式，我们会尽快联系您！体验采购单位画像分析，为你挖掘客户！',
        member_attach: '请留下联系方式，我们会尽快联系您！体验附件下载特权，挖掘更多项目情报！',
        pc_index_bottom_adv: '请留下联系方式，我们会尽快联系您体验：市场分析周报/月报、竞对实时监控和分析、业主采购趋势/客户分析等',
        article_ent_portrait: '请留下联系方式，我们会尽快联系您！体验企业画像分析，帮你透视企业！',
        article_buyer_portrait: '请留下联系方式，我们会尽快联系您！体验采购单位画像分析，为你挖掘客户！',
        article_slogan: '请留下联系方式，我们会尽快联系您体验大会员全部功能！',
        member_: '请留下联系方式，我们会尽快联系您体验大会员全部功能！',
        function_: '请留下联系方式，我们会尽快联系您体验大会员全部功能！', // 大会员功能介绍
        jylab_see500_plus: '请留下联系方式，我们会尽快联系您！开通大会员可查看更多招标项目，实时监控更多潜在商机！', // 标讯搜索500条
        article_purchase_intention: '请留下联系方式，我们会尽快联系您！开通大会员可抢先对接采购单位，帮助企业拓客！', // 三级页-采购意向
        article_proposed_project: '请留下联系方式，我们会尽快联系您！开通大会员可抢先获知拟建商机动态，提高中标机率！', // 三级页-拟建项目
        'ent-manage-pc': '欢迎留下联系方式，我们的大客户经理会在24小时内联系您！',
        "jyarticle_see3_plus_pc":"请完善个人信息，获取更多免费查看公告权限",
        'activity_free_plan': '请完善信息，免费获取200剑鱼币',
        peugeot_supplier_regist:'请完善您的个人信息，抢先对接采购单位'
      },
      isRefresh: false // 留完资是否需要刷新页面
    }
  },
  computed: {
    showOtherJob: function() {
      return this.form.job == '其他'
    },
    showCompany: function() {
      return this.form.mold === '公司'
    },
    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
    },
    // 提交成功，确定按钮文案
    successConfirmText: function () {
      if (this.source.indexOf('activity_free_plan') !== -1) {
        return '去领取'
      } else {
        return '我知道了'
      }
    },
    // 提交成功 提示文案
    successText: function() {
      if (this.source.indexOf('_freeuser') > -1 && this.source.indexOf('member_') === -1) {
        var text = ''
        if (this.source.indexOf('buyer_portrait') > -1) {
          text = '采购单位全景分析'
        } else if (this.source.indexOf('ent_portrait') > -1) {
          text = '企业中标分析'
        } else if (this.source.indexOf('article_attach') > -1) {
          text = '附件下载'
        } else {
          return '我们会尽快联系您并预约演示时间，请耐心等待～您将获得免费体验大会员全部功能！'
        }
        return '恭喜您，成功解锁【' + text + '】权益1次。如需查看更多，请开通超级订阅，为您提供最新的商业情报，抢占先机。'
      } else {
        if (this.source.indexOf('ent-manage-pc') > -1) {
          return '我们会尽快联系您并预约演示时间，请耐心等待～<br>您将获得免费体验商机管理全部功能！'
        }
        if (this.source.indexOf('jyarticle_see3_plus_pc') > -1) {
          return ''
        }
        if (this.source === 'activity_free_plan') {
          return '完善信息任务已完成，快去领取剑鱼币吧~'
        }
        if (this.source === 'peugeot_supplier_regist') {
          return '我们会尽快联系您完成供应商报名，请耐心等待。'
        }
        return '我们会尽快联系您并预约演示时间，请耐心等待～<br>您将获得免费体验大会员全部功能！'
      }
    }
  },
  mounted: function () {
    let that = this;
    $(document).on('click', function (e) {
        let dom = $('.company-name')[0];
        if (dom) {
            // 如果点击的区域不在自定义dom范围
            if (!dom.contains((e.target))) {
              that.showSearchResult = false
            }
        }
    })
  },
  beforeDestroy: function () {
    $(document).off('click')
  },
  methods: {
    // 点击我知道了
    knowHandle: function() {
      this.showSuccess = false
      if (this.isRefresh) {
        window.location.reload()
      }
    },
    // 不需要调留资接口 弹出留资弹框回调方法
    noCallApiFn: function(source, isRefresh) {
      this.isRefresh = isRefresh
      vm.source = source
      this.showForm = true
      this.calcTitleText(source)
      this.getOldInfo(source)
    },
    calcTitleText: function (source) {
      if (!source) return
      var text = ''
      for (var key in this.sourceTitleMap) {
        if (source.indexOf(key) !== -1) {
          text = this.sourceTitleMap[key]
          break
        }
      }
      // 判断收藏留资显示
      if (this.source == "article_collection"){
        for (var k in this.moduleShow) {
          this.moduleShow[k] = false
        }

      }
      //  判断阅读原文留资显示
      if (vm.source == "article_original"){
        for (var k in vm.moduleShow) {
          vm.moduleShow[k] = false
        }
      }
      if (text) {
        if (source.indexOf('_freeuser') > -1 && text.indexOf('【') > -1) {
          var r = text.match(/\【(.+?)\】/g)
          this.dialogTitleTop = '欢迎体验' + r[0].replace('【','').replace('】','')
          this.dialogTitle = text
        } else if(source.indexOf('ent-manage') > -1){
          this.dialogTitle = text
          this.dialogTitleTop = '欢迎体验剑鱼标讯商机管理'
        } else if(source.indexOf('jyarticle_see3_plus_pc') > -1){
          this.dialogTitle = text
          this.dialogTitleTop = '完善信息'
        } else if (source === 'activity_free_plan') {
          this.dialogTitle = text
          this.dialogTitleTop = '完善信息'
        }
        // else if (source.indexOf("article_collection") > -1){
        //   this.dialogTitle = text
        //   this.dialogTitleTop = "为给您匹配精准的推荐信息，请完善个人信息"
        // }
          else {
          this.dialogTitle = text
          this.dialogTitleTop = '欢迎体验剑鱼大会员'
        }
        for (var k in this.moduleShow) {
          this.moduleShow[k] = false
        }
      }
    },
    nameFocus:function(){
      this.$refs['ruleForm'].clearValidate(['name']);
    },
    phoneFocus:function(){
      this.$refs['ruleForm'].clearValidate(['phone']);
    },
    mailFocus:function(){
      this.$refs['ruleForm'].clearValidate(['mail']);
    },
    // 公司名称获取焦点时
    companyFocus: function() {
      this.$refs['ruleForm'].clearValidate(['companyName']);
      this.getResult(this.form.companyName)
    },
    otherFocus:function() {
      this.$refs['ruleForm'].clearValidate(['job','otherJob']);
    },
    // 是否留资
    isNeedSubmit: function(source, callback, dom,infoid) {
      /*
        三级页-阅读原文	article_original
        三级页-收藏	article_collection
        大会员落地页-免费体验	member_freeuse
      */
      this.calcTitleText(source)
      this.source = source
      var _this = this

      $.ajax({
        type:'GET',
        url:'/salesLeads/retainedCapital',
        data: {
          source: source
        },
        success:function (res) {
          // 判断当前信息否在其他页面留资  如果全部留资 直接弹窗提交成功
          var checkKeys = ['name', 'phone','companyType', 'company', 'branch', 'position']
          var sourceList = ['article_collection', 'article_original', 'jyarticle_see3_plus_app', 'jyarticle_see3_plus_pc', 'jyarticle_see3_plus_wx', 'jypush_see10_plus_app', 'jypush_see10_plus_wx']
          var isCollect = sourceList.includes(source)
          if (infoid != ""){
            res.info.publish_id = infoid
          }
          var result = checkRequiredKeys(checkKeys, res.info)
          if (result) {
            _this.showForm = false
            res.data.retainedCapital = false
            callback && callback(res)
            // 包含这些source，不存记录
            // 非主动触发留资节点，每点击一次数据库不会记录
            if(!isCollect) {
              _this.formAjax(_this.source, res.info)
            }
            switch (source) {
              case 'member_freeuse': {
                _this.showSuccess = true
                break
              }
              case 'jyarticle_see3_plus_pc': {
                $(".detail-nj-btn").click(function(){
                  $(".mask-zzz").hide()
                })
                break
              }
              case 'article_original': {
                _this.showSuccess = false
                break
              }
              case 'article_collection': {
                _this.showSuccess = false
                break
              }
              case 'pc_index_bottom_adv': {
                location.href = '/big/page/index'
                break
              }
              default: {
                if (source.indexOf('_freeuser') > -1) {
                  _this.showSuccess = true
                } else {
                  _this.showSuccess = true
                }
              }
            }
          } else if (res.data) {
            window.isRetained = res.data.retainedCapital
            _this.isForce = res.data.fource
            if(window.isFree || !isCollect) {
              if (res.data.retainedCapital || !result) {
                _this.showForm = true
                _this.getOldInfo(source)
                _this.curDom = dom
              } else {
                callback && callback(res)
              }              
            } else {
              callback && callback(res)
            }
          }
        }
      })
    },
    // 表单提交事件
    submitForm: function(formName) {
      var _this = this
      this.$refs[formName].validate(function (valid) {
        if (valid) {
          _this.formAjax(vm.source)
          _this.bigDocAjax()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 快照页引流的文案埋点 留资提交时埋点
    bigDocAjax: function() {
      if (getParam('id')) {
        try {
          $.ajax({
            type: "POST",
            url: "/publicapply/drainage/bmt/" + getParam('id'),
            data: {
              p: 'ICRW'
            },
            success: function(r) {
              console.log(r)
            }
          })
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 表单提交请求
    formAjax: function(source, info) {
      var infoid = window.location.pathname.split("/")[3].split(".html")[0]
      var params = {
        source: source,
        name: this.form.name,
        phone: this.form.phone,
        mail: this.form.mail,
        // province: this.form.region[0],
        // city: this.form.region[1] ? this.form.region[1] : '',
        industry: this.form.industry.join('_'),
        // hireType: this.form.mold, // 受雇类型值
        company: this.form.companyName, // 公司名称
        companyType: this.form.companyType.join(','),
        position: this.form.job == '其他' ? ('其他/' + this.form.otherJob) : this.form.job,
        // company_size: this.form.scale,
        // workScope: this.form.business,
        // partnerNeeds: this.form.need,
        // agree: this.form.agreeChecked,
        branch: this.form.branch.indexOf('总裁') > -1 || this.form.branch.indexOf('总经理') > -1 ?  '' : this.form.branch
      }
      if (infoid != ""){
        params.publish_id = infoid
      }
      if (info) {
        params = info
        params.source = source
      }
      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
            typeof collectSubmitCallback === 'function' ? collectSubmitCallback(source, res.data) : null
            switch (source) {
              case 'member_freeuse': {
                _this.showSuccess = true
                break
              }
              case 'article_original': {
                // 如果是阅读原文点击的 留完用户资料执行原点击操作
                // $(".com-original").trigger('click')
                // $(".mask-zz").hide()
                // $(".dialog-container").hide()
                break
              }
              case 'article_collection': {
                // $('#bidCollect').trigger('click') // 三级页收藏事件
                break
              }
              case 'article_collection': {
                // $('#bidCollect').trigger('click') // 三级页收藏事件
                // 单个收藏事件传当前点击的dom
                if(_this.curDom) {
                  _this.curDom.trigger('click') // 列表页单个收藏事件
                  _this.curDom = null
                } else {
                  $('#bid-collect').trigger('click') // 列表页批量收藏事件
                }
                break
              }
              case 'jyarticle_see3_plus_pc': {
                location.reload()
                break
              }
              case 'pc_index_bottom_adv': {
                location.href = '/big/page/index'
                break
              }
              default: {
                if (source.indexOf('_freeuser') > -1) {
                  _this.showSuccess = true
                } else {
                  _this.showSuccess = true
                }
                break
              }
            }
          }
        }
      })
    },
    // 手机号输入框input事件
    inputPhone: function(val) {
      this.form.phone = val.replace(/[^\d]/g,'')
    },
    // 查询表单回显信息
    getOldInfo: function(source) {
      var _this = this
      $.ajax({
        type:'POST',
        url:'/salesLeads/retainedCapital?t=' + Date.now(),
        data: {
          source: source
        },
        success:function (res) {
          if (res && res.info) {
            res.data = res.info
          }
          if (res.data) {
            _this.form.name = res.data.name ? res.data.name : ''
            _this.form.phone = res.data.phone ? res.data.phone : ''
            _this.form.mail = res.data.mail ? res.data.mail : ''
            if (res.data.province && res.data.city) {
              _this.form.region = [res.data.province, res.data.city]
            } else if (res.data.province && !res.data.city) {
              _this.form.region = [res.data.province]
            } else {
              _this.form.region = []
            }
            _this.form.industry = res.data.industry ? res.data.industry.split('_') : []
            _this.form.mold = res.data.hireType ? res.data.hireType : '公司'
            _this.form.companyName = res.data.company ? res.data.company : ''
            _this.form.companyType = res.data.companyType ? res.data.companyType.split(',') : []
            if (res.data.position) {
              if (jobJson.indexOf(res.data.position) == -1) {
                // _this.form.job = '其他'
                // _this.form.otherJob = res.data.position.replace('其他/', '')
                _this.form.job = ''
                _this.form.otherJob = ''
              } else {
                _this.form.job = res.data.position
              }
            } else {
              _this.form.job = ''
            }
            _this.form.scale = res.data.company_size ? res.data.company_size : ''
            _this.form.business = res.data.workScope ? res.data.workScope : ''
            _this.form.need = res.data.partnerNeeds ? res.data.partnerNeeds : ''
            _this.form.agreeChecked = res.data.agree == undefined ?  true : res.data.agree
            _this.form.branch = res.data.branch || ''
          }
        }
      })
    },
    // 企业名称联想
    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, "<font style='color:#2ABED1;'>" + name + "</font>")
      } else {
        return val
      }
    },
    // 暂不提供
    cancelForm: function() {
      this.showForm = false
      this.form.name = ''
      this.form.phone = ''
      this.form.mail = ''
      this.form.industry = []
      this.form.companyName = ''
      this.form.companyType = []
      this.form.job = ''
      this.form.otherJob = ''
      this.form.scale = ''
      this.form.business = ''
      this.form.need = ''
    }
  }
})