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

package/src/product-placement/index.js

@@ -0,0 +1,590 @@
+/**
+ * @Description 产品投放位统一分发组件
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-15 11:04:57
+ */
+const { normalizeProductPlacementConfig } = require('./utils')
+const { executeProductPlacementAction } = require('./action-executor')
+
+Component({
+  properties: {
+    /** 标准化产品投放位配置 */
+    config: { type: Object, value: null },
+    /** 产品 UI 配置主键，也就是用于查询配置的广告 ID */
+    adId: { type: String, value: '' },
+    /** 调用方预期的展示形态，仅用于约束校验，不覆盖配置中的 displayMode */
+    type: { type: String, value: '' },
+    /** 是否允许展示当前投放位 */
+    show: { type: Boolean, value: true },
+    /** 业务动作是否正在执行 */
+    actionLoading: { type: Boolean, value: false },
+    /** 是否由组件自动执行标准动作 */
+    autoAction: { type: Boolean, value: true },
+    /** 动作执行所需的宿主运行时上下文 */
+    actionContext: { type: Object, value: null },
+    /** 弹层展示层级 */
+    zIndex: { type: Number, value: 999 },
+    /** 全局 Nova SDK 挂载字段名 */
+    sdkKey: { type: String, value: 'biNova' },
+    /** 未传本地 config 时是否按广告 ID 自动获取配置 */
+    autoLoad: { type: Boolean, value: true }
+  },
+  data: {
+    resolvedConfig: null,
+    resolvedDisplayMode: '',
+    resolvedCreative: null,
+    resolvedPanelStyle: null,
+    resolvedVisible: false,
+    resolvedActionable: false,
+    resolvedActionLoading: false,
+    actionExecuting: false,
+    remoteLoading: false,
+    remoteLoaded: false,
+    remoteConfig: null
+  },
+  lifetimes: {
+    created() {
+      /** 请求版本号必须在属性 observer 触发前初始化，避免 attached 阶段重置正在执行的请求 */
+      this.requestToken = 0
+      /** 动作版本号用于忽略配置切换或组件销毁后的异步回调 */
+      this.actionToken = 0
+    },
+    attached() {
+      this.displayCycle = 0
+      this.localDismissed = false
+      this.lastShow = Boolean(this.properties.show)
+      this.syncActionLoading()
+      this.syncConfig()
+      this.refreshRemoteConfig('attached')
+    },
+    detached() {
+      this.configIdentity = ''
+      this.loadedCycleKey = ''
+      this.exposedCycleKey = ''
+      this.requestToken = (this.requestToken || 0) + 1
+      this.actionToken = (this.actionToken || 0) + 1
+    }
+  },
+  observers: {
+    'config, adId, type, sdkKey, autoLoad'() {
+      this.syncConfig()
+      this.refreshRemoteConfig('observer')
+    },
+    show(nextShow) {
+      const visible = Boolean(nextShow)
+
+      if (visible && this.lastShow === false) {
+        this.displayCycle = (this.displayCycle || 0) + 1
+        this.localDismissed = false
+        this.loadedCycleKey = ''
+        this.exposedCycleKey = ''
+      }
+
+      this.lastShow = visible
+      this.syncVisible()
+    },
+    actionLoading() {
+      this.syncActionLoading()
+    }
+  },
+  methods: {
+    /**
+     * 标准化并同步产品投放位配置
+     * @returns {void}
+     */
+    syncConfig() {
+      const result = normalizeProductPlacementConfig(this.getEffectiveConfig(), {
+        adId: this.properties.adId,
+        type: this.properties.type
+      })
+
+      if (!result.valid) {
+        this.actionToken = (this.actionToken || 0) + 1
+        this.configIdentity = ''
+        this.localDismissed = false
+        this.setActionExecuting(false)
+        this.setData({
+          resolvedConfig: null,
+          resolvedDisplayMode: '',
+          resolvedCreative: null,
+          resolvedPanelStyle: null,
+          resolvedVisible: false,
+          resolvedActionable: false
+        })
+
+        if (!result.silent) {
+          this.triggerConfigErrorOnce(result)
+        }
+
+        return
+      }
+
+      const normalizedConfig = result.config
+      const nextIdentity = this.createConfigIdentity(normalizedConfig)
+      const configChanged = nextIdentity !== this.configIdentity
+
+      if (configChanged) {
+        this.actionToken = (this.actionToken || 0) + 1
+        this.configIdentity = nextIdentity
+        this.displayCycle = (this.displayCycle || 0) + 1
+        this.localDismissed = false
+        this.loadedCycleKey = ''
+        this.exposedCycleKey = ''
+        this.lastErrorKey = ''
+        this.setActionExecuting(false)
+      }
+
+      this.setData({
+        resolvedConfig: normalizedConfig,
+        resolvedDisplayMode: normalizedConfig.displayMode,
+        resolvedCreative: normalizedConfig.creative,
+        resolvedPanelStyle: normalizedConfig.panelStyle,
+        resolvedVisible: Boolean(this.properties.show && !this.localDismissed),
+        resolvedActionable: normalizedConfig.actionable
+      }, () => {
+        if (configChanged) {
+          this.triggerEvent('configload', this.createEventDetail({
+            config: normalizedConfig
+          }))
+        }
+      })
+    },
+
+    /**
+     * 判断调用方是否显式传入了本地配置
+     * @returns {boolean}
+     */
+    hasLocalConfig() {
+      const config = this.properties.config
+      return Boolean(config && typeof config === 'object' && Object.keys(config).length > 0)
+    },
+
+    /**
+     * 获取当前优先使用的配置，本地配置优先于远程配置
+     * @returns {Record<string, any> | null}
+     */
+    getEffectiveConfig() {
+      return this.hasLocalConfig() ? this.properties.config : this.data.remoteConfig
+    },
+
+    /**
+     * 判断是否需要自动加载远程配置
+     * @returns {boolean}
+     */
+    shouldUseRemoteConfig() {
+      return Boolean(
+        this.properties.autoLoad &&
+        String(this.properties.adId || '').trim() &&
+        !this.hasLocalConfig()
+      )
+    },
+
+    /**
+     * 获取全局 Nova SDK 实例
+     * @returns {Record<string, any> | null}
+     */
+    getSdkInstance() {
+      const app = typeof getApp === 'function' ? getApp() : null
+
+      if (!app) return null
+
+      const sdkKey = this.properties.sdkKey || 'biNova'
+      return app[sdkKey] || app.globalData && app.globalData[sdkKey] || null
+    },
+
+    /**
+     * 构建远程配置请求参数
+     * @returns {Record<string, any>}
+     */
+    buildRemoteRequestOptions() {
+      const requestOptions = {
+        id: String(this.properties.adId || '').trim()
+      }
+
+      return requestOptions
+    },
+
+    /**
+     * 构建远程请求去重键
+     * @param {Record<string, any>} requestOptions 请求参数
+     * @returns {string}
+     */
+    createRemoteRequestKey(requestOptions) {
+      return JSON.stringify(requestOptions)
+    },
+
+    /**
+     * 触发远程配置错误事件
+     * @param {Record<string, any>} detail 错误详情
+     * @returns {void}
+     */
+    triggerRemoteError(detail) {
+      const eventDetail = this.createEventDetail(detail)
+      this.triggerEvent('configerror', eventDetail)
+      this.triggerEvent('error', eventDetail)
+    },
+
+    /**
+     * 触发无可展示配置的终态关闭事件
+     * @param {string} requestKey 请求标识
+     * @returns {void}
+     */
+    triggerNoConfigClose(requestKey) {
+      if (!this.properties.show || this.lastNoConfigKey === requestKey) return
+
+      this.lastNoConfigKey = requestKey
+      this.triggerEvent('close', this.createEventDetail({ reason: 'noConfig' }))
+    },
+
+    /**
+     * 按广告 ID 自动获取产品 UI 配置
+     * @param {string} reason 请求原因
+     * @param {boolean} [force] 是否强制刷新组件侧请求状态
+     * @returns {Promise<void>}
+     */
+    async refreshRemoteConfig(reason, force) {
+      if (!this.shouldUseRemoteConfig()) return
+
+      const requestOptions = this.buildRemoteRequestOptions()
+      const requestKey = this.createRemoteRequestKey(requestOptions)
+
+      if (
+        !force &&
+        this.lastRemoteRequestKey === requestKey &&
+        (this.data.remoteLoading || this.data.remoteLoaded)
+      ) {
+        return
+      }
+
+      const sdk = this.getSdkInstance()
+
+      if (!sdk || !sdk.ads || typeof sdk.ads.getProductConfig !== 'function') {
+        this.lastRemoteRequestKey = requestKey
+        this.setData({
+          remoteLoading: false,
+          remoteLoaded: true,
+          remoteConfig: null
+        })
+        this.syncConfig()
+        this.triggerRemoteError({
+          errCode: 'PRODUCT_PLACEMENT_SDK_NOT_READY',
+          errMsg: '未获取到产品 UI 配置服务，请升级并初始化 @bi-nova/services',
+          errorType: 'REMOTE_CONFIG_ERROR'
+        })
+        return
+      }
+
+      const requestToken = (this.requestToken || 0) + 1
+      this.requestToken = requestToken
+      this.lastRemoteRequestKey = requestKey
+      this.lastNoConfigKey = ''
+      this.setData({
+        remoteLoading: true,
+        remoteLoaded: false,
+        remoteConfig: null
+      })
+      this.syncConfig()
+
+      try {
+        const result = await sdk.ads.getProductConfig(requestOptions)
+        if (requestToken !== this.requestToken) return
+
+        if (!result || result.code !== 0 || !result.data) {
+          this.setData({
+            remoteLoading: false,
+            remoteLoaded: true,
+            remoteConfig: null
+          })
+          this.syncConfig()
+          this.triggerRemoteError({
+            errCode: 'PRODUCT_PLACEMENT_REMOTE_CONFIG_FAIL',
+            errMsg: result && result.message || '获取产品 UI 配置失败',
+            errorType: 'REMOTE_CONFIG_ERROR',
+            rawResult: result || null
+          })
+          return
+        }
+
+        const remoteConfig = result.data.show && result.data.config
+          ? result.data.config
+          : null
+
+        this.setData({
+          remoteLoading: false,
+          remoteLoaded: true,
+          remoteConfig
+        })
+        this.syncConfig()
+
+        if (!remoteConfig) {
+          this.triggerNoConfigClose(requestKey)
+        }
+      } catch (error) {
+        if (requestToken !== this.requestToken) return
+
+        this.setData({
+          remoteLoading: false,
+          remoteLoaded: true,
+          remoteConfig: null
+        })
+        this.syncConfig()
+        this.triggerRemoteError({
+          errCode: 'PRODUCT_PLACEMENT_REMOTE_CONFIG_EXCEPTION',
+          errMsg: error && error.message || '获取产品 UI 配置异常',
+          errorType: 'REMOTE_CONFIG_ERROR',
+          error
+        })
+      }
+    },
+
+    /**
+     * 供业务页面主动刷新远程产品配置
+     * @returns {Promise<void>}
+     */
+    refresh() {
+      return this.refreshRemoteConfig('manual', true)
+    },
+
+    /**
+     * 构建配置唯一标识
+     * @param {Record<string, any>} config 标准化配置
+     * @returns {string}
+     */
+    createConfigIdentity(config) {
+      return JSON.stringify(config)
+    },
+
+    /**
+     * 获取当前展示周期标识
+     * @returns {string}
+     */
+    getDisplayCycleKey() {
+      return `${this.configIdentity || 'empty'}__${this.displayCycle || 0}`
+    },
+
+    /**
+     * 同步最终展示状态
+     * @returns {void}
+     */
+    syncVisible() {
+      this.setData({
+        resolvedVisible: Boolean(
+          this.data.resolvedConfig &&
+          this.properties.show &&
+          !this.localDismissed
+        )
+      })
+    },
+
+    /**
+     * 同步外部与组件内部动作加载状态
+     * @returns {void}
+     */
+    syncActionLoading() {
+      this.setData({
+        resolvedActionLoading: Boolean(
+          this.properties.actionLoading || this.data.actionExecuting
+        )
+      })
+    },
+
+    /**
+     * 更新组件内部动作执行状态
+     * @param {boolean} executing 是否正在执行
+     * @returns {void}
+     */
+    setActionExecuting(executing) {
+      this.setData({
+        actionExecuting: Boolean(executing),
+        resolvedActionLoading: Boolean(
+          this.properties.actionLoading || executing
+        )
+      })
+    },
+
+    /**
+     * 创建统一事件上下文
+     * @param {Record<string, any>} [extra] 附加事件数据
+     * @returns {Record<string, any>}
+     */
+    createEventDetail(extra) {
+      const config = this.data.resolvedConfig || {}
+
+      return {
+        configId: config.configId,
+        adId: config.adId || this.properties.adId,
+        placementId: config.placementId || '',
+        productCode: config.productCode || '',
+        systemType: config.systemType || '',
+        providerCode: config.providerCode || '',
+        channelCode: config.channelCode || '',
+        sceneCode: config.sceneCode || '',
+        displayMode: config.displayMode || this.data.resolvedDisplayMode,
+        ...(extra || {})
+      }
+    },
+
+    /**
+     * 避免同一配置错误因属性观察器重复触发
+     * @param {{errCode: string, errMsg: string}} errorDetail 配置错误
+     * @returns {void}
+     */
+    triggerConfigErrorOnce(errorDetail) {
+      const errorKey = `${errorDetail.errCode}_${errorDetail.errMsg}`
+
+      if (this.lastErrorKey === errorKey) return
+
+      this.lastErrorKey = errorKey
+      this.triggerEvent('error', this.createEventDetail({
+        errCode: errorDetail.errCode,
+        errMsg: errorDetail.errMsg,
+        errorType: 'CONFIG_INVALID'
+      }))
+    },
+
+    /**
+     * 处理子组件完成渲染
+     * @param {Record<string, any>} event 子组件事件
+     * @returns {void}
+     */
+    handleReady(event) {
+      const cycleKey = this.getDisplayCycleKey()
+
+      if (this.loadedCycleKey !== cycleKey) {
+        this.loadedCycleKey = cycleKey
+        this.triggerEvent('load', this.createEventDetail(event && event.detail))
+      }
+
+      if (this.exposedCycleKey !== cycleKey && this.data.resolvedVisible) {
+        this.exposedCycleKey = cycleKey
+        this.triggerEvent('exposure', this.createEventDetail())
+      }
+    },
+
+    /**
+     * 处理素材加载失败并终止当前展示周期
+     * @param {Record<string, any>} event 子组件错误事件
+     * @returns {void}
+     */
+    handleError(event) {
+      const detail = event && event.detail || {}
+
+      this.triggerEvent('error', this.createEventDetail({
+        errCode: detail.errCode || 'PRODUCT_PLACEMENT_MEDIA_LOAD_FAIL',
+        errMsg: detail.errMsg || '产品投放位素材加载失败',
+        errorType: detail.errorType || 'MEDIA_LOAD_FAIL',
+        rawErrCode: detail.rawErrCode,
+        rawErrMsg: detail.rawErrMsg
+      }))
+      this.closePlacement('mediaLoadFail')
+    },
+
+    /**
+     * 处理用户关闭事件
+     * @param {Record<string, any>} event 子组件关闭事件
+     * @returns {void}
+     */
+    handleClose(event) {
+      const reason = event && event.detail && event.detail.reason || 'closeButton'
+      this.closePlacement(reason)
+    },
+
+    /**
+     * 关闭当前投放位并上报标准事件
+     * @param {string} reason 关闭原因
+     * @returns {void}
+     */
+    closePlacement(reason) {
+      if (this.localDismissed) return
+
+      this.localDismissed = true
+      this.syncVisible()
+      this.triggerEvent('close', this.createEventDetail({ reason }))
+    },
+
+    /**
+     * 处理产品主动作并根据标准动作配置完成分发
+     * @param {Record<string, any>} event 子组件动作事件
+     * @returns {void}
+     */
+    handleAction(event) {
+      if (this.data.resolvedActionLoading || !this.data.resolvedActionable) return
+
+      const detail = event && event.detail || {}
+      const source = detail.source || 'surface'
+      const action = this.data.resolvedConfig.action
+      const actionContext = this.properties.actionContext || {}
+      const actionDetail = this.createEventDetail({ source, action })
+
+      this.triggerEvent('action', actionDetail)
+
+      if (!this.properties.autoAction) return
+
+      const actionToken = (this.actionToken || 0) + 1
+      this.actionToken = actionToken
+      this.setActionExecuting(true)
+
+      const isCurrentAction = () => actionToken === this.actionToken
+      const completeAction = () => {
+        if (!isCurrentAction()) return false
+
+        this.setActionExecuting(false)
+        return true
+      }
+
+      try {
+        executeProductPlacementAction({
+          action,
+          sdk: this.getSdkInstance(),
+          actionContext,
+          apiRequestParams: {
+            configId: this.data.resolvedConfig.configId,
+            equipmentValue: actionContext.equipmentValue,
+            userId: actionContext.userId
+          },
+          onOpenWebview: (resultDetail) => {
+            if (!isCurrentAction()) return
+
+            this.triggerEvent('openWebview', this.createEventDetail({
+              source,
+              action,
+              url: resultDetail.url
+            }))
+          },
+          onSuccess: (resultDetail) => {
+            if (!completeAction()) return
+
+            this.triggerEvent('actionsuccess', this.createEventDetail({
+              source,
+              action,
+              ...resultDetail
+            }))
+          },
+          onError: (errorDetail) => {
+            if (!completeAction()) return
+
+            this.triggerEvent('error', this.createEventDetail({
+              source,
+              action,
+              errCode: errorDetail.errCode,
+              errMsg: errorDetail.errMsg,
+              errorType: 'ACTION_EXECUTE_FAIL'
+            }))
+          }
+        })
+      } catch (error) {
+        if (!completeAction()) return
+
+        this.triggerEvent('error', this.createEventDetail({
+          source,
+          action,
+          errCode: 'PRODUCT_PLACEMENT_ACTION_EXECUTE_EXCEPTION',
+          errMsg: error && error.message || '产品投放位动作执行异常',
+          errorType: 'ACTION_EXECUTE_FAIL'
+        }))
+      }
+    }
+  }
+})

