web/plugins/leave-source/src/utils/hooks.js

import { computed, nextTick, reactive, ref, watch } from 'vue'
import {
  requestBehaviorClues,
  requestGetStaticInfo,
  requestRetainedCapital,
  requestSubmitLeaveInfo
} from '../api/api'
import { getSourceInfo } from './utils'
import { showToast } from './toast'

// pc静态弹窗卡片信息获取
export function useStaticCustomInfo() {
  const configInfo = reactive({
    name: '',
    remark: '',
    wxer: '',
    phone: '',
  })

  // 获取静态信息
  useStaticInfoRequest().then((r) => {
    if (r) {
      Object.assign(configInfo, r)
    }
  })

  return {
    configInfo
  }
}

// 线索弹窗卡片信息获取
export function usePreLeaveInfo(options = {}) {
  const { props } = options
  const visible = ref(false)

  const configInfo = reactive({
    name: '',
    remark: '',
    wxer: '',
    phone: '', // 客服手机号
    userPhone: '', // 用户留资手机号
    isCurrentPhone: true,
  })

  const source = computed(() => props.source)
  const sourceDesc = computed(() => props.sourceDesc)
  const staticInfo = computed(() => props.staticInfo)
  function updateVisible(e) {
    visible.value = e
    if (props.onPopupVisibleChange && typeof props.onPopupVisibleChange === 'function') {
      props.onPopupVisibleChange(e)
    }
    if (e) {
      createClueWhenOpen()
    }
  }
  function close() {
    updateVisible(false)
  }

  watch(() => source.value, async (val) => {
    if (source) {
      const r = await useLeaveInfoRequest({ source: val })
      if (r.info) {
        configInfo.userPhone = r.info.phone
        configInfo.isCurrentPhone = r.info.isCurrentPhone
      }
    }
  })

  async function createClueWhenOpen() {
    if (staticInfo.value) {
      // 获取静态信息
      const r = await useStaticInfoRequest()
      if (r) {
        Object.assign(configInfo, r)
      }
    }
    else {
      // 获取动态分配信息
      const r = await useBehaviorCluesRequest(sourceDesc.value)
      if (r) {
        Object.assign(configInfo, r)
      }
    }
  }

  return {
    updateVisible,
    close,
    visible,
    configInfo
  }
}

// 与我联系-判断逻辑
export function useContactMeLogic(options = {}) {
  const { configInfo, props } = options
  const userPhone = ref(configInfo?.userPhone || '')
  const source = computed(() => props.source)

  const isLoginPhone = computed(() => configInfo.isCurrentPhone || false)

  watch(() => configInfo?.userPhone, (val) => {
    userPhone.value = val
  })

  const changePhoneDialog = reactive({
    show: false,
    phoneNumber: '',
  })
  const successCheckDialog = reactive({
    show: false,
    title: '提交成功',
    confirmButtonText: '我知道了',
    cancelButtonText: '',
    contentText: '我们的专属客服会在24小时内尽快与您联系，请注意电话接听。'
  })

  const confirmContentText = computed(() => {
    return `专属客服将致电 <span class="highlight-text">${userPhone.value}</span>，<br />请核对联系电话是否准确`
  })
  const confirmPhoneDialog = reactive({
    show: false,
    title: '联系电话确认',
    confirmButtonText: '准确，我要提交',
    cancelButtonText: '有误，我要修改',
    contentText: confirmContentText,
  })

  function closeAllDialog() {
    changePhoneDialog.show = false
    confirmPhoneDialog.show = false
    successCheckDialog.show = false
  }
  function showSuccessDialog() {
    changePhoneDialog.show = false
    confirmPhoneDialog.show = false
    successCheckDialog.show = true
  }

  const dialogEvents = {
    confirmPhoneConfirm() {
      doConfirmLeave()
    },
    confirmPhoneCancel() {
      confirmPhoneDialog.show = false
      changePhoneDialog.show = true
    },
    successConfirm() {
      successCheckDialog.show = false
    },
    async successClose() {
      closeAllDialog()
    },
    phoneChangeConfirm() {
      doConfirmLeave()
    },
    phoneChangeCancel() {
      confirmPhoneDialog.show = true
      changePhoneDialog.show = false
    },
  }

  function checkPhonePass(phone) {
    const reg = /^1[3-9]\d{9}$/
    return reg.test(phone)
  }

  const actualPhone = computed(() => {
    if (changePhoneDialog.show) {
      return changePhoneDialog.phoneNumber
    }
    else {
      return userPhone.value
    }
  })

  async function doConfirmLeave() {
    const phonePass = checkPhonePass(actualPhone.value)
    if (!phonePass) {
      return showToast('联系电话格式不正确')
    }
    const payload = {
      source: source.value,
      phone: actualPhone.value,
      source_desc: '',
    }
    const info = getSourceInfo(payload.source)
    if (info.desc) {
      payload.source_desc = info.desc
    }

    try {
      const res = await requestSubmitLeaveInfo(payload)
      if (res && res.data) {
        showSuccessDialog()
      }
    }
    catch (error) {
      console.log(error)
    }
  }

  function contactMe() {
    if (isLoginPhone.value) {
      doConfirmLeave()
    }
    else {
      confirmPhoneDialog.show = true
    }
  }

  return {
    userPhone,
    changePhoneDialog,
    successCheckDialog,
    confirmPhoneDialog,
    closeAllDialog,
    showSuccessDialog,
    checkPhonePass,
    dialogEvents,
    contactMe
  }
}

export async function useBehaviorCluesRequest(value) {
  const res = await requestBehaviorClues({ source_desc: value })
  const { error_code: code, data } = res
  if (code === 0 && data) {
    return data
  }
}

export async function useLeaveInfoRequest(options = {}) {
  const { source } = options
  const res = await requestRetainedCapital({ source })
  const { error_code: code } = res
  if (code === 0) {
    return res
  }
}

export async function useStaticInfoRequest() {
  const res = await requestGetStaticInfo()
  const { error_code: code, data } = res
  if (code === 0 && data) {
    return data
  }
}