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;
}