package/src/product-placement/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bi-product-banner": "./banner/index",
+    "bi-product-popup": "./popup/index",
+    "bi-product-half-screen": "./half-screen/index"
+  }
+}

package/src/product-placement/index.wxml

@@ -0,0 +1,44 @@
+<!--
+  @Description 产品投放位统一分发组件模板
+  @Author wutao
+  @Date 2026-09-08
+  @LastEditors wutao
+  @LastEditTime 2026-09-14 17:19:39
+-->
+<bi-product-banner
+  wx:if="{{resolvedVisible && resolvedDisplayMode === 'banner'}}"
+  creative="{{resolvedCreative}}"
+  panel-style="{{resolvedPanelStyle}}"
+  actionable="{{resolvedActionable}}"
+  action-loading="{{resolvedActionLoading}}"
+  bind:ready="handleReady"
+  bind:error="handleError"
+  bind:close="handleClose"
+  bind:action="handleAction"
+/>
+
+<bi-product-popup
+  wx:elif="{{resolvedVisible && resolvedDisplayMode === 'popup'}}"
+  creative="{{resolvedCreative}}"
+  panel-style="{{resolvedPanelStyle}}"
+  actionable="{{resolvedActionable}}"
+  action-loading="{{resolvedActionLoading}}"
+  z-index="{{zIndex}}"
+  bind:ready="handleReady"
+  bind:error="handleError"
+  bind:close="handleClose"
+  bind:action="handleAction"
+/>
+
+<bi-product-half-screen
+  wx:elif="{{resolvedVisible && resolvedDisplayMode === 'half_screen'}}"
+  creative="{{resolvedCreative}}"
+  panel-style="{{resolvedPanelStyle}}"
+  actionable="{{resolvedActionable}}"
+  action-loading="{{resolvedActionLoading}}"
+  z-index="{{zIndex}}"
+  bind:ready="handleReady"
+  bind:error="handleError"
+  bind:close="handleClose"
+  bind:action="handleAction"
+/>

