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

✨ feat(购物界面): 完成购物界面50%

Browse Source
This commit is contained in:
xuan
2022-09-15 19:59:19 +08:00
parent 8472f4c14b
commit fee33aec38
124 changed files with 1939 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Divider/index.tsx
+4 -3
View File
@@ -8,7 +8,7 @@
*/
import { View } from '@tarojs/components'
import { FC, ReactNode } from 'react'
import React, { FC, ReactNode } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
@@ -20,9 +20,10 @@ interface DividerProps {
contentPosition?: 'left' | 'center' | 'right'
children?: ReactNode
customClassName?: string
customStyles?: React.CSSProperties
}
const Divider: FC<DividerProps> = (props) => {
const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName='' } = props
const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName = '', customStyles = {} } = props
const classname = classnames(styles['divider'], styles['divider-' + direction], customClassName)
const contentClassname = classnames(styles['divider-text'], styles['is-' + contentPosition])
@@ -37,7 +38,7 @@ const Divider: FC<DividerProps> = (props) => {
const dividerStyle = direction === 'horizontal' ? borderTopStyle : borderLeftStyle
return (
<View className={classname} style={dividerStyle}>
<View className={classname} style={{ ...dividerStyle, ...customStyles }}>
{props.children && direction !== 'vertical' && <View className={contentClassname}>{props.children}</View>}
</View>
)
src/components/checkbox/index.module.scss
+1
View File
@@ -2,6 +2,7 @@
display: flex;
align-items: center;
&--text {
color: currentColor;
margin-left: 10px;
}
}
src/components/checkbox/index.tsx
+5 -3
View File
@@ -1,6 +1,6 @@
import { View } from '@tarojs/components'
import classnames from 'classnames'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import IconFont from '../iconfont'
import styles from './index.module.scss'
@@ -15,9 +15,11 @@ type params = {
round?: boolean
size?: CheckboxSize
children?: React.ReactNode
customStyles?: React.CSSProperties
customClassName?: string
}
export default forwardRef((props: params, ref) => {
const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal', children } = props
const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal', children, customStyles, customClassName } = props
const [selected, SetSelected] = useState(false)
const onSelectEven = () => {
if (disabled) return false
@@ -55,7 +57,7 @@ export default forwardRef((props: params, ref) => {
SetSelected(status)
}, [status])
return (
<View className={styles.checkbox} onClick={() => onSelectEven()}>
<View className={classnames(customClassName, styles.checkbox)} onClick={() => onSelectEven()} style={customStyles}>
<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>}
src/components/iconText/index.module.scss
+9
View File
@@ -0,0 +1,9 @@
.iconText{
display: flex;
flex-flow: row nowrap;
align-items: center;
font-size: 28px;
.iconfont{
font-size: 40px;
}
}
src/components/iconText/index.tsx
+29
View File
@@ -0,0 +1,29 @@
import { FC } from "react"
import { View, Text } from '@tarojs/components'
import IconFont from '../iconfont'
import styles from './index.module.scss'
import classnames from 'classnames'
type IconfontName = Parameters<typeof IconFont>['0']['name']
type PropsType = {
iconName: IconfontName
iconSize?: number
svg?: boolean
text?: string
children?: React.ReactNode
customClass?: string
customStyle?: React.CSSProperties
textClassName?: string
}
const IconText: FC<PropsType> = (props) => {
const { children, svg = false, iconName, iconSize = 40, text = '' } = props
return (
<View className={classnames(styles.iconText, props.customStyle, props.customClass)}>
{svg ? <IconFont name={iconName} size={iconSize}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>}
{children ? children : <Text className={classnames(props.textClassName)}>{text}</Text>}
</View>
)
}
export default IconText
src/components/layoutBlock/index.tsx
+7 -7
View File
@@ -11,11 +11,11 @@ interface PropsType {
circle?: boolean
children?: ReactNode
customStyle?: React.CSSProperties
customClassName?: string
}
const LayoutBlock: FC<PropsType> = (props) => {
const { flexDirection = 'col', circle = false, children } = props
const { flexDirection = 'col', circle = false, children, customStyle = {}, customClassName='' } = props
const getClassName = () => {
const classObject = {
@@ -25,10 +25,10 @@ const LayoutBlock: FC<PropsType> = (props) => {
return classObject
}
return <View className={classnames(styles.layoutBlock, getClassName())}>
{children}
</View>
return (
<View className={classnames(styles.layoutBlock, getClassName(), customClassName)} style={customStyle}>
{children}
</View>
)
}
export default LayoutBlock
src/components/normalButton/index.module.scss
+10
View File
@@ -37,6 +37,12 @@
color: $color_warning;
$current_color: $color_warning;
}
&--info {
border: 1px solid $color_info;
color: $color_info;
$current_color: $color_info;
}
&--round {
border-radius: 50px;
}
@@ -66,4 +72,8 @@
background-color: rgba($color: $color_warning, $alpha: 0.5);
color: #fff;
}
&--info:active {
background-color: rgba($color: $color_info, $alpha: 0.5);
color: #fff;
}
}
src/components/normalButton/index.tsx
+6 -5
View File
@@ -3,16 +3,16 @@ import { FC, ReactNode } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
type ButtonType = 'primary' | 'danger' | 'warning'
type ButtonType = 'primary' | 'danger' | 'warning' | 'info'
type ButtonSize = 'normal' | 'small'
interface PropsType {
size?: ButtonSize
type?: ButtonType
round?: boolean
round?: boolean // 大圆角
disabled?: boolean
plain?: boolean
circle?: boolean
plain?: boolean // 填满背景颜色
circle?: boolean // 小圆角
children?: ReactNode
onClick?: Function
customClassName?: string
@@ -51,8 +51,9 @@ const NormalButton: FC<PropsType> = (props) => {
onClick && onClick(event)
}
return (
<View className={classnames(styles['button'], getClassName(), customStyles, customClassName)} onClick={handleClick}>
<View className={classnames(styles['button'], getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
<Text className={styles['button--text']}>{children}</Text>
</View>
)
src/components/tag/index.module.scss
+4
View File
@@ -27,6 +27,10 @@
&--warning{
background-color: $color_warning;
}
&--info{
background-color: $color_info;
color: rgba($color: #333333, $alpha: 0.8);
}
&--disabled {
opacity: $opacity-disabled;
}
src/components/tag/index.tsx
+5 -2
View File
@@ -4,10 +4,11 @@ import classnames from 'classnames'
import styles from './index.module.scss'
type TagSize = 'small' | 'normal'
type TagType = 'primary' | 'danger' | 'warning'
type TagType = 'primary' | 'danger' | 'warning' | 'info'
interface PropsType {
type?: TagType
plain?: boolean
disabled?: boolean
size?: TagSize
children?: ReactNode
@@ -16,7 +17,8 @@ interface PropsType {
customStyle?: React.CSSProperties
}
const Tag: FC<PropsType> = ({ type = 'primary', size = 'normal', disabled = false, children, onClick, circle = false, customStyle = {} }) => {
const Tag: FC<PropsType> = (props) => {
const { type = 'primary', size = 'normal', disabled = false, children, onClick, circle = false, customStyle = {}, plain = false } = props
const handleClick = (event) => {
if (disabled) {
return
@@ -29,6 +31,7 @@ const Tag: FC<PropsType> = ({ type = 'primary', size = 'normal', disabled = fals
[styles['tag--disabled']]: disabled,
[styles[`tag--${size}`]]: size,
[styles[`tag--${type}`]]: type,
[styles['tag--plain']]: plain,
[styles['tag--circle']]: circle,
}
console.log('classObj==>', classObject)