web/plugins/leave-source/src/lib/mobile/content-popup.vue

<script setup>
import { computed } from 'vue'
import AnimatedOverlay from '../../components/dialog/AnimatedOverlay.vue'
import PopupLayout from './components/PopupLayout.vue'
import CenterLayout from './components/CenterLayout.vue'
import MobileContentCard from './components/content-card.vue'
import MobileCenterCard from './components/center-card.vue'
import phoneConfirmDialog from './components/confirm-dialog.vue'
import ChangePhoneDialog from './components/change-phone-dialog.vue'

import {
  useContactMeLogic,
  usePhoneCheck,
  usePreLeaveInfo
} from '@/utils/hooks'

const props = defineProps({
  source: {
    type: String,
    default: '',
    required: true,
  },
  sourceDesc: {
    type: String,
    default: '',
  },
  popupTitle: {
    type: String,
    default: '联系专属客服，申请免费体验'
  },
  // 是否静态客服信息（非线索客服信息）
  staticInfo: {
    type: Boolean,
    default: false,
  },
  useCustomer3: {
    type: Boolean,
    default: false,
  },
  platform: {
    type: String,
    default: '',
  },
})

const center = computed(() => {
  return props.staticInfo
})
const contentTransitionName = computed(() => {
  return center.value ? 'fade' : 'slide-up'
})

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

console.log(configInfo)

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

defineExpose({
  updateVisible
})
</script>

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

<template>
  <AnimatedOverlay
    class="mobile-leave-dialog"
    :visible="visible"
    :content-transition-name="contentTransitionName"
    @update:visible="updateVisible"
    @close="close"
  >
    <div class="mobile-leave-dialog-content" :class="{ 'dialog-content-center': center, 'dialog-content-bottom': !center }">
      <CenterLayout v-if="center" @closeIconClick="close">
        <MobileCenterCard
          :qr="configInfo.wxer"
          :phone="configInfo.phone"
          :platform="platform"
        />
      </CenterLayout>
      <PopupLayout v-else :title="popupTitle" @closeIconClick="close">
        <MobileContentCard
          :qr="configInfo.wxer"
          :phone="configInfo.phone"
          :platform="platform"
          :use-customer3="useCustomer3"
          :is-current-phone="configInfo.isCurrentPhone"
          @contact="contactMe"
        />
      </PopupLayout>
    </div>
    <!-- 确认联系电话弹窗 -->
    <phoneConfirmDialog
      :visible.sync="confirmPhoneDialog.show"
      :title="successCheckDialog.title"
      :confirm-button-text="confirmPhoneDialog.confirmButtonText"
      :cancel-button-text="confirmPhoneDialog.cancelButtonText"
      :content-text="confirmPhoneDialog.contentText"
      @confirm="dialogEvents.confirmPhoneConfirm"
      @cancel="dialogEvents.confirmPhoneCancel"
    />
    <!-- 成功弹窗 -->
    <phoneConfirmDialog
      :visible.sync="successCheckDialog.show"
      :title="successCheckDialog.title"
      :confirm-button-text="successCheckDialog.confirmButtonText"
      :cancel-button-text="successCheckDialog.cancelButtonText"
      :content-text="successCheckDialog.contentText"
      @confirm="dialogEvents.successConfirm"
    />
    <!-- 修改手机号弹窗 -->
    <ChangePhoneDialog
      :visible.sync="changePhoneDialog.show"
      :phone.sync="changePhoneDialog.phoneNumber"
      @confirm="dialogEvents.phoneChangeConfirm"
      @cancel="dialogEvents.phoneChangeCancel"
    />
  </AnimatedOverlay>
</template>

<style scoped lang="scss">
@import './style/dialog-layout.scss';

$main: #2cb7ca;

::v-deep {
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
  }

  .highlight-text {
    color: $main;
  }

  .overlay-content {
    width: 100%;
  }

  .app-bottom-button {
    color: #fff;
    background-color: $main;
    padding: 4px 8px;
    border: none;
    font-size: 16px;
    border-radius: 4px;
  }
}
.mobile-leave-dialog {
  display: flex;
  align-items: flex-end; /* 内容置底 */
}
</style>