说明

弹框类型，String
task(任务)；rule(规则)；money(提现)；join(助力)；success(成功)；common(公共)

弹框呈现的位置， String
center(默认)，flex-end，flex-start

弹框组件的回调监听事件 popupEvent
立即助力 popupType: join
成功：popupType: success
确认：popupType: money
关闭弹框：popupType: close

※组件需要控制是否呈现

页面使用

  1. <popup wx:if="{{showPopup}}" bind:popupEvent="onPopupEvent" popupType="{{popupType}}" 
  2.  flexAlign="{{flexAlign}}" animation="{{popupAnimation}}" popupData="{{popupData}}"></popup>
  1. popupEvent: 弹框回调事件
  2. popupType: 弹框类型
  3. flexAlign: 弹框垂直样式
  4. animation: 是否需要动画
  5. popData: 组件内容呈现数据（数据格式说明会在下面详细介绍）

javascript使用

  1. common.promise('stockTreeHandler/getwaterdroplistforaward', parmas).then((data) => {
  2.       that.setData({
  3.         popupData: data,
  4.         showPopup: true,
  5.         popupType: 'task',
  6.         flexAlign: 'flex-end',
  7.         popupAnimation: 'true'
  8.       })
  9.     }, (err) => {
  11.     })

这个是任务弹框的案例。这里需要注意popupData值，请保持接口返回的json跟stockTreeHandler/getwaterdroplistforaward接口返回一致。

  1. let ruleData = {
  2.       content: '<p style="padding-top: 10px;">1.活动时间：</p><p style="padding-top: 10px;">2.活动期间，用户可邀请好友助力或完成任务获得水滴给邀请书浇水，摇钱树长大后可通过摇钱或者现金奖励</p>' +
  3.                 '<p style="padding-top: 10px;">3.活动期间，每个用户每天最多种成一颗摇钱树，整个活动期间最多可种6棵摇钱树。一天内未完成数的种植，明天重新开始</p><p style="padding-top: 10px;">4.活动期间，每个用户每天只能帮同一个好友助力一次，每天最多助力10个好友</p>' +
  4.                 '<p style="padding-top: 10px;">5.现金需超过3*N才能提现，且需提前关注【同程旅游网】公众号，如24小时未在公众号领取，微信官方视为放弃领取；如因个人账号原因遇到微信拦截，导致无法收到红包，请联系微信官方咨询</p>',
  5.           topImage:'https://file.40017.cn/pinche/walk/tree/tree_popup_topTitle2.png',
  6.       title:''
  7.     }
  8.     that.setData({
  9.       popupData: ruleData,
  10.       showPopup: true,
  11.       popupType: 'rule',
  12.       flexAlign: 'flex-end',
  13.       popupAnimation: 'true'
  14.     })

这个是活动规则说明案例。类似这样的内容组件采用rich-text富文本方式呈现。
※传入的数据格式需要跟ruleData一致

  1. let friends = {
  2.       'userName': '云上蔷薇',
  3.       'userImage': 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLXjnvEdNswlKwIJWhdwQwbAjDaEKCRnsnUcaUuf25fJM7DUtxwGtwRVQXGic88piakbaEVDg6jjazQ/132',
  4.       'title': '邀请你助力领水滴，种摇钱树啦',
  5.       'mainImage': 'https://file.40017.cn/pinche/walk/tree/icon_tree5.png',
  6.       'bottomTitle': '需授权用户信息后才能助力哦',
  7.       'buttomTitle': '立即助力'
  8.     }
  9.     that.setData({
  10.       popupData: friends,
  11.       showPopup: true,
  12.       popupType: 'join',
  13.       flexAlign: 'center',
  14.       popupAnimation: 'false'
  15.     })

这个是好友助力案例。类似这样的弹框需要传入的数据请跟friends变量一致。

  1. userName：好友昵称
  2. userImage：好友头像
  3. title：主标题
  4. mainImage：弹框主图片（295rpx*271rpx）
  5. bottomTitle：底部副标题（说明之类的内容）
  6. buttomTitle：按钮文案
  1. let treeSuccess = {
  2.       'topImage': 'https://file.40017.cn/pinche/walk/tree/tree_popup_success.png',
  3.       'title': '帮好友获得',
  4.       'successNub': 1,
  5.       'mainImage': 'https://file.40017.cn/pinche/walk/tree/icon_tree5.png',
  6.       'bottomTitle': '分享到群聊更容易成功哦',
  7.       'buttomTitle': '我也要种树',
  8.       'successType': 'tree', //用于说明是现金种树助力成功的弹框
  9.     }
  10.     that.setData({
  11.       popupData: treeSuccess,
  12.       showPopup: true,
  13.       popupType: 'success',
  14.       flexAlign: 'center',
  15.       popupAnimation: 'false'
  16.     })

这个是助力成功案例。类似这样的弹框需要传入的数据请treeSuccess变量一致。

  1. topImage：顶部图片（类似助力成功图片）
  2. title：主标题
  3. successNub：奖励数量，是阿拉伯数字
  4. mainImage：弹框主图片（295rpx*271rpx）
  5. bottomTitle：底部副标题（说明之类的内容）
  6. buttomTitle：按钮文案
  7. successType：主标题的内容区分；tree值为现金种树成功内容。后期会不断增加各种值
  1. let treeMoney = {
  2.       'content': '您的5元现金已存入余额 请在“<span style="color: #333; font-weight: bold;">我的</span>”中点击“<span style="color: #333; font-weight: bold;">立即提现</span>”',
  3.       'buttomTitle': '确定'
  4.     }
  6.     that.setData({
  7.       popupData: treeMoney,
  8.       showPopup: true,
  9.       popupType: 'money',
  10.       flexAlign: 'center',
  11.       popupAnimation: 'false'
  12.     })

这个是确认弹框，但主体内容带有特殊样式的。采用rich-text富文本方式呈现。

  1. content：弹框主体内容
  2. buttomTitle：按钮文案
  1. let treeCommon = {
  2.       'content': '今天的树已经领光啦， 明天赶早呦!',
  3.       'buttomTitle': '确定'
  4.     }
  6.     that.setData({
  7.       popupData: treeCommon,
  8.       showPopup: true,
  9.       popupType: 'common',
  10.       flexAlign: 'center',
  11.       popupAnimation: 'false'
  12.     })

这个是普通确认弹框，主体内容不带有特色样式的。

  1. content：弹框主体内容
  2. buttomTitle：按钮文案
  1. onPopupEvent: function(e) {
  2.     let popupTpe = e.detail.popupType;
  4.     if(popupTpe == 'hideModal' || popupTpe == 'close') {
  5.       this.setData({
  6.         showPopup: false
  7.       })
  8.     }
  9.   },

弹框的交互事件，需要返回给页面的，都请在你所需页面中监听回调。其中会返回用户触发的弹框类型（类型有哪些请参考文档顶部）。※回调事件中需要处理组件的显隐