nuxt3-gw/pages/list.vue

<template>
    <div class="flex w-full h-[100px] title fixed top-0 left-0 bottom-0 z-20 bg-[#fff]"
    style="border-bottom: 1px solid #E1E1E1;">
    <div class="flex-[1]"></div>
    <div class="h-[100px] bg-[#fff] flex items-center justify-between w-[1200px]"
      style="border-bottom: 1px solid #E1E1E1;">
      <!-- 头部title -->
      <div class="flex items-center cursor-pointer" @click="titlebtn">
        <img src="~/public/favicon.ico" class="w-[50px] h-[50px] mr-[10px]" alt="">
        <div class="flex flex-col">
          <span class="text-[#333333] text-[24px] font-medium">惠融易客</span>
          <span class="text-[16px] font-light">
            HUIRONG CRM
          </span>
        </div>
      </div>
      <!-- 右边 -->
      <ul class='flex items-center'>
        <li v-for="i in headerTitle" :key="i.go" @mouseenter="mouseenterFn(i.go)" @mouseleave="mouseleaveFn"
          :class="headerClass == i.go ? 'text-[#1f4df5!important]' : ''" @click="titleRight(i.go)"
          class="pr-[70px] text-[#999999] cursor-pointer text-[18px]">
          {{ i.title }}
        </li>
        <li class="px-[16px] text-[#999999] font-medium" @click="loginBtn">
          <!-- <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" style="border-radius: 6px;" >
            登录/注册
          </n-button> -->
          <van-button type="primary"> 登录/注册</van-button>

        </li>
      </ul>
    </div>
    <div class="flex-[1]">
    </div>
  </div>
  <div class="flex w-full flex-col items-center justify-center mt-[100px]">
    <h1 class="my-[20px] font-black text-[30px]">
        {{title}}
      </h1>
    <!-- <div > -->
      <p v-html="list" class="w-[1000px] h-[80vh] overflow-y-scroll">
      </p>
    <!-- </div> -->
  </div>
  <div class="w-full bg-[#1f1d2a] pt-[20px] pb-[10px] relative" id="contact">
    <div class="w-[1200px] m-auto">
      <div class="flex justify-between my-[20px]">
        <!-- 左侧 -->
        <div class="flex">
          <!-- 左边 -->
          <div class="flex  flex-col text-[#999999] mr-[30px]">
            <h3 class="text-[17px] font-medium text-[#fff]">
              联系方式
            </h3>
            <span class="text-[13px] mt-[20px]">
              客服邮箱： kefu@hrshuke.com
            </span>
            <span class="text-[13px] my-[20px]">
              客户投诉：4000039350
            </span>
            <span class="text-[13px]">
              商务合作： 17723267692（微信同号）
            </span>
          </div>
          <!-- 地址 -->
          <div class="text-[#999999]">
            <h3 class="text-[17px] font-medium mb-[20px] text-[#fff]">
              公司地址
            </h3>
            <span class="text-[13px]">
              重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
            </span>
          </div>
        </div>
        <!-- 二维码 -->
        <div class="flex items-center justify-center">
          <div class="flex flex-col items-center justify-center ml-" v-if="bottomCode.wxQrUrl">
            <!-- <div class="flex flex-col items-center justify-center"> -->
            <span class="text-[#fff] text-[17px] mb-[20px]">
              关注公众号
            </span>
            <n-popover trigger="hover">
              <template #trigger>
                <img :src="bottomCode.wxQrUrl" class="w-[100px] h-[100px]" alt="">
              </template>
              <img :src="bottomCode.wxQrUrl" class="w-[200px] h-[200px]" alt="">
            </n-popover>
          </div>
          <div class="flex flex-col items-center justify-center mx-[50px]" v-if="bottomCode.iosQrUrl">
            <span class="text-[#fff] text-[17px] mb-[20px]">
              iosAPP下载
            </span>
            <n-popover trigger="hover">
              <template #trigger>
                <img :src="bottomCode.iosQrUrl" class="w-[100px] h-[100px]" alt="">
              </template>
              <img :src="bottomCode.wxQrUrl" class="w-[200px] h-[200px]" alt="">
            </n-popover>

          </div>
          <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
            <!-- <div class="flex flex-col items-center justify-center"> -->
            <span class="text-[#fff] text-[17px] mb-[20px]">
              安卓APP下载
            </span>
            <n-popover trigger="hover">
              <template #trigger>
                <img :src="bottomCode.androidQrUrl" class="w-[100px] h-[100px]" alt="">
              </template>
              <img :src="bottomCode.androidQrUrl" class="w-[200px] h-[200px]" alt="">
            </n-popover>
          </div>
        </div>
      </div>

      <!-- 备案号 -->
      <div class="h-[154px] flex flex-col items-center justify-center text-[#585667] text-[13px] py-[60px]">
        <div class="pt-[30px]">
          <span>Copyright © 2023 重庆惠融数字科技有限公司版权所有</span>
          <span class="mx-[5px] cursor-pointer">
            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="text-[#585667!important]">渝ICP备2023000211号-4</a>
          </span>
          <span class="mx-[10px]">
            营业执照:91500000MA5UJ59N6Q
          </span>
        </div>
        <div class="my-[20px]">
          违法和不良信息举报邮箱:kefu@hrshuke.com
        </div>
        <div>
          <span class="ml-[20px] mr-[5px] cursor-pointer">
            <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50019002503593#" target="_blank" class="text-[#585667!important]">联网备案号:50019002503593</a>
          </span>
          <span class="cursor-pointer">
            <a href="https://www.12377.cn/" target="_blank" class="text-[#585667!important]">中国互联网违法和不良信息举报中心</a>       
          </span>
        </div>
      </div>
    </div>
    <div class="absolute bottom-[140px] left-0 w-full">
      <div class="w-full h-0 opacity-[1] border-[0.5px] border-[#2B374A]">

      </div>
    </div>
  </div>
  <n-modal v-model:show="showModal" class="modalCss">
    <n-card style="width: 800px" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <div class="text-[#999999] text-[18px] pt-[15px] pb-[12px]">
        为了我们能更好的服务您，请您填写以下信息，如遇到问题，请您拨打免费服务热线
      </div>
      <n-form ref="formRef" :model="customer" :rules="rules">
        <n-form-item path="companyName" label="公司名称">
          <n-input v-model:value="customer.companyName" @keydown.enter.prevent class="h-[55px] leading-[55px]"
            placeholder="请输入公司名称" />
        </n-form-item>
        <n-form-item path="city" label="所在城市">
          <n-input v-model:value="customer.city" class="h-[55px] leading-[55px]" placeholder="请选择所在城市" />
          <!-- <n-cascader v-model:value="customer.city" placeholder="请选择所在城市" class="h-[55px] leading-[55px]"
            :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-[55px] leading-[55px]" placeholder="请输入姓名" />
        </n-form-item>
        <n-form-item path="phone" label="联系方式">
          <n-input v-model:value="customer.phone" class="h-[55px] leading-[55px]" placeholder="请输入联系方式" />
        </n-form-item>
        <n-form-item path="verifyCode" label="验证码" class="">
          <n-input v-model:value="customer.verifyCode" class="h-[55px] leading-[55px]" placeholder="请输入验证码" />
          <n-button type="info" class="w-[150px] h-[55px] text-[#fff] bg-[#1f4df5] ml-[20px] rounded-[4px] text-[18px]"
            :disabled="countdown != 0" @click="verifyCodeFn">
            {{ countdown == 0 ? '获取验证码' : countdown }}
          </n-button>
        </n-form-item>
        <div class="flex justify-center mt-[20px] submission">
          <n-button type="info" class="w-[700px] h-[55px] text-[20px] text-[#fff] bg-[#1f4df5] rounded-[4px]"
            @click="handleValidateButtonClick">
            立即提交
          </n-button>
        </div>
      </n-form>
    </n-card>
  </n-modal>
