b2b-front-pc

v1.0.0

Published

6 months ago

## 准备开始

Downloads

0High
0Medium
0Low

wanmi

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

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 | - |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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