1.1.0-1 • Published 4 years ago
ehome-merchant v1.1.0-1
ehome-merchant
发布 react组件 的脚手架
相关博客(详细说明):使用npm发布一个react组件
开发组件
安装依赖:
npm i npm start
打包组件
npm run build
组件功能测试
项目根目录下执行:
npm link cd src/example npm link ehome-merchant # 此处为package.json中定义的name字段
修改example/src/app.js 文件内容(将原本导入开发组件替换成打包后的组件):
// import ReactDemo from '../../src' // 组件源代码 import ReactDemo from 'ehome-merchant'; // npm link 测试打包组件的功能 // import 'ehome-merchant/lib/main.min.css'; // npm link 测试打包组件的功能
根目录执行:
npm start
组件发布到npm
查看当前使用的源地址:
npm config list
如果不是官方源地址,通过下面的命令切换 npm 源:
npm config set registry http://registry.npmjs.org
组件发布到 npm:
npm run lib npm publish
取消发布(最好不要,别人可能下载了你的包):
npm unpublish ehome-merchant --force # 此处为package.json中定义的name字段
npm 包的使用与下载
下载:
npm i ehome-merchant # 假设你的包名字叫ehome-merchant
使用方法:
# 组件中引入 import FinancialDetailsModule from 'ehome-merchant'; <FinancialDetailsModule {...this.props} $$context={$$context} callBack={() => console.log(需要组件回调处理的函数)} /> $$context 组件需要的参数,例如: $$context: { merchantId // 商户id communityId namespaceId organizationId poolId // 积分池id 老接口 memberType // 对应接口的 platformFlag 字段; 注册时需要按模块性质给对应的参数 1-个人 2-企业 tag1 (communityId) // 注册时要用 paymentPayeeType // 角色 主要是支付相关模块已经注册时要用到的字段 老的接口 paymentPayeeId // 用户id 主要是支付相关模块要用到的字段 老的接口 } // paymentPayeeType paymentPayeeId memberType poolId 这些字段需要业务提供,老的实现是分开两个个接口获取的,需要业务后端统一成一个接口返回
各个业务模块
// 模块名 + Module
例如 注册步骤 register-application --> RegisterApplicationModule
引入注册步骤模块如: import RegisterApplicationModule from 'ehome-merchant';
以下是所有模块名
[{
name: '商户列表',
dataType: 'business-list',
}, {
name: '商户设置',
dataType: 'business-setting',
}, {
name: '活动管理',
dataType: 'activity-config'
}, {
name: '活动促销',
dataType: 'activity-management'
}, {
name: '卡券发放',
dataType: 'cardcoupon-grant'
}, {
name: '卡券管理',
dataType: 'cardcoupon-management'
}, {
name: '卡券记录',
dataType: 'cardcoupon-records'
}, {
name: '商户主页',
dataType: 'fund-management'
}, {
name: '财务明细',
dataType: 'financial-details'
}, {
name: '积分账户',
dataType: 'integral-account'
}, {
name: '基础设置',
dataType: 'integral-basis'
}, {
name: '积分赠送',
dataType: 'integral-give'
}, {
name: '积分概况',
dataType: 'integral-overview'
}, {
name: '积分记录',
dataType: 'integral-record'
}, {
name: '积分银行积分记录',
dataType: 'integral-records'
}, {
name: '积分规则',
dataType: 'integral-rule'
}, {
name: '发票管理',
dataType: 'invoice-management'
}, {
name: '会员规则',
dataType: 'member-config'
}, {
name: '会员列表',
dataType: 'member-list'
}, {
name: '订单管理',
dataType: 'order-management'
}, {
name: '商户收款码',
dataType: 'payment-code'
}, {
name: '凭证管理',
dataType: 'payment-doc'
}, {
name: '交易明细',
dataType: 'trade-inquiries'
}, {
name: '商户信息',
dataType: 'business-info'
}, {
name: '注册步骤',
dataType: 'register-application'
}, {
name: '去注册',
dataType: 'register-home'
}]
暂不支持例如 卡券促销这种多个tabs的页面,需要业务自己引入,主要原因是:避免业务组件太庞大
// 卡券促销
import { CardcouponManagementModule, CardcouponGrantModule, CardcouponRecordsModule } from 'ehome-merchant';
const params = {
...this.props,
$$context
};
<div className={prefixCls}>
<FunctionTabs routes={routes} />
<Route path={`${match.url}/cardcoupon-management`} component={CardcouponManagementModule} {...params} />
<Route path={`${match.url}/cardcoupon-grant`} component={CardcouponGrantModule} {...params} />
<Route path={`${match.url}/cardcoupon-records`} component={CardcouponRecordsModule} {...params} />
</div>
回调函数 callBack
import RegisterApplicationModule from 'ehome-merchant';
<RegisterApplicationModule callBack={() => console.log(需要组件回调处理的函数)} />
1.1.0-1
4 years ago
1.0.44
4 years ago
1.0.39
4 years ago
1.0.38
4 years ago
1.0.29
4 years ago
1.0.25
4 years ago
1.0.21
4 years ago
1.0.24
4 years ago
1.0.19
4 years ago
1.0.20
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.0
4 years ago