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

package/src/product-placement/overlay/index.wxss

@@ -0,0 +1,55 @@
+/*
+ * @Description 产品投放位通用遮罩组件样式
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-08 17:55:14
+ */
+.bi-product-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+}
+
+.bi-product-overlay--center {
+  align-items: center;
+  justify-content: center;
+  padding: 48rpx;
+}
+
+.bi-product-overlay--bottom {
+  align-items: flex-end;
+  justify-content: stretch;
+}
+
+.bi-product-overlay__mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.56);
+  animation: bi-product-overlay-fade-in 180ms ease-out both;
+}
+
+.bi-product-overlay__content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+@keyframes bi-product-overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/product-placement/popup/index.js

@@ -0,0 +1,112 @@
+/**
+ * @Description 产品投放位居中弹窗组件
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-08 17:55:14
+ */
+Component({
+  properties: {
+    creative: { type: Object, value: null },
+    panelStyle: { type: Object, value: null },
+    actionable: { type: Boolean, value: false },
+    actionLoading: { type: Boolean, value: false },
+    zIndex: { type: Number, value: 999 }
+  },
+  data: {
+    ready: false
+  },
+  lifetimes: {
+    attached() {
+      this.syncCreative(this.properties.creative)
+    },
+    detached() {
+      this.clearReadyTimer()
+    }
+  },
+  observers: {
+    creative(nextCreative) {
+      this.syncCreative(nextCreative)
+    }
+  },
+  methods: {
+    /**
+     * 同步弹窗素材状态
+     * @param {Record<string, string> | null} creative 标准化素材
+     * @returns {void}
+     */
+    syncCreative(creative) {
+      this.clearReadyTimer()
+      this.setData({ ready: false })
+
+      if (creative && creative.imageUrl) return
+
+      this.readyTimer = setTimeout(() => this.notifyReady('content'), 0)
+    },
+
+    /** 清理延迟就绪任务 */
+    clearReadyTimer() {
+      if (!this.readyTimer) return
+
+      clearTimeout(this.readyTimer)
+      this.readyTimer = null
+    },
+
+    /**
+     * 通知上层组件弹窗已经可以展示
+     * @param {string} mediaType 素材类型
+     * @returns {void}
+     */
+    notifyReady(mediaType) {
+      if (this.data.ready) return
+
+      this.setData({ ready: true })
+      this.triggerEvent('ready', { mediaType })
+    },
+
+    /** 处理图片加载完成 */
+    handleImageLoad() {
+      this.notifyReady('image')
+    },
+
+    /**
+     * 处理图片加载失败
+     * @param {Record<string, any>} event 小程序图片错误事件
+     * @returns {void}
+     */
+    handleImageError(event) {
+      const rawDetail = event && event.detail || {}
+
+      this.triggerEvent('error', {
+        errCode: 'PRODUCT_PLACEMENT_POPUP_IMAGE_LOAD_FAIL',
+        errMsg: '产品弹窗图片加载失败',
+        errorType: 'MEDIA_LOAD_FAIL',
+        rawErrCode: rawDetail.errCode,
+        rawErrMsg: rawDetail.errMsg
+      })
+    },
+
+    /** 处理关闭按钮点击 */
+    handleClose() {
+      this.triggerEvent('close', { reason: 'closeButton' })
+    },
+
+    /** 处理遮罩关闭事件 */
+    handleMaskClose() {
+      this.triggerEvent('close', { reason: 'mask' })
+    },
+
+    /**
+     * 处理产品动作
+     * @param {Record<string, any>} event 点击事件
+     * @returns {void}
+     */
+    handleAction(event) {
+      if (!this.properties.actionable || this.properties.actionLoading) return
+
+      this.triggerEvent('action', {
+        source: event && event.currentTarget && event.currentTarget.dataset.source || 'surface'
+      })
+    }
+  }
+})

package/src/product-placement/popup/index.json

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

package/src/product-placement/popup/index.wxml

@@ -0,0 +1,54 @@
+<!--
+  @Description 产品投放位居中弹窗组件模板
+  @Author wutao
+  @Date 2026-09-08
+  @LastEditors wutao
+  @LastEditTime 2026-09-14 14:44:07
+-->
+<bi-product-overlay
+  show="{{true}}"
+  position="center"
+  mask-closable="{{panelStyle.maskClosable}}"
+  z-index="{{zIndex}}"
+  bind:maskclose="handleMaskClose"
+>
+  <view class="bi-product-popup {{panelStyle.skinClass}}">
+    <button
+      wx:if="{{panelStyle.closeable}}"
+      class="bi-product-popup__close"
+      aria-label="关闭产品弹窗"
+      catchtap="handleClose"
+    >×</button>
+
+    <view
+      class="bi-product-popup__surface {{actionable ? 'bi-product-popup__surface--actionable' : ''}}"
+      data-source="surface"
+      bindtap="handleAction"
+    >
+      <image
+        wx:if="{{creative.imageUrl}}"
+        class="bi-product-popup__image"
+        src="{{creative.imageUrl}}"
+        mode="widthFix"
+        bindload="handleImageLoad"
+        binderror="handleImageError"
+      />
+
+      <view wx:if="{{creative.title || creative.description || creative.buttonText}}" class="bi-product-popup__body">
+        <text wx:if="{{creative.badgeText}}" class="bi-product-popup__badge">{{creative.badgeText}}</text>
+        <text wx:if="{{creative.title}}" class="bi-product-popup__title">{{creative.title}}</text>
+        <text wx:if="{{creative.description}}" class="bi-product-popup__description">{{creative.description}}</text>
+        <button
+          wx:if="{{creative.buttonText}}"
+          class="bi-product-popup__button {{!actionable || actionLoading ? 'bi-product-popup__button--disabled' : ''}}"
+          data-source="button"
+          loading="{{actionLoading}}"
+          disabled="{{!actionable || actionLoading}}"
+          catchtap="handleAction"
+        >
+          {{creative.buttonText}}
+        </button>
+      </view>
+    </view>
+  </view>
+</bi-product-overlay>

package/src/product-placement/popup/index.wxss

