消防安全知识答题活动小程序v5.0-支持答题后抽奖

关于答题抽奖活动小程序的设计思考

1. 功能设计：作为答题抽奖活动小程序，核心功能应包括答题和抽奖两部分。用户通过答题获取抽奖机会，答题可以设置为多个题目，用户回答正确则获得相应分数。在用户答完问题后，可以立即展示是否获得了抽奖机会。抽奖部分需要有相应的抽奖界面，用户可以点击抽奖按钮来进行抽奖，以增加用户参与度和竞争性。

2. 页面设计：小程序的页面设计要简洁、清晰，并符合消防安全知识这类主题活动的风格。可以使用橙色调作为主题色，并合理运用简洁的图标和排版，使用户界面看起来大方简洁又不失知识性。

消防安全知识答题活动小程序v5.0-支持答题后抽奖

在答题结果页，添加一个“去抽奖”的按钮，如果得分超过设定的条件，则可以参与抽奖。

比如，得分为20分或20分以上则可以参与抽奖。当然，我现在是开发调试阶段，可以设置低一点。但实际发布到生产环境，投入真正的知识答题活动应用中，我们一般是设置为得分80分以上则可以参与抽奖，这样比较合理。

<button bindtap="toDraw" hover-class="other-button-hover" class="cu-btn"> 去抽奖 </button>

在抽奖页，设计好页面布局与样式，还有就是抽奖业务逻辑实现。参与者每答对一道题既可获得相对应的分数，分数进行累计达到活动规定的分数后即可参与抽奖，通过奖励的方式刺激用户参与活动。

抽奖核心算法基于云开发的聚合能力上进行封装实现。

抽奖页面布局样式：

<!-- 焦点图 start -->
<image src="/image/prize.png" mode='widthFix' class="prize-img"></image>
<!-- 焦点图 start -->

<!-- 通告栏 start -->
<view class="bg-orange">
    <text class="icon-notice"></text>
    <text>如果中奖了，请及时联系工作人员进行核对和领奖！</text>
</view>
<!-- 通告栏 end -->

<!-- 按钮 start -->
 <button class='cu-btn'>立即抽奖</button>
<!-- 按钮 start -->

在首页，还需要添加一个“中奖记录”按钮，方便用户查询自己的中奖记录。

中奖记录页面布局样式：

<view class="mw-page">
  <view class="cu-list menu">
    <view class="cu-item" wx:for="{
   
   {historyList}}" wx:key="index">
      <view class='content'>
        <text class='text-black'>{
   
   {item.prizeName}}</text>
      </view>
      <view class='action'>
        <text class='text-grey text-sm'>{
   
   {item.date}}</text>
      </view>
    </view>
  </view>
</view>