b2b-front-pc

b2b-wechat

准备开始

#使用yarn作为npm的管理工具
npm install -g yarn
#clone项目到本地
git clone https://git.coding.net/wmzhangjin/b2b-wechat.git

cd b2b-wechat
#安装依赖
yarn

#本地测试
yarn start

# build dll
yarn run build:dll

# build 项目
yarn run build

# 上线
yarn run build:all

技术栈

typescript + preact + plume2 + react-router-dom

统一使用 prettier 作为项目的格式化工具，it's amazing.

自动化构建

在原来的启动命令后面加入类型参数，仅支持 dev,test1,test2 和 online 四个类型例如：yarn star:dev 连接本地后台 yarn start:test1 连接 118 后台 yarn start:test2 连接 120 后台 yarn start:online 连接线上后台部署生产环境同理例如:yarn build:all:test1 部署 118 环境 yarn build:all:test2 部署 120 环境 yarn build:all:online 部署线上环境原来的 yarn start 和 build:all 依然能够正常运行，但是不会自动覆盖 config 文件

注：运行命令后面跟着参数 拼接参数的格式也是固定的
yarn add:sentry {\
url:xxx.xxx.xxx,\
org:xxxx,\
project:xxx,\
token:xxx,\
}

# 增加config.js文件
yarn build