@@ -0,0 +1,124 @@
+/*
+ * @Description 产品投放位居中弹窗组件样式
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-14 14:44:07
+ */
+.bi-product-popup {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 620rpx;
+  margin: 0 auto;
+  border-radius: 28rpx;
+  background: #ffffff;
+  box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.24);
+  animation: bi-product-popup-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.bi-product-popup__surface--actionable {
+  cursor: pointer;
+}
+
+.bi-product-popup__image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.bi-product-popup__body {
+  display: flex;
+  box-sizing: border-box;
+  padding: 36rpx 40rpx 40rpx;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.bi-product-popup__badge {
+  margin-bottom: 16rpx;
+  padding: 4rpx 14rpx;
+  border-radius: 8rpx;
+  background: #fff0e8;
+  color: #fa541c;
+  font-size: 22rpx;
+  line-height: 34rpx;
+}
+
+.bi-product-popup__title {
+  color: #1f2329;
+  font-size: 36rpx;
+  font-weight: 600;
+  line-height: 50rpx;
+}
+
+.bi-product-popup__description {
+  margin-top: 16rpx;
+  color: #646a73;
+  font-size: 26rpx;
+  line-height: 40rpx;
+}
+
+.bi-product-popup__button {
+  box-sizing: border-box;
+  width: 100%;
+  height: 88rpx;
+  margin: 32rpx 0 0;
+  padding: 0 32rpx;
+  border-radius: 44rpx;
+  background: #1677ff;
+  color: #ffffff;
+  font-size: 30rpx;
+  font-weight: 600;
+  line-height: 88rpx;
+}
+
+.bi-product-popup__button::after,
+.bi-product-popup__close::after {
+  border: none;
+}
+
+.bi-product-popup__close {
+  position: absolute;
+  top: 18rpx;
+  right: 18rpx;
+  z-index: 2;
+  width: 52rpx;
+  height: 52rpx;
+  margin: 0;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.42);
+  color: #ffffff;
+  font-size: 36rpx;
+  font-weight: 300;
+  line-height: 48rpx;
+}
+
+.bi-product-skin--vip-gold .bi-product-popup__button {
+  background: linear-gradient(135deg, #efc77e 0%, #b8893f 100%);
+  color: #35230b;
+}
+
+.bi-product-skin--insurance-blue .bi-product-popup__button {
+  background: #246bfd;
+}
+
+.bi-product-popup__button.bi-product-popup__button--disabled {
+  background: #a9c9f7;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+@keyframes bi-product-popup-enter {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx) scale(0.94);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/src/product-placement/utils.js

@@ -0,0 +1,295 @@
+/**
+ * @Description 产品投放位配置处理工具
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-15 12:02:24
+ */
+
+/** 产品投放位支持的展示形态 */
+const SUPPORTED_DISPLAY_MODES = ['banner', 'popup', 'half_screen']
+/** 产品投放位支持的动作类型 */
+const SUPPORTED_ACTION_TYPES = ['business', 'mini_program', 'internal', 'web', 'api', 'none']
+/** 禁止由 action.params 下发的敏感字段及宿主运行时字段 */
+const BLOCKED_ACTION_PARAM_NAMES = [
+  'token',
+  'authorization',
+  'password',
+  'secret',
+  'phone',
+  'userid',
+  'equipmentvalue',
+  'entrance',
+  'thirdplatform',
+  'thirdplatformuserid',
+  'thirdplatformequipmentvalue',
+  'extenddata'
+]
+/** 内置皮肤白名单，禁止通过配置注入任意样式类名 */
+const SUPPORTED_SKIN_CODES = ['default', 'vip_gold', 'insurance_blue']
+
+/**
+ * 判断传入值是否为普通对象
+ * @param {unknown} value 待判断值
+ * @returns {boolean}
+ */
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value)
+}
+
+/**
+ * 把可选配置值转换为安全字符串
+ * @param {unknown} value 原始值
+ * @returns {string}
+ */
+function toSafeString(value) {
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+/**
+ * 过滤业务动作参数，仅保留可安全透传的基础类型
+ * @param {unknown} params 原始动作参数
+ * @returns {Record<string, string | number | boolean>}
+ */
+function normalizeActionParams(params) {
+  if (!isPlainObject(params)) return {}
+
+  return Object.keys(params).reduce((result, key) => {
+    const value = params[key]
+    const normalizedKey = key.trim().toLowerCase()
+
+    if (!normalizedKey || BLOCKED_ACTION_PARAM_NAMES.includes(normalizedKey)) {
+      return result
+    }
+
+    if (
+      ['string', 'boolean'].includes(typeof value) ||
+      typeof value === 'number' && Number.isFinite(value)
+    ) {
+      result[key] = value
+    }
+
+    return result
+  }, {})
+}
+
+/**
+ * 标准化点击动作配置
+ * @param {unknown} action 原始动作配置
+ * @returns {Record<string, any>}
+ */
+function normalizeAction(action) {
+  const source = isPlainObject(action) ? action : {}
+  const rawType = toSafeString(source.type)
+  const normalizedType = rawType.toLowerCase()
+  const compatibleType = normalizedType === 'miniprogram' ? 'mini_program' : normalizedType
+  const type = SUPPORTED_ACTION_TYPES.includes(compatibleType) ? compatibleType : 'none'
+
+  return {
+    type,
+    businessCode: toSafeString(source.businessCode),
+    appId: toSafeString(source.appId),
+    path: toSafeString(source.path),
+    url: toSafeString(source.url),
+    params: normalizeActionParams(source.params)
+  }
+}
+
+/**
+ * 标准化面板样式配置
+ * @param {unknown} panelStyle 原始面板样式
+ * @returns {Record<string, any>}
+ */
+function normalizePanelStyle(panelStyle) {
+  const source = isPlainObject(panelStyle) ? panelStyle : {}
+  const rawSkinCode = toSafeString(source.skinCode).toLowerCase()
+  const skinCode = SUPPORTED_SKIN_CODES.includes(rawSkinCode) ? rawSkinCode : 'default'
+  const rawHeightRatio = Number(source.heightRatio)
+  const heightRatio = Number.isFinite(rawHeightRatio)
+    ? Math.min(0.85, Math.max(0.4, rawHeightRatio))
+    : 0.68
+
+  return {
+    skinCode,
+    skinClass: `bi-product-skin--${skinCode.replace(/_/g, '-')}`,
+    heightRatio,
+    closeable: source.closeable === true,
+    maskClosable: source.maskClosable !== false,
+    showAgreement: source.showAgreement === true
+  }
+}
+
+/**
+ * 根据展示形态解析素材图片
+ * @param {Record<string, any>} creative 原始素材配置
+ * @param {'banner' | 'popup' | 'half_screen'} displayMode 展示形态
+ * @returns {string}
+ */
+function resolveImageUrl(creative, displayMode) {
+  if (toSafeString(creative.imageUrl)) return toSafeString(creative.imageUrl)
+  if (toSafeString(creative.image)) return toSafeString(creative.image)
+
+  if (displayMode === 'banner') {
+    return toSafeString(creative.bannerImageUrl)
+  }
+
+  return toSafeString(creative.popupImageUrl)
+}
+
+/**
+ * 标准化产品素材配置
+ * @param {unknown} creative 原始素材配置
+ * @param {'banner' | 'popup' | 'half_screen'} displayMode 展示形态
+ * @returns {Record<string, string>}
+ */
+function normalizeCreative(creative, displayMode) {
+  const source = isPlainObject(creative) ? creative : {}
+
+  return {
+    imageUrl: resolveImageUrl(source, displayMode),
+    title: toSafeString(source.title),
+    description: toSafeString(source.description),
+    buttonText: toSafeString(source.buttonText),
+    badgeText: toSafeString(source.badgeText)
+  }
+}
+
+/**
+ * 判断素材是否包含可展示内容
+ * @param {Record<string, string>} creative 标准化素材
+ * @returns {boolean}
+ */
+function hasRenderableCreative(creative) {
+  return Boolean(
+    creative.imageUrl ||
+    creative.title ||
+    creative.description ||
+    creative.buttonText
+  )
+}
+
+/**
+ * 构建配置校验失败结果
+ * @param {string} errCode 错误码
+ * @param {string} errMsg 错误说明
+ * @param {boolean} [silent] 是否静默处理
+ * @returns {{valid: false, config: null, errCode: string, errMsg: string, silent: boolean}}
+ */
+function buildInvalidResult(errCode, errMsg, silent) {
+  return {
+    valid: false,
+    config: null,
+    errCode,
+    errMsg,
+    silent: Boolean(silent)
+  }
+}
+
+/**
+ * 标准化产品投放位配置并校验广告 ID 约束
+ * @param {unknown} config 原始产品投放位配置
+ * @param {{adId?: string | number, type?: string}} [expectations] 调用方预期配置
+ * @returns {Record<string, any>}
+ */
+function normalizeProductPlacementConfig(config, expectations) {
+  if (!isPlainObject(config) || Object.keys(config).length === 0) {
+    return buildInvalidResult(
+      'PRODUCT_PLACEMENT_EMPTY_CONFIG',
+      '产品投放位配置为空',
+      true
+    )
+  }
+
+  const expected = isPlainObject(expectations) ? expectations : {}
+  const displayMode = toSafeString(config.displayMode).toLowerCase()
+  const expectedDisplayMode = toSafeString(expected.type).toLowerCase()
+
+  if (!SUPPORTED_DISPLAY_MODES.includes(displayMode)) {
+    return buildInvalidResult(
+      'PRODUCT_PLACEMENT_UNSUPPORTED_DISPLAY_MODE',
+      `不支持的产品投放位展示形态：${displayMode || 'empty'}`
+    )
+  }
+
+  if (expectedDisplayMode && !SUPPORTED_DISPLAY_MODES.includes(expectedDisplayMode)) {
+    return buildInvalidResult(
+      'PRODUCT_PLACEMENT_UNSUPPORTED_TYPE',
+      `不支持的产品投放位预期展示形态：${expectedDisplayMode}`
+    )
+  }
+
+  if (expectedDisplayMode && displayMode !== expectedDisplayMode) {
+    return buildInvalidResult(
+      'PRODUCT_PLACEMENT_DISPLAY_MODE_MISMATCH',
+      `产品投放位展示形态不匹配：预期 ${expectedDisplayMode}，实际 ${displayMode}`
+    )
+  }
+
+  const configId = String(config.configId === undefined ? '' : config.configId).trim()
+  const configAdId = String(config.adId === undefined ? '' : config.adId).trim()
+  const expectedAdId = String(expected.adId === undefined ? '' : expected.adId).trim()
+  const placementId = toSafeString(config.placementId)
+  const productCode = toSafeString(config.productCode)
+  const sceneCode = toSafeString(config.sceneCode)
+
+  if (
+    expectedAdId &&
+    configAdId !== expectedAdId &&
+    configId !== expectedAdId
+  ) {
+    return buildInvalidResult(
+      'PRODUCT_CONFIG_ID_MISMATCH',
+      '广告 ID 与接口返回的产品 UI 配置不匹配'
+    )
+  }
+
+  const systemType = toSafeString(config.systemType).toLowerCase()
+
+  if (!['lyy', 'third_party'].includes(systemType)) {
+    return buildInvalidResult(
+      'PRODUCT_PLACEMENT_INVALID_SYSTEM_TYPE',
+      `不支持的产品系统类型：${systemType || 'empty'}`
+    )
+  }
+
+  const creative = normalizeCreative(config.creative, displayMode)
+
+  if (!hasRenderableCreative(creative)) {
+    return buildInvalidResult(
+      'PRODUCT_PLACEMENT_EMPTY_CREATIVE',
+      '产品投放位没有可展示的素材或文案'
+    )
+  }
+
+  const action = normalizeAction(config.action)
+  const normalizedConfig = {
+    schemaVersion: Number(config.schemaVersion) || 1,
+    adId: configAdId || expectedAdId || configId,
+    configId: config.configId === undefined ? '' : config.configId,
+    placementId,
+    productCode,
+    systemType,
+    providerCode: toSafeString(config.providerCode),
+    channelCode: toSafeString(config.channelCode),
+    sceneCode,
+    displayMode,
+    creative,
+    panelStyle: normalizePanelStyle(config.panelStyle),
+    action,
+    actionable: action.type !== 'none'
+  }
+
+  return {
+    valid: true,
+    config: normalizedConfig,
+    errCode: '',
+    errMsg: '',
+    silent: false
+  }
+}
+
+module.exports = {
+  SUPPORTED_DISPLAY_MODES,
+  normalizeActionParams,
+  normalizeProductPlacementConfig
+}