</template>
<script lang="ts" setup>
import {
  FormRules,
  useMessage,
  FormInst,
} from 'naive-ui'
import { postListData, downInfo, sendSms, postCustomer } from '~/server/api/index'
import axios from 'axios'
const message = useMessage()
let list = ref('')
let title =ref('')
const postListIDFn = async () => {
  localStorage.getItem('hryk-id')
  // console.log('localStorage.getItem',localStorage.getItem('hryk-id'))
  let z: any = await axios.get(`https://official.webapi.bicredit.xin/api/news/detail/${localStorage.getItem('hryk-id')}`)
  console.log('zzz', z)
  // if(z.msg == '成功'){
  list.value = z.data.data.content
  title.value =z.data.data.title
  // console.log('list',list.value)
  //  }
}
postListIDFn()
const headerTitle = reactive([
  {
    title: '首页',
    go: 'home'
  },
  {
    title: '解决方案',
    go: 'solution'
  },
  {
    title: '联系我们',
    go: 'contact'
  },
  {
    title: '申请试用',
    go: 'probation'
  }
]
)
const headerClass = ref<string>('')
const titleRight = (i: string) => {
  if (i == 'probation') {
    btn()
    return
  }
  console.log('iii',i)
  // document.querySelector('#' + i)?.scrollIntoView()
  localStorage.setItem('entryPage',i)
  history.back()
}
const mouseenterFn = (i: string) => {
  // console.log('mouseenterFn')
  headerClass.value = i
}
const mouseleaveFn = () => {
  headerClass.value = ''
}
const loginBtn = () => {
  console.log('跳转')
  // window.location.replace('http://p.daicrm.com/#/login')
  window.open('http://p.daicrm.com/#/login')
  // window.location.href('http://p.daicrm.com/#/login')
}
const titlebtn =()=>{
  history.back()
}
// 框显示隐藏
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: 16, //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: 16, //pc官网16 手机端17
  }
  clearInterval(intervalBtn.value)
  countdown.value = 0
  showModal.value = true
}
let bottomCode: any = ref([])
const downInfoFn = async () => {
  const list = await downInfo()
  console.log('list', list)
  bottomCode.value = list.data.data
}
downInfoFn()
</script>
<style scoped lang="scss">
.num-item {
  border-radius: 4px;
  width: 50px;
  height: 60px;
  margin: 10px;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(244, 244, 255, 0.961) 50%, rgb(255, 255, 255) 100%);
  font-size: 36px;
  color: #fff;
}


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

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

img {
  height: 100%;
}

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

.carousel-img {
  width: 509px;
  height: 306px;
  border-radius: 4px;
}

.custom-dots {
  display: flex;
  margin: 0;
  padding: 0;
}

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

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

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

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

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

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

::v-deep(.n-card__content) {
  flex: inherit;
  margin: 0 auto;
  margin-bottom: 50px !important;
}

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

::v-deep(.n-form-item) {
  --n-label-height: 10px !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-card-header__main) {
  font-size: 30px;
}

// 按钮样式
::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  height: 67px;
}

.trial ::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  width: 400px;
  height: 67px;
}

::v-deep(.van-button__content) {
  font-size: 24px;
}

.title ::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  width: 130px;
  height: 42px;
}

.title ::v-deep(.van-button__content) {
  font-size: 16px;
}

.message ::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  width: 130px;
  height: 42px;
}

.message ::v-deep(.van-button__content) {
  font-size: 16px;
}

.modalCss ::v-deep(.n-button) {
  border-radius: 4px !important;
  height: 55px !important;
}

.submission ::v-deep(.n-button) {
  width: 700px !important;
}
</style>