feat: 强氛围弹框demo

ant-design · Aug 29, 2024 · 05ee446 · 05ee446
1 parent f04b943
commit 05ee446
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 9 deletions.
diff --git a/compiled/alipay/demo/pages/Modal/index.axml b/compiled/alipay/demo/pages/Modal/index.axml
@@ -15,10 +15,9 @@
   onClose="handleClose"
   footer="{{footer1}}"
 ></ant-modal>
-<!--TODO：图片替换-->
 <ant-modal
   title="带头图"
-  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Q5ekTJUJW8IAAAAAAAAAAAAADiWwAQ/original"
   content="人在天边月上明"
   onButtonTap="onButtonTap"
   visible="{{withImageVisible}}"
@@ -76,6 +75,41 @@
     </view>
   </view>
 </ant-modal>
+<ant-modal
+  title="恭喜获得出行红包"
+  content="出行打车小程序专用"
+  visible="{{slotStrongVisible}}"
+  onClose="handleClose"
+  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}}"
@@ -135,11 +169,17 @@
   className="list"
 >
   <ant-button
-    data-field="slot"
+    data-field="slotWeakVisible"
     onTap="handleOpen"
   >
     弱活动氛围弹框
   </ant-button>
+  <ant-button
+    data-field="slotStrongVisible"
+    onTap="handleOpen"
+  >
+    强活动氛围弹框
+  </ant-button>
 </ant-container>
 <ant-container
   title="自定义"

diff --git a/compiled/alipay/demo/pages/Modal/index.less b/compiled/alipay/demo/pages/Modal/index.less
@@ -70,3 +70,25 @@
   }
 }
 
+.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;
+  }
+}
+
diff --git a/compiled/alipay/src/Modal/index.axml b/compiled/alipay/src/Modal/index.axml
@@ -15,6 +15,7 @@
   destroyOnClose="{{destroyOnClose}}"
   onClose="onMaskClose"
 >
+  <slot name="modal-top"></slot>
   <slot>
     <view
       class="ant-modal-body {{bodyClassName || ''}}"

diff --git a/compiled/wechat/demo/pages/Modal/index.wxml b/compiled/wechat/demo/pages/Modal/index.wxml
@@ -15,10 +15,9 @@
   bind:close="handleClose"
   footer="{{footer1}}"
 ></ant-modal>
-<!--TODO：图片替换-->
 <ant-modal
   title="带头图"
-  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Q5ekTJUJW8IAAAAAAAAAAAAADiWwAQ/original"
   content="人在天边月上明"
   onButtonTap="onButtonTap"
   visible="{{withImageVisible}}"
@@ -72,6 +71,37 @@
     <view class="activity-modal-footer-extra">奖品可在我的奖品中查看</view>
   </view>
 </ant-modal>
+<ant-modal
+  title="恭喜获得出行红包"
+  content="出行打车小程序专用"
+  visible="{{slotStrongVisible}}"
+  bind:close="handleClose"
+  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"
+      bind:tap="onClickActivityModalButton"
+    >去使用</view>
+    <view class="activity-modal-footer-extra">奖品可在我的奖品中查看</view>
+  </view>
+</ant-modal>
 <ant-container
   title="基础用法"
   className="list"

diff --git a/compiled/wechat/demo/pages/Modal/index.wxss b/compiled/wechat/demo/pages/Modal/index.wxss
@@ -65,3 +65,22 @@
   line-height: 36rpx;
   padding-top: 20rpx;
 }
+.activity-modal-strong-header-image {
+  width: 100%;
+  position: absolute;
+  top: -160rpx;
+  left: 0;
+  z-index: -1;
+}
+.activity-modal-strong .activity-modal-footer {
+  padding-top: 75rpx;
+}
+.activity-modal-strong .activity-modal-content-image {
+  width: 528rpx;
+  margin-top: 60rpx;
+}
+.activity-modal-strong .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;
+}
diff --git a/compiled/wechat/src/Modal/index.wxml b/compiled/wechat/src/Modal/index.wxml
@@ -15,6 +15,7 @@
   destroyOnClose="{{destroyOnClose}}"
   bind:close="onMaskClose"
 >
+  <slot name="modal-top"></slot>
   <view
     class="ant-modal-body {{bodyClassName || ''}}"
     style="{{bodyStyle || ''}}"

diff --git a/demo/pages/Modal/index.axml b/demo/pages/Modal/index.axml
@@ -15,10 +15,9 @@
   onClose="handleClose"
   footer="{{ footer1 }}"
   />
-  <!-- TODO：图片替换 --> 
 <ant-modal
   title="带头图"
-  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Q5ekTJUJW8IAAAAAAAAAAAAADiWwAQ/original"
   content="人在天边月上明"
   onButtonTap="onButtonTap"
   visible="{{ withImageVisible }}"
@@ -59,7 +58,7 @@
     mode="widthFix" 
     class="activity-modal-content-image"
     src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*DNXISIKmwBUAAAAAAAAAAAAADiWwAQ/original" />
-  <view slot="footer"  class="activity-modal-footer">
+  <view slot="footer" class="activity-modal-footer">
     <view class="activity-modal-footer-button" onTap="onClickActivityModalButton">
       开心收下
     </view>
@@ -68,6 +67,34 @@
     </view>
   </view>
 </ant-modal>
+
+<ant-modal
+  title="恭喜获得出行红包"
+  content="出行打车小程序专用"
+  visible="{{ slotStrongVisible }}"
+  onClose="handleClose"
+  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 
+    slot="content-extra" 
+    mode="widthFix" 
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Oju8Q4diuA0AAAAAAAAAAAAADiWwAQ/original" />
+  <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>
 <!-- #if ALIPAY -->
 <ant-modal
   visible="{{ customBodyVisible }}"
@@ -121,10 +148,15 @@
   className="list">
   <!-- #if ALIPAY -->
   <ant-button
-    data-field="slot"
+    data-field="slotWeakVisible"
     onTap="handleOpen">
     弱活动氛围弹框
   </ant-button>
+  <ant-button
+    data-field="slotStrongVisible"
+    onTap="handleOpen">
+    强活动氛围弹框
+  </ant-button>
   <!-- #endif -->
 </ant-container>
 

diff --git a/demo/pages/Modal/index.less b/demo/pages/Modal/index.less
@@ -70,3 +70,25 @@
   }
 }
 
+.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;
+  }
+}
+
diff --git a/src/Modal/index.axml b/src/Modal/index.axml
@@ -14,6 +14,7 @@
   zIndex="{{ zIndex }}"
   destroyOnClose="{{ destroyOnClose }}"
   onClose="onMaskClose">
+  <slot name="modal-top" />
   <!-- #if ALIPAY -->
   <slot>
   <!-- #endif -->