|
|
@@ -1,3 +1,397 @@
|
|
|
<template>
|
|
|
- <h1>移动端</h1>
|
|
|
- </template>
|
|
|
+ <div class="home">
|
|
|
+ <!-- <img class="home-back" src={require('../../assets/img_home.png')} /> -->
|
|
|
+ <a-modal v-model="amodal" title="申请试用" 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: 5 }" :wrapper-col="{ span: 50 }" @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" style="cursor: pointer; color: #1890ff;" @click="verifyCodeFn">
|
|
|
+ {{ countdown == 0 ? '获取验证码' : countdown }}
|
|
|
+ </div>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ <img src="../../static/image/img_home.png" class="home-back" style="cursor: pointer;" alt="" @click="amodalFn">
|
|
|
+ <div class="home-qa">
|
|
|
+ <div class="home-title">为什么选择惠融易客</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/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-4">
|
|
|
+ {{ 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/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-4">
|
|
|
+ {{ 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">
|
|
|
+ <div>
|
|
|
+ <a-button type="dashed" shape="round" icon="search">
|
|
|
+ 电话咨询
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-button type="dashed" shape="round" icon="search">
|
|
|
+ 加入我们
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-button type="primary" shape="round" icon="search">
|
|
|
+ 申请试用
|
|
|
+ </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' }),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.postListDataFn()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+.home-bottom .ant-btn {
|
|
|
+ height: 80px !important;
|
|
|
+}
|
|
|
+.home-bottom .ant-btn-primary{
|
|
|
+ background-color: #526eea !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+</style>
|
shenchunlv