b2b-front-pc v1.0.0

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

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

3、routeWithSubRoutes

路由相关

引入

import { routeWithSubRoutes } from 'wmkit';

使用

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

API

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

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

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

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

8、Tips

提示

引入

import { Tips } from 'wmkit';

使用

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

API

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

11、AreaSelect

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

引入

import { AreaSelect } from 'wmkit';

使用

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

API

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

12、WMIcon

图标

引入

import { WMIcon } from 'wmkit';

使用

<WMIcon type="map" />

<WMIcon type="list" />

API

13、QMFloat

引入

import { QMFloat } from 'wmkit';

使用

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

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

API

14、MenuLeft

左侧菜单

引入

import { MenuLeft } from 'wmkit';

使用

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

API

15、Logistics

物流信息

引入

import { Logistics } from 'wmkit';

使用

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

API

16、WmHeadImg

头部图片

引入

import { WmHeadImg } from 'wmkit';

使用

<WmHeadImg url={headImgUrl} />

API

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

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

19、WMPasswordInput

支付密码输入框

引入

import { WMPasswordInput } from 'wmkit';

使用

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

API

20、FindBusiness

公司相关处理方法

引入

import { FindBusiness } from 'wmkit';

使用

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

API

21、CountDown

倒计时

引入

import { CountDown } from 'wmkit';

使用

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

API