yos_web/buildAnnexation/ZB/questJs/home.js

const { createApp, ref ,onMounted,createVNode, render} = Vue

createApp({
  setup() {
    onMounted(()=>{
      countX()
      listData()
      _newsListData()
      if (isMobile()) {
        setTimeout(initBrandSwipe, 500)
      }
    })
    const form = ref({
      name:'',
      phonenumber:'',
      notes:''
    })
    
    // 添加错误信息和提交状态
    const errors = ref({
      name: '',
      phonenumber: ''
    })
    const isSubmitting = ref(false)
    const lastSubmitTime = ref(0)
    
    // 验证函数
    const validateForm = () => {
      errors.value = { name: '', phonenumber: '' }
      let isValid = true
      
      // 验证姓名
      if (!form.value.name.trim()) {
        errors.value.name = '请输入姓名'
        isValid = false
      } else if (form.value.name.trim().length < 2) {
        errors.value.name = '姓名不可少于2位'
        isValid = false
      } else if (/^\d+$/.test(form.value.name.trim())) {
        errors.value.name = '姓名不能是数字'
        isValid = false
      }
      
      // 验证电话
      if (!form.value.phonenumber.trim()) {
        errors.value.phonenumber = '请输入联系方式'
        isValid = false
      } else if (form.value.phonenumber.trim().length < 5) {
        errors.value.phonenumber = '联系方式不可少于5位'
        isValid = false
      }
      
      return isValid
    }
    
    // 重置表单
    const resetForm = () => {
      form.value = {
        name: '',
        phonenumber: '',
        notes: ''
      }
      errors.value = {
        name: '',
        phonenumber: ''
      }
    }
    
    const submit = async (id)=>{
      console.log(form.value)
      
      // 检查是否在10秒内重复提交
      const currentTime = Date.now()
      if (currentTime - lastSubmitTime.value < 20000) {
        tool.alert('20秒内不可重复提交')
        return
      }
      
      // 验证表单
      if (!validateForm()) {
        return
      }
      
      // 检查留言是否为空
      if (form.value.notes.trim() === '') {
        tool.alert('请填写留言内容')
        return
      }
      
      // 设置提交状态
      isSubmitting.value = true
      lastSubmitTime.value = currentTime
      
      try {
        const res = await instance.post('',{
          "id": 2024082809051903,
          "content":{
            "sat_orderclueid": 0,
            "siteid": "HY",
            "name": form.value.name.trim(),
            "phonenumber": form.value.phonenumber.trim(),
            "notes": form.value.notes.trim()
          }
        })
        
        if (res.data.code == 1) {
          tool.alert('提交成功')
          resetForm()
        } else {
          alert(res.data.msg)
        }
      } catch (error) {
        console.error('提交失败:', error)
        tool.alert('提交失败，请稍后重试')
      } finally {
        isSubmitting.value = false
      }
    }
    const x_count = ref(0)
    const countX = async (id)=>{
      const res = await instance.post('',{
        "id": "2024101210472203",
        "content": {
            "siteid":"hy"
        }
      })
      x_count.value = res.data.data
    }
    setupFlip = (tick)=> {
        
      Tick.helper.interval(function() {

          tick.value ++;
          
          if (tick.value == 5181234 + x_count.value * 123)
              return false

          tick.root.setAttribute('aria-label', tick.value);

      }, 1000);
    }
    const timeLine = ref(0)
    const timer = ref(null)
    const stopClick = ref(false)
    function syncBrandView(idx) {
      $('.mobdot').removeClass('mobactive');
      $('.mobdot' + (idx + 1)).addClass('mobactive')
      $('.box3RigImgItem').removeClass('active').eq(idx).addClass('active')
      $('.brand-timeline-swiper .swiper-wrapper').css({
        'transform': 'translateX(-' + (idx * 100) + '%)',
        'transition': 'transform 0.3s ease'
      })
    }

    cardPrev = () => {
      stopClick.value = true
      if (timer.value) {
        clearTimeout(timer.value)
      }
      timer.value = setTimeout(()=>{
        timeLine.value --
        syncBrandView(timeLine.value)
        stopClick.value = false
      },500)
    }

    cardNext = ()=> {
      stopClick.value = true
      if (timer.value) {
        clearTimeout(timer.value)
      }
      timer.value = setTimeout(()=>{
        timeLine.value ++
        syncBrandView(timeLine.value)
        stopClick.value = false
      },500)
    }
    function initBrandSwipe() {
      var container = document.querySelector('.mbox3Rig')
      if (!container) return
      var startX = 0, startY = 0, isSwiping = false
      container.addEventListener('touchstart', function(e) {
        startX = e.touches[0].clientX
        startY = e.touches[0].clientY
        isSwiping = false
      }, {passive: true})
      container.addEventListener('touchmove', function(e) {
        if (!startX) return
        var dx = Math.abs(e.touches[0].clientX - startX)
        var dy = Math.abs(e.touches[0].clientY - startY)
        if (dx > 10 && dx > dy) {
          isSwiping = true
        }
      }, {passive: true})
      container.addEventListener('touchend', function(e) {
        if (!startX || !isSwiping) { startX = 0; return }
        var diffX = startX - e.changedTouches[0].clientX
        if (Math.abs(diffX) > 50) {
          if (diffX > 0 && timeLine.value < 10) {
            timeLine.value++
            syncBrandView(timeLine.value)
          } else if (diffX < 0 && timeLine.value > 0) {
            timeLine.value--
            syncBrandView(timeLine.value)
          }
        }
        startX = 0
        isSwiping = false
      }, {passive: true})
    }
    const pjdata = ref([])
    const listData = async ()=>{
      const res = await instance.post('',{
        id:20240801133603,
        content:{
          siteid:"HY",
          pageNumber:1,
          pageSize:9,
          where:{
            "status":'发布',
            "condition":"",
          }
        }
      })
      pjdata.value = res.data.data
    }
    const newsData = ref([])
    const _newsListData = async (id)=>{
      const res = await instance.post('',{
        id:20240727135603,
        content:{
          siteid:"HY",
          pageNumber:1,
          pageSize:3,
          where:{
            "condition":"",
            "status":'发布'
          }
        }
      })
      newsData.value = res.data.data
      console.log(res,'---')
    }
    const isMobile = ()=> {
      // 判断是否为移动设备
      return (
          typeof window.orientation !== "undefined" || // 判断是否存在window.orientation属性，此属性在移动设备上一般存在
          navigator.userAgent.indexOf('IEMobile') !== -1 || // 判断是否为Windows Phone
          navigator.userAgent.indexOf('iPhone') !== -1 || // 判断是否为iPhone
          navigator.userAgent.indexOf('Android') !== -1 && navigator.userAgent.indexOf('Mobile') !== -1 || // 判断是否为Android手机
          navigator.userAgent.indexOf('BlackBerry') !== -1 || // 判断是否为BlackBerry
          navigator.userAgent.indexOf('Opera Mini') !== -1 // 判断是否为Opera Mini浏览器
      );
    }
    return {
      listData,
      newsData,
      pjdata,
      stopClick,
      timeLine,
      cardPrev,
      cardNext,
      submit,
      x_count,
      setupFlip,
      form,
      errors,
      isSubmitting,
      resetForm,
      isMobile
    }
  }
}).mount('#hmpage')