front/src/views/h5/customer-center/components/H5FollowOfficialModal.vue

<template>
  <a-modal
    v-model:visible="visible"
    :title="t('wechat.follow.title')"
    :footer="false"
    :mask-closable="true"
    :esc-to-close="true"
    unmount-on-close
    width="auto"
    modal-class="h5-follow-official-modal"
    @cancel="close"
  >
    <div class="h5-follow">
      <div class="h5-follow__icon" aria-hidden="true">
        <icon-wechat :size="36" />
      </div>
      <p class="h5-follow__desc">{{ t('wechat.follow.promptDesc') }}</p>
      <div class="h5-follow__actions">
        <a-button
          type="primary"
          long
          size="large"
          class="h5-follow__primary"
          :loading="jumping"
          @click="openOfficialAccount"
        >
          {{ t('wechat.follow.openAccount') }}
        </a-button>
        <a-button long size="large" :disabled="jumping" @click="close">
          {{ t('wechat.follow.later') }}
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';
import { IconWechat } from '@arco-design/web-vue/es/icon';
import { isLogin } from '@/utils/auth';
import { isWeChatBrowser } from '@/utils/device';
import { jumpToWechatOfficialAccount } from '@/utils/wechatFollowJump';
import {
  consumeH5FollowPromptPending,
  peekH5FollowPromptPending,
} from '@/utils/h5FollowPrompt';

defineOptions({ name: 'H5FollowOfficialModal' });

const props = withDefaults(
  defineProps<{
    /** 仅手动打开（账号设置），不消费注册/绑定后的一次性引导 */
    manualOnly?: boolean;
  }>(),
  { manualOnly: false },
);

const { t } = useI18n();
const route = useRoute();
const visible = ref(false);
const jumping = ref(false);

function tryOpen() {
  if (props.manualOnly) return;
  if (visible.value) return;
  if (!isLogin()) return;
  // 登录页不弹，等进业务页再引导
  if (route.path === '/h5/login') return;
  if (!peekH5FollowPromptPending()) return;
  if (!consumeH5FollowPromptPending()) return;
  visible.value = true;
}

function close() {
  visible.value = false;
}

function open() {
  visible.value = true;
}

async function openOfficialAccount() {
  if (jumping.value) return;
  if (!isWeChatBrowser()) {
    Message.warning(t('wechat.follow.openInWechat'));
    return;
  }
  jumping.value = true;
  try {
    const ok = await jumpToWechatOfficialAccount();
    if (!ok) {
      Message.warning(t('wechat.follow.configMissing'));
      return;
    }
    close();
  } finally {
    jumping.value = false;
  }
}

onMounted(() => {
  tryOpen();
});

watch(
  () => [isLogin(), route.path] as const,
  () => {
    tryOpen();
  },
);

defineExpose({ open, close });
</script>

<style lang="less">
.h5-follow-official-modal {
  .arco-modal {
    max-width: min(360px, calc(100vw - 32px));
    border-radius: 16px;
    overflow: hidden;
  }

  .arco-modal-header {
    padding: 16px 20px 8px;
    border-bottom: none;
  }

  .arco-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1d2129;
  }

  .arco-modal-body {
    padding: 4px 20px 20px;
  }
}
</style>

<style lang="less" scoped>
.h5-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.h5-follow__icon {
  width: 64px;
  height: 64px;
  margin: 4px 0 12px;
  border-radius: 50%;
  background: #07c160;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  :deep(.arco-icon) {
    color: #fff;
  }
}

.h5-follow__desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #4e5969;
}

.h5-follow__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h5-follow__primary {
  height: 44px !important;
  border-radius: 10px !important;
  font-weight: 600;
}
</style>