ding-open-org-trial-entry

为了避免多个isv商家重复开发开通组织的入口，并且可以维持UI的一致性，这里提供的一个开通组织的插件。

安装

浏览器

<script src="ding-open-org-trial-entry.umd.js"></script>

npm

npm i ding-open-org-trial-entry --save

参数

h5

• skuQuery 跳转sku商品规格页参数，默认会取 location.search 的参数（即 xxx.html?a=1&b=2 skuQuery 为 { a: 1, b: 2 }）。 goodsCode 商品code是毕传参数。
• slice meta=viewport标签scale的比例。组件的默认样式会根据slice放大缩小。默认值为 1。
• openWrapStyle 开通组织试用的容器样式。
• openTextStyle 开通组织试用的提示文案样式。
• openButtonStyle 开通组织试用的按钮样式。
• insertElement 开通组织试用的容器挂载的节点。默认为 body 节点。

钉钉小程序

• openWrapClass 开通组织试用的容器class。
• openTextClass 开通组织试用的提示文案class。
• openButtonClass 开通组织试用的按钮class。
• skuQuery 跳转商品规格页参数。

H5示例

直接调用

import dingOpenOrgTryEntry from 'ding-open-org-trial-entry';
 
dingOpenOrgTryEntry.init();

自定义参数

import dingOpenOrgTryEntry from 'ding-open-org-trial-entry';
 
dingOpenOrgTryEntry.config({
    insertElement: document.querySelector('#customizeElement'),
}).init();

浏览器引入

if (window.__DingOpenOrgTryEntry) {
    window.__DingOpenOrgTryEntry.init();
}

小程序示例

钉钉小程序依赖 dingtalk-jsapi。请确保下载了这个依赖包，并确保在入口文件引入 dingtalk-jsapi/entry/mobile

{
    "usingComponents": {
        "ding-open-org-trial-entry": "ding-open-org-trial-entry/ding/index"
    }
}

import 'dingtalk-jsapi/entry/mobile';

<ding-open-org-trial-entry skuQuery="{{ goodsCode: 'xxx', corpId: 'xxx' }}"/>

注意事项

1. 开通组织试用的容器，样式使用了固定定位、默认高度为 64px。为了避免视图内容展示，请预留好足够的空间。也可以通过自定义 openWrapStyle 覆盖默认样式。

2. 开通组织试用文案尽量避免覆盖修改，各个商户文案保持统一。

3. 开通组织试用的容器高度为固定值64px，如果在css中预留空间时被转换为了rem或vw等。请配置相应的转化工具的class白名单。例如 postcss-px-to-viewport。

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            selectorBlackList: ['.ding-open-reserved-space'],
        }
    }
}

.ding-open-reserved-space {
    margin-top: 64px;
}