@bi-nova/ui-weapp 1.2.1 → 1.3.0-beta.202609181052

package/src/product-placement/half-screen/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bi-product-overlay": "../overlay/index"
+  }
+}

package/src/product-placement/half-screen/index.wxml

@@ -0,0 +1,64 @@
+<!--
+  @Description 产品投放位底部半屏组件模板
+  @Author wutao
+  @Date 2026-09-08
+  @LastEditors wutao
+  @LastEditTime 2026-09-14 14:44:07
+-->
+<bi-product-overlay
+  show="{{true}}"
+  position="bottom"
+  mask-closable="{{panelStyle.maskClosable}}"
+  z-index="{{zIndex}}"
+  bind:maskclose="handleMaskClose"
+>
+  <view
+    class="bi-product-half-screen {{panelStyle.skinClass}}"
+    style="height: {{panelHeight}}vh;"
+  >
+    <view class="bi-product-half-screen__header">
+      <view class="bi-product-half-screen__drag-indicator"></view>
+      <button
+        wx:if="{{panelStyle.closeable}}"
+        class="bi-product-half-screen__close"
+        aria-label="关闭产品半屏"
+        catchtap="handleClose"
+      >×</button>
+    </view>
+
+    <scroll-view
+      class="bi-product-half-screen__scroll"
+      data-source="surface"
+      scroll-y="{{true}}"
+      enhanced="{{true}}"
+      bindtap="handleAction"
+    >
+      <image
+        wx:if="{{creative.imageUrl}}"
+        class="bi-product-half-screen__image"
+        src="{{creative.imageUrl}}"
+        mode="widthFix"
+        bindload="handleImageLoad"
+        binderror="handleImageError"
+      />
+
+      <view class="bi-product-half-screen__body">
+        <text wx:if="{{creative.badgeText}}" class="bi-product-half-screen__badge">{{creative.badgeText}}</text>
+        <text wx:if="{{creative.title}}" class="bi-product-half-screen__title">{{creative.title}}</text>
+        <text wx:if="{{creative.description}}" class="bi-product-half-screen__description">{{creative.description}}</text>
+      </view>
+    </scroll-view>
+
+    <view wx:if="{{creative.buttonText}}" class="bi-product-half-screen__footer">
+      <button
+        class="bi-product-half-screen__button {{!actionable || actionLoading ? 'bi-product-half-screen__button--disabled' : ''}}"
+        data-source="button"
+        loading="{{actionLoading}}"
+        disabled="{{!actionable || actionLoading}}"
+        catchtap="handleAction"
+      >
+        {{creative.buttonText}}
+      </button>
+    </view>
+  </view>
+</bi-product-overlay>

package/src/product-placement/half-screen/index.wxss

@@ -0,0 +1,145 @@
+/*
+ * @Description 产品投放位底部半屏组件样式
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-14 14:44:07
+ */
+.bi-product-half-screen {
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 40vh;
+  max-height: 85vh;
+  border-radius: 32rpx 32rpx 0 0;
+  background: #ffffff;
+  box-shadow: 0 -16rpx 48rpx rgba(0, 0, 0, 0.16);
+  flex-direction: column;
+  animation: bi-product-half-screen-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.bi-product-half-screen__header {
+  position: relative;
+  display: flex;
+  flex: 0 0 64rpx;
+  align-items: center;
+  justify-content: center;
+}
+
+.bi-product-half-screen__drag-indicator {
+  width: 72rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: #d8dbe0;
+}
+
+.bi-product-half-screen__close {
+  position: absolute;
+  top: 10rpx;
+  right: 24rpx;
+  width: 52rpx;
+  height: 52rpx;
+  margin: 0;
+  padding: 0;
+  border-radius: 50%;
+  background: #f2f3f5;
+  color: #646a73;
+  font-size: 36rpx;
+  font-weight: 300;
+  line-height: 48rpx;
+}
+
+.bi-product-half-screen__close::after,
+.bi-product-half-screen__button::after {
+  border: none;
+}
+
+.bi-product-half-screen__scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.bi-product-half-screen__image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.bi-product-half-screen__body {
+  display: flex;
+  box-sizing: border-box;
+  padding: 24rpx 40rpx 40rpx;
+  flex-direction: column;
+}
+
+.bi-product-half-screen__badge {
+  align-self: flex-start;
+  margin-bottom: 16rpx;
+  padding: 4rpx 14rpx;
+  border-radius: 8rpx;
+  background: #fff0e8;
+  color: #fa541c;
+  font-size: 22rpx;
+  line-height: 34rpx;
+}
+
+.bi-product-half-screen__title {
+  color: #1f2329;
+  font-size: 38rpx;
+  font-weight: 600;
+  line-height: 54rpx;
+}
+
+.bi-product-half-screen__description {
+  margin-top: 16rpx;
+  color: #646a73;
+  font-size: 28rpx;
+  line-height: 44rpx;
+}
+
+.bi-product-half-screen__footer {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #f0f1f2;
+  background: #ffffff;
+}
+
+.bi-product-half-screen__button {
+  box-sizing: border-box;
+  width: 100%;
+  height: 88rpx;
+  margin: 0;
+  padding: 0 32rpx;
+  border-radius: 44rpx;
+  background: #1677ff;
+  color: #ffffff;
+  font-size: 30rpx;
+  font-weight: 600;
+  line-height: 88rpx;
+}
+
+.bi-product-skin--vip-gold .bi-product-half-screen__button {
+  background: linear-gradient(135deg, #efc77e 0%, #b8893f 100%);
+  color: #35230b;
+}
+
+.bi-product-skin--insurance-blue .bi-product-half-screen__button {
+  background: #246bfd;
+}
+
+.bi-product-half-screen__button.bi-product-half-screen__button--disabled {
+  background: #a9c9f7;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+@keyframes bi-product-half-screen-enter {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}