|
|
@@ -1,481 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="home">
|
|
|
- <!-- <img class="home-back" src={require('../assets/img_home.png')} /> -->
|
|
|
- <a-modal v-model="amodal" title="申请试用" width="1000" on-ok="handleOk" centered @afterClose="fouse" destroyOnClose>
|
|
|
- <template slot="footer">
|
|
|
- <div class="sub">
|
|
|
- <a-button key="submit" type="primary" @click="handleSubmit">
|
|
|
- 立即提交
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <a-form :form="form" :label-col="{ span: 50 }" :wrapper-col="{ span: 200 }" @submit="handleSubmit">
|
|
|
- <a-form-item label="CompanyName">
|
|
|
- <!-- 公司名称 -->
|
|
|
- <a-input v-decorator="['companyName', { rules: [{ required: true, message: '请输入您的公司名称' }] }]"
|
|
|
- v-model="customer.companyName" placeholder="请输入您的公司名称*">
|
|
|
- <!-- <img src="../static/image/img_home_modal_0.png" class="w-15 h-15" slot="prefix" alt=""> -->
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="City">
|
|
|
- <!-- 选择所在城市 -->
|
|
|
- <a-input v-decorator="['city', { rules: [{ required: true, message: '请输入所在城市' }] }]" v-model="customer.city"
|
|
|
- placeholder="请输入所在城市*">
|
|
|
- <!-- <a-icon slot="prefix" type="bank" /> -->
|
|
|
- <!-- <img src="../static/image/img_home_modal_1.png" class="w-15 h-15" slot="prefix" alt=""> -->
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="CustomName">
|
|
|
- <!-- 姓名 -->
|
|
|
- <a-input v-decorator="['customName', { rules: [{ required: true, message: '请输入您的姓名' }] }]"
|
|
|
- v-model="customer.customName" placeholder="请输入您的姓名*">
|
|
|
- <!-- <a-icon slot="prefix" type="UserOutlined" /> -->
|
|
|
- <!-- <img src="../static/image/img_home_modal_2.png" class="w-15 h-15" slot="prefix" alt=""> -->
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="Phone">
|
|
|
- <!-- 手机号 -->
|
|
|
- <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入您的联系方式' }] }]" v-model="customer.phone"
|
|
|
- placeholder="请输入您的联系方式*">
|
|
|
- <!-- <a-icon slot="prefix" type="phone" /> -->
|
|
|
- <!-- <img src="../static/image/img_home_modal_3.png" class="w-15 h-15" slot="prefix" alt=""> -->
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <!-- 验证码 -->
|
|
|
- <a-form-item label="VerifyCode">
|
|
|
- <a-input v-decorator="['verifyCode', { rules: [{ required: true, message: '请输入验证码' }] }]" placeholder="输入验证码"
|
|
|
- v-model="customer.verifyCode" size="large">
|
|
|
- <!-- <img src="../static/image/img_home_modal_4.png" class="w-15 h-15" slot="prefix" alt=""> -->
|
|
|
- <div slot="suffix" class="yc" style="cursor: pointer; color: #1890ff;font-size: 20px;" @click="verifyCodeFn">
|
|
|
- {{ countdown == 0 ? '获取验证码' : countdown }}
|
|
|
- </div>
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- </a-modal>
|
|
|
- <div>
|
|
|
- <van-nav-bar safe-area-inset-top placeholder>
|
|
|
- <template #left>
|
|
|
- <div class="dropdown">
|
|
|
- <!-- <button class="dropbtn">下拉菜单</button> -->
|
|
|
- <img class="dropbtn" src="../static/image/two.png" alt="">
|
|
|
- <!-- <div class="dropdown-content">
|
|
|
- <a href="#solution">解决方案</a>
|
|
|
- <a href="#contact">联系我们</a>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <item android:width="40dp" android:height="27dp">
|
|
|
- <shape android:shape="rectangle">
|
|
|
- <solid android:color="#ffffffff" />
|
|
|
- </shape>
|
|
|
- </item>
|
|
|
- </template>
|
|
|
- <template #title>
|
|
|
- <!-- <van-icon name="search" size="18" /> -->
|
|
|
- <img src="../static/image/icon-title.png" style="width: 20px;" alt="">
|
|
|
- </template>
|
|
|
- <template #right>
|
|
|
- <a href="tel:17723267692">
|
|
|
- <img src="../static/image/phone.png" style="width: 20px;" alt="">
|
|
|
- </a>
|
|
|
- </template>
|
|
|
- </van-nav-bar>
|
|
|
- </div>
|
|
|
- <img src="../static/image/img_home1.png" class="home-back" style="cursor: pointer;" alt="" @click="amodalFn">
|
|
|
- <div class="home-qa" id="solution">
|
|
|
- <div class="home-title">为什么选择惠融易客m</div>
|
|
|
- <div class="home-title-sub">
|
|
|
- 与传统方式相比较,惠融易客的优势又都有哪些?
|
|
|
- </div>
|
|
|
- <div class="m-content">
|
|
|
- <div class="home-qa-img-row">
|
|
|
- <div class="container">
|
|
|
- <div v-for="(p, i) in homeList0" :key="i" class="container-row">
|
|
|
- <div class='home-qa-img-row-item'>
|
|
|
- <img :src="require('../static/image/m_img_home_qs_0_' + i + '.png')" alt="">
|
|
|
- <!-- <div class="home-qa-img-row-item-absolute">
|
|
|
- <div class="home-qa-img-row-item-absolute-title">
|
|
|
- {{ p.title }}
|
|
|
- </div>
|
|
|
- <div class="home-qa-img-row-item-absolute-subtitle yc-3">
|
|
|
- {{ p.content }}
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <!-- </a-col>
|
|
|
- </a-row> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="home-qa-img-row">
|
|
|
- <div class="container">
|
|
|
- <div v-for="(p, i) in homeList1" :key="i" class="container-row">
|
|
|
- <div class='home-qa-img-row-item'>
|
|
|
- <img :src="require('../static/image/m_img_home_qs_1_' + i + '.png')" alt="">
|
|
|
- <!-- <div class="home-qa-img-row-item-absolute">
|
|
|
- <div class="home-qa-img-row-item-absolute-title">
|
|
|
- <span>0{{ i + 1 }}</span> {{ p.title }}
|
|
|
- </div>
|
|
|
- <div class="home-qa-img-row-item-absolute-subtitle yc-3">
|
|
|
- {{ p.content }}
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <!-- </a-col>
|
|
|
- </a-row> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="home-ad">
|
|
|
- <div>
|
|
|
- <div class="home-title">精准获客</div>
|
|
|
- <div class="home-title-sub">
|
|
|
- 多渠道投放对接，帮助企业搭建推广产品矩阵
|
|
|
- </div>
|
|
|
- <div class="home-ad-row">
|
|
|
- <div v-for="(index, i) in 6" :key="i" class="home-row-single">
|
|
|
- <img :src="require('../static/image/img_home_ad_' + i + '.png')" alt="">
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="home-static">
|
|
|
- <div class="home-content">
|
|
|
- <div class="home-title">免费试用</div>
|
|
|
- <div class="home-title-sub">
|
|
|
- 立即免费试用惠融易客CRM 提升企业业绩
|
|
|
- </div>
|
|
|
- <div class="home-ad-free">
|
|
|
- <div class="home-static-title">
|
|
|
- 已加入
|
|
|
- </div>
|
|
|
- <div v-for="(index, i) in freeList" :key="i" class="home-row-single">
|
|
|
- <div class="home-static-num">
|
|
|
- <div class="home-static-num-wrap">{{ index }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="home-static-title">人</div>
|
|
|
- </div>
|
|
|
- <div style="text-align: center">
|
|
|
- <a-button class="home-static-btn" shape="round" @click="amodalFn">立即申请试用</a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="home-qa">
|
|
|
- <div class="home-content">
|
|
|
- <div class="home-title">咨询信息</div>
|
|
|
- <div class="home-title-sub" @click="amodalFn">
|
|
|
- 点击了解惠融易客的更多信息
|
|
|
- </div>
|
|
|
- <div class="home-ad-xw" v-if="homeList3[0]">
|
|
|
- <div class="ad-free-img">
|
|
|
- <img v-if="activeKey" :src="homeList3[activeKey].images" style="width:100%;height: 100%;" alt="">
|
|
|
- <img v-else :src="homeList3[0].images" style="width:100%;height: 100%;" alt="">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="ad-free-content">
|
|
|
- <a-collapse v-model="activeKey" accordion @change="collapseChange">
|
|
|
- <a-collapse-panel key="0" :header="homeList3[0].title" :showArrow="false">
|
|
|
- <div class="add-title yc-3">
|
|
|
- {{ homeList3[0].summary }}
|
|
|
- </div>
|
|
|
- <a-button type="primary" style="margin-top: 5px;" @click="btnContent(homeList3[0])">
|
|
|
- 查看详情
|
|
|
- </a-button>
|
|
|
- </a-collapse-panel>
|
|
|
- <template v-for="(item, index) in homeList3">
|
|
|
- <a-collapse-panel v-if="index !== 0" :key="index + ''" :header="item.title" :showArrow="false">
|
|
|
- <!-- <p>{{ item.title }}</p> -->
|
|
|
- <div class="add-title yc-3">
|
|
|
- {{ item.summary }}
|
|
|
- </div>
|
|
|
- <a-button type="primary" @click="btnContent(item)">
|
|
|
- 查看详情
|
|
|
- </a-button>
|
|
|
- </a-collapse-panel>
|
|
|
- </template>
|
|
|
- </a-collapse>
|
|
|
- <div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="home-bottom" id="contact">
|
|
|
- <div>
|
|
|
- <!-- <van-icon name="phone" /> -->
|
|
|
- <a-button type="dashed" shape="round">
|
|
|
- <a href="tel:17723267692">电话咨询</a>
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <a-button type="dashed" shape="round" disabled>
|
|
|
- 加入我们
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <a-button type="primary" shape="round" @click="amodalFn">
|
|
|
- 申请试用
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { postListData, sendSms, postCustomer } from '../api/index'
|
|
|
-import { message } from 'ant-design-vue'
|
|
|
-export default {
|
|
|
- name: 'IndexPage',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- homeList0: [
|
|
|
- {
|
|
|
- title: '传统获得客效率低，成本高',
|
|
|
- content:
|
|
|
- '3000个白名单里可能只能挖掘出一个意向客户，员工信心不足，线路成本与人工成本均居高不下',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '客户资源易流失',
|
|
|
- content:
|
|
|
- '高价挖掘的意向客户，面临员工离职带走客户和员工飞单的风险，无法形成客户资产，资源全部在业务员手上',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '跨部门沟通成本高',
|
|
|
- content:
|
|
|
- '线下上门客户填写个人信息受法律监管，机构对于各类纸质资料不易保存，上门客户服务情况无法掌握，跨部门沟通成本高',
|
|
|
- },
|
|
|
- ],
|
|
|
- homeList1: [
|
|
|
- {
|
|
|
- title: '轻松获客',
|
|
|
- content: '通过惠融易客推广获客，轻松获取意向客户，有效降低获客成本95%',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '客户管理',
|
|
|
- content:
|
|
|
- '通过惠融易客客户管理系统，科学高效管理企业客户资料，开成公司资产，员工离职一键收回所有权限，客户跟进情况一目了然',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '业务管理',
|
|
|
- content:
|
|
|
- '通过惠融易客客户管理系统记录跟进，客户从上门到成交的各个环节均可清晰化、信息化记录，有效提高效率与服务质量',
|
|
|
- },
|
|
|
- ],
|
|
|
- freeList: ['3', '0', '7', '0', '1', '3', '7', '4'],
|
|
|
- homeList3: [],
|
|
|
- activeKey: [0],
|
|
|
- text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
|
|
|
- amodal: false, //申请试用弹窗
|
|
|
- countdown: 0,
|
|
|
- customer: {
|
|
|
- sceneType: "loanofficial", // 场景
|
|
|
- companyName: '',// 公司名称
|
|
|
- customName: '', // 姓名
|
|
|
- city: '', // 所在城市
|
|
|
- phone: '', // 手机号
|
|
|
- verifyCode: '', //验证码
|
|
|
- channel: 17, //pc官网16 手机端17
|
|
|
- },
|
|
|
- // 定时器
|
|
|
- intervalBtn: {},
|
|
|
- formLayout: 'horizontal',
|
|
|
- form: this.$form.createForm(this, { name: 'coordinated' }),
|
|
|
- option1: [
|
|
|
- { text: '二', value: 0, titleClass: '解决方案' },
|
|
|
- { text: '联系我们', value: 1, titleClass: '联系我们' },
|
|
|
- ],
|
|
|
- value1: 0,
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.postListDataFn()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // tel(){
|
|
|
- // window.location.href=tel://123456789；
|
|
|
- // },
|
|
|
- async postListDataFn() {
|
|
|
- let list = await postListData({
|
|
|
- "categoryId": 1
|
|
|
- })
|
|
|
- list.data.data ? this.homeList3 = list.data.data.list : ''
|
|
|
- // console.log('this.homeList3',this.homeList3)
|
|
|
- },
|
|
|
- collapseChange(e) {
|
|
|
- console.log(this.activeKey, 'collapseChange', e)
|
|
|
- },
|
|
|
- btnContent(item) {
|
|
|
- console.log('item', item)
|
|
|
- this.$router.push({ path: `/user/content?id=${item.id}` })
|
|
|
- },
|
|
|
- // 发送
|
|
|
- handleSubmit(e) {
|
|
|
- e.preventDefault();
|
|
|
- this.form.validateFields(async (err, values) => {
|
|
|
- if (!err) {
|
|
|
- // console.log('Received values of form: ', values);
|
|
|
- let z = await postCustomer(this.customer)
|
|
|
- console.log('zzz', z)
|
|
|
- if (z.data.msg == '成功') {
|
|
|
- // 关闭页面
|
|
|
- this.fouse()
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.log('进来了')
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 打开
|
|
|
- amodalFn() {
|
|
|
- this.amodal = true
|
|
|
- },
|
|
|
- // 关闭
|
|
|
- fouse() {
|
|
|
- console.log('关闭了')
|
|
|
- this.amodal = false
|
|
|
- },
|
|
|
- handleSelectChange(value) {
|
|
|
- console.log(value);
|
|
|
- this.form.setFieldsValue({
|
|
|
- note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
|
|
|
- });
|
|
|
- },
|
|
|
- // 验证码
|
|
|
- async verifyCodeFn() {
|
|
|
- if (this.customer.phone) {
|
|
|
- if (new RegExp('^1[0-9]{10}$').test(this.customer.phone)) {
|
|
|
- let z = await sendSms({
|
|
|
- sceneType: "loanofficial",
|
|
|
- userMobile: this.customer.phone
|
|
|
- })
|
|
|
- // console.log('zzz', z)
|
|
|
- if (z.data.code == 0) {
|
|
|
- message.success('发送成功')
|
|
|
- this.countdown = 60
|
|
|
- this.countDown()
|
|
|
- // console.log('进来了', this.countdown)
|
|
|
- } else {
|
|
|
- message.error('发送失败')
|
|
|
- }
|
|
|
- } else {
|
|
|
- message.error('请输入正确的手机号');
|
|
|
- }
|
|
|
- } else {
|
|
|
- message.error('请输入手机号')
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- // 倒计时
|
|
|
- countDown() {
|
|
|
- // 设置倒计时
|
|
|
- this.intervalBtn = setInterval(() => {
|
|
|
- if (this.countdown == 1) {
|
|
|
- // 清除定时器
|
|
|
- clearInterval(this.intervalBtn)
|
|
|
- // 重置倒计时状态
|
|
|
- // this.countdown = 0
|
|
|
- };
|
|
|
- // 倒计时
|
|
|
- this.countdown--
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="less">
|
|
|
-@import '../static/m_index.less';
|
|
|
-
|
|
|
-.ant-collapse-header {
|
|
|
- white-space: nowrap !important;
|
|
|
- text-overflow: ellipsis !important;
|
|
|
- overflow: hidden !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-btn-primary {
|
|
|
- background-color: #526eea !important;
|
|
|
- border-color: #526eea !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ad-free-content .ant-btn-primary {
|
|
|
- width: 500px;
|
|
|
- background-color: #526eea !important;
|
|
|
- border-color: #526eea !important;
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-btn-primary {
|
|
|
- background-color: #fff !important;
|
|
|
- border-color: #fff !important;
|
|
|
- color: #1890ff !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-form-item-label {
|
|
|
- display: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-modal-footer {
|
|
|
- text-align: center !important;
|
|
|
-}
|
|
|
-
|
|
|
-.sub .ant-btn-primary {
|
|
|
- background-color: #526eea !important;
|
|
|
- border-color: #526eea !important;
|
|
|
- color: #fff !important;
|
|
|
- // width: 150px;
|
|
|
- width: 500px !important;
|
|
|
- height: 200px !important;
|
|
|
- font-size: 60px !important;
|
|
|
-}
|
|
|
-
|
|
|
-.home-bottom .ant-btn {
|
|
|
- width: 500px !important;
|
|
|
- height: 200px !important;
|
|
|
- font-size: 60px;
|
|
|
-}
|
|
|
-
|
|
|
-.home-bottom .ant-btn-primary {
|
|
|
- background-color: #526eea !important;
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-collapse {
|
|
|
- background-color: #fff !important;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-collapse>.ant-collapse-item>.ant-collapse-header {
|
|
|
- height: 400px;
|
|
|
- line-height: 400px;
|
|
|
- font-size: 80px;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-btn-primary {
|
|
|
- height: 200px;
|
|
|
-}
|
|
|
-.ant-modal-title {
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.van-nav-bar {
|
|
|
- background-color: #1f1d29 !important;
|
|
|
-}
|
|
|
-
|
|
|
-.van-nav-bar__right {
|
|
|
- right: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-//
|
|
|
-.van-dropdown-menu__item {
|
|
|
- background: #1f1d28 !important;
|
|
|
-}
|
|
|
-
|
|
|
-.van-dropdown-menu__title {
|
|
|
- font-weight: 700;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-</style>
|
shenchunlv