Cangmo modal

compiled/alipay/demo/pages/Modal/index.axml

@@ -2,85 +2,117 @@
   content="人在天边月上明"
   visible="{{basicVisible}}"
   onClose="handleClose"
+  closable="{{false}}"
+  footer="{{footer1}}"
+  onButtonTap="onButtonTap"
   primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
 ></ant-modal>
 <ant-modal
   title="带标题的弹窗"
   content="人在天边月上明"
+  onButtonTap="onButtonTap"
   visible="{{withTitleVisible}}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
+  footer="{{footer1}}"
+></ant-modal>
+<ant-modal
+  title="带头图"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Q5ekTJUJW8IAAAAAAAAAAAAADiWwAQ/original"
+  content="人在天边月上明"
+  onButtonTap="onButtonTap"
+  visible="{{withImageVisible}}"
+  onClose="handleClose"
+  footer="{{footer1}}"
 ></ant-modal>
 <ant-modal
   title="确定删除吗？"
   content="删除后无法恢复"
   visible="{{basicTwoVisible}}"
   onClose="handleClose"
-  primaryButtonText="确定"
-  secondaryButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
+  onButtonTap="onButtonTap"
+  footer="{{footer2}}"
 ></ant-modal>
 <ant-modal
   title="标题"
   content="人在天边月上明"
   visible="{{basicThreeVisible}}"
   onClose="handleClose"
-  primaryButtonText="主按钮"
-  secondaryButtonText="更多"
-  cancelButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-  onCancelButtonTap="handleCancelButtonTap"
+  onButtonTap="onButtonTap"
+  footer="{{footer3}}"
 ></ant-modal>
 <ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  visible="{{focusOneVisible}}"
+  title="签到成功!获得积分奖励"
+  content="积分可用于好礼兑换"
+  visible="{{slotWeakVisible}}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-></ant-modal>
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  visible="{{focusTwoVisible}}"
-  onClose="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-></ant-modal>
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  visible="{{focusThreeVisible}}"
-  onClose="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  cancelButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-  onCancelButtonTap="handleCancelButtonTap"
-></ant-modal>
+  className="activity-modal"
+  onButtonTap="onButtonTap"
+>
+  <image
+    slot="header"
+    mode="widthFix"
+    class="activity-modal-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*HTNoQoZlIfAAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <image
+    slot="content-extra"
+    mode="widthFix"
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*DNXISIKmwBUAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <view
+    slot="footer"
+    class="activity-modal-footer"
+  >
+    <view
+      class="activity-modal-footer-button"
+      onTap="onClickActivityModalButton"
+    >
+      开心收下
+    </view>
+    <view class="activity-modal-footer-extra">
+      奖品可在我的奖品中查看
+    </view>
+  </view>
+</ant-modal>
 <ant-modal
-  title="确定删除吗？"
-  content="删除后无法恢复"
-  visible="{{customVisible}}"
+  title="恭喜获得出行红包"
+  content="出行打车小程序专用"
+  visible="{{slotStrongVisible}}"
   onClose="handleClose"
-  primaryButtonText="删除"
-  primaryButtonStyle="color:red;"
-  secondaryButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-></ant-modal>
+  className="activity-modal activity-modal-strong"
+  onButtonTap="onButtonTap"
+>
+  <image
+    slot="modal-top"
+    mode="widthFix"
+    class="activity-modal-strong-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Sp52SL4mObQAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <image
+    slot="content-extra"
+    mode="widthFix"
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Oju8Q4diuA0AAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <view
+    slot="footer"
+    class="activity-modal-footer"
+  >
+    <view
+      class="activity-modal-footer-button"
+      onTap="onClickActivityModalButton"
+    >
+      去使用
+    </view>
+    <view class="activity-modal-footer-extra">
+      奖品可在我的奖品中查看
+    </view>
+  </view>
+</ant-modal>
 <ant-modal
   visible="{{customBodyVisible}}"
+  closable="{{false}}"
   onClose="handleClose"
 >
   <view class="body">
@@ -113,52 +145,46 @@
   >
     带有标题
   </ant-button>
+  <ant-button
+    data-field="withImageVisible"
+    onTap="handleOpen"
+  >
+    带头图
+  </ant-button>
   <ant-button
     data-field="basicTwoVisible"
     onTap="handleOpen"
   >
-    带辅助按钮
+    两个按钮 横排
   </ant-button>
   <ant-button
     data-field="basicThreeVisible"
     onTap="handleOpen"
   >
-    带辅助和取消按钮
+    三个按钮 竖排
   </ant-button>
 </ant-container>
 <ant-container
-  title="强调模式"
+  title="局部插槽"
   className="list"
 >
   <ant-button
-    data-field="focusOneVisible"
-    onTap="handleOpen"
-  >
-    只有主按钮
-  </ant-button>
-  <ant-button
-    data-field="focusTwoVisible"
+    data-field="slotWeakVisible"
     onTap="handleOpen"
   >
