act-base-modal 活动基础弹窗

通常在活动页面中，弹窗的功能主要包括「参与成功」、「抽奖结果」等，而这些弹窗在同一个活动中的样式通常是一致的。为了更高效地实现活动页面弹窗功能，可以使用通用组件。这种做法主要解决了以下问题：

自动弹窗：通过使用统一的弹窗组件，可以使得活动相关的 Hooks 自动弹窗，从而减少了控制弹窗相关代码的量。
复用样式：将单个活动的组件都写在同一个组件中，可以很好地复用样式，使得整体风格一致。
数据传参：为了将数据传递到组件内部，通常使用组件实例方法进行传递，并通过作用域插槽接收并消费数据。
方便截图、调试：这种组件通常具备 mock 数据并自动显示的功能，可以轻松展示特定状态的弹窗，方便截图和调试。

因此，所有活动的弹窗都推荐基于该组件实现，以确保风格统一。

代码演示

通常情况下，该组件的使用会与《快速创建活动流程模板》相配合，以自动生成代码模板为主。

对于「参与成功」和「抽奖记录」弹窗，只要活动有使用 use-act-btn.js 和 useLotteryResult，那么只需要在活动页面中挂载，并在 act-modal.vue 中完善弹窗内容即可，由前者来控制显示：

html

<ActModal ref="$actModal" />

仅当以上情况无法满足，或需要自定义弹窗时，才需要手动控制弹窗的显示，这里给个示例：

index.vueact-modal.vue

vue

<script setup>
// 一般情况无需使用这些方法
import {useParticipateModal, useLotteryResultModal, useActModal} from '@ifanrx/uni-act'

import ActModal from './act-modal.vue'

// 该弹窗由 use-act-btn.js 调起，一般无需手动控制
const participateModal = useParticipateModal()
// 该弹窗由 useLotteryResult 调起，一般无需手动控制
const lotteryResultModal = useLotteryResultModal()
// 如果有自定义弹窗的需求，传入 ref 名称获取组件实例
const customModal = useActModal('custom')
</script>

<template>
  <mp-nav-bar title="act-base-modal 活动弹窗" />

  <view class="act-btn" @click="participateModal.show({msg: '1'})"> 显示报名弹窗 </view>
  <view class="act-btn" @click="lotteryResultModal.win({prizeLog: {prize: {name: '30元优惠券'}}})">
    显示中奖弹窗
  </view>
  <view class="act-btn" @click="lotteryResultModal.miss()"> 显示未中奖弹窗 </view>
  <view class="act-btn" @click="customModal.show({day: new Date().getDay()})"> 自定义弹窗 </view>

  <ActModal ref="$actModal" />
</template>

<style>
.act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 80rpx;
  margin: 20rpx auto;
  background-color: #eee;
  border-radius: 16rpx;
}
</style>

vue

<template>
  <!-- 参与成功弹窗-->
  <act-base-modal ref="participate" maskBackgroundColor="rgba(0,0,0,.6)">
    <!-- participateModal.show({msg : 'xxx'}) 传递的参数可从 data 获取 -->
    <template #default="{data: {msg}}">
      <view class="modal-body participate">
        这是「参与成功」弹窗
        <view> 可以自定义内容，参数：{{ msg }} </view>
      </view>
    </template>
  </act-base-modal>

  <!-- 抽奖结果弹窗-->
  <act-base-modal ref="lotteryResult" maskBackgroundColor="rgba(0,0,0,.6)">
    <!-- lotteryResultModal.win({prizeLog: {prize: {name: '30元优惠券'}}, foo: 'bar'}) -->
    <!-- lotteryResultModal.miss({msg: '未中奖'}) -->

    <!-- isLucky: 是否已中奖；prizeLog: 奖品记录（通过 .win 方法传入） -->
    <template #default="{data: {isLucky, msg, prizeLog, foo}}">
      <view class="modal-body lottery-result">
        <!-- 已中奖-->
        <view v-if="isLucky" class="win">
          已中奖, 奖品名称：{{ prizeLog?.prize?.name }}, 自定义参数：{{ foo }}</view
        >

        <!-- 未中奖-->
        <view v-else class="miss"> {{ msg }} </view>
      </view>
    </template>
  </act-base-modal>

  <!-- 自定义弹窗-->
  <act-base-modal ref="custom" maskBackgroundColor="rgba(0,0,0,.6)">
    <template #default="{data: {day}}">
      <view class="modal-body custom"> 一个自定义弹窗，{{ day }} </view>
    </template>
  </act-base-modal>
</template>

<style scoped>
.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 523rpx;
  height: 569rpx;
  padding: 62rpx 30rpx 51rpx;
  background-color: #fff;
  border-radius: 16rpx;
}
</style>

API

Expose

show

(args: object) => void

显示弹窗

hide

() => void

关闭弹窗

setMaskClick

(fn: Function) => void

关闭弹窗

Events

Event name	Properties	Description
change	event `{show: boolean, type: string}` - 返回值	显示状态发生改变
close		弹窗关闭
maskClick		点击遮罩

Slots

Name	Description	Bindings
default	弹窗内容	data `object` - 调用 .show() 传入的参数 hide `function` - 调用此方法关闭弹窗

源码

组件 • 示例

act-base-modal 活动基础弹窗 ​

代码演示 ​

API ​

Expose ​

show ​

hide ​

setMaskClick ​

Events ​

Slots ​

源码 ​