web/plugins/leave-source/src/lib/pc/content-dialog.vue

<script setup>
import { watch, watchEffect } from 'vue'
import AnimatedOverlay from '../../components/dialog/AnimatedOverlay.vue'
import { useContactMeLogic, usePreLeaveInfo } from '../../utils/hooks.js'
import { showToast } from '../../utils/toast'
import ContentCard from './components/content-card.vue'
import PhoneConfirmDialog from './components/PhoneConfirmDialog.vue'
import PhoneEditDialog from './components/PhoneEditDialog.vue'
import SubMitSuccess from './components/SubMitSuccess.vue'

const props = defineProps({
  source: {
    type: String,
    default: '',
    required: true,
  },
  sourceDesc: {
    type: String,
    default: '',
  },
  popupTitle: {
    type: String,
    default: '联系专属客服，申请免费体验'
  },
  type: {
    type: String,
    default: '1'
  }
})

const {
  updateVisible,
  close,
  visible,
  configInfo,
} = usePreLeaveInfo({ props })

const config = {
  configInfo,
  props,
}

const {
  confirmPhoneDialog,
  changePhoneDialog,
  successCheckDialog,
  dialogEvents,
  checkPhonePass,
  contactMe
} = useContactMeLogic({
  configInfo,
  props,
  // popupVisible: visible,
})

function contactMeEvent(phone) {
  const phonePass = checkPhonePass(phone)
  if (!phonePass) {
    return showToast('联系电话格式不正确')
  }
  configInfo.phone = phone
  changePhoneDialog.phoneNumber = phone
  contactMe()
}

function phoneEditConfirm(phone) {
  changePhoneDialog.phoneNumber = phone
  dialogEvents.phoneChangeConfirm()
}

defineExpose({
  updateVisible
})
</script>

<script>
export default {
  name: 'PCContentDialog',
}
</script>

<template>
  <AnimatedOverlay
    class="pc-leave-dialog"
    :class="`pc-leave-dialog-${props.type}`"
    :visible="visible"
    @update:visible="updateVisible"
  >
    <ContentCard
      :config="config"
      @contactMeEvent="contactMeEvent"
      @close="updateVisible(false)"
    />
    <!-- 确认手机弹窗 -->
    <PhoneConfirmDialog
      :visible="confirmPhoneDialog.show"
      :title="confirmPhoneDialog.title"
      :content-text="confirmPhoneDialog.contentText"
      :confirm-button-text="confirmPhoneDialog.confirmButtonText"
      :cancel-button-text="confirmPhoneDialog.cancelButtonText"
      @confirm="dialogEvents.confirmPhoneConfirm"
      @cancel="dialogEvents.confirmPhoneCancel"
    />
    <!-- 修改手机号弹窗 -->
    <PhoneEditDialog
      :visible="changePhoneDialog.show"
      :phone="changePhoneDialog.phoneNumber"
      @confirm="phoneEditConfirm"
      @cancel="dialogEvents.phoneChangeCancel"
    />
    <!-- 提交成功弹窗 -->
    <SubMitSuccess
      :visible="successCheckDialog.show"
      :title="successCheckDialog.title"
      :content-text="successCheckDialog.contentText"
      :confirm-button-text="successCheckDialog.confirmButtonText"
      @confirm="dialogEvents.successConfirm"
    />
  </AnimatedOverlay>
</template>

<style scoped lang="scss">
.pc-leave-dialog {
  ::v-deep {
    .overlay-content {
      margin: 300px auto;
      width: 732px;
      // background: #fff;
      border-radius: 8px;
    }

    @import '../../assets/style/pc.scss';
  }
  &-2 {
    ::v-deep {
      .overlay-content {
        width: 480px;
      }
    }
  }
}
</style>