gw/pages/user/m_user.vue

<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>