|
|
@@ -0,0 +1,539 @@
|
|
|
+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-input
|
|
|
+ v-if="showOtherJob"
|
|
|
+ v-model.trim="form.otherJob"
|
|
|
+ class="item-input short-input"
|
|
|
+ @focus="otherFocus"
|
|
|
+ placeholder="请输入职位名称">
|
|
|
+ </el-input>
|
|
|
+ </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">我们的客户经理会在24小时内尽快与您联系。</div>
|
|
|
+ <div class="success-footer">
|
|
|
+ <button type="button" class="custom-btn go-know" @click="showSuccess = false">我知道了</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="export-dialog" v-show="showExport">
|
|
|
+ <div class="mask"></div>
|
|
|
+ <div class="export-dialog-container">
|
|
|
+ <div class="export-title"></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 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 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() {
|
|
|
+ console.log(vm.codeStatus, '111')
|
|
|
+ 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('职位不能为空'));
|
|
|
+ } else {
|
|
|
+ if (value === '其他' && vm.form.otherJob === '') {
|
|
|
+ return callback(new Error('请输入职位'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ dialogTitle: '为给您匹配精准的推荐信息，请完善个人信息',
|
|
|
+ jobData: jobData, // 职位数据
|
|
|
+ form: {
|
|
|
+ oldPhone: '', // 带出来的手机号，用于判断是否需要短信验证码
|
|
|
+ name: '', // 姓名
|
|
|
+ phone: '', // 手机号
|
|
|
+ mail: '', // 邮箱
|
|
|
+ code: '', // 短信验证码
|
|
|
+ companyName: '', // 公司名称
|
|
|
+ job: '', // 职位值
|
|
|
+ otherJob: '' //自定义职位
|
|
|
+ },
|
|
|
+ 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: false,
|
|
|
+ validator: validJob
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ $(document).off('click')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 是否留资
|
|
|
+ isNeedSubmit: function(source, callback, dom) {
|
|
|
+ this.source = source
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ type:'POST',
|
|
|
+ url:'/salesLeads/retainedCapital',
|
|
|
+ data: {
|
|
|
+ source: source
|
|
|
+ },
|
|
|
+ success:function (res) {
|
|
|
+ if (res.data) {
|
|
|
+ if (res.data.retainedCapital) {
|
|
|
+ _this.showForm = true
|
|
|
+ _this.getOldInfo()
|
|
|
+ } else {
|
|
|
+ callback && callback()
|
|
|
+ }
|
|
|
+ _this.isForce = res.data.fource
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 表单提交事件
|
|
|
+ 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 方便后端处理
|
|
|
+ }
|
|
|
+ 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,'')
|
|
|
+ },
|
|
|
+ // 查询表单回显信息
|
|
|
+ getOldInfo: function() {
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ type:'POST',
|
|
|
+ url:'/salesLeads/echoInfo?t=' + Date.now(),
|
|
|
+ success:function (res) {
|
|
|
+ if (res.data) {
|
|
|
+ _this.form.oldPhone = res.data.phone ? res.data.phone : ''
|
|
|
+ _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 : ''
|
|
|
+ _this.form.companyName = res.data.company ? res.data.company : ''
|
|
|
+ if (res.data.position) {
|
|
|
+ if (res.data.position.indexOf('其他') > -1 || jobJson.indexOf(res.data.position.replace('其他/', '')) == -1) {
|
|
|
+ _this.form.job = '其他'
|
|
|
+ _this.form.otherJob = res.data.position.replace('其他/', '')
|
|
|
+ } else {
|
|
|
+ _this.form.job = res.data.position
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.form.job = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 企业名称联想
|
|
|
+ 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"
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