-    带辅助按钮
+    弱活动氛围弹框
   </ant-button>
   <ant-button
-    data-field="focusThreeVisible"
+    data-field="slotStrongVisible"
     onTap="handleOpen"
   >
-    带辅助和取消按钮
+    强活动氛围弹框
   </ant-button>
 </ant-container>
 <ant-container
   title="自定义"
   className="list"
 >
-  <ant-button
-    data-field="customVisible"
-    onTap="handleOpen"
-  >
-    自定义按钮样式
-  </ant-button>
   <ant-button
     data-field="customBodyVisible"
     onTap="handleOpen"

compiled/alipay/demo/pages/Modal/index.js

@@ -6,9 +6,29 @@ Page({
         basicThreeVisible: false,
         focusOneVisible: false,
         focusTwoVisible: false,
-        focusThreeVisible: false,
-        customVisible: false,
         customBodyVisible: false,
+        withImageVisible: false,
+        slotWeakVisible: false,
+        slotStrongVisible: false,
+        footer1: {
+            buttons: [{ text: '我知道了' }],
+        },
+        footer2: {
+            buttons: [{ text: '取消', type: 'default' }, { text: '确定', type: 'primary' }],
+            layout: 'horizontal',
+        },
+        footer3: {
+            buttons: [{ text: '主按钮', type: 'primary' }, { text: '更多', type: 'default' }, { text: '取消', type: 'text' }],
+        },
+    },
+    onClickActivityModalButton() {
+        this.showToast(`点击了活动弹框「开心收下」`);
+        this.handleClose();
+    },
+    onButtonTap(buttonItem) {
+        console.log('点击的按钮: ', buttonItem);
+        this.showToast(`点击了${buttonItem.text}`);
+        this.handleClose();
     },
     handleOpen(e) {
         const { field } = e.target.dataset;
@@ -22,23 +42,12 @@ Page({
             basicThreeVisible: false,
             focusOneVisible: false,
             focusTwoVisible: false,
-            focusThreeVisible: false,
-            customVisible: false,
             customBodyVisible: false,
+            withImageVisible: false,
+            slotWeakVisible: false,
+            slotStrongVisible: false,
         });
     },
-    handlePrimaryButtonTap() {
-        this.handleClose();
-        this.showToast('点击主要按钮');
-    },
-    handleSecondaryButtonTap() {
-        this.handleClose();
-        this.showToast('点击辅助按钮');
-    },
-    handleCancelButtonTap() {
-        this.handleClose();
-        this.showToast('点击取消按钮');
-    },
     showToast(content) {
         my.showToast({ content, duration: 1000 });
     },

compiled/alipay/demo/pages/Modal/index.less

@@ -13,3 +13,82 @@
 .list button {
   margin-bottom: 8px;
 }
+
+.activity-modal {
+  .ant-modal-body  {
+    background-image: linear-gradient(0deg, #FFFFFF 75%, rgba(255,255,255,0.95) 91%, rgba(255,242,218,0.93) 100%);
+    box-shadow: 0 2px 56px 0 rgba(0,0,0,0.18);
+  }
+  .ant-modal-body-title {
+    padding-bottom: 10rpx;
+  }
+  .ant-modal-body-content {
+    color: #999999;
+    padding-bottom: 0rpx;
+  }
+  &-header-image {
+    width: 250rpx;
+    height: 250rpx;
+    position: relative;
+    margin-top: -220rpx;
+    margin-left: 50%;
+    margin-bottom: 21rpx;
+    transform: translateX(-50%);
+  }
+  &-content-image {
+    width: 516rpx;
+    margin: 64rpx auto 0 auto;
+  }
+  &-footer {
+    padding-top: 64rpx;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    &-button {
+      background: #FF4000;
+      border-radius: 55rpx;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 50rpx;
+      color: #FFFFFF;
+      text-align: center;
+      width: 360rpx;
+      height: 96rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &-extra {
+      font-size: 24rpx;
+      color: #999999;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 36rpx;
+      padding-top: 20rpx;
+    }
+  }
+}
+
+.activity-modal-strong {
+  &-header-image {
+    width: 100%;
+    position: absolute;
+    top: -160rpx;
+    left: 0;
+    z-index: -1;
+  }
+  .activity-modal-footer {
+    padding-top: 75rpx;
+  }
+  .activity-modal-content-image {
+    width: 528rpx;
+    margin-top: 60rpx;
+  }
+  .ant-modal-body  {
+    background-image: linear-gradient(180deg, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.91) 8%, #FFFFFF 17%);
+    box-shadow: 0;
+    padding-top: 30rpx;
+  }
+}
+

compiled/alipay/src/Button/index.less

@@ -11,7 +11,7 @@
   height: auto;
   line-height: normal;
   padding: @button-padding;
-  border-radius: @button-corner-radius;
+  border-radius: 50vh;
   border: 0 none;
   box-sizing: border-box;
   font-size: 36 * @rpx;