nuxt3-gw/pages/m_user.vue

<template>
  <div class="bg-[#fafafa]">
    <div class="flex mx-[20px] h-[44px] items-center">
      <div class="w-[24px]" v-if="!active" @click="active = true">
        <img src="~/public/image/title-left.png" style="width: 24px;" alt="">
      </div>
      <div class="w-[24px]" v-else @click="active = false">
        <img src="~/public/image/title-left-x.png" style="width: 24px;" alt="">
      </div>
      <div class="flex-1 flex items-center justify-center">
        <img src="~/public/favicon.ico" style="width: 24px;" alt="">
      </div>
      <div class="w-[24px]">
        <a href="tel:17723267692">
          <img src="~/public/image/title-right.png" style="width: 24px;" alt="">
        </a>
      </div>
    </div>
    <!-- 图片 -->
    <div>
      <div class="relatives flex justify-center">
        <div class="flex-[1]">
        </div>
        <!-- <img src="~/public/image/img_home.png" class="w-full" alt=""> -->
        <div class=" flex items-center flex-col text-[#fff] mt-[28px]">
          <div class="text-[24px] font-medium flex">
            <h1 class="pr-[15px]">惠融易客</h1>
            <div>
              数字金融服务商
            </div>
          </div>
          <span class="mt-[10px]  text-[12px]">提交申请，立即开启企业数字化升级
          </span>
          <span class="mb-[28px] text-[12px]">
            提供专家1V1服务，提供企业定制化数字解决方案
          </span>
          <n-button type="info" class="bg-[#165DFF] w-[144px] h-[40px] text-[14px] rounded-[4px]" @click="btn">
            立即申请试用
          </n-button>
        </div>
        <div class="flex-[1]">

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

    <!-- 传统问题 traditional-->
    <div class="flex flex-col items-center justify-center mx-[16px] mt-[30px] mb-[30px]">
      <h2 class="text-[18px] font-medium">传统方式管理难点</h2>
      <span class="text-[#999999] pb-[20px] text-[12px]">传统方式管理过程中有哪些问题？</span>
      <div class="flex">
        <div class="w-765px mx-auto">
          <n-carousel autoplay class="mx-auto" :current-index="traditionalIndex" :draggable="true">
            <img src="~/public/image/m_img_home_qs_0_0.png" style="width: 343px; margin: 0 auto;" alt="">
            <img src="~/public/image/m_img_home_qs_0_1.png" style="width: 343px; margin: 0 auto;" alt="">
            <img src="~/public/image/m_img_home_qs_0_2.png" style="width: 343px; margin: 0 auto;" alt="">
          </n-carousel>
          <div class="h-[10px]"></div>
          <ul class="custom-dots">
            <li v-for="(i, index) in 3" :key="index" :class="{ ['is-active']: traditionalIndex === index }"
              @click="traditionalIndexFn(index)">
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="flex flex-col items-center justify-center py-[30px] advantage text-[#fff]">
      <h2 class="text-[18px] font-medium">我们的优势</h2>
      <span class="pt-[5px] pb-[10px] text-[12px]">与传统方式相比较，惠融易客的优势又有哪些？</span>
      <div class="flex">
        <!-- <div></div> -->
        <ul class="flex flex-col items-center justify-between">
          <li class="w-[343px] h-[175px] mt-[10px]">
            <img src="~/public/image/m_advant-01.png" alt="">
          </li>
          <li class="w-[343px] h-[175px] my-[20px]">
            <img src="~/public/image/m_advant-02.png" alt="">
          </li>
          <li class="w-[343px] h-[175px]">
            <img src="~/public/image/m_advant-03.png" alt="">
          </li>
        </ul>
        <!-- <div></div> -->
      </div>
      <!-- <img src="~/public/image/m_advantage.png" class="w-full" alt=""> -->
    </div>
    <!-- 精准获客 -->
    <div id="solution" class="flex flex-col items-center justify-center py-[30px]">
      <h2 class="text-[18px] font-medium">精准获客</h2>
      <span class="text-[#999999] pt-[5px] pb-[10px] text-[12px]">多渠道投放对接，帮助企业精准推广产品矩阵</span>
      <div class="flex flex-col">
        <div></div>
        <div class="flex w-[375px]">
          <ul class=" flex items-center flex-wrap justify-center mx-auto">
            <li class="w-[166px] mb-[10px] mr-[5px]">
              <img src="~/public/image/m_img_home_ad_0.png" class="w-[166px]" alt="">
            </li>
            <li class="w-[166px] mb-[10px] ml-[5px]">
              <img src="~/public/image/m_img_home_ad_1.png" class="w-[166px]" alt="">
            </li>
            <li class="w-[166px] mb-[10px] mr-[5px]">
              <img src="~/public/image/m_img_home_ad_2.png" class="w-[166px]" alt="">
            </li>
            <li class="w-[166px] mb-[10px] ml-[5px]">
              <img src="~/public/image/m_img_home_ad_3.png" class="w-[166px]" alt="">
            </li>
            <li class="w-[166px] mb-[10px] mr-[5px]">
              <img src="~/public/image/m_img_home_ad_4.png" class="w-[166px]" alt="">
            </li>
            <li class="w-[166px] mb-[10px] ml-[5px]">
              <img src="~/public/image/m_img_home_ad_5.png" class="w-[166px]" alt="">
            </li>
            <li class="w-[166px] mb-[10px] mr-[5px]">
              <img src="~/public/image/m_img_home_ad_6.png" class="w-[166px]" alt="">
            </li>
            <li class="w-[166px] mb-[10px] ml-[5px]">
              <img src="~/public/image/m_img_home_ad_7.png" class="w-[166px]" alt="">
            </li>
          </ul>
        </div>
        <div>
        </div>
      </div>
    </div>
    <!-- 免费试用 trial-->
    <div class="w-full h-full trial">
      <div></div>
      <div class=" mx-auto flex flex-col items-center text-[#161616] pt-[16px] pb-[20px]">
        <h2 class="font-medium text-[18px]" @click="btn">免费试用</h2>
        <div class="mt-[12px] mb-[10px] text-[12px] text-[#999999]">
          立即免费试用惠融易客CRM 提升企业业绩
        </div>
        <div class="mb-[10px] flex items-center font-medium text-[16px]">
          <span>已有</span>
          <ul class="flex justify-center items-center mx-[10px] my-[20px]">
            <li v-for="item in freeList"
              class="w-[22px] h-[26px] text-center px-[3px] bg-[#fff] mx-[2px] text-[16px] rounded-[2px]">
              {{ item }}
            </li>
          </ul>
          <span>
            人加入
          </span>
        </div>
        <n-button type="info" class="bg-[#165DFF] w-[144px] h-[40px] text-[14px]" @click="btn">
          立即申请试用
        </n-button>
      </div>
      <div>

      </div>
    </div>
    <!-- 咨询信息 message-->
    <div class="flex flex-col items-center justify-center pt-[30px] pb-[30px] mx-[16px] " v-if="homeList[0]">
      <h2 class="text-[18px] font-medium">资讯信息</h2>
      <span class="text-[#999999] px-[12px] pt-[5px] pb-[8px] text-[12px]">点击了解惠融易客的更多信息</span>
      <div>
        <n-carousel autoplay :currentIndex="currentIndex" class="mx-auto ">
          <img v-for="item in homeList" class="carousel-img rounded-[4px]" :src="item.images">
        </n-carousel>
        <div
          class="flex flex-col justify-between font-medium text-[16px] h-[94px] w-[343px] mx-auto text-[#000000] mt-[10px] mb-[20px]">
          <h1>{{ homeList[currentIndex].title }}</h1>
          <div class="flex items-center justify-between">
            <span class="text-[12px] text1 text-[#999999]">
              {{ homeList[currentIndex].summary }}
            </span>
            <n-button type="info" class="bg-[#165DFF]" @click="btnContent(currentIndex)">
              查看详情
            </n-button>
          </div>
        </div>
        <ul class="custom-dots w-[750px]">
          <li v-for="(i, index) in homeList" :key="index" :class="{ ['is-active']: currentIndex === index }"
            @click="customFn(index)">
          </li>
        </ul>
      </div>
    </div>

    <div class="w-full bg-[#131820] pt-[20px] pb-[10px] pl-[16px]" id="contact">
      <n-collapse>
        <n-collapse-item title="联系方式" name="1">
          <div class="flex flex-col text-[#999]">
            <span class="text-[12px] my-[16px]">
              客服： kefu@meloinfo.com
            </span>
            <span class="text-[12px]">
              <span>商务：</span>
              <a href="tel:17723267692" class="text-[#3061f6]"> 17723267692（微信同号）</a>
            </span>
          </div>
        </n-collapse-item>
        <n-collapse-item title="公司地址" name="2">
          <span class="text-[12px] py-[10px] text-[#999]">
            重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
          </span>
        </n-collapse-item>
        <n-collapse-item class="ncollapse" title="应用二维码(长按识别)" name="3">
          <!-- 二维码 -->
          <div class="flex items-center justify-center mr-[16px]">
            <div class="flex flex-col items-center justify-center" v-if="bottomCode.wxQrUrl">
              <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
              <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
                关注公众号
              </span>
            </div>
            <div class="flex flex-col items-center justify-center" v-if="bottomCode.iosQrUrl" style="margin: 0 10px">
              <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
              <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
                iosAPP下载
              </span>
            </div>
            <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
              <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
              <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
                安卓APP下载
              </span>
            </div>
          </div>
        </n-collapse-item>
      </n-collapse>
      <n-divider />
      <div class=" m-auto mt-[30px]">
        <!-- 备案号 -->
        <div class="flex flex-col items-center justify-center text-[#52575E] text-[10px] my-[20px]">
          <span>Copyright © 2023 重庆惠融数字科技有限公司版权所有</span>
          <span>
            渝ICP备2023000211号-4
          </span>
          <span>
            营业执照:91500000MA5UJ59N6Q
          </span>
          <span class="my-[20px]">
            违法和不良信息举报邮箱:tousu@meloinfo.com
          </span>
          <span>
            联网备案号:50019002503593
          </span>
          <span class="mt-[5px]">
            中国互联网违法和不良信息举报中心
          </span>
        </div>
      </div>
    </div>
  </div>

  <n-drawer v-model:show="active" :width="152" style="top:40px" placement="left">
    <n-drawer-content>
      <div class="flex flex-col items-center justify-between h-full">
        <div class="h-[200px]">
          <div v-for="item in headerTitle" :title="item.title" class="flex flex-col">
            <span class="py-[20px] text-[16px] text-[#161616]" @click="titleRight(item.go)">{{ item.title }}</span>
          </div>
        </div>
        <a href="http://p.daicrm.com/#/login" class="mb-[74px] text-[16px] text-[#0047FF]">
          登录/注册
        </a>
      </div>

    </n-drawer-content>
  </n-drawer>
  <!-- <van-overlay :show="showModal" @click="showModal = false"> -->
  <van-dialog v-model:show="showModal" :show-confirm-button="false" :closeOnClickOverlay="true" closeDialog title="申请试用">
    <div class="wrapper" @click.stop>
      <div class="text-[#999999] text-[12px] pt-[10px] text-center">
        为了我们能更好的服务您，请您填写以下信息，
      </div>
      <div class="text-[#999999] text-[12px] pb-[20px] mx-auto text-center">
        如遇到问题，请您拨打免费服务热线
      </div>
      <n-form ref="formRef" :model="customer" :rules="rules">
        <n-form-item path="companyName" label="公司名称" style="width: 343px;">
          <n-input v-model:value="customer.companyName" @keydown.enter.prevent class="h-[40px] leading-[40px]"
            placeholder="请输入公司名称" />
        </n-form-item>
        <n-form-item path="city" label="所在城市">
          <n-input v-model:value="customer.city" class="h-[40px] leading-[40px]" placeholder="请选择所在城市" />
          <!-- <n-cascader v-model:value="customer.city" placeholder="请选择所在城市" class="h-[40px] leading-[40px]"
            :options="provice" check-strategy="child" :show-path="true" value-field="name" label-field="name" @update:value="handleUpdateValue"
            /> -->
        </n-form-item>
        <n-form-item path="customName" label="姓名">
          <n-input v-model:value="customer.customName" class="h-[40px] leading-[40px]" placeholder="请输入姓名" />
        </n-form-item>
        <n-form-item path="phone" label="联系方式">
          <n-input v-model:value="customer.phone" class="h-[40px] leading-[40px]" placeholder="请输入联系方式" />
        </n-form-item>
        <n-form-item path="verifyCode" label="验证码" class="">
          <n-input v-model:value="customer.verifyCode" class="h-[40px] leading-[40px]" placeholder="请输入验证码" />
          <n-button type="info" class="w-[124px] h-[40px] text-[#fff] bg-[#1f4df5] ml-[10px]" :disabled="countdown != 0"
            @click="verifyCodeFn">
            {{ countdown == 0 ? '获取验证码' : countdown }}
          </n-button>
        </n-form-item>
        <div class="flex justify-center">
          <n-button type="info" class="w-[303px] h-[40px] text-[#fff] bg-[#1f4df5]" @click="handleValidateButtonClick">
            立即提交
          </n-button>
        </div>
      </n-form>
    </div>
  </van-dialog>
  <!-- <n-modal v-model:show="showModal">
    <n-card style="width: 343px;height: 529px;" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">

    </n-card>
  </n-modal> -->
  <!-- <nuxt-link to="/list/123">news-1</nuxt-link> -->
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { postListData, downInfo, sendSms, postCustomer } from '~/server/api/index'
import { provice } from '~/utils/city'
import {
  FormRules,
  useMessage,
  FormInst,
} from 'naive-ui'
// console.log('provice',provice)
const router = useRouter()
const headerTitle = reactive([
  {
    title: '首页',
    go: 'home'
  },
  {
    title: '解决方案',
    go: 'solution'
  },
  {
    title: '联系我们',
    go: 'contact'
  },
  {
    title: '申请试用',
    go: 'probation'
  }
]
)
const activeNames = ref(['1']);
const titleRight = (i: string) => {
  if (i == 'probation') {
    btn()
    return
  }
  document.querySelector('#' + i)?.scrollIntoView()
  active.value = false

}
// 抽屉展示
const active = ref(false)
const sidebarActive = ref(0)
const freeList = reactive(['3', '0', '7', '0', '1', '3', '7', '4'])
const message = useMessage()
const num = reactive([{
  img: '~/public/image/p_img_home_qs_0_0.png'
},
{
  img: '~/public/image/p_img_home_qs_0_1.png'

},
{
  img: '~/public/image/p_img_home_qs_0_2.png'

}
])
// console.log('import.meta.url', import.meta.url)
const getImg = (name: number) => {
  return new URL(`/public/image/p_img_home_qs_0_${name}.png`, import.meta.url).href;
}
const currentIndex = ref(1)
const traditionalIndex = ref(1)
const customFn = (i: number) => {
  console.log('i', i)
  currentIndex.value = i
}
const traditionalIndexFn = (i: number) => {
  console.log('i', i)
  traditionalIndex.value = i
}
const setIntervalFn = () => {
  setInterval(() => {
    if (traditionalIndex.value >= 2) {
      traditionalIndex.value = 0
    } else {
      traditionalIndex.value = traditionalIndex.value + 1
    }
    if (currentIndex.value == homeList.value.length - 1) {
      currentIndex.value = 0
    } else {
      currentIndex.value = currentIndex.value + 1
    }
  }, 5000)
}
setIntervalFn()
const go = (i: number) => {
  currentIndex.value = currentIndex.value + i
  if (currentIndex.value > homeList.value.length - 1) {
    currentIndex.value = 0
    return
  }
  if (currentIndex.value < 0) {
    currentIndex.value = homeList.value.length - 1
    return
  }
}
const btnContent = (i: number) => {
  // 跳转
  // console.log('跳转', i)
  localStorage.setItem('hryk-id', homeList.value[i].id)
  router.push({
    path: '/m_list/'
  })

}
let homeList: any = ref([])
const postListDataFn = async () => {
  let list = await postListData({
    "categoryId": 1
  })
  console.log('postListDataFn', list)
  list.data.data ? homeList.value = list.data.data.list : ''
}
let bottomCode: any = ref([])
postListDataFn()
const downInfoFn = async () => {
  const list = await downInfo()
  console.log('list', list)
  bottomCode.value = list.data.data
}
downInfoFn()
// 框显示隐藏
let showModal = ref<boolean>(false)
const rules: FormRules = {
  companyName: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入公司名称'
    }
  ],
  customName: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入姓名'
    }
  ],
  city: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '请选择所在城市'
    }
  ],
  phone: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入手机号'
    }
  ],
  verifyCode: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入验证码'
    }
  ],
}
interface customerType {
  sceneType?: string;
  companyName?: null | string;
  customName?: null | string;
  city?: null | string;
  phone?: null | string;
  verifyCode?: null | string;
  channel?: number;

}
let countdown = ref(0)
const customer = ref<customerType>({
  sceneType: "loanofficial", // 场景
  companyName: null,// 公司名称
  customName: null, // 姓名
  city: null, // 所在城市
  phone: null, // 手机号
  verifyCode: null, //验证码
  channel: 17, //pc官网16 手机端17
})
const verifyCodeFn = async () => {
  if (customer.value.phone) {
    if (new RegExp('^1[0-9]{10}$').test(customer.value.phone)) {
      let z = await sendSms({
        sceneType: "loanofficial",
        userMobile: customer.value.phone
      })
      if (z.data.code == 0) {
        message.success('发送成功')
        countdown.value = 60
        // this.countDown()
        countDown()
        // console.log('进来了', this.countdown)
      } else {
        message.error('发送失败')
      }
    } else {
      message.error('请输入正确手机号')
    }
  } else {
    // 唤起提示
    message.error('请输入手机号')

  }
}
const intervalBtn = ref()
// 倒计时
const countDown = () => {
  // 设置倒计时
  intervalBtn.value = setInterval(() => {
    if (countdown.value == 1) {
      // 清除定时器
      clearInterval(intervalBtn.value)
      // 重置倒计时状态
      countdown.value = 1
    };
    // 倒计时
    countdown.value--
  }, 1000)
}
const formRef = ref<FormInst | null>(null)
const handleValidateButtonClick = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      message.success('验证成功')
      console.log('customer.value', customer.value)
      let z = await postCustomer(customer.value)
      console.log('zzz', z)
      if (z.data.msg == '成功') {
        // 关闭页面
        fouse()
      }
    } else {
      console.log(errors)
      message.error('验证失败')
    }
  })
}
const fouse = () => {
  showModal.value = false
}
const btn = () => {
  customer.value = {
    sceneType: "loanofficial", // 场景
    companyName: null,// 公司名称
    customName: null, // 姓名
    city: null, // 所在城市
    phone: null, // 手机号
    verifyCode: null, //验证码
    channel: 17, //pc官网16 手机端17
  }
  clearInterval(intervalBtn.value)
  countdown.value = 0
  showModal.value = true
}

