|
|
@@ -0,0 +1,483 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN" style="font-size: 50px;">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <title>完善信息</title>
|
|
|
+ <!--引入公共资源头部-->
|
|
|
+ {{include "/big-member/meta.html"}}
|
|
|
+
|
|
|
+ <!--S-当前页必定需要预加载的资源-->
|
|
|
+ <link rel="preload" as="style" href='//cdn.jsdelivr.net/npm/vant@2.8.2/lib/index.css'/>
|
|
|
+ <link rel="preload" as="style" href='//cdn.jsdelivr.net/npm/vant@2.8.2/lib/icon/local.css'/>
|
|
|
+ <link rel="preload" as="style"
|
|
|
+ href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/css/page_info_collect.css?v={{Msg "seo" "version"}}'/>
|
|
|
+ <!--E-当前页必定需要预加载的资源-->
|
|
|
+
|
|
|
+
|
|
|
+ <!--S-当前页面的css资源-->
|
|
|
+ <link rel="stylesheet" href='//cdn.jsdelivr.net/npm/vant@2.8.2/lib/index.css'/>
|
|
|
+ <link rel="stylesheet" href='//cdn.jsdelivr.net/npm/vant@2.8.2/lib/icon/local.css'/>
|
|
|
+ <link rel="stylesheet"
|
|
|
+ href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/perfect-info/index.css?v={{Msg "seo" "version"}}'/>
|
|
|
+ <!--E-当前页面的css资源-->
|
|
|
+ <script>
|
|
|
+ try {
|
|
|
+ window.JyObj.hiddenBottom('0')
|
|
|
+ } catch (e) {
|
|
|
+ console.log('error: app not function')
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+<div class="j-container">
|
|
|
+ {{include "/big-member/header.html"}}
|
|
|
+ <div class="j-main perfect-info-group" id="perfect-info-page" v-cloak>
|
|
|
+ <div class="j-container">
|
|
|
+ <div class="j-main info-collect">
|
|
|
+ <div class="top-tip-group">
|
|
|
+ <p class="top-tip-text">请留下您的联系方式，客户经理将在24小时内为您服务！
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="form-card-group">
|
|
|
+ <div class="form-title">基本信息</div>
|
|
|
+ <div class="form-content-card">
|
|
|
+ <van-field v-model.trim="infoMap.name" label="姓名" @focus="infoCheckMap.name = ''" @blur="getCheckMap('name')"
|
|
|
+ :error-message="infoCheckMap.name" required placeholder="请输入姓名"></van-field>
|
|
|
+ <van-field v-model.trim="infoMap.phone" label="手机号" @focus="infoCheckMap.phone = ''"
|
|
|
+ @blur="getCheckMap('phone')" :error-message="infoCheckMap.phone" required
|
|
|
+ placeholder="常用手机号码"></van-field>
|
|
|
+ <van-field v-model.trim="infoMap.email" label="邮箱" @focus="infoCheckMap.email = ''" @blur="getCheckMap('email')"
|
|
|
+ :error-message="infoCheckMap.email" required placeholder="请输入邮箱"></van-field>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-card-group">
|
|
|
+ <div class="form-title">公司信息</div>
|
|
|
+ <div class="form-content-card">
|
|
|
+ <div class="associate-ent-group" v-show="isAssociateShow">
|
|
|
+ <div class="associate-ent-item" @click="selectEnt(item)" v-for="(item, i) in searchList" v-bind:key="i" v-html="highlightText(item, infoMap.company)"></div>
|
|
|
+ </div>
|
|
|
+ <van-field @input="entOnChange('input')" @blur="entOnChange('blur')" @focus="infoCheckMap.company = ''"
|
|
|
+ :error-message="infoCheckMap.company" required v-model.trim="infoMap.company" label="公司名称" placeholder="请输入公司名称"></van-field>
|
|
|
+ <van-field :class="{'hide-border': infoMap.position === '其他'}" required v-model="infoMap.position" label="职位" @click="openPop('职位')" readonly is-link
|
|
|
+ placeholder="请选择职位"></van-field>
|
|
|
+ <van-field class="other-input-group" @focus="infoCheckMap.position_other = ''" @blur="getCheckMap('position')"
|
|
|
+ :error-message="infoCheckMap.position_other" v-model.trim="infoMap.position_other" v-show="infoMap.position === '其他'" label="职位" placeholder="请输入职位"></van-field>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="j-footer">
|
|
|
+ <div class="j-button-group">
|
|
|
+ <button class="j-button-cancel" @click="cancelForm">暂不提供</button>
|
|
|
+ <button class="j-button-confirm" :disabled="isSubmitDisabled" @click="submitForm">提交</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup class="prefect-pop-group" v-model="popInfo.show" round position="bottom"
|
|
|
+ :style="{ height: getPopHeight }">
|
|
|
+ <div class="j-container">
|
|
|
+ <div class="j-header">
|
|
|
+ <div class="pop-title-group">
|
|
|
+ <span>@@popInfo.title@@</span>
|
|
|
+ <div class="close-padding-box" @click="popInfo.show = false">
|
|
|
+ <i class="j-icon base-icon icon-delete-gray"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="j-main" v-show="conditionMap[popInfo.label]">
|
|
|
+ <div class="condition-select-group" :class="{more: isMoreSelect}">
|
|
|
+ <div class="condition-select-item" @click="onSelectItem(item, popInfo.label)" v-for="(item,i) in conditionMap[popInfo.label]" :class="{checked: item.checked}">
|
|
|
+ <div>@@item.title@@</div>
|
|
|
+ <i v-if="!isMoreSelect" class="j-icon base-icon icon-tick"></i>
|
|
|
+ <div class="more-icon-box" v-else>
|
|
|
+ <i class="j-icon base-icon icon-tick-circle"></i>
|
|
|
+ <i class="j-icon base-icon icon-tick-circle-fill"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="j-footer">
|
|
|
+ <div class="j-button-group">
|
|
|
+ <button class="j-button-confirm" :disabled="isNextDisabled" @click="submitPop">确认</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script rel="preload" as="script" src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
|
|
|
+<script rel="preload" as="script" src=//cdn-common.jianyu360.com/cdn/lib/vant/2.8.2/vant.min.js></script>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.8.2/vant.min.js></script>
|
|
|
+{{include "/big-member/commonjs.html"}}
|
|
|
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "version"}}'></script>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var vNode = {
|
|
|
+ delimiters: ['@@', '@@'],
|
|
|
+ el: '#perfect-info-page',
|
|
|
+ data: {
|
|
|
+ searchList: [],
|
|
|
+ isAssociateShow: false,
|
|
|
+ isAssociateUpTime: -1,
|
|
|
+ infoMap: {
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ email: '',
|
|
|
+ company: '',
|
|
|
+ position: '',
|
|
|
+ position_other: ''
|
|
|
+ },
|
|
|
+ infoCheckMap: {
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ email: '',
|
|
|
+ company: '',
|
|
|
+ position: '',
|
|
|
+ position_other: ''
|
|
|
+ },
|
|
|
+ isEchoInfoLoading: true,
|
|
|
+ popInfo: {
|
|
|
+ show: false,
|
|
|
+ label: '',
|
|
|
+ title: ''
|
|
|
+ },
|
|
|
+ conditionMap: {
|
|
|
+ '职位': [
|
|
|
+ {
|
|
|
+ title: '总裁/总经理/总监',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '市场经理/主管',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '销售经理/主管',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '渠道经理/主管',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投标经理/专员',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '采购经理/专员',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '数据分析师',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '招标师',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '项目经理',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '其他',
|
|
|
+ checked: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ajaxParams: {
|
|
|
+ "name": "",
|
|
|
+ "phone": "",
|
|
|
+ "source": utils.getParam('source'), // 推送消息点进来的
|
|
|
+ "mail": "",
|
|
|
+ "company": "",
|
|
|
+ "position": "",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // source=message_bigmember app消息大会员留资地
|
|
|
+ // source=message_structeddata app消息结构化数据留资地
|
|
|
+ this.ajaxGetEchoInfo()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getPopHeight () {
|
|
|
+ return this.popInfo.label === '受雇类型' ? '5.42rem' : '8.36rem'
|
|
|
+ },
|
|
|
+ checkName () {
|
|
|
+ if (this.infoMap.name.length > 10) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ var namereg = /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/;//中英文或加.的少数民族名字
|
|
|
+ return namereg.test(this.infoMap.name)
|
|
|
+ },
|
|
|
+ checkPhone () {
|
|
|
+ return /^1[3|7|8]\d{9}$|^19[8-9]\d{8}$|^166\d{8}|^15[0-3|5-9]\d{8}|^14[5|7]\d{8}$/.test(this.infoMap.phone)
|
|
|
+ },
|
|
|
+ checkEmail () {
|
|
|
+ if (this.infoMap.email.length > 50) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.infoMap.email)
|
|
|
+ },
|
|
|
+ checkEntName () {
|
|
|
+ if (this.infoMap.company.trim().length > 50 || this.infoMap.company.trim().length < 2) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ isMoreSelect () {
|
|
|
+ return this.popInfo.label === '公司类型'
|
|
|
+ },
|
|
|
+ checkPosition () {
|
|
|
+ if (this.infoMap.position !== "" && this.infoMap.position !== '其他') {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if (this.infoMap.position_other.length > 50) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ var namereg = /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/;
|
|
|
+ return namereg.test(this.infoMap.position_other)
|
|
|
+ },
|
|
|
+ isSubmitDisabled () {
|
|
|
+ return !this.checkName || !this.checkPhone || !this.checkEmail || !this.checkEntName || !this.checkPosition
|
|
|
+ },
|
|
|
+ isNextDisabled () {
|
|
|
+ var type = this.popInfo.label
|
|
|
+ var result = false
|
|
|
+ switch (type) {
|
|
|
+ case '职位': {
|
|
|
+ result = this.conditionMap[type].filter(v => v.checked).length
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return !result
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ajaxFn: function (url, data, callback, type) {
|
|
|
+ return $.ajax({
|
|
|
+ type: 'post',
|
|
|
+ url: url,
|
|
|
+ contentType: type ? 'application/x-www-form-urlencoded' : "application/json;charset=utf-8",
|
|
|
+ data: type ? data : JSON.stringify(data),
|
|
|
+ dataType: "json",
|
|
|
+ success: typeof callback === 'function' ? callback.bind(this) : new Function()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ajaxGetEchoInfo() {
|
|
|
+ this.isEchoInfoLoading = true
|
|
|
+ this.ajaxFn('/salesLeads/echoInfo', {}, function (r) {
|
|
|
+ this.isEchoInfoLoading = false
|
|
|
+ if (r && r.error_msg === '' && r.data) {
|
|
|
+ this.setEchoInfo(r.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ highlightText (value, keyStr) {
|
|
|
+ return utils.replaceKeyword(value, keyStr, '<span class="highlight-text">' + keyStr + '</span>')
|
|
|
+ },
|
|
|
+ entOnChange (type) {
|
|
|
+ if (type === 'blur') {
|
|
|
+ this.getCheckMap('company')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isAssociateShow = false
|
|
|
+ this.searchList = []
|
|
|
+ }, 300)
|
|
|
+ } else {
|
|
|
+ clearTimeout(this.isAssociateUpTime)
|
|
|
+ this.isAssociateUpTime = setTimeout(() => {
|
|
|
+ this.ajaxEntList(this.infoMap.company)
|
|
|
+ }, 200)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectEnt (item) {
|
|
|
+ console.log('item', item)
|
|
|
+ this.infoMap.company = item
|
|
|
+ this.isAssociateShow = false
|
|
|
+ this.searchList = []
|
|
|
+ },
|
|
|
+ ajaxEntList (str) {
|
|
|
+ if (str.length <= 2) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.ajaxFn('/jypay/user/company/association', { name: str }, function (r) {
|
|
|
+ if (r && r.error_msg === '' && r.data) {
|
|
|
+ this.isAssociateShow = true
|
|
|
+ this.searchList = r.data
|
|
|
+ }
|
|
|
+ }, true)
|
|
|
+ },
|
|
|
+ setEchoInfo (data) {
|
|
|
+ if (data.position) {
|
|
|
+ this.setCheckForData('position', 'position', data.position, '职位')
|
|
|
+ }
|
|
|
+ if (data.name) {
|
|
|
+ this.setCheckForData('name', 'name', data.name)
|
|
|
+ }
|
|
|
+ if (data.phone) {
|
|
|
+ this.setCheckForData('phone', 'phone', data.phone)
|
|
|
+ }
|
|
|
+ if (data.mail) {
|
|
|
+ this.setCheckForData('mail', 'email', data.mail)
|
|
|
+ }
|
|
|
+ if (data.company) {
|
|
|
+ this.setCheckForData('company', 'company', data.company)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ setCheckForData (aKey, iKey, cKey, label) {
|
|
|
+ this.ajaxParams[aKey] = cKey
|
|
|
+ this.infoMap[iKey] = cKey
|
|
|
+ if (label === '职位' && cKey.indexOf('其他') !== -1) {
|
|
|
+ this.infoMap[iKey] = '其他'
|
|
|
+ this.infoMap.position_other = cKey.split('/')[1]
|
|
|
+ }
|
|
|
+ if (label) {
|
|
|
+ var checkDatas = [cKey]
|
|
|
+ this.conditionMap[label].forEach(v => {
|
|
|
+ if (checkDatas.indexOf(v.title) !== -1) {
|
|
|
+ v.checked = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submitPop() {
|
|
|
+ var type = this.popInfo.label
|
|
|
+ switch (type) {
|
|
|
+ case '职位': {
|
|
|
+ var tempData = this.conditionMap[type].filter(v => v.checked)
|
|
|
+ this.setCheckForData('position', 'position', tempData[0].title)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.popInfo.show = false
|
|
|
+ },
|
|
|
+ openPop(type) {
|
|
|
+ switch (type) {
|
|
|
+ case '职位': {
|
|
|
+ this.popInfo.title = '职位'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.popInfo.label = type
|
|
|
+ this.popInfo.show = true
|
|
|
+ },
|
|
|
+ onSelectItem (item, index) {
|
|
|
+ if (this.isMoreSelect) {
|
|
|
+ item.checked = !item.checked
|
|
|
+ } else {
|
|
|
+ this.conditionMap[index].forEach(function (v) {
|
|
|
+ v.checked = false
|
|
|
+ })
|
|
|
+ item.checked = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCheckMap (type) {
|
|
|
+ switch (type) {
|
|
|
+ case 'name': {
|
|
|
+ this.infoCheckMap.name = this.infoMap.name === '' ? '姓名为必填项' : ''
|
|
|
+ if (this.infoCheckMap.name === '' && !this.checkName) {
|
|
|
+ this.infoCheckMap.name = '请输入正确格式的姓名'
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'phone': {
|
|
|
+ this.infoCheckMap.phone = this.infoMap.phone === '' ? '手机号码为必填项' : ''
|
|
|
+ if (this.infoCheckMap.phone === '' && !this.checkPhone) {
|
|
|
+ this.infoCheckMap.phone = '请输入正确格式的手机号码'
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'email': {
|
|
|
+ this.infoCheckMap.email = this.infoMap.email === '' ? '邮箱为必填项' : ''
|
|
|
+ if (this.infoCheckMap.email === '' && !this.checkEmail) {
|
|
|
+ this.infoCheckMap.email = '请输入正确格式的邮箱'
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'company': {
|
|
|
+ this.infoCheckMap.company = this.infoMap.company === '' ? '公司名称为必填项' : ''
|
|
|
+ if (this.infoCheckMap.company === '' && !this.checkEntName) {
|
|
|
+ this.infoCheckMap.company = '请输入正确格式的公司名称'
|
|
|
+ if (this.infoMap.company.length < 2) {
|
|
|
+ this.infoCheckMap.company = '公司名称至少输入2个字'
|
|
|
+ }
|
|
|
+ if (this.infoMap.company.length > 50) {
|
|
|
+ this.infoCheckMap.company = '公司名称最多输入50个字'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'position': {
|
|
|
+ var isOther = this.infoMap.position === '其他' && this.infoMap.position_other === ''
|
|
|
+ this.infoCheckMap.position_other = isOther ? '职位为必填项' : ''
|
|
|
+ if (this.infoCheckMap.position_other === '' && !this.checkPosition) {
|
|
|
+ this.infoCheckMap.position_other = '请输入正确格式的职位'
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancelForm () {
|
|
|
+ history.back()
|
|
|
+ },
|
|
|
+ submitForm () {
|
|
|
+ this.ajaxParams.name = this.infoMap.name
|
|
|
+ this.ajaxParams.phone = this.infoMap.phone
|
|
|
+ this.ajaxParams.mail = this.infoMap.email
|
|
|
+ this.ajaxParams.company = this.infoMap.company
|
|
|
+ this.ajaxParams.position = this.infoMap.position
|
|
|
+ if (this.infoMap.position === '其他') {
|
|
|
+ this.ajaxParams.position = '其他/' + this.infoMap.position_other
|
|
|
+ }
|
|
|
+ console.log(this.ajaxParams)
|
|
|
+ var _this = this
|
|
|
+ var loading = _this.showLoading()
|
|
|
+ this.ajaxFn('/salesLeads/collectInfo', this.ajaxParams, function (r) {
|
|
|
+ if (r) {
|
|
|
+ loading.clear()
|
|
|
+ if (r.error_msg === '') {
|
|
|
+ _this.$dialog.close()
|
|
|
+ _this.$dialog.confirm({
|
|
|
+ message: '您的申请已提交，我们的客户经理会在24小时内尽快与您联系。',
|
|
|
+ className: 'ent-search-dialog max-54',
|
|
|
+ overlayClass: 'z-2030',
|
|
|
+ showCancelButton: false,
|
|
|
+ getContainer: '.perfect-info-group',
|
|
|
+ confirmButtonText: '我知道了',
|
|
|
+ }).then(function () {
|
|
|
+ history.back()
|
|
|
+ }).catch(function () {
|
|
|
+ history.back()
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ _this.showToast(r.error_msg || '提交失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showLoading: function () {
|
|
|
+ var loading = this.$toast.loading({
|
|
|
+ duration: 0,
|
|
|
+ forbidClick: true,
|
|
|
+ message: '提交中...',
|
|
|
+ })
|
|
|
+ return loading
|
|
|
+ },
|
|
|
+ showToast: function (message) {
|
|
|
+ this.$toast({
|
|
|
+ duration: 1500,
|
|
|
+ forbidClick: true,
|
|
|
+ message: message,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var vPerfect = new Vue(vNode)
|
|
|
+</script>
|
|
|
+{{include "/common/baiducc.html"}}
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