注：运行命令后面跟着参数 拼接参数的格式也是固定的  (IOSDSN  ANDROIDDSN  ENV 如果有需要开启sentry监控必填）
yarn add:config {\
BFF_HOST:xxx.xxx.xxx,\
RENDER_HOST:xxx.xxx.xxx,\
OSS_HOST:xxx.xxx.xxx,\
PV_UV_HOST:xxx.xxx.xxx,\
Dsn:xxx,\
ENV:xxx,\
}

全局公共组件

1、noop

引入

import { noop } from 'wmkit';

使用

static defaultProps = {
   onClick: noop,
};

static relaxProps = {
   onShow: noop,
};

2、AsyncRouter

异步路由

引入

import { DataGrid } from 'wmkit';

使用

<AsyncRouter
    subRoutes={route.routes}
    load={route.asyncComponent}
    handlePathMatched={handlePathMatched}
/>

API

属性	说明	类型	默认值
load	异步加载组件	ReactNode	-
handlePathMatched	获取当前路由	function(path)	-
subRoutes	子路由	Array	-

注：其它属性见 https://reactrouter.com/web/api/Route

3、routeWithSubRoutes

路由相关

引入

import { routeWithSubRoutes } from 'wmkit';

使用

<Switch>
    { routeWithSubRoutes(homeRoutes, noop) }
</Switch>

API

属性	说明	类型	默认值
routes	路由	Array	-
handlePathMatched	获取当前路由	function(path)	-

4、history

创建HashHistroy

引入

import { history } from 'wmkit';

使用

history.push('/popmodal-manage-add');
history.replace('/popmodal-manage-add');
history.goBack();
history.listen((_history) => {});

5、Fetch

封装业务fetch

引入

import { Fetch } from 'wmkit';

使用

Fetch('/goods/allGoodsBrands', {
    method: 'GET'
});

Fetch('/commodity-scoringalg-orithm/list', {
    method: 'POST',
    body: JSON.stringify(params)
});

Fetch('/commodity-scoringalg-orithm/modify', {
    method: 'PUT',
    body: JSON.stringify(params)
});

API

属性	说明	类型	默认值
input	接口url	String	-
init	初始化http header信息等	Object	-

6、TimerButton

倒计时按钮

引入

import { TimerButton } from 'wmkit';

使用

<TimerButton disabled={true} />

<TimerButton
    style={{
      height: 30,
      minWidth: 90,
      padding: '0 5px',
      fontSize: 12,
      lineHeight: '30px',
      textAlign: 'center',
      background: '#ffd2dc',
      borderColor: '#ffd2dc',
      color: '#ff1f4e',
      borderRadius: 0,
      float: 'right'
    }}
    sendText="发送验证码"
    resetWhenError={true}
    shouldStartCountDown={() => this._sendCode()}
    onPress={() => sendCode()}
/>

API

属性	说明	类型	默认值
sendText	发送按钮文本	String 或 ReactNode	获取短信验证码
disabled	是否禁用发送按钮	Boolean	false
time	两次获取验证码间隔时间	String 或 Number	60
style	自定义按钮样式	Object	{}
shouldStartCountDown	倒计时前校验方法，返回false时不执行点击方法	Boolean	false
onPress	点击按钮时，调用onPress	function	noop
resetWhenError	click方法如果是结果是Promise，catch异常情况是否重置Timer	Boolean	true
reSendText	重新发送按钮文本	String 或 ReactNode	重新发送

7、WMUpload

图片上传组件，在Upload基础上增加了预览默认弹窗显示功能

引入

import { WMUpload } from 'wmkit';

使用

<WMUpload
    style={styles.box}
    action={Const.HOST + '/uploadImage'}
    listType="picture-card"
    name="uploadFile"
    onChange={(fileEntity) =>
        this.onImgChange('icon', fileEntity)
    }
    fileList={state.get('icon').toJS()}
    beforeUpload={(file) => this._beforeUpload(file, 5)}
>
    {state.get('icon').size >= 1 ? null : (
        <div>
            <PlusOutlined style={styles.plus} />
        </div>
    )}
</WMUpload>

API

属性	说明	类型	默认值
children	组件的子节点	ReactNode	-
onChange	上传文件改变时的状态	function	-
beforeUpload	上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）；也可以返回 Upload.LIST_IGNORE，此时列表中将不展示此文件。注意：IE9 不支持该方法	(file, fileList) => boolean 或 Promise	Upload.LIST_IGNORE

注：其它属性见 https://ant.design/components/upload-cn/;

8、Tips

提示

引入

import { Tips } from 'wmkit';

使用

<Tips title="请填写0-100间的数字，精确到小数点后两位" />

API

属性	说明	类型	默认值
title	提示文字	String	-

9、QMMethod

引入

import { QMMethod } from 'wmkit';

使用

<FormItem
    {...formItemLayout}
    label="菜单名称"
    hasFeedback
    name="menuName"
    initialValue={objInfo.title}
    rules={[
    { required: true, message: '请输入菜单名称' },
    {
      validator: (rule, value, callback) => {
        QMMethod.validatorMinAndMax(
          rule,
          value,
          callback,
          '菜单名称',
          1,
          10
        );
      }
    }
    ]}
>
    <Input />
</FormItem>

API

属性	说明	类型	默认值
distinct	两个对象集合合并去重的方法，list1和list2需要为immutable对象,param为属性字符串	function(list1, list2, param)	-
validatorTrimMinAndMax	同时验证去前后空格之后的输入值，验证不为空 / 验证最小长度 / 验证最大长度	function(_rule, value, callback, fieldText, minNum, maxNum)	-
validatorMinAndMax	可以为空时验证输入不为空格，验证最小长度 / 验证最大长度	function(_rule, value, callback, fieldText, minNum, maxNum)	-
validatorRatioLength	可以为空时验证输入不为空格，验证最小长度 / 验证最大长度	function(_rule, value, callback, _fieldText)	-
validatorDeliveryCode	-	function(_rule, value, callback, fieldText)	-
encryptionPhone	加密手机号码	function(phone)	-
validatorAccountDays	校验结算日期	function(_rule, value, callback)	-
validatorEmoji	验证是否有非法字符表情	function(_rule, value, callback, fieldText)	-
validatorNoZero	验证是是正整数	function(_rule, value, callback)	-
getCookie	-	function(c_name)	-
delayFunc	防抖函数 - 延迟执行版	function(func, wait)	-
onceFunc	防抖函数 - 立即执行版	function(func, wait)	-
trimValueDeep	json对象中所有字段trim前后空格	function(value)	-
testPass	校验密码，6-16个字母或数字	function(pass)	-
testTel	手机号公共校验方法	function(tel)	-
fetchAllVAS	查询所有增值服务	function	-
fetchVASStatus	查询指定服务的状态	function(serviceName)	-

10、FindArea

省市区相关处理方法

引入

import { FindArea } from 'wmkit';

使用

FindArea.initArea();
FindArea.findProvinceCity();
FindArea.findProviceName();
FindArea.findCityAndParentId();
FindArea.fmtAddress();
FindArea.addressInfo();

API

属性	说明	类型	默认值
initArea	初始化存放省市区域	function	-
findProvinceCity	获取省份与地市的层级结构数据	function(ids)	-
findProviceName	查询省	function	-
findCityAndParentId	-	function	-
fmtAddress	省市区字符串返回 `江苏省/南京市/雨花台区`	function	-
addressInfo	省市区字符串返回 `江苏省/南京市/雨花台区`	function	-

11、AreaSelect

选择地区 / 所在地区 / 地址组件 / 省市区

引入

import { AreaSelect } from 'wmkit';

使用

<AreaSelect
    value={[
      省id,
      市id,
      区id
    ]}
    label="所在地区"
    placeholder='请选择地区'
    hasNoArea={ false }
    hasNoStreet={ false }
    getPopupContainer={}
    onChange={}
/>

API

属性	说明	类型	默认值
value	省id、市id、区id	Array	-
placeholder	输入框占位文本	String	请选择
label	标签	String	-
hasNoArea	不展示区	Boolean	false
hasNoStreet	不展示街道	Boolean	false

注：其它属性见 https://ant.design/components/cascader-cn/

12、WMIcon

图标

引入

import { WMIcon } from 'wmkit';

使用

<WMIcon type="map" />

<WMIcon type="list" />

API

属性	说明	类型	默认值
style	自定义.qmIcon样式	Object	-
type	图标类型	String	-
className	样式类	String	-

13、QMFloat

引入

import { QMFloat } from 'wmkit';

使用

(text) => <span>{`￥${QMFloat.addZero(text)}`}</span>;

<div>{'￥' + QMFloat.addZero(goods.get('supplyPrice'))}</div>

API

属性	说明	类型	默认值
decimalLength	获取小数点后数字长度	function(num)	-
suffixInteger	小数点后补齐0作为整数	function(num, length)	-
accAdd	加法	function(num1, num2)	-
accSubtr	减法	function(num1, num2)	-
accMul	乘法	function(num1, num2)	-
accDiv	除法	function(num1, num2)	-
addZero	为整数添加两位小数，四舍五入	function(num)	-

14、MenuLeft

左侧菜单

引入

import { MenuLeft } from 'wmkit';

使用

<MenuLeft topRoute="/user-store" />

API

属性	说明	类型	默认值
topRoute	当前路由	String	-

15、Logistics

物流信息

引入

import { Logistics } from 'wmkit';

使用

<Logistics
    companyInfo={logistic}
    deliveryTime={deliverTime}
/>

API

属性	说明	类型	默认值
companyInfo	物流相关信息（如：物流公司、物流单号）	Map	-
deliveryTime	发货时间	String	-

16、WmHeadImg

头部图片

引入

import { WmHeadImg } from 'wmkit';

使用

<WmHeadImg url={headImgUrl} />

API

属性	说明	类型	默认值
url	图片路径	String	-

17、WMLoginModal

登录弹窗

引入

import { WMLoginModal } from 'wmkit';

使用

<WMLoginModal {...props} />

18、WMVideo

web视频播放器

引入

import { WMVideo } from 'wmkit';

使用

<WMVideo 
    autoplay: true,
    controls: true,
    sources: [
        {
            src: videoUrl,
            type: 'video/mp4'
        }
    ]
/>

API

属性	说明	类型	默认值
autoplay	是否自动播放	Boolean	false
controls	控制	Boolean	false
sources	-	Array	-

注：其它属性见 https://docs.videojs.com/index.html;

19、WMPasswordInput

支付密码输入框

引入

import { WMPasswordInput } from 'wmkit';

使用

<WMPasswordInput
    getValue={(val) => {
        changePayPwd(val);
    }}
    length={6}
/>

API

属性	说明	类型	默认值
getValue	获取最新输入值	function(val)	-
length	密码长度	Number	-

20、FindBusiness

公司相关处理方法

引入

import { FindBusiness } from 'wmkit';

使用

FindBusiness.getBusinessNatures();
FindBusiness.findBusinessNatureName(businessNatureType);
FindBusiness.getBusinessIndustries();
FindBusiness.findBusinessIndustryName(businessIndustryType);
FindBusiness.getBusinessEmployeeNums();
FindBusiness.findBusinessEmployeeNumValue(businessEmployeeNum);

API

属性	说明	类型	默认值
getBusinessNatures	获取公司性质	function	-
findBusinessNatureName	获取公司性质名称	function(businessNatureType)	-
getBusinessIndustries	获取公司行业	function	-
findBusinessIndustryName	获取公司行业名称	function(businessIndustryType)	-
getBusinessEmployeeNums	获取公司人数	function	-
findBusinessEmployeeNumValue	获取公司人数描述	function(businessEmployeeNum)	-

21、CountDown

倒计时

引入

import { CountDown } from 'wmkit';

使用

<CountDown
  allowFontScaling={false}
  numberOfLines={1}
  parame={coupon}
  timeOffset={this._getTimeoffset(coupon)}
/>

API

属性	说明	类型	默认值
timeOffset	默认倒计时时间，正整数，单位：秒	Number	0
visible	是否可见	Boolean	true
visibleSecond	是否展示秒数	Boolean	false
groupFlag	拼团秒杀倒计时样式专用	Boolean	false
prelistFlag	prelistFlag: true, 如果是预约活动则组件className为timeprelist	Boolean	false
timeStyle	自定义.time样式	Object	{}
theme	主题	String	'default'
showTimeDays	是否展示天，默认否	Boolean	false
endHandle	倒计时结束的处理	function(parame)	-
parame	参数	Object	{}
overHandler	结束操作	function	-

b2b-front-pc

b2b-wechat

准备开始

技术栈

统一使用 prettier 作为项目的格式化工具，it's amazing.

自动化构建

全局公共组件

1、noop

2、AsyncRouter

3、routeWithSubRoutes

4、history

5、Fetch

6、TimerButton

7、WMUpload

8、Tips

9、QMMethod

10、FindArea

11、AreaSelect

12、WMIcon

13、QMFloat

14、MenuLeft

15、Logistics

16、WmHeadImg

17、WMLoginModal

18、WMVideo

19、WMPasswordInput

20、FindBusiness

21、CountDown

Readme

Keywords

Package Sidebar

Install

Repository

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

b2b-front-pc

b2b-wechat

准备开始

技术栈

统一使用 prettier 作为项目的格式化工具，it's amazing.

自动化构建

全局公共组件

1、noop

2、AsyncRouter

3、routeWithSubRoutes

4、history

5、Fetch

6、TimerButton

7、WMUpload

8、Tips

9、QMMethod

10、FindArea

11、AreaSelect

12、WMIcon

13、QMFloat

14、MenuLeft

15、Logistics

16、WmHeadImg

17、WMLoginModal

18、WMVideo

19、WMPasswordInput

20、FindBusiness

21、CountDown

Readme

Keywords

Package Sidebar

Install

Repository

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads