diff --git a/.eslintrc b/.eslintrc index ec9427d..430d6ac 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,5 @@ { - "extends": ["taro/react"], + "extends": ["taro/react","plugin:react-hooks/recommended"], "rules": { "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off" diff --git a/README.md b/README.md new file mode 100644 index 0000000..7f863a5 --- /dev/null +++ b/README.md @@ -0,0 +1,168 @@ +# 阿里图标库 iconfont 使用 Symbol 我们使用了 taro-iconfont-cli 这个库 + +用法如下： + +# 支持平台 + +* 微信小程序 +* 支付宝小程序 +* 百度小程序 +* 头条小程序 +* QQ小程序 +* H5 + +# 特性 +1、一键生成标准组件，多端支持 +
+2、使用方便，import即可 +
+3、支持多色彩 +
+4、支持自定义颜色 +
+5、支持es6和typescript两种模式 + +# Step 1 +安装插件 + +**如果您使用Taro2.x，请安装 `taro-iconfont-cli@2.1.0`，并阅读旧版的[README.md](https://github.com/iconfont-cli/taro-iconfont-cli/blob/v2.1.0/README.md)** + +```bash +# Yarn +yarn add taro-iconfont-cli --dev + +# Npm +npm install taro-iconfont-cli --save-dev +``` + + +# Step 2 +生成配置文件 +```bash +npx iconfont-init + +# 可传入配置输出路径 +# npx iconfont-init --output iconfont.json +``` +此时项目根目录会生成一个`iconfont.json`的文件，内容如下： +```json +{ + "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接", + "save_dir": "./src/components/iconfont", + "use_typescript": false, + "platforms": "*", + "use_rpx": true, + "trim_icon_prefix": "icon", + "default_icon_size": 18, + "design_width": 750 +} +``` +### 配置参数说明： +### symbol_url +请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js` + +
+ +![](https://github.com/fwh1990/mini-program-iconfont-cli/blob/master/images/symbol-url.png?raw=true) + +### save_dir +根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。 + +### use_typescript +如果您的项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。 + +当该值为false时，我们会为您的图标生成`.js`和`.d.ts`两个文件，以便您能享受到最好的开发体验。 + +### platforms +选择需要支持的平台，默认是`*`，意味着所有平台都需要支持（如果有）。如果你只想支持部分平台，也可以设置成数组： +```json5 +{ + // 选择你需要的平台 + // 说明 => weapp: 微信 | swan: 百度 | alipay: 支付宝 | tt: 字节跳动 + "platforms": ["weapp", "swan", "alipay", "h5", "tt", "qq"] +} +``` + +### use_rpx +是否使用[尺寸单位rpx](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D)还是普通的像素单位`px`。默认值为true，与Taro保持一致的缩放。您也可以设置为false，强制使用`px` + +### design_width +若 `use_rpx: true` 且当前设计图尺寸不为 750 时，可以通过修改这个字段来修改设计尺寸。 + +### trim_icon_prefix +如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。 + +### default_icon_size +我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。 + + +# Step 3 +开始生成Taro标准组件 +```bash +npx iconfont-taro + +# 可传入配置文件路径 +# npx iconfont-taro --config iconfont.json +``` +生成后查看您设置的保存目录中是否含有所有的图标 + +------- + +在生成代码之前，你可以顺便参考[snapshots目录](https://github.com/iconfont-cli/taro-iconfont-cli/tree/master/snapshots)自动生成的快照文件。 + +# Step 4 +由于Taro3.0的架构变更，您需要在`src/app.config.js`下填写一次`usingComponents`。 +```typescript +// src/app.config.js +import { useGlobalIconFont } from './components/iconfont/helper'; + +export default { + usingComponents: Object.assign(useGlobalIconFont()), +} +``` + +这并不是一个多好的方案，毕竟还需要开发者关注这个细节。也许能用webpack的plugin解决或者等官方推出更好的方案，有任何更好的idea欢迎提供。 + +# 使用 +在Page中使用图标 +```jsx harmony +import React, { Component } from 'react'; +import IconFont from '../components/iconfont'; + +class App extends Component { + render() { + return ; + } +} + +export default App; +``` +更多用法： +```jsx harmony +// 原色彩 + + +// 单色：红色 + + +// 多色：红色+橘色 + + +// 不同格式的颜色写法 + + + +// 与文字对齐 + + Hello + + +``` + +# 更新图标 +当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件 +```bash +# 修改 symbol_url 配置后执行： +npx iconfont-taro +``` + diff --git a/config/dev.js b/config/dev.js index e3a0d8a..4e1656f 100644 --- a/config/dev.js +++ b/config/dev.js @@ -37,8 +37,9 @@ module.exports = { alias: { '@': path.resolve(__dirname, '..', 'src'), }, + sass: { - resource: path.resolve(__dirname, '..', 'src/styles/common.scss'), + resource: [path.resolve(__dirname, '..', 'src/styles/common.scss'), path.resolve(__dirname, '..', 'src/styles/iconfont.scss')], }, // plugins: [ // '@tarojs/plugin-react-devtools' diff --git a/config/index.js b/config/index.js index 87d9bca..3b436bc 100644 --- a/config/index.js +++ b/config/index.js @@ -19,6 +19,7 @@ const CURRENT_VERSION = `Version: ${JSON.stringify(process.env.CODE_BRANCH || ve ) const config = { + appid: 'wx64fe67f111d52457', // 测试/体验环境 projectName: 'SpiderSteward', date: '2022-4-6', designWidth: 750, @@ -43,7 +44,9 @@ const config = { postcss: { pxtransform: { enable: true, - config: {}, + config: { + onePxTransform: false, + }, }, url: { enable: true, diff --git a/config/pre.js b/config/pre.js index 232a1c5..6238010 100644 --- a/config/pre.js +++ b/config/pre.js @@ -3,6 +3,7 @@ module.exports = { env: { NODE_ENV: '"pre"', }, + outputRoot: 'build', defineConstants: { CURRENT_BASE_URL: '"https://pre.zzfzyc.com/lymarket"', }, @@ -38,6 +39,6 @@ module.exports = { '@': path.resolve(__dirname, '..', 'src'), }, sass: { - resource: path.resolve(__dirname, '..', 'src/styles/common.scss'), + resource: [path.resolve(__dirname, '..', 'src/styles/common.scss'), path.resolve(__dirname, '..', 'src/styles/iconfont.scss')], }, } diff --git a/config/prod.js b/config/prod.js index 4e3a20d..507a409 100644 --- a/config/prod.js +++ b/config/prod.js @@ -3,6 +3,7 @@ module.exports = { env: { NODE_ENV: '"production"', }, + outputRoot: 'build', defineConstants: { CURRENT_BASE_URL: '"https://www.zzfzyc.com/lymarket"', }, diff --git a/global.d.ts b/global.d.ts index 947366a..f8ba444 100644 --- a/global.d.ts +++ b/global.d.ts @@ -19,4 +19,4 @@ declare namespace NodeJS { declare const CURRENT_VERSION: string declare const CURRENT_GITHASH: string -declare const CURRENT_ENV: string \ No newline at end of file +declare const CURRENT_ENV: string diff --git a/iconfont.json b/iconfont.json new file mode 100644 index 0000000..33de02e --- /dev/null +++ b/iconfont.json @@ -0,0 +1,10 @@ +{ + "symbol_url": "//at.alicdn.com/t/c/font_3619513_mrvpsyqxmzr.js", + "save_dir": "./src/components/iconfont", + "use_typescript": false, + "platforms": ["weapp","h5"], + "use_rpx": true, + "trim_icon_prefix": "", + "default_icon_size": 18, + "design_width": 750 +} diff --git a/package.json b/package.json index af1d38f..97bb42b 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "css": "sass" }, "scripts": { + "init:iconfont": "npx iconfont-taro", "build:weapp": "taro build --type weapp", "build:swan": "taro build --type swan", "build:alipay": "taro build --type alipay", @@ -18,17 +19,17 @@ "build:qq": "taro build --type qq", "build:jd": "taro build --type jd", "build:quickapp": "taro build --type quickapp", - "dev:weapp": "npm run build:weapp -- --watch", + "dev:weapp": "npm run init:iconfont && npm run build:weapp -- --watch", "dev:swan": "npm run build:swan -- --watch", "dev:alipay": "npm run build:alipay -- --watch", "dev:tt": "npm run build:tt -- --watch", - "dev:h5": "npm run build:h5 -- --watch", + "dev:h5": "npm run init:iconfont && npm run build:h5 -- --watch", "dev:rn": "npm run build:rn -- --watch", "dev:qq": "npm run build:qq -- --watch", "dev:jd": "npm run build:jd -- --watch", "dev:quickapp": "npm run build:quickapp -- --watch", - "build:weapp:pre": "cross-env NODE_ENV=pre taro build --type weapp", - "dev:weapp:pre": "cross-env NODE_ENV=pre npm run build:weapp -- --watch" + "build:weapp:pre": "npm run init:iconfont && cross-env NODE_ENV=pre taro build --type weapp", + "dev:weapp:pre": "npm run init:iconfont && cross-env NODE_ENV=pre npm run build:weapp -- --watch" }, "browserslist": [ "last 3 versions", @@ -44,6 +45,7 @@ "@tarojs/runtime": "3.5.4", "@tarojs/taro": "3.5.4", "big.js": "^6.2.1", + "classname": "^0.0.0", "dayjs": "^1.11.3", "qs": "^6.10.3", "react": "^18.2.0", @@ -75,6 +77,7 @@ "eslint-plugin-react-hooks": "^4.2.0", "react-refresh": "0.11.0", "stylelint": "9.3.0", + "taro-iconfont-cli": "^3.3.0", "typescript": "^4.1.0", "webpack": "^5.74.0" } diff --git a/src/app.config.ts b/src/app.config.ts index 6425366..6e8358b 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,11 +1,13 @@ +import { useGlobalIconFont } from './components/iconfont/helper' export default defineAppConfig({ - pages: ['pages/user/index', + pages: [ 'pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/searchPage/index', 'pages/customerPage/index', 'pages/saleuserPage/index', + 'pages/user/index', 'pages/orderDetails/index' ], window: { @@ -16,30 +18,23 @@ export default defineAppConfig({ backgroundColor: '#ffffff', }, tabBar: { + custom: true, list: [ { pagePath: 'pages/index/index', text: '首页', - iconPath: './styles/tabbar/list.png', - selectedIconPath: './styles/tabbar/list_on.png', }, { pagePath: 'pages/shopping/index', text: '购物', - iconPath: './styles/tabbar/order.png', - selectedIconPath: './styles/tabbar/order_on.png', }, { pagePath: 'pages/order/index', text: '订单', - iconPath: './styles/tabbar/order.png', - selectedIconPath: './styles/tabbar/order_on.png', }, { pagePath: 'pages/user/index', text: '我的', - iconPath: './styles/tabbar/my.png', - selectedIconPath: './styles/tabbar/my_on.png', }, ], color: '#707070', @@ -47,5 +42,9 @@ export default defineAppConfig({ backgroundColor: '#fff', borderStyle: 'white', }, + usingComponents: { + 'custom-wrapper': '/custom-wrapper', + ...useGlobalIconFont(), + }, subPackages: [], }) diff --git a/src/app.scss b/src/app.scss index c393d5e..e4f700b 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,6 +1,16 @@ @import './styles/common.scss'; @import './styles/iconfont.scss'; -page{ - height: 100%; - -} \ No newline at end of file + +/** + 由于Cover-view标签并不支持iconfont 所以需要把 .ttf 转成 base64 之后得到的 stylesheet.css 文件覆盖掉 iconfont.css 里的 @font-face 即可 + [转换工具](https://transfonter.org/) + [教程](https://blog.csdn.net/VoidLuffy/article/details/123530341) + [相关说明](https://developers.weixin.qq.com/community/develop/doc/000a60f7d58a982f08d7ddfc456000) +*/ + +// 总高度 - 自定义tabbar高度 - apple小黑条高度 +page { + height: calc(100% - #{$customTabBarHeight} - constant(safe-area-inset-bottom)); + height: calc(100% - #{$customTabBarHeight} - env(safe-area-inset-bottom)); + background-color: #f7f7f7; +} diff --git a/src/components/iconCard/index.module.scss b/src/components/iconCard/index.module.scss new file mode 100644 index 0000000..d36c6aa --- /dev/null +++ b/src/components/iconCard/index.module.scss @@ -0,0 +1,11 @@ +.iconCard { + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + &-name{ + font-size: 26px; + color: #333; + margin-top: 16px; + } +} diff --git a/src/components/iconCard/index.tsx b/src/components/iconCard/index.tsx new file mode 100644 index 0000000..14a8fee --- /dev/null +++ b/src/components/iconCard/index.tsx @@ -0,0 +1,26 @@ +import { View } from "@tarojs/components" +import { FC, ReactNode } from "react" +import IconFont from "../iconfont" +import styles from './index.module.scss' + +type IconfontName = Parameters['0']['name'] + +interface PropsType { + iconName: IconfontName + title: string + children?: ReactNode + onClick?: Function +} +const IconCard: FC = (props) => { + const { iconName, title, onClick } = props + const handleClick = (event) => { + onClick && onClick(event) + } + return ( + + + {title} + + ) +} +export default IconCard diff --git a/src/components/iconfont/h5/IconDingdan.js b/src/components/iconfont/h5/IconDingdan.js new file mode 100644 index 0000000..ed26299 --- /dev/null +++ b/src/components/iconfont/h5/IconDingdan.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconDingdan = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconDingdan.defaultProps = { + size: 18, +}; + +export default IconDingdan; diff --git a/src/components/iconfont/h5/IconDingdan1.js b/src/components/iconfont/h5/IconDingdan1.js new file mode 100644 index 0000000..6646be2 --- /dev/null +++ b/src/components/iconfont/h5/IconDingdan1.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconDingdan1 = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconDingdan1.defaultProps = { + size: 18, +}; + +export default IconDingdan1; diff --git a/src/components/iconfont/h5/IconDizhi.js b/src/components/iconfont/h5/IconDizhi.js new file mode 100644 index 0000000..d13f9ac --- /dev/null +++ b/src/components/iconfont/h5/IconDizhi.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconDizhi = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconDizhi.defaultProps = { + size: 18, +}; + +export default IconDizhi; diff --git a/src/components/iconfont/h5/IconDuizhang.js b/src/components/iconfont/h5/IconDuizhang.js new file mode 100644 index 0000000..1c054ec --- /dev/null +++ b/src/components/iconfont/h5/IconDuizhang.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconDuizhang = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconDuizhang.defaultProps = { + size: 18, +}; + +export default IconDuizhang; diff --git a/src/components/iconfont/h5/IconFahuoliebiao.js b/src/components/iconfont/h5/IconFahuoliebiao.js new file mode 100644 index 0000000..6186db7 --- /dev/null +++ b/src/components/iconfont/h5/IconFahuoliebiao.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconFahuoliebiao = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconFahuoliebiao.defaultProps = { + size: 18, +}; + +export default IconFahuoliebiao; diff --git a/src/components/iconfont/h5/IconGerenzhongxin.js b/src/components/iconfont/h5/IconGerenzhongxin.js new file mode 100644 index 0000000..0e0396a --- /dev/null +++ b/src/components/iconfont/h5/IconGerenzhongxin.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconGerenzhongxin = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconGerenzhongxin.defaultProps = { + size: 18, +}; + +export default IconGerenzhongxin; diff --git a/src/components/iconfont/h5/IconGerenzhongxin1.js b/src/components/iconfont/h5/IconGerenzhongxin1.js new file mode 100644 index 0000000..e2048e9 --- /dev/null +++ b/src/components/iconfont/h5/IconGerenzhongxin1.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconGerenzhongxin1 = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconGerenzhongxin1.defaultProps = { + size: 18, +}; + +export default IconGerenzhongxin1; diff --git a/src/components/iconfont/h5/IconGouwu.js b/src/components/iconfont/h5/IconGouwu.js new file mode 100644 index 0000000..acd351f --- /dev/null +++ b/src/components/iconfont/h5/IconGouwu.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconGouwu = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconGouwu.defaultProps = { + size: 18, +}; + +export default IconGouwu; diff --git a/src/components/iconfont/h5/IconGouwu1.js b/src/components/iconfont/h5/IconGouwu1.js new file mode 100644 index 0000000..710069f --- /dev/null +++ b/src/components/iconfont/h5/IconGouwu1.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconGouwu1 = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconGouwu1.defaultProps = { + size: 18, +}; + +export default IconGouwu1; diff --git a/src/components/iconfont/h5/IconLingquseka.js b/src/components/iconfont/h5/IconLingquseka.js new file mode 100644 index 0000000..a910c42 --- /dev/null +++ b/src/components/iconfont/h5/IconLingquseka.js @@ -0,0 +1,37 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconLingquseka = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + + ); +}; + +IconLingquseka.defaultProps = { + size: 18, +}; + +export default IconLingquseka; diff --git a/src/components/iconfont/h5/IconMadanguanli.js b/src/components/iconfont/h5/IconMadanguanli.js new file mode 100644 index 0000000..03d55ed --- /dev/null +++ b/src/components/iconfont/h5/IconMadanguanli.js @@ -0,0 +1,45 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconMadanguanli = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + + + + ); +}; + +IconMadanguanli.defaultProps = { + size: 18, +}; + +export default IconMadanguanli; diff --git a/src/components/iconfont/h5/IconPandiansaoma.js b/src/components/iconfont/h5/IconPandiansaoma.js new file mode 100644 index 0000000..cedaa00 --- /dev/null +++ b/src/components/iconfont/h5/IconPandiansaoma.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconPandiansaoma = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconPandiansaoma.defaultProps = { + size: 18, +}; + +export default IconPandiansaoma; diff --git a/src/components/iconfont/h5/IconQianzhicangkucun.js b/src/components/iconfont/h5/IconQianzhicangkucun.js new file mode 100644 index 0000000..6f58e2d --- /dev/null +++ b/src/components/iconfont/h5/IconQianzhicangkucun.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconQianzhicangkucun = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconQianzhicangkucun.defaultProps = { + size: 18, +}; + +export default IconQianzhicangkucun; diff --git a/src/components/iconfont/h5/IconQusechazhao.js b/src/components/iconfont/h5/IconQusechazhao.js new file mode 100644 index 0000000..95db3db --- /dev/null +++ b/src/components/iconfont/h5/IconQusechazhao.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconQusechazhao = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconQusechazhao.defaultProps = { + size: 18, +}; + +export default IconQusechazhao; diff --git a/src/components/iconfont/h5/IconShouhouzhongxin.js b/src/components/iconfont/h5/IconShouhouzhongxin.js new file mode 100644 index 0000000..097a48a --- /dev/null +++ b/src/components/iconfont/h5/IconShouhouzhongxin.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconShouhouzhongxin = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconShouhouzhongxin.defaultProps = { + size: 18, +}; + +export default IconShouhouzhongxin; diff --git a/src/components/iconfont/h5/IconShoukuanliebiao.js b/src/components/iconfont/h5/IconShoukuanliebiao.js new file mode 100644 index 0000000..58aee55 --- /dev/null +++ b/src/components/iconfont/h5/IconShoukuanliebiao.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconShoukuanliebiao = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconShoukuanliebiao.defaultProps = { + size: 18, +}; + +export default IconShoukuanliebiao; diff --git a/src/components/iconfont/h5/IconShouye.js b/src/components/iconfont/h5/IconShouye.js new file mode 100644 index 0000000..eab00c2 --- /dev/null +++ b/src/components/iconfont/h5/IconShouye.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconShouye = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconShouye.defaultProps = { + size: 18, +}; + +export default IconShouye; diff --git a/src/components/iconfont/h5/IconShouye1.js b/src/components/iconfont/h5/IconShouye1.js new file mode 100644 index 0000000..ccceea2 --- /dev/null +++ b/src/components/iconfont/h5/IconShouye1.js @@ -0,0 +1,27 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconShouye1 = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + ); +}; + +IconShouye1.defaultProps = { + size: 18, +}; + +export default IconShouye1; diff --git a/src/components/iconfont/h5/IconTihuoliebiao.js b/src/components/iconfont/h5/IconTihuoliebiao.js new file mode 100644 index 0000000..e406a31 --- /dev/null +++ b/src/components/iconfont/h5/IconTihuoliebiao.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconTihuoliebiao = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconTihuoliebiao.defaultProps = { + size: 18, +}; + +export default IconTihuoliebiao; diff --git a/src/components/iconfont/h5/IconWodekefu.js b/src/components/iconfont/h5/IconWodekefu.js new file mode 100644 index 0000000..2b23a1f --- /dev/null +++ b/src/components/iconfont/h5/IconWodekefu.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconWodekefu = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconWodekefu.defaultProps = { + size: 18, +}; + +export default IconWodekefu; diff --git a/src/components/iconfont/h5/IconWodeshoucang.js b/src/components/iconfont/h5/IconWodeshoucang.js new file mode 100644 index 0000000..4c13ed5 --- /dev/null +++ b/src/components/iconfont/h5/IconWodeshoucang.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconWodeshoucang = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconWodeshoucang.defaultProps = { + size: 18, +}; + +export default IconWodeshoucang; diff --git a/src/components/iconfont/h5/IconXiaoshou.js b/src/components/iconfont/h5/IconXiaoshou.js new file mode 100644 index 0000000..cdd6508 --- /dev/null +++ b/src/components/iconfont/h5/IconXiaoshou.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconXiaoshou = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconXiaoshou.defaultProps = { + size: 18, +}; + +export default IconXiaoshou; diff --git a/src/components/iconfont/h5/IconYangpinduibi.js b/src/components/iconfont/h5/IconYangpinduibi.js new file mode 100644 index 0000000..6844d9f --- /dev/null +++ b/src/components/iconfont/h5/IconYangpinduibi.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconYangpinduibi = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconYangpinduibi.defaultProps = { + size: 18, +}; + +export default IconYangpinduibi; diff --git a/src/components/iconfont/h5/IconYansequyang.js b/src/components/iconfont/h5/IconYansequyang.js new file mode 100644 index 0000000..4139fe7 --- /dev/null +++ b/src/components/iconfont/h5/IconYansequyang.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconYansequyang = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconYansequyang.defaultProps = { + size: 18, +}; + +export default IconYansequyang; diff --git a/src/components/iconfont/h5/IconYaoqingma.js b/src/components/iconfont/h5/IconYaoqingma.js new file mode 100644 index 0000000..aadc7cf --- /dev/null +++ b/src/components/iconfont/h5/IconYaoqingma.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconYaoqingma = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconYaoqingma.defaultProps = { + size: 18, +}; + +export default IconYaoqingma; diff --git a/src/components/iconfont/h5/IconYuncangkucun.js b/src/components/iconfont/h5/IconYuncangkucun.js new file mode 100644 index 0000000..25db8f7 --- /dev/null +++ b/src/components/iconfont/h5/IconYuncangkucun.js @@ -0,0 +1,32 @@ +/* eslint-disable */ + +import React from 'react'; +import { getIconColor } from './helper'; + +const DEFAULT_STYLE = { + display: 'block', +}; + +const IconYuncangkucun = ({ size, color, style: _style, ...rest }) => { + const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE; + + return ( + + + + + ); +}; + +IconYuncangkucun.defaultProps = { + size: 18, +}; + +export default IconYuncangkucun; diff --git a/src/components/iconfont/h5/helper.js b/src/components/iconfont/h5/helper.js new file mode 100644 index 0000000..b566c4c --- /dev/null +++ b/src/components/iconfont/h5/helper.js @@ -0,0 +1,17 @@ +/* eslint-disable */ + +/** + * @param {string | string[] | undefined} color + * @param {number} index + * @param {string} defaultColor + * @return {string} + */ +export const getIconColor = (color, index, defaultColor) => { + return color + ? ( + typeof color === 'string' + ? color + : color[index] || defaultColor + ) + : defaultColor; +}; diff --git a/src/components/iconfont/h5/index.js b/src/components/iconfont/h5/index.js new file mode 100644 index 0000000..52377bf --- /dev/null +++ b/src/components/iconfont/h5/index.js @@ -0,0 +1,117 @@ +/* eslint-disable */ + +import React from 'react'; +import IconWodekefu from './IconWodekefu'; +import IconDizhi from './IconDizhi'; +import IconShouhouzhongxin from './IconShouhouzhongxin'; +import IconWodeshoucang from './IconWodeshoucang'; +import IconShoukuanliebiao from './IconShoukuanliebiao'; +import IconMadanguanli from './IconMadanguanli'; +import IconQusechazhao from './IconQusechazhao'; +import IconPandiansaoma from './IconPandiansaoma'; +import IconYaoqingma from './IconYaoqingma'; +import IconDuizhang from './IconDuizhang'; +import IconTihuoliebiao from './IconTihuoliebiao'; +import IconYangpinduibi from './IconYangpinduibi'; +import IconYansequyang from './IconYansequyang'; +import IconFahuoliebiao from './IconFahuoliebiao'; +import IconYuncangkucun from './IconYuncangkucun'; +import IconXiaoshou from './IconXiaoshou'; +import IconQianzhicangkucun from './IconQianzhicangkucun'; +import IconLingquseka from './IconLingquseka'; +import IconGouwu1 from './IconGouwu1'; +import IconDingdan1 from './IconDingdan1'; +import IconGerenzhongxin1 from './IconGerenzhongxin1'; +import IconShouye1 from './IconShouye1'; +import IconGerenzhongxin from './IconGerenzhongxin'; +import IconDingdan from './IconDingdan'; +import IconShouye from './IconShouye'; +import IconGouwu from './IconGouwu'; +export { default as IconWodekefu } from './IconWodekefu'; +export { default as IconDizhi } from './IconDizhi'; +export { default as IconShouhouzhongxin } from './IconShouhouzhongxin'; +export { default as IconWodeshoucang } from './IconWodeshoucang'; +export { default as IconShoukuanliebiao } from './IconShoukuanliebiao'; +export { default as IconMadanguanli } from './IconMadanguanli'; +export { default as IconQusechazhao } from './IconQusechazhao'; +export { default as IconPandiansaoma } from './IconPandiansaoma'; +export { default as IconYaoqingma } from './IconYaoqingma'; +export { default as IconDuizhang } from './IconDuizhang'; +export { default as IconTihuoliebiao } from './IconTihuoliebiao'; +export { default as IconYangpinduibi } from './IconYangpinduibi'; +export { default as IconYansequyang } from './IconYansequyang'; +export { default as IconFahuoliebiao } from './IconFahuoliebiao'; +export { default as IconYuncangkucun } from './IconYuncangkucun'; +export { default as IconXiaoshou } from './IconXiaoshou'; +export { default as IconQianzhicangkucun } from './IconQianzhicangkucun'; +export { default as IconLingquseka } from './IconLingquseka'; +export { default as IconGouwu1 } from './IconGouwu1'; +export { default as IconDingdan1 } from './IconDingdan1'; +export { default as IconGerenzhongxin1 } from './IconGerenzhongxin1'; +export { default as IconShouye1 } from './IconShouye1'; +export { default as IconGerenzhongxin } from './IconGerenzhongxin'; +export { default as IconDingdan } from './IconDingdan'; +export { default as IconShouye } from './IconShouye'; +export { default as IconGouwu } from './IconGouwu'; + +const IconFont = ({ name, ...rest }) => { + switch (name) { + case 'icon-wodekefu': + return ; + case 'icon-dizhi': + return ; + case 'icon-shouhouzhongxin': + return ; + case 'icon-wodeshoucang': + return ; + case 'icon-shoukuanliebiao': + return ; + case 'icon-madanguanli': + return ; + case 'icon-qusechazhao': + return ; + case 'icon-pandiansaoma': + return ; + case 'icon-yaoqingma': + return ; + case 'icon-duizhang': + return ; + case 'icon-tihuoliebiao': + return ; + case 'icon-yangpinduibi': + return ; + case 'icon-yansequyang': + return ; + case 'icon-fahuoliebiao': + return ; + case 'icon-yuncangkucun': + return ; + case 'icon-xiaoshou': + return ; + case 'icon-qianzhicangkucun': + return ; + case 'icon-lingquseka': + return ; + case 'icon-gouwu1': + return ; + case 'icon-dingdan1': + return ; + case 'icon-gerenzhongxin1': + return ; + case 'icon-shouye1': + return ; + case 'icon-gerenzhongxin': + return ; + case 'icon-dingdan': + return ; + case 'icon-shouye': + return ; + case 'icon-gouwu': + return ; + + } + + return null; +}; + +export default IconFont; diff --git a/src/components/iconfont/helper.d.ts b/src/components/iconfont/helper.d.ts new file mode 100644 index 0000000..24a9a53 --- /dev/null +++ b/src/components/iconfont/helper.d.ts @@ -0,0 +1,2 @@ +/* eslint-disable */ +export declare var useGlobalIconFont: () => { iconfont: string }; diff --git a/src/components/iconfont/helper.js b/src/components/iconfont/helper.js new file mode 100644 index 0000000..2caa692 --- /dev/null +++ b/src/components/iconfont/helper.js @@ -0,0 +1,9 @@ +/* eslint-disable */ +const useGlobalIconFont = () => { + return { + iconfont: `components/iconfont/${process.env.TARO_ENV}/${process.env.TARO_ENV}`, + }; +}; + +// es modules is unavaiable. +module.exports.useGlobalIconFont = useGlobalIconFont; diff --git a/src/components/iconfont/index.d.ts b/src/components/iconfont/index.d.ts new file mode 100644 index 0000000..ff53197 --- /dev/null +++ b/src/components/iconfont/index.d.ts @@ -0,0 +1,13 @@ +/* eslint-disable */ +import React, { FunctionComponent } from 'react'; + +interface Props { + name: 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu'; + size?: number; + color?: string | string[]; + style?: React.CSSProperties; +} + +declare const IconFont: FunctionComponent; + +export default IconFont; diff --git a/src/components/iconfont/index.h5.js b/src/components/iconfont/index.h5.js new file mode 100644 index 0000000..80b208b --- /dev/null +++ b/src/components/iconfont/index.h5.js @@ -0,0 +1,17 @@ +/* eslint-disable */ + +import React from 'react'; +import Taro from '@tarojs/taro'; +import Icon from './h5'; + +const IconFont = (props) => { + const { name, size, color, style } = props; + + return ; +}; + +IconFont.defaultProps = { + size: 18, +}; + +export default IconFont; diff --git a/src/components/iconfont/index.js b/src/components/iconfont/index.js new file mode 100644 index 0000000..9236f4b --- /dev/null +++ b/src/components/iconfont/index.js @@ -0,0 +1,7 @@ +/* eslint-disable */ + +const IconFont = () => { + return null; +}; + +export default IconFont; diff --git a/src/components/iconfont/index.weapp.js b/src/components/iconfont/index.weapp.js new file mode 100644 index 0000000..731305b --- /dev/null +++ b/src/components/iconfont/index.weapp.js @@ -0,0 +1,16 @@ +/* eslint-disable */ + +import React from 'react'; +import Taro from '@tarojs/taro'; + +const IconFont = (props) => { + const { name, size, color, style } = props; + + return ; +}; + +IconFont.defaultProps = { + size: 18, +}; + +export default IconFont; diff --git a/src/components/iconfont/weapp/weapp.js b/src/components/iconfont/weapp/weapp.js new file mode 100644 index 0000000..54b2aaf --- /dev/null +++ b/src/components/iconfont/weapp/weapp.js @@ -0,0 +1,63 @@ +Component({ + properties: { + // icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu + name: { + type: String, + }, + // string | string[] + color: { + type: null, + observer: function(color) { + this.setData({ + colors: this.fixColor(), + isStr: typeof color === 'string', + }); + } + }, + size: { + type: Number, + value: 18, + observer: function(size) { + this.setData({ + svgSize: size / 750 * wx.getSystemInfoSync().windowWidth, + }); + }, + }, + }, + data: { + colors: '', + svgSize: 18 / 750 * wx.getSystemInfoSync().windowWidth, + quot: '"', + isStr: true, + }, + methods: { + fixColor: function() { + var color = this.data.color; + var hex2rgb = this.hex2rgb; + + if (typeof color === 'string') { + return color.indexOf('#') === 0 ? hex2rgb(color) : color; + } + + return color.map(function (item) { + return item.indexOf('#') === 0 ? hex2rgb(item) : item; + }); + }, + hex2rgb: function(hex) { + var rgb = []; + + hex = hex.substr(1); + + if (hex.length === 3) { + hex = hex.replace(/(.)/g, '$1$1'); + } + + hex.replace(/../g, function(color) { + rgb.push(parseInt(color, 0x10)); + return color; + }); + + return 'rgb(' + rgb.join(',') + ')'; + } + } +}); diff --git a/src/components/iconfont/weapp/weapp.json b/src/components/iconfont/weapp/weapp.json new file mode 100644 index 0000000..a89ef4d --- /dev/null +++ b/src/components/iconfont/weapp/weapp.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} diff --git a/src/components/iconfont/weapp/weapp.wxml b/src/components/iconfont/weapp/weapp.wxml new file mode 100644 index 0000000..9d62d6c --- /dev/null +++ b/src/components/iconfont/weapp/weapp.wxml @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/iconfont/weapp/weapp.wxss b/src/components/iconfont/weapp/weapp.wxss new file mode 100644 index 0000000..9f68d1a --- /dev/null +++ b/src/components/iconfont/weapp/weapp.wxss @@ -0,0 +1,3 @@ +.icon { + background-repeat: no-repeat; +} diff --git a/src/components/layoutBlock/index.module.scss b/src/components/layoutBlock/index.module.scss new file mode 100644 index 0000000..0e3b807 --- /dev/null +++ b/src/components/layoutBlock/index.module.scss @@ -0,0 +1,16 @@ +.layoutBlock { + display: flex; + flex-flow: row nowrap; + background-color: #fff; + padding: 32px; + margin-bottom: 20px; + &--row { + flex-flow: row nowrap; + } + &--col { + flex-flow: column nowrap; + } + &--circle { + border-radius: 20px; + } +} diff --git a/src/components/layoutBlock/index.tsx b/src/components/layoutBlock/index.tsx new file mode 100644 index 0000000..057c0fe --- /dev/null +++ b/src/components/layoutBlock/index.tsx @@ -0,0 +1,34 @@ +import { View } from '@tarojs/components' +import { FC, ReactNode } from 'react' +import classnames from 'classname' +import styles from './index.module.scss' + +type FlexDirection = 'row' | 'col' + +interface PropsType { + flexDirection?: FlexDirection + + circle?: boolean + children?: ReactNode + customStyle?: React.CSSProperties + +} + +const LayoutBlock: FC = (props) => { + const { flexDirection = 'col', circle = false, children } = props + + const getClassName = () => { + const classObject = { + [styles['layoutBlock--circle']]: circle, + [styles[`layoutBlock--${flexDirection}`]]: flexDirection, + } + return classObject + } + + return + + {children} + + +} +export default LayoutBlock diff --git a/src/components/normalButton/index.module.scss b/src/components/normalButton/index.module.scss new file mode 100644 index 0000000..f5beb07 --- /dev/null +++ b/src/components/normalButton/index.module.scss @@ -0,0 +1,37 @@ +.button { + display: flex; + padding: 0 40px; + height: 36PX; + border: 1px solid $color_main; + background-color: #fff; + text-align: center; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + &--normal { + height: 36PX; + font-size: $font_size_medium; + } + &--small { + height: 30PX; + font-size: $font_size_min; + } + &--disabled { + opacity: $opacity-disabled; + } + &--primary { + border: 1px solid $color_main; + color: $color_main; + } + &--danger { + border: 1px solid $color_danger; + color: $color_danger; + } + &--warning { + border: 1px solid $color_warning; + color: $color_warning; + } + &--circle { + border-radius: 50px; + } +} diff --git a/src/components/normalButton/index.tsx b/src/components/normalButton/index.tsx new file mode 100644 index 0000000..89a22a3 --- /dev/null +++ b/src/components/normalButton/index.tsx @@ -0,0 +1,43 @@ +import { View } from '@tarojs/components' +import { FC, ReactNode } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' + +type ButtonType = 'primary' | 'danger' | 'warning' +type ButtonSize = 'normal' | 'small' + +interface PropsType { + size?: ButtonSize + type?: ButtonType + circle?: boolean + disabled?: boolean + children?: ReactNode + onClick?: Function +} + +const NormalButton: FC = ({ type = 'primary', size = 'normal', circle = false, disabled = false, children, onClick }) => { + const getClassName = () => { + const classObject = { + [styles[`button--disabled`]]: disabled, + [styles[`button--${size}`]]: size, + [styles[`button--${type}`]]: type, + [styles['button--circle']]: circle, + } + console.log('classObj==>button', classObject) + return classObject + } + + const handleClick = (event) => { + if (disabled) { + return + } + onClick && onClick(event) + } + + return ( + + {children} + + ) +} +export default NormalButton diff --git a/src/components/tag/index.module.scss b/src/components/tag/index.module.scss new file mode 100644 index 0000000..b4ac861 --- /dev/null +++ b/src/components/tag/index.module.scss @@ -0,0 +1,33 @@ +.tag { + display: inline-flex; + flex-flow: row nowrap; + padding: 0 20px; + height: 60px; + color: #fff; + text-align: center; + justify-content: center; + align-items: center; + &--normal { + font-size: $font_size_medium; + height: 40px; + } + &--small{ + font-size: $font_size_min; + height: 30px; + } + &--circle{ + border-radius: 10px; + } + &--danger { + background-color: $color_danger; + } + &--primary{ + background-color: $color_main; + } + &--warning{ + background-color: $color_warning; + } + &--disabled { + opacity: $opacity-disabled; + } +} diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx new file mode 100644 index 0000000..3b9485b --- /dev/null +++ b/src/components/tag/index.tsx @@ -0,0 +1,43 @@ +import { View } from '@tarojs/components' +import { FC, ReactNode } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' + +type TagSize = 'small' | 'normal' +type TagType = 'primary' | 'danger' | 'warning' + +interface PropsType { + type?: TagType + disabled?: boolean + size?: TagSize + children?: ReactNode + onClick?: Function + circle?: boolean + customStyle?: React.CSSProperties +} + +const Tag: FC = ({ type = 'primary', size = 'normal', disabled = false, children, onClick, circle = false, customStyle = {} }) => { + const handleClick = (event) => { + if (disabled) { + return + } + onClick && onClick(event) + } + + const getClassName = () => { + const classObject = { + [styles['tag--disabled']]: disabled, + [styles[`tag--${size}`]]: size, + [styles[`tag--${type}`]]: type, + [styles['tag--circle']]: circle, + } + console.log('classObj==>', classObject) + return classObject + } + return ( + + {children} + + ) +} +export default Tag diff --git a/src/constants/common.ts b/src/constants/common.ts index d14b9fd..2a5c78b 100644 --- a/src/constants/common.ts +++ b/src/constants/common.ts @@ -1,3 +1,3 @@ export const SET_SHOPCOUNT = 'set_shopCount' export const CLEAR_SHOPCOUNT = 'clear_shopCount' -export const STORAGE_SHOPCOUNT = 'storage_shopcount' \ No newline at end of file +export const STORAGE_SHOPCOUNT = 'storage_shopcount' diff --git a/src/constants/tabbar.ts b/src/constants/tabbar.ts new file mode 100644 index 0000000..0c30219 --- /dev/null +++ b/src/constants/tabbar.ts @@ -0,0 +1,3 @@ +export enum TabBarType { + SET_SELECTED = 'setSelected' +} diff --git a/src/custom-tab-bar/index.config.ts b/src/custom-tab-bar/index.config.ts new file mode 100644 index 0000000..6d6cc11 --- /dev/null +++ b/src/custom-tab-bar/index.config.ts @@ -0,0 +1,3 @@ +export default { + component: true, +} diff --git a/src/custom-tab-bar/index.module.scss b/src/custom-tab-bar/index.module.scss new file mode 100644 index 0000000..3075c58 --- /dev/null +++ b/src/custom-tab-bar/index.module.scss @@ -0,0 +1,41 @@ +.customTabBar { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: $customTabBarHeight; + display: flex; + flex-flow: row nowrap; + padding-bottom: env(safe-area-inset-bottom); + background-color: #fff; + z-index: 9999; + box-shadow: 0 11px 7px 8px #c2c2c2; + &-line { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 1px; + transform: scaleY(0.5); + } + &-item { + flex: 1; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column nowrap; + &-icon { + width: 56px; + height: 56px; + font-size: 60px; + } + &-title { + margin-top: 10px; + font-size: 20px; + } + } +} +.selected { + color: $color_main; +} diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx new file mode 100644 index 0000000..539b268 --- /dev/null +++ b/src/custom-tab-bar/index.tsx @@ -0,0 +1,73 @@ +import { CoverImage, View } from '@tarojs/components' +import { FC, useMemo, useState } from 'react' +import styles from './index.module.scss' +import IconFont from '@/components/iconfont' +import classname from 'classname' +import Taro, { useDidShow, useRouter } from '@tarojs/taro' +import { useSelector } from '@/reducers/hooks' +import { useDispatch } from 'react-redux' +import { Dispatch } from 'redux' +import { TabBarType } from '@/constants/tabbar' +import { TabBarAction } from '@/reducers/tabBar' + +type IconfontName = Parameters['0']['name'] + +type TabBarIndexMap = { + [Property: number]: { + id: number + pagePath: string + text: string + iconPath: IconfontName + selectedIconPath: IconfontName + } +} + +const CustomTabBar: FC = () => { + console.log('重新渲染') + + + + const { selectedId, tabItem } = useSelector((state) => { + console.log('sdfasdfa', state) + return state.tabBarData + }) + // const tabBarIndexMap = useMemo(() => { + // let map: TabBarIndexMap = {} + // for (let i = 0; i < tabItem.length; i++) { + // map[tabItem[i].id] = tabItem[i] + // } + // return map + // }, [tabItem]) + console.log('selectedId', selectedId) + + const dispatch = useDispatch>() + + const handleSelectTabItem = (id: TabBarIndexMap[number]['id']) => { + return () => { + setSelected(id) + Taro.switchTab({ url: tabItem.find(item=>item.id === id)?.pagePath! }) + } + } + const setSelected = (id: TabBarIndexMap[number]['id']) => { + dispatch({ type: TabBarType.SET_SELECTED, data: { tabItem, selectedId: id } }) + } + + return ( + + + {tabItem.map((item, index) => { + return ( + + + + {item.text} + + ) + })} + + ) +} +export default CustomTabBar diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 523b94b..dd843ce 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -6,7 +6,7 @@ import MoveBtn from '@/components/moveBtn' import ShopCart from '@/components/shoppingCart' import { goLink } from '@/common/common' import styles from './index.module.scss' -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { kindListApi, ProductListApi } from '@/api/index' // import useLogin from '@/use/useLogin' import { mpproductcolorlist, mpsaleOrderpreView } from "@/api/order" @@ -296,4 +296,4 @@ export default () => { // ) } -// oninputEvent={(e, item) => { oninputEvent(e, item) }} \ No newline at end of file +// oninputEvent={(e, item) => { oninputEvent(e, item) }} diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 2ae0ef7..2558ab4 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -1,9 +1,13 @@ import { isEmptyObject } from '@/common/common' import { View } from '@tarojs/components' +import Taro, { useDidShow } from '@tarojs/taro' +import { useMemo } from 'react' const User = () => { const obj = {} console.log(isEmptyObject(obj)) + + return sdfasdfasdf } export default User diff --git a/src/pages/user/index.config.ts b/src/pages/user/index.config.ts index 90ec98a..5531ea2 100644 --- a/src/pages/user/index.config.ts +++ b/src/pages/user/index.config.ts @@ -4,5 +4,5 @@ export default definePageConfig({ navigationBarBackgroundColor: '#4581FF', backgroundColor: '#4581FF', backgroundColorTop: '#4581FF', - enablePullDownRefresh: true + enablePullDownRefresh: true, }) diff --git a/src/pages/user/index.module.scss b/src/pages/user/index.module.scss index c4c3e5e..a1f1daf 100644 --- a/src/pages/user/index.module.scss +++ b/src/pages/user/index.module.scss @@ -1,5 +1,97 @@ -.main{ - width: 100%; - min-height: 100vh; - background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%); +page{ + position: relative; + +} +.main { + background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%); + padding: 24px; + padding-bottom: 0; + box-sizing: border-box; + overflow-y: scroll; + height: 100%; +} +.userAvatar { + position: relative; + width: 122px; + height: 122px; + border-radius: 50%; + background-color: #fff; + overflow: hidden; + &-text { + display: block; + width: 100%; + position: absolute; + left: 0; + bottom: 0; + height: 31px; + color: #fff; + text-align: center; + line-height: 31px; + font-size: 20px; + background-color: rgba($color: #000000, $alpha: 0.33); + } + +} +.topBar { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + .left { + } + .middle { + margin: 0 40px; + flex: 1 1 auto; + } + .right { + } +} +.bottomBar { + display: flex; + flex-flow: row nowrap; + align-items: center; + border-radius: 16px; + background-color: #f6f6f6; + margin-top: 20px; + padding: 15px; +} +.username { + display: block; + font-size: 36px; + font-weight: 600; +} +.userno { + display: block; + font-size: 28px; + color: $color_font_two; +} +.userTitle { + color: #626262; + font-weight: 600; + font-size: $font_size_medium; + margin-left: 20px; +} +.grid-container{ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-column-gap: 32px; + grid-row-gap: 32px; +} +.layoutTabBar { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; +} +.layoutTitle { + font-size: 32px; + font-weight: 600; + color: #333; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin-bottom: 20px; + +} +.layoutDescription { + font-size: 24px; + color: $color_main; } diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index ebf4f98..74a38c7 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -1,27 +1,192 @@ import { isEmptyObject } from '@/common/common' -import { Button, View } from '@tarojs/components' -import { FC, memo, useState } from 'react' +import { Button, View, Image, Text } from '@tarojs/components' +import { FC, memo, useMemo, useState } from 'react' import styles from './index.module.scss' -const SonComp: FC = memo(() => { - return 我改变了吗{new Date().getTime()} -}) +import defaultAvatar from '../../styles/image/defaultAvatar.png' +import NormalButton from '@/components/normalButton' +import Tag from '@/components/tag' +import Divider from '@/components/Divider' +import LayoutBlock from '@/components/layoutBlock' +import IconCard from '@/components/iconCard' +import IconFont from '@/components/iconfont' + +type IconfontName = Parameters['0']['name'] +type IconCardType = { + iconName: IconfontName, + name: string, + path: string +} + +// 用户信息 +const UserInfo: FC = () => { + const [userInfo, setUserInfo] = useState({ + avatarUrl: '', + username: '', + userno: '', + }) + + + const feature: IconCardType[] = [ + { + iconName: 'icon-lingquseka', + name: '领取色卡', + path: '', + }, + { + iconName: 'icon-pandiansaoma', + name: '盘点扫码', + path: '', + }, + { + iconName: 'icon-fahuoliebiao', + name: '发货列表', + path: '', + }, + { + iconName: 'icon-yaoqingma', + name: '邀请码', + path: '', + }, + { + iconName: 'icon-tihuoliebiao', + name: '提货列表', + path: '', + }, + { + iconName: 'icon-shouhouzhongxin', + name: '退货退款', + path: '', + }, + { + iconName: 'icon-shoukuanliebiao', + name: '收款列表', + path: '', + }, + { + iconName: 'icon-shoukuanliebiao', + name: '客户列表', + path: '', + }, + ] + + const fabric: IconCardType[] = [ + { + iconName: 'icon-yansequyang', + name: '颜色取样', + path: '', + }, + { + iconName: 'icon-qusechazhao', + name: '取色查找', + path: '', + }, + { + iconName: 'icon-yangpinduibi', + name: '样品对比', + path: '', + }, + ] + + const statisticAnalysis: IconCardType[] = [ + { + iconName: 'icon-xiaoshou', + name: '销售', + path: '', + }, + { + iconName: 'icon-duizhang', + name: '对账', + path: '', + }, + { + iconName: 'icon-yuncangkucun', + name: '云仓库存', + path: '', + }, + { + iconName: 'icon-qianzhicangkucun', + name: '前置仓库存', + path: '', + }, + ] + + const handleLogout = () => {} + + return ( + <> + + + + + + + 杨子杰 + 064 + + + + 退出登录 + + + + + + IT部门 + + + IT-开发总监 + + + + 功能特色 + + {feature.map((item) => { + return + })} + + + + 布料取色 + + {fabric.map((item) => { + return + })} + + + + 统计分析 + + {statisticAnalysis.map((item) => { + return + })} + + + {/* + + 客户列表 + 查看全部客户 ▶ + + asdfasdfasdfas + */} + + ) +} +// 用户头像 +const UserAvatar = ({ src }) => { + return ( + + + {src ? null : 编辑} + + ) +} // 我的 const User = () => { - const obj = {} - console.log(isEmptyObject(obj)) - const [count, setCount] = useState(0) - const handleCount = () => { - setCount((prev) => { - return prev + 1 - }) - } return ( <> - - sdfasdfasdf {count} - - + + ) diff --git a/src/reducers/hooks.ts b/src/reducers/hooks.ts index e2f3457..ccc4573 100644 --- a/src/reducers/hooks.ts +++ b/src/reducers/hooks.ts @@ -1,10 +1,12 @@ //该方法纯粹只是个Ts类型定义文件 import { useSelector as useReduxSelector, TypedUseSelectorHook } from 'react-redux'; -import { DataParam } from './userInfo'; +import { DataParam as userInfoParam } from './userInfo'; import { DataParam as commonDataParam } from './commonData'; +import { TabBarData as tabbarDataParam } from './tabBar'; type Params = { - userInfo: DataParam, - commonData: commonDataParam + userInfo: userInfoParam + commonData: commonDataParam + tabBarData: tabbarDataParam } -export const useSelector: TypedUseSelectorHook = useReduxSelector; \ No newline at end of file +export const useSelector: TypedUseSelectorHook = useReduxSelector; diff --git a/src/reducers/index.ts b/src/reducers/index.ts index 1b859e6..f5294cc 100644 --- a/src/reducers/index.ts +++ b/src/reducers/index.ts @@ -1,8 +1,18 @@ import { combineReducers } from 'redux' import userInfo from './userInfo' import commonData from './commonData' +import tabBarReducer from './tabBar' -export default combineReducers({ - userInfo, - commonData -}) \ No newline at end of file +export type Reducers = { + userInfo: typeof userInfo + commonData: typeof commonData + tabBarData: typeof tabBarReducer +} + +export type ReducersKey = keyof Reducers + +export default combineReducers({ + userInfo, + commonData, + tabBarData: tabBarReducer, +}) diff --git a/src/reducers/tabBar.ts b/src/reducers/tabBar.ts new file mode 100644 index 0000000..638bc96 --- /dev/null +++ b/src/reducers/tabBar.ts @@ -0,0 +1,72 @@ +import { TabBarType } from '../constants/tabbar' +import IconFont from '@/components/iconfont' + +type IconfontName = Parameters['0']['name'] + +type TabBarIndexMap = { + [Property: number]: { + id: number + pagePath: string + text: string + iconPath: IconfontName + selectedIconPath: IconfontName + } +} + + +const INITIAL_STATE = { + selectedId: 1, + tabItem: [ + { + id: 1, + pagePath: '/pages/index/index', + text: '首页', + iconPath: 'icon-shouye1', + selectedIconPath: 'icon-shouye', + }, + { + id: 2, + pagePath: '/pages/shopping/index', + text: '购物', + iconPath: 'icon-gouwu1', + selectedIconPath: 'icon-gouwu', + }, + { + id: 3, + pagePath: '/pages/order/index', + text: '订单', + iconPath: 'icon-dingdan1', + selectedIconPath: 'icon-dingdan', + }, + { + id: 4, + pagePath: '/pages/user/index', + text: '我的', + iconPath: 'icon-gerenzhongxin1', + selectedIconPath: 'icon-gerenzhongxin', + }, + ], +} + +export type TabBarData = { + selectedId: number + tabItem: TabBarIndexMap[number][] +} + +export type TabBarAction = { + type: TabBarType + data: TabBarData +} +// TabBarReducer +export default (state = INITIAL_STATE, action: TabBarAction) => { + const { type, data } = action + switch (type) { + case TabBarType.SET_SELECTED: + return { + ...state, + selectedId: data.selectedId, + } + default: + return state + } +} diff --git a/src/styles/common.scss b/src/styles/common.scss index 11655cf..9f2f08b 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -1,33 +1,44 @@ - -$color_bg_one: #F8F8F8; -$color_font_one: #3C3C3C; -$color_font_two: #ABABAB; +$color_bg_one: #f8f8f8; +$color_font_one: #3c3c3c; +$color_font_two: #ababab; $color_font_three: #707070; -$color_main: #4581FF; +$color_main: #4581ff; + +$color_danger: #e64340; +$color_warning: #e6a23c; + +$opacity-disabled: 0.3; +$borderStyle: solid; +$borderColor: #ebebeb; $font_size_big: 32px; $font_size: 28px; $font_size_medium: 24px; $font_size_min: 22px; +$customTabBarHeight: 100px; + + //安全底部距离 .common_safe_area_y { - width: 100%; - height: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ - height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ + width: 100%; + height: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ + height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } //省略号 -@mixin common_ellipsis($params:1) { - overflow: hidden; - display: -webkit-box; - white-space:normal; - text-overflow:ellipsis; - word-break:break-all; - -webkit-box-orient: vertical; - -webkit-line-clamp: $params; - - +@mixin common_ellipsis($params: 1) { + overflow: hidden; + display: -webkit-box; + white-space: normal; + text-overflow: ellipsis; + word-break: break-all; + -webkit-box-orient: vertical; + -webkit-line-clamp: $params; } +.full-100 { + width: 100%; + height: 100%; +} diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss index e08c56e..5da1113 100644 --- a/src/styles/iconfont.scss +++ b/src/styles/iconfont.scss @@ -1,8 +1,9 @@ +/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ @font-face { - font-family: "iconfont"; - /* Project id 2987621 */ - src: url('iconfont.ttf?t=1661926630273') format('truetype'); - + font-family: 'iconfont'; /* Project id 3619513 */ + src: url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.woff2?t=1662609560991') format('woff2'), + url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.woff?t=1662609560991') format('woff'), + url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.ttf?t=1662609560991') format('truetype'); } .iconfont { @@ -13,222 +14,219 @@ -moz-osx-font-smoothing: grayscale; } -.icon-A:before { - content: "\e6ea"; +.icon-yewuyuanqizi:before { + content: "\e639"; } -.icon-erweima:before { - content: "\e7b5"; +.icon-chakanquanbukehu:before { + content: "\e638"; } -.icon-xtianzhangqi:before { - content: "\e66a"; -} - -.icon-yucunkuan:before { - content: "\e66c"; -} - -.icon-a-tuikuanshouhou:before { - content: "\e65c"; -} - -.icon-yifahuo:before { - content: "\e65b"; -} - -.icon-daipeibu:before { - content: "\e662"; -} - -.icon-guanbi:before { - content: "\e641"; -} - -.icon-a-saoyisao2:before { - content: "\e613"; -} - -.icon-guanyuquse:before { - content: "\e635"; -} - -.icon-yangpinduibi:before { - content: "\e631"; -} - -.icon-lingquseka:before { - content: "\e632"; -} - -.icon-sehaochazhao:before { - content: "\e633"; -} - -.icon-jichuguanli:before { - content: "\e634"; -} - -.icon-yuncangkucun:before { - content: "\e630"; -} - -.icon-shangchuanzhaopian:before { - content: "\e62f"; -} - -.icon-zhushi:before { - content: "\e62d"; -} - -.icon-shenqingtuihuo:before { - content: "\e62e"; -} - -.icon-quxiaodingdanxiao:before { - content: "\e62c"; -} - -.icon-tuihuo1:before { - content: "\e62a"; -} - -.icon-a-fenqishangchengyifahuo:before { - content: "\e62b"; -} - -.icon-peibu:before { - content: "\e626"; -} - -.icon-dingdanbishu:before { - content: "\e627"; -} - -.icon-guanyufahuo:before { - content: "\e628"; -} - -.icon-tuihuo:before { - content: "\e629"; -} - -.icon-rili:before { - content: "\e625"; -} - -.icon-jiangpai:before { - content: "\e624"; -} - -.icon-xiaoshou:before { - content: "\e623"; -} - -.icon-cangkuguanli:before { - content: "\e61f"; -} - -.icon-zhibiaoduizhang:before { - content: "\e620"; -} - -.icon-a-tongji1:before { - content: "\e621"; -} - -.icon-shaixuan:before { - content: "\e622"; -} - -.icon-xiangxiagengduo:before { - content: "\e61e"; -} - -.icon-gongnengdingyi:before { - content: "\e61a"; -} - -.icon-rukuguanli:before { - content: "\e61b"; -} - -.icon-shenqing:before { - content: "\e61c"; -} - -.icon-kehuguanli:before { - content: "\e61d"; -} - -.icon-a-phone1:before { - content: "\e619"; -} - -.icon-a-saoyisao2:before { - content: "\e613"; -} - -.icon-ico_zhongyaofangguanli_zhongyaopandian:before { - content: "\e615"; -} - -.icon-seka:before { - content: "\e616"; -} - -.icon-xiaoshoutongji:before { - content: "\e617"; -} - -.icon-gengduo:before { - content: "\e618"; -} - -.icon-lajitong:before { - content: "\e60c"; -} - -.icon-jian:before { - content: "\e60b"; -} - -.icon-jia:before { - content: "\e60a"; -} - -.icon-a-tick1:before { - content: "\e609"; -} - -.icon-a-cuowuwrong:before { - content: "\e608"; -} - -.icon-more:before { - content: "\e606"; +.icon-biyan:before { + content: "\e637"; } .icon-bianji:before { - content: "\e607"; + content: "\e61e"; } -.icon-wode:before { - content: "\e602"; +.icon-daikuan:before { + content: "\e61f"; } -.icon-shangpinguanli:before { - content: "\e603"; +.icon-cangku:before { + content: "\e620"; } -.icon-dingdan:before { +.icon-guanlidingdan:before { + content: "\e621"; +} + +.icon-mima:before { + content: "\e622"; +} + +.icon-guanbi:before { + content: "\e623"; +} + +.icon-jianshao:before { + content: "\e624"; +} + +.icon-dingwei:before { + content: "\e625"; +} + +.icon-saomiao:before { + content: "\e626"; +} + +.icon-peihuo:before { + content: "\e627"; +} + +.icon-shaixuan:before { + content: "\e628"; +} + +.icon-paiming:before { + content: "\e629"; +} + +.icon-shanchusousuoxinxi:before { + content: "\e62a"; +} + +.icon-shijian:before { + content: "\e62b"; +} + +.icon-sousuo:before { + content: "\e62c"; +} + +.icon-shouhou:before { + content: "\e62d"; +} + +.icon-sousuofanhui:before { + content: "\e62e"; +} + +.icon-sousuoshanchu:before { + content: "\e62f"; +} + +.icon-tuikuan:before { + content: "\e630"; +} + +.icon-tishi:before { + content: "\e631"; +} + +.icon-xianxiahuizong:before { + content: "\e632"; +} + +.icon-xinzeng:before { + content: "\e633"; +} + +.icon-yonghuming:before { + content: "\e634"; +} + +.icon-yanjing:before { + content: "\e635"; +} + +.icon-yufukuan:before { + content: "\e636"; +} + +.icon-wodekefu:before { + content: "\e60c"; +} + +.icon-dizhi:before { + content: "\e60d"; +} + +.icon-shouhouzhongxin:before { + content: "\e60e"; +} + +.icon-wodeshoucang:before { + content: "\e60f"; +} + +.icon-shoukuanliebiao:before { + content: "\e610"; +} + +.icon-madanguanli:before { + content: "\e611"; +} + +.icon-qusechazhao:before { + content: "\e612"; +} + +.icon-pandiansaoma:before { + content: "\e613"; +} + +.icon-yaoqingma:before { + content: "\e614"; +} + +.icon-duizhang:before { + content: "\e615"; +} + +.icon-tihuoliebiao:before { + content: "\e616"; +} + +.icon-yangpinduibi:before { + content: "\e617"; +} + +.icon-yansequyang:before { + content: "\e618"; +} + +.icon-fahuoliebiao:before { + content: "\e619"; +} + +.icon-yuncangkucun:before { + content: "\e61a"; +} + +.icon-xiaoshou:before { + content: "\e61b"; +} + +.icon-qianzhicangkucun:before { + content: "\e61c"; +} + +.icon-lingquseka:before { + content: "\e61d"; +} + +.icon-gouwu1:before { + content: "\e608"; +} + +.icon-dingdan1:before { + content: "\e609"; +} + +.icon-gerenzhongxin1:before { + content: "\e60a"; +} + +.icon-shouye1:before { + content: "\e60b"; +} + +.icon-gerenzhongxin:before { content: "\e604"; } -.icon-fenlei:before { +.icon-dingdan:before { content: "\e605"; } -.icon-a-sousuo1:before { - content: "\e601"; -} \ No newline at end of file +.icon-shouye:before { + content: "\e606"; +} + +.icon-gouwu:before { + content: "\e607"; +} + diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf index 598c57d..baa548b 100644 Binary files a/src/styles/iconfont.ttf and b/src/styles/iconfont.ttf differ diff --git a/src/styles/image/defaultAvatar.png b/src/styles/image/defaultAvatar.png new file mode 100644 index 0000000..d55d148 Binary files /dev/null and b/src/styles/image/defaultAvatar.png differ diff --git a/src/styles/tabbar/list.png b/src/styles/tabbar/list.png deleted file mode 100644 index 4f29b95..0000000 Binary files a/src/styles/tabbar/list.png and /dev/null differ diff --git a/src/styles/tabbar/list_on.png b/src/styles/tabbar/list_on.png deleted file mode 100644 index 5d116c8..0000000 Binary files a/src/styles/tabbar/list_on.png and /dev/null differ diff --git a/src/styles/tabbar/my.png b/src/styles/tabbar/my.png deleted file mode 100644 index cff9c48..0000000 Binary files a/src/styles/tabbar/my.png and /dev/null differ diff --git a/src/styles/tabbar/my_on.png b/src/styles/tabbar/my_on.png deleted file mode 100644 index f987eb6..0000000 Binary files a/src/styles/tabbar/my_on.png and /dev/null differ diff --git a/src/styles/tabbar/order.png b/src/styles/tabbar/order.png deleted file mode 100644 index 72ea1c9..0000000 Binary files a/src/styles/tabbar/order.png and /dev/null differ diff --git a/src/styles/tabbar/order_on.png b/src/styles/tabbar/order_on.png deleted file mode 100644 index 9a32e1f..0000000 Binary files a/src/styles/tabbar/order_on.png and /dev/null differ diff --git a/yarn.lock b/yarn.lock index fffa0e0..174e4d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3514,6 +3514,13 @@ aws4@^1.8.0: resolved "https://registry.npmmirror.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== +axios@^0.19.0: + version "0.19.2" + resolved "https://registry.npmmirror.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27" + integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA== + dependencies: + follow-redirects "1.5.10" + babel-code-frame@6.26.0, babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.npmmirror.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -4800,6 +4807,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classname@^0.0.0: + version "0.0.0" + resolved "https://registry.npmmirror.com/classname/-/classname-0.0.0.tgz#43d171b484e354c7a293a5b78004df6852db20d6" + integrity sha512-kkhsspEJdUW+VhuvNzb2sQf0KbafDPfd36dB1qf03Uu42dWZwMQzaQuyNkaRr5ir0ZiAN0+TlH/EOOfwb/aaXg== + classnames@^2.2.5: version "2.3.1" resolved "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" @@ -4936,6 +4948,11 @@ colorette@^2.0.10: resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798" integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ== +colors@^1.3.3, colors@^1.4.0: + version "1.4.0" + resolved "https://registry.npmmirror.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" + integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA== + combined-stream@^1.0.6, combined-stream@~1.0.6: version "1.0.8" resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" @@ -5493,6 +5510,13 @@ debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3. dependencies: ms "2.1.2" +debug@=3.1.0, debug@~3.1.0: + version "3.1.0" + resolved "https://registry.npmmirror.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + debug@^3.0.0, debug@^3.2.6, debug@^3.2.7: version "3.2.7" resolved "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" @@ -5500,13 +5524,6 @@ debug@^3.0.0, debug@^3.2.6, debug@^3.2.7: dependencies: ms "^2.1.1" -debug@~3.1.0: - version "3.1.0" - resolved "https://registry.npmmirror.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" - integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== - dependencies: - ms "2.0.0" - debuglog@^1.0.1: version "1.0.1" resolved "https://registry.npmmirror.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" @@ -6792,6 +6809,13 @@ flatted@^2.0.0: resolved "https://registry.npmmirror.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== +follow-redirects@1.5.10: + version "1.5.10" + resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" + integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== + dependencies: + debug "=3.1.0" + follow-redirects@^1.0.0: version "1.15.1" resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5" @@ -7033,7 +7057,7 @@ glob@7.1.2: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6: +glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.2.3" resolved "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -7501,6 +7525,16 @@ human-signals@^2.1.0: resolved "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +iconfont-parser@^1.0.0: + version "1.0.0" + resolved "https://registry.npmmirror.com/iconfont-parser/-/iconfont-parser-1.0.0.tgz#1fa61be02677005a9a014653ef2eeb7503c3538a" + integrity sha512-3RJceYHEjaqYyeDdfSAb1vP1x1Eb7ZtC9Xwetj+axm85sBlJU7HMvdNLVpwm/3g5eghYOdkQK+epUITZGAIqKQ== + dependencies: + axios "^0.19.0" + colors "^1.4.0" + tslib "^1.10.0" + xml2js "^0.4.22" + iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -9023,6 +9057,20 @@ mini-css-extract-plugin@2.4.6: dependencies: schema-utils "^4.0.0" +mini-program-iconfont-cli@0.6.1: + version "0.6.1" + resolved "https://registry.npmmirror.com/mini-program-iconfont-cli/-/mini-program-iconfont-cli-0.6.1.tgz#61d08cf05bf5a51c82a75c4afcf77224e20ed06c" + integrity sha512-69FsU+tSevwmHBiL55535Hfh1q0ciRpNyYtiTBZw2bvw9lvW3N/SCTg395P0rkisWMqf1Ki9VYIWeaONvNWy2Q== + dependencies: + axios "^0.19.0" + colors "^1.3.3" + fs-extra "^8.1.0" + glob "^7.1.4" + minimist "^1.2.5" + mkdirp "^0.5.1" + tslib "^1.10.0" + xml2js "^0.4.19" + minimalistic-assert@^1.0.0: version "1.0.1" resolved "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -10610,6 +10658,19 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-iconfont-cli@2.0.2: + version "2.0.2" + resolved "https://registry.npmmirror.com/react-iconfont-cli/-/react-iconfont-cli-2.0.2.tgz#547d872e5d76796230877176e397bc6ed3337467" + integrity sha512-43NP+dsk08XwJf8oXfrDwHk1WeE76vy1Xzbd2zz7WjjxsdblF9h/oalFMPclZSibIirwsckz3L0IV+42Yu//iQ== + dependencies: + colors "^1.3.3" + glob "^7.1.4" + iconfont-parser "^1.0.0" + lodash "^4.17.15" + minimist "^1.2.5" + mkdirp "^0.5.1" + tslib "^1.10.0" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -10620,6 +10681,19 @@ react-is@^18.0.0: resolved "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-native-iconfont-cli@2.2.4: + version "2.2.4" + resolved "https://registry.npmmirror.com/react-native-iconfont-cli/-/react-native-iconfont-cli-2.2.4.tgz#9bc3b18653105950646f8e5f5fcde9f8835d76f3" + integrity sha512-qTjfHG2f/sc3/YKWZJvIJk/SwiTu8C9/SvtoLxRX+GM/6pvOJq0ge6rcV3vTh4s3QJDuNDOD6+a4hGD6vv2vSg== + dependencies: + colors "^1.3.3" + glob "^7.1.4" + iconfont-parser "^1.0.0" + lodash "^4.17.15" + minimist "^1.2.5" + mkdirp "^0.5.1" + tslib "^1.10.0" + react-reconciler@0.27.0: version "0.27.0" resolved "https://registry.npmmirror.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b" @@ -12204,6 +12278,21 @@ taro-css-to-react-native@3.3.10: css-mediaquery "^0.1.2" postcss-value-parser "^3.3.0" +taro-iconfont-cli@^3.3.0: + version "3.3.0" + resolved "https://registry.npmmirror.com/taro-iconfont-cli/-/taro-iconfont-cli-3.3.0.tgz#b4d3f83598099d84bdc61435cadf4a8a584a29d7" + integrity sha512-lkZE/zaL0J3a6ymlUp1sMBiM8krJkDh0ZsrzB5FM2IGdgQO1/4Vs7N2hzTEVZ7EZoV/6hBqL0YwzTXg4MpuJMg== + dependencies: + colors "^1.4.0" + fs-extra "^8.1.0" + iconfont-parser "^1.0.0" + mini-program-iconfont-cli "0.6.1" + minimist "^1.2.5" + mkdirp "^0.5.1" + react-iconfont-cli "2.0.2" + react-native-iconfont-cli "2.2.4" + tslib "^2.3.1" + tarojs@^2.1.1: version "2.1.1" resolved "https://registry.npmmirror.com/tarojs/-/tarojs-2.1.1.tgz#d56b50608b01de4efd6f245ecbf8cc3cd632173f" @@ -12404,7 +12493,7 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.3, tslib@^2.3.0: +tslib@^2.0.3, tslib@^2.3.0, tslib@^2.3.1: version "2.4.0" resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== @@ -13148,7 +13237,7 @@ xml-parse-from-string@^1.0.0: resolved "https://registry.npmmirror.com/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz#a9029e929d3dbcded169f3c6e28238d95a5d5a28" integrity sha512-ErcKwJTF54uRzzNMXq2X5sMIy88zJvfN2DmdoQvy7PAFJ+tPRU6ydWuOKNMyfmOjdyBQTFREi60s0Y0SyI0G0g== -xml2js@^0.4.19, xml2js@^0.4.5: +xml2js@^0.4.19, xml2js@^0.4.22, xml2js@^0.4.5: version "0.4.23" resolved "https://registry.npmmirror.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66" integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==