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

Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/spider_cloud_warehouse into 售后模块

Browse Source
This commit is contained in:
Haiyi
2022-09-21 10:17:38 +08:00
parent 6757d91a03 5ae01087ab
commit 45de2e92c0
25 changed files with 815 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SegmentedControl/index.module.scss
+21 -18
View File
@@ -1,19 +1,22 @@
.status_list{
background-color: #fff;
font-size: $font_size;
color: #000;
// margin-top: 20px;
.status_item{
padding: 20px;
box-sizing: border-box;
}
.selected{
font-weight: 700;
color: #337FFF;
border-bottom: 4px solid #337FFF;
}
.list_scroll{
white-space: nowrap;
display: flex;
}
.status_list {
display: flex;
flex-flow: row nowrap;
background-color: #fff;
font-size: $font_size;
color: #000;
// margin-top: 20px;
.status_item {
padding: 20px;
box-sizing: border-box;
}
.list_scroll {
display: flex;
justify-content: space-around;
white-space: nowrap;
}
}
.selected {
font-weight: 700;
color: #337fff;
border-bottom: 4px solid #337fff;
}
src/components/SegmentedControl/index.tsx
+14 -6
View File
@@ -3,10 +3,15 @@ import classnames from 'classnames'
import { FC, useEffect, useState } from 'react'
import styles from './index.module.scss'
type Segment = {
id: number
name: string
}
type PropsType = {
list: { id: number; name: string }[]
defaultId?: number | null
onSelect?: (val: number) => void
list: Segment[]
defaultId?: number
onSelect?: (data: {id: number, name:string}) => void
}
const segmentedControl: FC<PropsType> = (props) => {
@@ -14,9 +19,10 @@ const segmentedControl: FC<PropsType> = (props) => {
selected: -1, //当前选中的id
tabId: '', //需要滚动到的id
})
const { list, defaultId, onSelect } = props
const { list, defaultId = -1, onSelect } = props
useEffect(() => {
console.log('defaultId', defaultId)
if (typeof defaultId === 'number' && defaultId >= 0) {
console.log('defaultId:::', defaultId)
const index = list?.findIndex((item) => {
@@ -28,12 +34,13 @@ const segmentedControl: FC<PropsType> = (props) => {
}
}
setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
console.log('selectInfo', selectInfo)
}, [defaultId])
const clickEvent = ({ item, index }: { item: any; index: number }) => {
const num = index > 0 ? index - 1 : 0
setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
onSelect?.(item.id)
onSelect?.(item)
}
return (
@@ -41,12 +48,13 @@ const segmentedControl: FC<PropsType> = (props) => {
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
<View className={styles.list_scroll}>
{list.map((item, index) => {
console.log('selected=+>', selectInfo.selected)
return (
<View
key={item.id}
id={`tabs_${item.id}`}
onClick={() => clickEvent({ item, index })}
className={classnames(styles.status_item, selectInfo.selected == item.id && styles.selected)}>
className={classnames(styles.status_item, selectInfo.selected === item.id ? styles.selected : '')}>
{item.name}
</View>
)
src/components/normalButton/index.module.scss
+3
View File
@@ -57,6 +57,9 @@
}
}
&--text {
display: flex;
flex-flow: row nowrap;
align-items: center;
color: currentColor;
}
// active 伪类
src/components/normalButton/index.tsx
+3 -1
View File
@@ -17,6 +17,7 @@ interface PropsType {
onClick?: Function
customClassName?: string
customStyles?: React.CSSProperties
customTextClassName?: string
}
const NormalButton: FC<PropsType> = (props) => {
@@ -31,6 +32,7 @@ const NormalButton: FC<PropsType> = (props) => {
circle = false,
customStyles = {},
customClassName = '',
customTextClassName = ''
} = props
const getClassName = () => {
const classObject = {
@@ -54,7 +56,7 @@ const NormalButton: FC<PropsType> = (props) => {
return (
<View className={classnames(styles['button'], getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
<Text className={styles['button--text']}>{children}</Text>
<View className={classnames(styles['button--text'], customTextClassName)}>{children}</View>
</View>
)
}
src/components/search/index.module.scss
+69 -62
View File
@@ -1,69 +1,76 @@
.search_main{
.search_main {
display: flex;
align-items: center;
position: relative;
width: 100%;
z-index: 0;
.icon_a_sousuo1_self {
color: $color_font_two;
}
.search_con {
position: relative;
display: flex;
align-items: center;
position: relative;
width: 100%;
z-index: 0;
.icon_a_sousuo1_self{
font-size: 37px;
color: $color_font_two;
flex: 1 1 auto;
justify-content: space-between;
.input_bar {
border-radius: 50px;
width: 100%;
height: 60px;
flex: 1 1 auto;
padding-left: 60px;
padding-right: 30px;
background: #eee;
box-sizing: border-box;
display: flex;
align-items: center;
}
.search_con{
position: relative;
display: flex;
align-items: center;
flex: 1 1 auto;
input{
font-size: 27px;
background: #eee;
width: 100%;
height: 60px;
border-radius: 50px;
padding: 0 60px;
box-sizing: border-box;
z-index:0;
&::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
font-size: 16px;
}
&::-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
font-size: 16px;
}
}
.search_closeBtn{
position: absolute;
right: 10px;
}
}
.btn{
width: 100px;
font-size: $font_size_medium;
color: $color_font_two;
display: flex;
justify-content: center;
align-items: center;
input {
flex: 1 1 auto;
font-size: 27px;
z-index: 0;
&::-webkit-input-placeholder {
/* WebKit browsers */
color: #999;
font-size: 16px;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
font-size: 16px;
}
&::-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999;
font-size: 16px;
}
}
.icon_inner{
margin-right: 20px;
position: absolute;
left: 10px;
margin-right: 0;
z-index: 10;
.search_closeBtn {
margin: 0 15px;
flex: none;
}
.icon_out{
margin-right: 10px;
}
.input_out{
padding-left: 20px !important;
}
}
.btn {
width: 100px;
font-size: $font_size_medium;
color: $color_font_two;
display: flex;
justify-content: center;
align-items: center;
}
.icon_inner {
margin-right: 20px;
position: absolute;
left: 10px;
margin-right: 0;
z-index: 10;
}
.icon_out {
margin-right: 10px;
}
.input_out {
padding-left: 20px !important;
}
}
src/components/search/index.tsx
+93 -87
View File
@@ -1,110 +1,116 @@
import { Input, View } from "@tarojs/components";
import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import classnames from "classnames";
import { debounce } from "@/common/util";
import { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from "react";
import { Input, View } from '@tarojs/components'
import styles from './index.module.scss'
import CloseBtn from '@/components/closeBtn'
import classnames from 'classnames'
import { debounce } from '@/common/util'
import { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from 'react'
import IconFont from '../iconfont/iconfont'
type Params = {
clickOnSearch?: (val: string) => void
disabled?: false | true,
placeholder?: string,
changeOnSearch?: (any) => void,
showIcon?: false | true,
placeIcon?: 'out' | 'inner',
style?: Object,
showBtn?: false | true,
btnStyle?: Object,
btnTitle?: string,
debounceTime?: number //防抖时间，不设默认为零
defaultValue?: string,
children?: ReactNode,
customRightSlot?: ReactNode
clickOnSearch?: (val: string) => void
disabled?: false | true
placeholder?: string
changeOnSearch?: (value: string) => void
showIcon?: false | true
placeIcon?: 'out' | 'inner'
style?: Object
showBtn?: false | true
btnStyle?: Object
btnTitle?: string
debounceTime?: number //防抖时间，不设默认为零
defaultValue?: string
children?: ReactNode
customRightSlot?: ReactNode
}
export default memo(forwardRef(({
clickOnSearch, //点击筛选按钮触发
changeOnSearch, //输入文字触发
disabled = false, //是否禁用
placeholder = '输入搜索内容',
showIcon = true, //是否显示关闭图标
showBtn = false, //是否显示搜索按钮
btnStyle = {},
placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间，不设默认为零
defaultValue = '',//默认值
children,
customRightSlot
}: Params, ref) => {
const [inputCon, setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
export default memo(
forwardRef(
(
{
clickOnSearch, //点击筛选按钮触发
changeOnSearch, //输入文字触发
disabled = false, //是否禁用
placeholder = '输入搜索内容',
showIcon = true, //是否显示关闭图标
showBtn = false, //是否显示搜索按钮
btnStyle = {},
placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间，不设默认为零
defaultValue = '', //默认值
children,
customRightSlot,
}: Params,
ref,
) => {
const [inputCon, setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
setInputCon(defaultValue)
}, [defaultValue])
}, [defaultValue])
useEffect(() => {
useEffect(() => {
debounceTimeRef.current = debounceTime
}, [debounceTime])
}, [debounceTime])
const onInputEven = (e) => {
const onInputEven = (e) => {
const value = e.detail.value
changeData(value)
}
}
useImperativeHandle(ref, () => ({
clearInput
}))
useImperativeHandle(ref, () => ({
clearInput,
}))
const clearInput = () => {
const clearInput = () => {
setInputCon('')
changeOnSearch?.('')
}
}
const changeData = debounce((value) => {
const changeData = debounce((value) => {
setInputCon(value)
changeOnSearch?.(value)
}, debounceTimeRef.current)
}, debounceTimeRef.current)
const onSearch = () => {
const onSearch = () => {
clickOnSearch?.(inputCon)
}
}
return (
<>
<View className={styles.search_main}>
<View className={styles.search_con}>
{showIcon && (
<View
className={classnames(
'iconfont',
'icon-sousuo',
styles.icon_a_sousuo1_self,
placeIcon == 'inner' ? styles.icon_inner : styles.icon_out,
)}></View>
)}
<Input
placeholderStyle='color:#ABABAB; font-size:26rpx'
onConfirm={onSearch}
className={classnames(placeIcon == 'out' && styles.input_out)}
disabled={disabled}
value={inputCon}
placeholder={placeholder}
onInput={(e) => onInputEven(e)}></Input>
{!!inputCon && (
<View className={styles.search_closeBtn}>
<CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
return (
<>
<View className={styles.search_main}>
<View className={styles.search_con}>
{showIcon && (
<IconFont
name='icon-sousuo'
size={37}
customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></IconFont>
)}
<View className={styles.input_bar}>
<Input
placeholderStyle='color:#ABABAB; font-size:26rpx'
onConfirm={onSearch}
className={classnames(placeIcon == 'out' && styles.input_out)}
disabled={disabled}
value={inputCon}
placeholder={placeholder}
onInput={(e) => onInputEven(e)}
/>
<View className={styles.search_closeBtn}>
{!!inputCon && <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />}
</View>
<View>{customRightSlot}</View>
</View>
</View>
{showBtn && (
<View style={btnStyle} className={styles.btn} onClick={onSearch}>
{btnTitle}
</View>
)}
{customRightSlot}
{children}
</View>
{showBtn && (
<View style={btnStyle} className={styles.btn} onClick={onSearch}>
{btnTitle}
</View>
)}
{children}
</View>
</>
)
}))
</>
)
},
),
)
src/components/tag/index.tsx
+13 -2
View File
@@ -15,10 +15,21 @@ interface PropsType {
onClick?: Function
circle?: boolean
customStyle?: React.CSSProperties
customClassName?: string
}
const Tag: FC<PropsType> = (props) => {
const { type = 'primary', size = 'normal', disabled = false, children, onClick, circle = false, customStyle = {}, plain = false } = props
const {
type = 'primary',
size = 'normal',
disabled = false,
children,
onClick,
circle = false,
customStyle = {},
plain = false,
customClassName = '',
} = props
const handleClick = (event) => {
if (disabled) {
return
@@ -37,7 +48,7 @@ const Tag: FC<PropsType> = (props) => {
return classObject
}
return (
<View className={classnames(styles.tag, getClassName())} style={customStyle} onClick={handleClick}>
<View className={classnames(styles.tag, getClassName(), customClassName)} style={customStyle} onClick={handleClick}>
<Text className={styles['tag--text']}>{children}</Text>
</View>
)