const handleUpdateValue = (value: string) => {
  console.log(value, '进来了')
}
</script>
<style scoped lang="scss">
p {
  color: var(--link-color)
}

.relatives {
  width: 100%;
  height: 210px;
  background: url(~/public/image/img_home.png) no-repeat;
  background-size: cover;
}

.trial {
  background: url(~/public/image/m_try_out.png) no-repeat;
  background-size: cover;

}

.advantage {
  background: url(~/public/image/m_advantage.png) no-repeat;
  background-size: cover;
}

.n-carousel {
  width: 529px !important;
}

.carousel-img {
  width: 343px;
  height: 163px;
  margin: 0 auto;
}

.custom-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.custom-dots li {
  display: inline-block;
  width: 10px;
  height: 4px;
  margin: 0 3px;
  border-radius: 4px;
  background: #E1E1E1;
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 30px;
  background: #0047FF;
}

.custom-indicator {
  padding: 2px 5px;
  font-size: 12px;
  background: #fafafa;
}

.text1 {
  display: inline-block;
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 框
// .n-drawer.n-drawer--left-placement
::v-deep(.n-drawer) {
  top: 44px !important;
}

::v-deep(.n-card-header__main) {
  flex: inherit !important;
  margin: 0 auto !important;
}

::v-deep(.n-card-header) {
  padding: 0;
  padding-top: 50px;
}

::v-deep(.n-card__content) {
  flex: inherit;
  margin: 0 auto;
}

::v-deep(.n-form-item-label) {
  display: none !important;
}

::v-deep(.n-carousel__dots) {
  display: none !important;
}

::v-deep(.n-input__input-el) {
  height: 55px !important;
  line-height: 55px !important;
}

::v-deep(.n-button) {
  // border: 0px !important;
  --n-border: 0 !important;
}

// 移动
::v-deep(.van-cell) {
  color: #fff !important;
  background: #131820 !important;
}

::v-deep(.van-collapse-item__content) {
  color: #fff !important;
  background: #131820 !important;
}

::v-deep([class*=van-hairline]:after) {
  border: 1px solid #262f3e !important;
}

::v-deep(.van-cell:after) {
  border-bottom: 1px solid #262f3e !important;
}

::v-deep(.van-collapse-item--border:after) {

  border-top: 1px solid #262f3e !important;
  border-top: 0 !important;
}

// 移动端样式
::v-deep(.n-input:not(.n-input--autosize)) {
  width: 260px !important;
}

::v-deep(.n-card-header__main) {
  font-size: 18px;
}

::v-deep(.n-card-header) {
  padding: 0 !important;
  padding-top: 20px !important;
}

::v-deep(.n-form) {
  padding: 0 20px !important;
  padding-bottom: 30px !important;
}

::v-deep(.van-popup--center) {
  width: 343px !important;
  height: 529px !important;
}

::v-deep(.van-button__content) {
  display: none !important;
}

::v-deep(.n-form-item) {
  --n-label-height: 5px !important;
}

::v-deep(.n-collapse-item__header-main) {
  color: #fff !important;
}

::v-deep(.n-base-icon svg) {
  color: #999 !important;
}

::v-deep(.n-collapse .n-collapse-item:not(:first-child)) {
  border-top: 0.5px solid #2B374A !important;
}
::v-deep(.n-divider__line){
  background-color: #2B374A !important;
}
</style>