|
|
@@ -0,0 +1,528 @@
|
|
|
+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">@@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="请输入姓名" 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="请输入手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="short-control fl">
|
|
|
+ <el-form-item label="邮箱 :" prop="email">
|
|
|
+ <el-input v-model.trim="form.email" data-short-input class="item-input" placeholder="请输入邮箱"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="short-control fr">
|
|
|
+ <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 fl">
|
|
|
+ <el-form-item label="行业 :">
|
|
|
+ <el-cascader data-short-input v-model="form.industry" class="item-input" :options="industryData"
|
|
|
+ placeholder="请选择所属行业" clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="short-control fr">
|
|
|
+ <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" v-show="showCompany">
|
|
|
+ <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">
|
|
|
+ <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="职位 :">
|
|
|
+ <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-input
|
|
|
+ v-if="showOtherJob"
|
|
|
+ v-model.trim="form.otherJob"
|
|
|
+ data-short-input
|
|
|
+ class="item-input"
|
|
|
+ placeholder="请输入职位名称">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="long-control">
|
|
|
+ <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">
|
|
|
+ <el-form-item label="业务范围 :">
|
|
|
+ <el-input v-model="form.business" data-long-input class="item-input"
|
|
|
+ placeholder="请输入业务范围，让合作伙伴充分了解公司业务内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="long-control">
|
|
|
+ <el-form-item label="合作需求 :">
|
|
|
+ <el-input v-model="form.need" data-long-input class="item-input"
|
|
|
+ placeholder="请输入合作需求，从而创造并匹配更多合作交流机会"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="agree-service">
|
|
|
+ <el-checkbox v-model="form.agreeChecked"> 我同意剑鱼标讯将业务范围及合作需求提供给潜在合作伙伴搜索、查看</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">我们的客户经理会在24小时内尽快与您联系。</div>
|
|
|
+ <div class="success-footer">
|
|
|
+ <button type="button" class="custom-btn go-know" @click="showSuccess = false">我知道了</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+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
|
|
|
+ }
|
|
|
+})
|
|
|
+// 防抖
|
|
|
+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[3456789]\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 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
|
|
|
+ if (value === '') {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ if (!status) {
|
|
|
+ return callback(new Error('邮箱填写不正确'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validCompany = function(rule,value,callback) {
|
|
|
+ if (value === '') {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ if (value.length < 2) {
|
|
|
+ return callback(new Error('公司名称至少输入2个字'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ dialogTitle: '为给您匹配精准的推荐信息，请完善个人信息',
|
|
|
+ // showCompany: true, // 是否显示公司信息
|
|
|
+ regionData: filterData, // 地区数据
|
|
|
+ industryData: industryJson, // 行业数据
|
|
|
+ jobData: jobData, // 职位数据
|
|
|
+ scaleData: companyScaleData, // 公司规模数据
|
|
|
+ moldData: [{ // 公司类型数据
|
|
|
+ label: '公司',
|
|
|
+ value: '公司'
|
|
|
+ }, {
|
|
|
+ label: '个体经营者',
|
|
|
+ value: '个体经营者'
|
|
|
+ },{
|
|
|
+ label: '其他',
|
|
|
+ value: '其他'
|
|
|
+ }],
|
|
|
+ form: {
|
|
|
+ name: '', // 姓名
|
|
|
+ phone: '', // 手机号
|
|
|
+ email: '', // 邮箱
|
|
|
+ region: [], // 地区值
|
|
|
+ industry: [], // 行业值
|
|
|
+ mold: '公司', // 受雇类型值
|
|
|
+ companyName: '', // 公司名称
|
|
|
+ companyType: [], // 公司类型值
|
|
|
+ job: '', // 职位值
|
|
|
+ otherJob: '', //自定义职位
|
|
|
+ scale: '', // 公司规模
|
|
|
+ business: '', // 业务范围
|
|
|
+ need: '', // 合作需求
|
|
|
+ agreeChecked: true
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: validName
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: validPhone
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ {
|
|
|
+ validator: validEmail,
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ companyName: [
|
|
|
+ {
|
|
|
+ validator: validCompany,
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ showSearchResult: false,
|
|
|
+ companyList: [],
|
|
|
+ showForm: false, // 显示表单填写弹框
|
|
|
+ showSuccess: false, // 显示提交成功弹框
|
|
|
+ isForce: false, // 是否强制
|
|
|
+ source: '' // 来源模块
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ showOtherJob: function() {
|
|
|
+ return this.form.job == '其他'
|
|
|
+ },
|
|
|
+ showCompany: function() {
|
|
|
+ return this.form.mold === '公司'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ 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() {
|
|
|
+ $(document).off('click')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 是否留资
|
|
|
+ isNeedSubmit: function(source, callback) {
|
|
|
+ /*
|
|
|
+ 三级页-阅读原文 article_original
|
|
|
+ 三级页-收藏 article_collection
|
|
|
+ 大会员落地页-免费体验 member_freeuse
|
|
|
+ */
|
|
|
+ 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;
|
|
|
+ if (this.form.mold == '公司') {
|
|
|
+ params = {
|
|
|
+ source: source, // 来源模块
|
|
|
+ name: this.form.name,
|
|
|
+ phone: this.form.phone, // 手机号
|
|
|
+ email: this.form.email, // 邮箱
|
|
|
+ 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: true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ params = {
|
|
|
+ source: source, // 来源模块
|
|
|
+ name: this.form.name,
|
|
|
+ phone: this.form.phone, // 手机号
|
|
|
+ email: this.form.email, // 邮箱
|
|
|
+ province: this.form.region[0],
|
|
|
+ city: this.form.region[1] ? this.form.region[1] : '',
|
|
|
+ industry: this.form.industry.join('_'), // 行业值
|
|
|
+ hireType: this.form.mold, // 受雇类型值
|
|
|
+ agree: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(params)
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 手机号输入框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.name = res.data.name ? res.data.name : ''
|
|
|
+ _this.form.phone = res.data.phone ? res.data.phone : ''
|
|
|
+ _this.form.email = res.data.email ? res.data.email : ''
|
|
|
+ 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
|
|
|
+ } 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 ? res.data.agree : true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 公司名称获取焦点时
|
|
|
+ companyFocus: function() {
|
|
|
+ this.getResult(this.form.companyName)
|
|
|
+ },
|
|
|
+ // 企业名称联想
|
|
|
+ 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
|
|
|
+ // if (this.isForce) {
|
|
|
+ // history.back()
|
|
|
+ // } else {
|
|
|
+ // this.showForm = false
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
