xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(购物页面): 购物页面UI完成度80%

Browse Source
This commit is contained in:
xuan
2022-09-15 20:01:04 +08:00
parent fee33aec38
commit b4663f8507
29 changed files with 501 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/checkbox/index.module.scss
+2
View File
@@ -7,6 +7,7 @@
}
}
.checkbox_main {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
@@ -14,6 +15,7 @@
background-color: #fff;
border: 1px solid #c2c2c2;
text-align: center;
overflow: hidden;
line-height: 40px;
&--normal {
width: 40px;
src/components/checkbox/index.tsx
+28 -3
View File
@@ -11,15 +11,30 @@ type params = {
onClose?: () => void //取消触发
status?: boolean //是否选中
disabled?: boolean //是否禁用
triggerLabel?: boolean // 点击label是否触发选中
circle?: boolean
round?: boolean
size?: CheckboxSize
children?: React.ReactNode
customStyles?: React.CSSProperties
customClassName?: string
customTextClass?: string
}
export default forwardRef((props: params, ref) => {
const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal', children, customStyles, customClassName } = props
const {
onSelect,
onClose,
status = false,
disabled = false,
circle = false,
round = true,
triggerLabel = true,
size = 'normal',
children,
customStyles = {},
customClassName = '',
customTextClass = '',
} = props
const [selected, SetSelected] = useState(false)
const onSelectEven = () => {
if (disabled) return false
@@ -32,6 +47,12 @@ export default forwardRef((props: params, ref) => {
SetSelected(res)
}
const handleClickChildren = (event) => {
if (!triggerLabel){
return event.stopPropagation()
}
}
const getMainClassName = () => {
const classObject = {
[styles['checkbox_main--selected']]: selected,
@@ -57,13 +78,17 @@ export default forwardRef((props: params, ref) => {
SetSelected(status)
}, [status])
return (
<View className={classnames(customClassName, styles.checkbox)} onClick={() => onSelectEven()} style={customStyles}>
<View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
<View className={classnames(styles.checkbox_main, getMainClassName())}>
<View className={classnames(styles.checkbox_item, getClassName())}>
{selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
</View>
</View>
{children && <View className={styles['checkbox--text']}>{children}</View>}
{children && (
<View className={classnames(styles['checkbox--text'], customTextClass)} onClick={handleClickChildren}>
{children}
</View>
)}
</View>
)
})
src/components/counter/index1.module.scss
-37
View File
@@ -1,37 +0,0 @@
.main{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.reduce, .plus{
font-size: $font_size_big;
color: $color_main;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content:center;
font-size: 50px;
background-color: $color_main;
color: #fff;
border-radius: 8px;
}
.input{
display: flex;
align-items: flex-end;
background-color: #fff;
padding: 5px 10px;
box-sizing: border-box;
width: 106px;
border-radius: 10px;
}
input{
font-size: $font_size_medium;
}
.unit{
font-size: $font_size_min;
color: $color_font_two;
}
}
src/components/counter/index1.tsx
-111
View File
@@ -1,111 +0,0 @@
import { Input, View } from "@tarojs/components"
import { useEffect, useMemo, useRef, useState } from "react"
import Big from 'big.js'
import styles from "./index.module.scss"
type params = {
minNum?: number, //最小值
maxNum?: number, //最大值
step?: number, //步长
defaultNum?: number, //默认值
digits?: number //多少位小数
onChange?:(val:number) => void,
onBlue?:(val:number) => void, //失去焦点触发
onClickBtn?:(val:number) => void,
unit?: string
}
export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = () => {
let {count} = value
let num_res = Big(count).add(step).toNumber()
num_res = num_res >= maxNum?maxNum:num_res
num_res = formatDigits(num_res)
setValue({...value, count:num_res})
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))
}
const minus = () => {
let {count} = value
let num_res = Big(count).minus(step).toNumber()
num_res = num_res < minNum?0:num_res
setValue({...value, count:num_res})
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))
}
//保留小数
const formatDigits = (num) => {
num = num + ''
if(num.includes('.')&&digits > 0) {
console.log('num::',num.includes('.'))
let res = num.split('.')
let last_num = res[1].substr(0, digits)
return res[0] + '.' + last_num
}
return parseFloat(num)
}
//检查数据
const checkData = (val) => {
let num = parseFloat(val)
if(num > maxNum) return maxNum
if(num < minNum) return minNum
return val
}
const onInputEven = (e) => {
let res = e.detail.value
if(res === '') {
setValue({...value, count:minNum})
onChange?.(minNum)
}
else if(!isNaN(Number(res))) {
let count = formatDigits(res)
count = checkData(count)
setValue({...value, count})
onChange?.(parseFloat(count as string))
} else {
let num = parseFloat(res)
if(!isNaN(num)) {
let count = formatDigits(num)
count = checkData(count)
setValue({...value, count})
onChange?.(count as number)
} else {
setValue({...value, count:defaultNum})
onChange?.(defaultNum)
}
}
}
const onBluerEven = () => {
let num = parseFloat(value.count)
if(!isNaN(num)) {
let count = formatDigits(num)
count = checkData(count)
setValue({...value, count})
onBlue?.(count as number)
} else {
setValue({...value, count:defaultNum})
onBlue?.(defaultNum)
}
}
return (
<View className={styles.main}>
<View className={styles.reduce} onClick={() => minus()}>-</View>
<View className={styles.input}>
<Input
value={String(value.count)}
onInput={onInputEven}
onBlur={onBluerEven}
type='digit'
/>
<View className={styles.unit}>{unit}</View>
</View>
<View className={styles.plus} onClick={() => onPlus()}>+</View>
</View>
)
}
src/components/iconfont/h5/IconShouqi.tsx
+34
View File
@@ -0,0 +1,34 @@
/* tslint:disable */
/* eslint-disable */
import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
import { getIconColor } from './helper';
interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
size?: number;
color?: string | string[];
}
const DEFAULT_STYLE: CSSProperties = {
display: 'block',
};
const IconShouqi: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
return (
<svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
<path
d="M492.586667 355.861333a27.434667 27.434667 0 0 1 36.416-2.133333l2.389333 2.133333 232.746667 232.746667a27.434667 27.434667 0 0 1-36.394667 40.917333l-2.389333-2.133333-213.397334-213.333333-213.312 213.333333c-9.941333 9.941333-25.621333 10.666667-36.394666 2.133333l-2.389334-2.133333a27.434667 27.434667 0 0 1-2.133333-36.394667l2.133333-2.389333 232.746667-232.746667z"
fill={getIconColor(color, 0, '#000000')}
opacity=".8"
/>
</svg>
);
};
IconShouqi.defaultProps = {
size: 18,
};
export default IconShouqi;
src/components/iconfont/h5/IconZhankai.tsx
+34
View File
@@ -0,0 +1,34 @@
/* tslint:disable */
/* eslint-disable */
import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
import { getIconColor } from './helper';
interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
size?: number;
color?: string | string[];
}
const DEFAULT_STYLE: CSSProperties = {
display: 'block',
};
const IconZhankai: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
return (
<svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
<path
d="M492.586667 668.138667c9.962667 9.941333 25.642667 10.666667 36.416 2.133333l2.389333-2.133333 232.746667-232.746667a27.434667 27.434667 0 0 0-36.394667-40.917333l-2.389333 2.133333-213.397334 213.333333-213.312-213.333333a27.434667 27.434667 0 0 0-36.394666-2.133333l-2.389334 2.133333a27.434667 27.434667 0 0 0-2.133333 36.394667l2.133333 2.389333 232.746667 232.746667z"
fill={getIconColor(color, 0, '#000000')}
opacity=".8"
/>
</svg>
);
};
IconZhankai.defaultProps = {
size: 18,
};
export default IconZhankai;
src/components/iconfont/h5/index.tsx
+9 -1
View File
@@ -2,6 +2,8 @@
/* eslint-disable */
import React, { SVGAttributes, FunctionComponent } from 'react';
import IconZhankai from './IconZhankai';
import IconShouqi from './IconShouqi';
import IconLujing from './IconLujing';
import IconJizhumima from './IconJizhumima';
import IconAJizhumima from './IconAJizhumima';
@@ -61,6 +63,8 @@ import IconGerenzhongxin from './IconGerenzhongxin';
import IconDingdan from './IconDingdan';
import IconShouye from './IconShouye';
import IconGouwu from './IconGouwu';
export { default as IconZhankai } from './IconZhankai';
export { default as IconShouqi } from './IconShouqi';
export { default as IconLujing } from './IconLujing';
export { default as IconJizhumima } from './IconJizhumima';
export { default as IconAJizhumima } from './IconAJizhumima';
@@ -121,7 +125,7 @@ export { default as IconDingdan } from './IconDingdan';
export { default as IconShouye } from './IconShouye';
export { default as IconGouwu } from './IconGouwu';
export type IconNames = 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
export type IconNames = 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
name: IconNames;
@@ -131,6 +135,10 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
const IconFont: FunctionComponent<Props> = ({ name, ...rest }) => {
switch (name) {
case 'icon-zhankai':
return <IconZhankai {...rest} />;
case 'icon-shouqi':
return <IconShouqi {...rest} />;
case 'icon-lujing':
return <IconLujing {...rest} />;
case 'icon-jizhumima':
src/components/iconfont/index.h5.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import React, { FunctionComponent } from 'react';
import Taro from '@tarojs/taro';
import Icon from './h5';
export type IconNames = 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
export type IconNames = 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
interface Props {
name: IconNames;
src/components/iconfont/index.tsx
+1 -1
View File
@@ -3,7 +3,7 @@
import React, { FunctionComponent } from 'react';
export type IconNames = 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
export type IconNames = 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
export interface IconProps {
name: IconNames;
src/components/iconfont/index.weapp.tsx
+1 -1
View File
@@ -4,7 +4,7 @@
import React, { FunctionComponent } from 'react';
import Taro from '@tarojs/taro';
export type IconNames = 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
export type IconNames = 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | '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';
interface Props {
name: IconNames;
src/components/iconfont/weapp/weapp.js
+1 -1
View File
@@ -1,6 +1,6 @@
Component({
properties: {
// icon-lujing | icon-jizhumima | icon-a-jizhumima | icon-weixindenglu | icon-kehuxinxi | icon-yewuyuanqizi | icon-chakanquanbukehu | icon-biyan | icon-bianji | icon-daikuan | icon-cangku | icon-guanlidingdan | icon-mima | icon-guanbi | icon-jianshao | icon-dingwei | icon-saomiao | icon-peihuo | icon-shaixuan | icon-paiming | icon-shanchusousuoxinxi | icon-shijian | icon-sousuo | icon-shouhou | icon-sousuofanhui | icon-sousuoshanchu | icon-tuikuan | icon-tishi | icon-xianxiahuizong | icon-xinzeng | icon-yonghuming | icon-yanjing | icon-yufukuan | 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
// icon-zhankai | icon-shouqi | icon-lujing | icon-jizhumima | icon-a-jizhumima | icon-weixindenglu | icon-kehuxinxi | icon-yewuyuanqizi | icon-chakanquanbukehu | icon-biyan | icon-bianji | icon-daikuan | icon-cangku | icon-guanlidingdan | icon-mima | icon-guanbi | icon-jianshao | icon-dingwei | icon-saomiao | icon-peihuo | icon-shaixuan | icon-paiming | icon-shanchusousuoxinxi | icon-shijian | icon-sousuo | icon-shouhou | icon-sousuofanhui | icon-sousuoshanchu | icon-tuikuan | icon-tishi | icon-xianxiahuizong | icon-xinzeng | icon-yonghuming | icon-yanjing | icon-yufukuan | 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,
},
src/components/iconfont/weapp/weapp.wxml
+6
View File
@@ -1,3 +1,9 @@
<!--icon-zhankai-->
<view wx:if="{{name === 'icon-zhankai'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M492.586667 668.138667c9.962667 9.941333 25.642667 10.666667 36.416 2.133333l2.389333-2.133333 232.746667-232.746667a27.434667 27.434667 0 0 0-36.394667-40.917333l-2.389333 2.133333-213.397334 213.333333-213.312-213.333333a27.434667 27.434667 0 0 0-36.394666-2.133333l-2.389334 2.133333a27.434667 27.434667 0 0 0-2.133333 36.394667l2.133333 2.389333 232.746667 232.746667z' fill='{{(isStr ? colors : colors[0]) || 'rgb(0,0,0)'}}' opacity='.8' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--icon-shouqi-->
<view wx:if="{{name === 'icon-shouqi'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M492.586667 355.861333a27.434667 27.434667 0 0 1 36.416-2.133333l2.389333 2.133333 232.746667 232.746667a27.434667 27.434667 0 0 1-36.394667 40.917333l-2.389333-2.133333-213.397334-213.333333-213.312 213.333333c-9.941333 9.941333-25.621333 10.666667-36.394666 2.133333l-2.389334-2.133333a27.434667 27.434667 0 0 1-2.133333-36.394667l2.133333-2.389333 232.746667-232.746667z' fill='{{(isStr ? colors : colors[0]) || 'rgb(0,0,0)'}}' opacity='.8' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--icon-lujing-->
<view wx:if="{{name === 'icon-lujing'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1450 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M495.06688 1024a44.672 44.672 0 0 1-31.786667-13.653333L12.080213 549.461333a48.298667 48.298667 0 0 1 0.938667-64.938666 44.373333 44.373333 0 0 1 62.72-2.133334l419.328 428.373334L1375.877547 11.093333a44.330667 44.330667 0 0 1 61.696 2.944c16.682667 17.493333 17.493333 45.354667 1.962666 63.914667l-912.64 931.669333c-8.362667 8.96-19.797333 14.122667-31.829333 14.378667z' fill='{{(isStr ? colors : colors[0]) || 'rgb(64,92,135)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
src/components/tag/index.module.scss
+21 -5
View File
@@ -7,6 +7,7 @@
text-align: center;
justify-content: center;
align-items: center;
box-sizing: border-box;
&--normal {
font-size: $font_size_medium;
height: 40px;
@@ -18,18 +19,33 @@
&--circle{
border-radius: 10px;
}
&--danger {
background-color: $color_danger;
border: 1px solid $color_danger;
color: $color_danger;
}
&--primary{
background-color: $color_main;
border: 1px solid $color_main;
color: $color_main;
}
&--warning{
background-color: $color_warning;
border: 1px solid $color_warning;
color: $color_warning;
}
&--info{
background-color: $color_info;
color: rgba($color: #333333, $alpha: 0.8);
border: 1px solid $color_info;
color: $color_info;
.tag--text {
color: rgba($color: #333333, $alpha: 0.8) !important;
}
}
&--plain {
background-color: currentColor;
border-color: currentColor;
border: unset;
.tag--text {
color: #ffffff;
}
}
&--disabled {
opacity: $opacity-disabled;
src/components/tag/index.tsx
+2 -3
View File
@@ -1,4 +1,4 @@
import { View } from '@tarojs/components'
import { View, Text } from '@tarojs/components'
import { FC, ReactNode } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
@@ -34,12 +34,11 @@ const Tag: FC<PropsType> = (props) => {
[styles['tag--plain']]: plain,
[styles['tag--circle']]: circle,
}
console.log('classObj==>', classObject)
return classObject
}
return (
<View className={classnames(styles.tag, getClassName())} style={customStyle} onClick={handleClick}>
{children}
<Text className={styles['tag--text']}>{children}</Text>
</View>
)
}