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(需要组件回调处理的函数)} />