package/src/product-placement/index.wxss

@@ -0,0 +1,11 @@
+/*
+ * @Description 产品投放位统一分发组件样式
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-11 18:18:33
+ */
+:host {
+  display: block;
+  width: 100%;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * @Description 产品投放位通用遮罩组件
+ * @Author wutao
+ * @Date 2026-09-08
+ * @LastEditors wutao
+ * @LastEditTime 2026-09-08 17:55:14
+ */
+Component({
+  options: {
+    multipleSlots: true
+  },
+  properties: {
+    show: { type: Boolean, value: true },
+    position: { type: String, value: 'center' },
+    maskClosable: { type: Boolean, value: true },
+    zIndex: { type: Number, value: 999 }
+  },
+  methods: {
+    /**
+     * 处理遮罩点击，仅在允许时通知上层关闭
+     * @returns {void}
+     */
+    handleMaskTap() {
+      if (!this.properties.maskClosable) return
+
+      this.triggerEvent('maskclose', { reason: 'mask' })
+    },
+
+    /** 阻止内容点击和触摸事件穿透至遮罩或页面 */
+    stopPropagation() {}
+  }
+})

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

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

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

@@ -0,0 +1,18 @@
+<!--
+  @Description 产品投放位通用遮罩组件模板
+  @Author wutao
+  @Date 2026-09-08
+  @LastEditors wutao
+  @LastEditTime 2026-09-08 17:55:14
+-->
+<view
+  wx:if="{{show}}"
+  class="bi-product-overlay bi-product-overlay--{{position}}"
+  style="z-index: {{zIndex}};"
+  catchtouchmove="stopPropagation"
+>
+  <view class="bi-product-overlay__mask" bindtap="handleMaskTap"></view>
+  <view class="bi-product-overlay__content" catchtap="stopPropagation">
+    <slot></slot>
+  </view>
+</view>