✨ feat(颜色取样): 新增颜色取样模块
This commit is contained in:
xuan
@@ -1,82 +1,48 @@
|
||||
.select_input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select_input{
|
||||
width: 100%;
|
||||
.input_type {
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
@include common_ellipsis();
|
||||
max-width: 430px;
|
||||
}
|
||||
.stock_ipnut_des{
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
padding: 20rpx 0 10rpx 10rpx !important;
|
||||
.con_input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.label{
|
||||
width: 120px;
|
||||
font-size: 27px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
color: #707070;
|
||||
font-weight: 700;
|
||||
border-right: 2px solid #F3F3F3 ;
|
||||
}
|
||||
.input_con{
|
||||
flex:1;
|
||||
}
|
||||
.input_type{
|
||||
padding-left: 50px;
|
||||
font-size: 28px;
|
||||
@include common_ellipsis();
|
||||
max-width: 430px;
|
||||
}
|
||||
.noCon{
|
||||
color: #cccccc;
|
||||
}
|
||||
.iconfont{
|
||||
color: #cccccc;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.noCon {
|
||||
color: #cccccc;
|
||||
}
|
||||
.stock_disabled{
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
.label{
|
||||
color: #cccccc !important;
|
||||
}
|
||||
.stock_disabled {
|
||||
background: #f7f7f7;
|
||||
border-radius: 10px;
|
||||
.label {
|
||||
color: #cccccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
top:0;
|
||||
position:fixed;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
.selectCon{
|
||||
width:100%;
|
||||
.selectInput{
|
||||
width:100%;
|
||||
padding: 0 20px 20px 20px;
|
||||
border-bottom: 2px solid #F3F3F3;
|
||||
box-sizing: border-box;
|
||||
|
||||
.selectList {
|
||||
.selectList-scroll-view {
|
||||
padding-top: 22px;
|
||||
height: 50vh;
|
||||
.selectItem {
|
||||
font-size: 28px;
|
||||
color: #707070;
|
||||
padding: 22px 30px;
|
||||
}
|
||||
.selectList{
|
||||
.selectList-scroll-view{
|
||||
height: 600px;
|
||||
padding-top: 22px;
|
||||
.selectItem{
|
||||
font-size: 28px;
|
||||
color: #707070;
|
||||
padding: 22px 30px;
|
||||
}
|
||||
.selected{
|
||||
color: #3287EC;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.selected {
|
||||
color: #3287ec;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flexBox {
|
||||
display: flex;
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import styles from './index.module.scss'
|
||||
import { Image, Text, ScrollView, View } from '@tarojs/components'
|
||||
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Image, Text, ScrollView, View, RootPortal } from '@tarojs/components'
|
||||
import React, { FC, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import Search from '../search'
|
||||
import Popup from '../popup'
|
||||
import { SelectProductListApi } from '@/api/index'
|
||||
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import { formatHashTag } from '@/common/format'
|
||||
import SearchInput from '../searchInput'
|
||||
|
||||
type PropsType = {
|
||||
selectColorId: number
|
||||
@@ -14,35 +16,51 @@ type PropsType = {
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const SelectProduct:FC<PropsType> = (params) => {
|
||||
type productType = {
|
||||
code?: string
|
||||
default?: boolean
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
const SelectProduct = forwardRef((params: PropsType, ref) => {
|
||||
const { selectColorId, noAll, onSelect } = params
|
||||
|
||||
const [selectId, setSelectId] = useState(0)
|
||||
const [selectId, setSelectId] = useState(selectColorId)
|
||||
|
||||
useEffect(()=>{
|
||||
setSelectId(selectColorId)
|
||||
}, [selectColorId])
|
||||
|
||||
const {fetchData, state} = SelectProductListApi()
|
||||
const { fetchData } = SelectProductListApi()
|
||||
|
||||
const [selectValue, setSelectValue] = useState()
|
||||
|
||||
const [productList, setProductList] = useState([{id:1}])
|
||||
const [productList, setProductList] = useState<productType[]>([])
|
||||
|
||||
const clickEvent = () => {}
|
||||
const clickEvent = () => {
|
||||
setShowPopup(true)
|
||||
}
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
clickEvent,
|
||||
}),
|
||||
[clickEvent],
|
||||
)
|
||||
const originList = useRef<productType[]>([])
|
||||
|
||||
const getSelectData = (item) => {
|
||||
const getSelectData = item => {
|
||||
setSelectId(item.id)
|
||||
setSelectValue(changeName(item))
|
||||
setShowPopup(false)
|
||||
onSelect && onSelect(item)
|
||||
}
|
||||
|
||||
const changeName = (item) => {
|
||||
if (item.id) {
|
||||
return item.code.includes('#') ? item.code + ' ' + item.name : item.code + '# ' + item.name
|
||||
} else {
|
||||
return item.name
|
||||
const changeName = item => {
|
||||
console.log('changeName', item)
|
||||
if (item) {
|
||||
if (item.id) {
|
||||
return formatHashTag(item.code, item.name)
|
||||
} else {
|
||||
return item.name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,54 +70,60 @@ const SelectProduct:FC<PropsType> = (params) => {
|
||||
|
||||
const getProductList = async () => {
|
||||
let res = await fetchData()
|
||||
!noAll && res.data.list?.unshift({ name: '全部', id: 0 })
|
||||
setProductList(res.data.list)
|
||||
// !noAll && res.data.list?.unshift({ name: '全部', id: 0 })
|
||||
!noAll && setProductList([{ name: '全部', id: 0 }, ...res.data.list])
|
||||
originList.current = [{ name: '全部', id: 0 }, ...res.data.list]
|
||||
}
|
||||
|
||||
|
||||
const list = useMemo(() => {
|
||||
console.log('state', state)
|
||||
return state.data.list || [{ id: 1 }]
|
||||
}, [productList])
|
||||
|
||||
const [showPopup, setShowPopup] = useState(false)
|
||||
|
||||
const closeEven = () => {}
|
||||
const closeEven = () => {
|
||||
setShowPopup(false)
|
||||
}
|
||||
|
||||
//输入了搜索关键字
|
||||
const getSearchData = useCallback((e) => {
|
||||
// pageNum.current.page = 1
|
||||
// setOrderData(() => ({ list: [], total: 0 }))
|
||||
// setSearchField((val) => ({ ...val, name: e, size: 10 }))
|
||||
}, [])
|
||||
const getSearchData = useCallback(
|
||||
async value => {
|
||||
console.log('e==>', value)
|
||||
if (value === '') {
|
||||
setProductList([...originList.current])
|
||||
} else {
|
||||
const res = await fetchData({
|
||||
code_or_name: value,
|
||||
})
|
||||
if (res.success) {
|
||||
setProductList(res.data.list)
|
||||
}
|
||||
}
|
||||
},
|
||||
[originList],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setSelectId(selectColorId)
|
||||
const res = productList.find((item) => item.id == selectColorId)
|
||||
const res = productList.find(item => item.id == selectColorId)
|
||||
setSelectValue(changeName(res))
|
||||
}, [selectColorId])
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.select_input}>
|
||||
<View className={styles.stock_ipnut_des} onClick={clickEvent}>
|
||||
<View className={styles.con_input}>
|
||||
<View className={styles.label}>面料名称</View>
|
||||
<View className={styles.input_con}>
|
||||
<View className={classnames(styles.input_type, selectValue ? '' : 'noCon')}>{selectValue ? selectValue : '请选择'}</View>
|
||||
</View>
|
||||
<Text className='iconfont icon-more'></Text>
|
||||
<SearchInput title='面料名称' showIcon={true} showBorder={false}>
|
||||
<View onClick={clickEvent} className={classnames(styles.input_type, selectValue ? '' : 'noCon')}>
|
||||
{selectValue ? selectValue : '请选择'}
|
||||
</View>
|
||||
</View>
|
||||
</SearchInput>
|
||||
</View>
|
||||
<Popup title='请选择面料名称' showTitle show={showPopup} onClose={closeEven}>
|
||||
<Search placeholder='请输入编号/面料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}></Search>
|
||||
<View className='selectList'>
|
||||
<ScrollView className={styles['selectList-scroll-View']} scrollY>
|
||||
{list.map((item) => {
|
||||
<Popup title='请选择面料名称' showTitle show={showPopup} onClose={closeEven} position='bottom' customStyle={{ zIndex: 9999 }}>
|
||||
<View style={{padding: '0 24rpx'}}>
|
||||
<Search placeholder='请输入编号/面料' showBtn={false} changeOnSearch={getSearchData} debounceTime={350}></Search>
|
||||
</View>
|
||||
<View className={styles.selectList}>
|
||||
<ScrollView className={styles['selectList-scroll-view']} scrollY>
|
||||
{productList.map(item => {
|
||||
return (
|
||||
<View key={item.id} className={classnames(styles.selectItem, selectId == item.id ? styles.selected : '')} onClick={() => getSelectData(item)}>
|
||||
{/* {changeName(item)} */}
|
||||
{changeName(item)}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
@@ -108,5 +132,5 @@ const SelectProduct:FC<PropsType> = (params) => {
|
||||
</Popup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default SelectProduct
|
||||
|
||||
Reference in New Issue
Block a user