1.0.0 • Published 1 year ago

b2b-front-pc v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

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接口urlString-
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是否禁用发送按钮Booleanfalse
time两次获取验证码间隔时间String 或 Number60
style自定义按钮样式Object{}
shouldStartCountDown倒计时前校验方法,返回false时不执行点击方法Booleanfalse
onPress点击按钮时,调用onPressfunctionnoop
resetWhenErrorclick方法如果是结果是Promise,catch异常情况是否重置TimerBooleantrue
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 或 PromiseUpload.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)-
trimValueDeepjson对象中所有字段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、区idArray-
placeholder输入框占位文本String请选择
label标签String-
hasNoArea不展示区Booleanfalse
hasNoStreet不展示街道Booleanfalse

注:其它属性见 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是否自动播放Booleanfalse
controls控制Booleanfalse
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默认倒计时时间,正整数,单位:秒Number0
visible是否可见Booleantrue
visibleSecond是否展示秒数Booleanfalse
groupFlag拼团秒杀倒计时样式专用Booleanfalse
prelistFlagprelistFlag: true, 如果是预约活动则组件className为timeprelistBooleanfalse
timeStyle自定义.time样式Object{}
theme主题String'default'
showTimeDays是否展示天,默认否Booleanfalse
endHandle倒计时结束的处理function(parame)-
parame参数Object{}
overHandler结束操作function-