uniapp 微信小程序,微信公众号弹窗

1、组件myChatModel.vue

<template>
  <view class="modal-container">
    <view class="modal-mask-money"></view>
    <view class="modal-content">
      <official-account style="width: 500rpx;" @load="onLoad" @error="onError"></official-account>
    </view>
    <view class="close-btn" @click="closeModal">关闭</view>
  </view>
</template>

<script lang="ts" setup>
import { getUserSubscribe } from '@/api/my';

// 公众号关注状态定时器
const officialTimer = ref(null);
// 公众号关注状态
const subscribe = ref(false);
// 公众号信息
const officialAccount = ref({});

// 初始化公众号信息
const initOfficialAccount = async () => {
  officialTimer.value = setInterval(async () => {
    const { code } = await getUserSubscribe();
    if (code === 200) {
      closeModal();
    }
  }, 3000);
};

// 组件挂载后执行
onMounted(() => {
  initOfficialAccount();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (officialTimer.value) {
    clearInterval(officialTimer.value);
    officialTimer.value = null;
  }
});

// 关闭模态框
const closeModal = () => {
  emit('close');
};

// 公众号关注事件load
const onLoad = (e) => {
  emit('load', e.detail);
};

// 公众号关注事件error
const onError = (e) => {
  emit('error', e.detail);
};

// 自动注入emit函数
const emit = defineEmits(['close', 'load', 'error']);
</script>

<style lang="scss" scoped>
.modal-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;

  .modal-mask-money {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .modal-content {
    width: 720rpx;
    height: 600rpx;
    background-color: #fff;
    margin-left: 32rpx;
    position: relative;
  }

}
</style>

2、如何使用

<!-- 公众号弹窗 -->
<!-- <myChatModel v-if="showMyChatModel" @load="loadMyChatModel" @error="errorMyChatModel" @close="closeFn"></myChatModel> -->


// 公众号弹窗加载
const loadMyChatModel = (data) => {
};

// 公众号弹窗错误
const errorMyChatModel = () => {
  showMyChatModel.value = false;
};

// 公众号弹窗订阅
const subscribeFn = (boo) => {
  showMyChatModel.value = false;
};

// 关闭公众号弹窗
const closeFn = () => {
  showMyChatModel.value = false;
}
posted @ 2025-07-04 17:38  DL·Coder  阅读(31)  评论(0)    收藏  举报