gw/pages/index.vue

<template>
  <div class="home">
    <!-- <img class="home-back" src={require('../assets/img_home.png')} /> -->
    <a-modal v-model="amodal" title="申请试用" on-ok="handleOk" width="400px" @afterClose="fouse" destroyOnClose centered>
      <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-from-item>
            <div style="height: 100px; display: flex; align-items: center; justify-content: center;color: #959595;">
              为了我们能更好的服务您，请您填写以下信息，如遇问题，请您拨打免费服务热线：
            </div>
          </a-from-item>
        <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>
    <div class="home-back">
      <img src="../static/image/img_home1.png" style="cursor: pointer;width: 100%;" alt="" @click="amodalFn">
      <!-- <img src="../static/image/img_home1.png"  style="cursor: pointer;width: 100%;" alt="" @click="amodalFn"> -->
      <div class="home-head">
        <div>
          <img src="../static/image/hryk.png" style="width: 200px;" alt="">
        </div>
        <div class="home-right">
          <span>
            <a href="#"> 首页</a>
          </span>
          <span>
            <a href="#solution"> 解决方案</a>
          </span>
          <span>
            <a href="#contact">联系我们</a>
          </span>
          <span @click="amodalFn">
            申请试用
          </span>
        </div>
      </div>
    </div>

    <div class="home-qa" id="solution">
      <div class="home-title">为什么选择惠融易客</div>
      <div class="home-title-sub">
        与传统方式相比较,惠融易客的优势又都有哪些?
      </div>
      <div class="home-img">
        <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/p_img_home_qs_0_' + i + '.png')" alt="">
              </div>
            </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/p_img_home_qs_1_' + i + '.png')" alt="">
              </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>

    <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"  v-show="homeList3[0]">
      <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 class="home-bottom-c">
        <div class="header-contact">
          <!-- 左侧 -->
          <div>
            <!-- 联系我们 -->
            <div class="contact">
              <span class="contact-1">
                联系我们
              </span>
              <span class="contact-2">不要犹豫，现在就来联系我们吧 !</span>
            </div>
            <!-- 咨询 -->
            <div class="home-consult">
              <!-- 左边 -->
              <div class="consult-tel">
                <!-- <div style="width: 40%;">
            <span>
              <img src="../static/image/001.png" alt="" class="w-20 h-20">
            </span>
            <span class="color-fff-12">
              咨询： 23232322
            </span>
          </div> -->
                <div style="margin-right: 30px;">
                  <span>
                    <img src="../static/image/002.png" alt="" class="w-20 h-20">
                  </span>
                  <span class="color-fff-12">
                    客服： kefu@meloinfo.com
                  </span>
                </div>
                <!-- <div style="width: 40%;">
            <span>
              <img src="../static/image/003.png" alt="" class="w-20 h-20">
            </span>
            <span class="color-fff-12">
              市场： 3333 44333 4311
            </span>
          </div> -->
                <div>
                  <span>
                    <img src="../static/image/004.png" alt="" class="w-20 h-20">
                  </span>
                  <span class="color-fff-12">
                    商务： 17723267692（微信同号）
                  </span>
                </div>
              </div>
            </div>
                 <!-- 地址 -->
        <div class="site color-fff">
          <img src="../static/image/005.png" class="w-20 h-20 " alt="">
          <span>
            地址 重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
          </span>
        </div>
          </div>
          <!-- 二维码 -->
          <div class="consult-code">
            <div class="code-content" v-if="bottomCode.wxQrUrl">
              <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
                关注公众号
              </span>
              <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
            </div>
            <div class="code-content" v-if="bottomCode.iosQrUrl" style="margin: 0 30px">
              <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
                iosAPP下载
              </span>
              <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
            </div>
            <div class="code-content" v-if="bottomCode.androidQrUrl">
              <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
                安卓APP下载
              </span>
              <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
            </div>
          </div>
        </div>
        <!-- 备案号 -->
        <div class="reference">
          <span>重庆惠融数字科技有限公司版权所有</span>
          <span>
            渝ICP备2023000211号-4
          </span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { postListData, sendSms, postCustomer, downInfo } 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: 16, //pc官网16 手机端17
      },
      bottomCode: {

      },
      // 定时器
      intervalBtn: {},
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
  created() {
    this.postListDataFn()
    this.downInfoFn()
  },
  methods: {
    async postListDataFn() {
      let list = await postListData({
        "categoryId": 1
      })
      list.data.data ? this.homeList3 = list.data.data.list : ''
      // console.log('this.homeList3',this.homeList3)
    },
    // 底部内容
    async downInfoFn() {
      // const list  = await this.$axios.$get(`https://official.webapi.bicredit.xin/api/app/down/info`)
      const list = await downInfo()
      console.log('list', list)
      this.bottomCode = list.data.data
    },
    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/index.less';

.ant-collapse-header {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.ad-free-content .ant-btn-primary {
  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;
  height: 60px;
}

.ant-collapse {
  background: #fff !important;
}
.ant-modal-title{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px !important;
}
.ant-modal-header{
  // padding: 0 !important;
  border-bottom: 0 !important;
  padding-top: 40px;
}
.ant-modal-body{
  padding-top: 0 !important;
}
.ant-modal-footer{
  border-top: 0 !important;
}
</style>