✨ feat(ID1000873): 商城用户剪样（A4）
【商城用户剪样（A4）】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000873
This commit is contained in:
xuan
@@ -0,0 +1,35 @@
|
||||
.labAndImg_main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// border: 1px #eee solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.boxColor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
// border: 1px solid #818181;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.labAndImg_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.labAndImg_name {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
border-radius: 50px;
|
||||
padding: 7px;
|
||||
background-color: #fff;
|
||||
@include common_ellipsis;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { Image, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import LabAndImgShow from '../LabAndImgShow'
|
||||
import styles from './index.module.scss'
|
||||
import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
|
||||
|
||||
// 该组件宽高为100%需调整外层元素宽高
|
||||
interface Param {
|
||||
value: {
|
||||
texture_url?: string // 纹理图路径
|
||||
lab?: { l: number; a: number; b: number } // lab
|
||||
rgb?: { r: number; g: number; b: number } // rgb
|
||||
title?: string
|
||||
}
|
||||
customImageStyle?: React.CSSProperties
|
||||
showStatus?: true | false
|
||||
onClick?: (val: Param['value']) => void
|
||||
round?: boolean
|
||||
name?: string
|
||||
}
|
||||
const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '', customImageStyle = {} }: Param) => {
|
||||
const [imgs, setImgs] = useState<string>('')
|
||||
|
||||
// lab是否都是0
|
||||
const rgbStyle = useMemo(() => {
|
||||
if (value?.lab && (value?.lab.l || value?.lab.a || value?.lab.b)) {
|
||||
return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` }
|
||||
}
|
||||
else {
|
||||
return null
|
||||
}
|
||||
}, [value])
|
||||
|
||||
useEffect(() => {
|
||||
if (value?.texture_url) {
|
||||
const imgs = value.texture_url.split(',').map((item) => {
|
||||
return formatImgUrl(item)
|
||||
})
|
||||
setImgs(() => imgs[0])
|
||||
}
|
||||
}, [value])
|
||||
|
||||
const [labAndImgShow, setLabAndImgShow] = useState(false)
|
||||
const closeLabAndImgShow = useCallback(() => {
|
||||
setLabAndImgShow(false)
|
||||
}, [])
|
||||
|
||||
const onShowLabAndImg = (e) => {
|
||||
onClick?.(value)
|
||||
if (!showStatus) { return false }
|
||||
setLabAndImgShow(true)
|
||||
}
|
||||
|
||||
const checkLoad = (val) => {
|
||||
setImgs(() => formatImgUrl(''))
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={onShowLabAndImg}>
|
||||
{value.texture_url && (
|
||||
<Image
|
||||
lazyLoad
|
||||
mode="aspectFill"
|
||||
src={imgs}
|
||||
onError={e => checkLoad(e)}
|
||||
className={styles.labAndImg_image}
|
||||
style={{ borderRadius: round ? '50%' : '', ...customImageStyle }}
|
||||
></Image>
|
||||
)}
|
||||
{!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '', ...customImageStyle }}></View>}
|
||||
{!value.texture_url && !rgbStyle && (
|
||||
<Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '', ...customImageStyle }} lazyLoad></Image>
|
||||
)}
|
||||
{name && <View className={styles.labAndImg_name}>{name}</View>}
|
||||
</View>
|
||||
<LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default memo(LabAndImg)
|
||||
@@ -0,0 +1,20 @@
|
||||
.grid {
|
||||
padding: 24px 40px;
|
||||
display: grid;
|
||||
grid-gap: 24px 24px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.tab_bar {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.button {
|
||||
padding: 0 60px;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import styles from './index.module.scss'
|
||||
import { EnumColorCardStatus } from '@/api/colorCard'
|
||||
|
||||
type ChangedValue = string | number
|
||||
|
||||
interface SelectSaleTypeProps {
|
||||
onChange?: (value: ChangedValue) => void
|
||||
onCloseOverlay?: () => void
|
||||
defaultValue?: ChangedValue
|
||||
}
|
||||
|
||||
interface EnumList {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
// 色卡订单状态
|
||||
const SelectColorCardStatus = (props: SelectSaleTypeProps, ref) => {
|
||||
const selectName = '色卡订单状态'
|
||||
const { onChange, defaultValue = 0 } = props
|
||||
console.log(props)
|
||||
const { fetchData } = EnumColorCardStatus()
|
||||
const [enumList, setEnumList] = useState<EnumList[]>([])
|
||||
|
||||
const getData = async() => {
|
||||
const res = await fetchData()
|
||||
setEnumList([{ id: 0, code: '', name: '全部记录' }, ...res.data.list])
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const [currentValue, setCurrentValue] = useState<ChangedValue>(defaultValue)
|
||||
|
||||
const handleClick = (value: ChangedValue) => {
|
||||
setCurrentValue(value)
|
||||
onChange?.(value)
|
||||
}
|
||||
|
||||
const dropDownRef = useRef<any>(null)
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
return {
|
||||
show: dropDownRef.current.show,
|
||||
showPopup: dropDownRef.current.showPopup,
|
||||
closePopup: dropDownRef.current.closePopup,
|
||||
}
|
||||
},
|
||||
[dropDownRef.current],
|
||||
)
|
||||
|
||||
return (
|
||||
<View className={styles.tab_bar}>
|
||||
{!!enumList.length
|
||||
&& enumList.map((item: EnumList, key) => {
|
||||
// 1 申请中 2 已完成
|
||||
if ([1, 2, 0].includes(item.id)) {
|
||||
return (
|
||||
<FilterButton round customClassName={styles.button} key={key} size="small" isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
</FilterButton>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default memo(forwardRef(SelectColorCardStatus))
|
||||
@@ -0,0 +1,20 @@
|
||||
.grid {
|
||||
padding: 24px 40px;
|
||||
display: grid;
|
||||
grid-gap: 24px 24px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.tab_bar {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.button {
|
||||
padding: 0 60px;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import styles from './index.module.scss'
|
||||
import { EnumCutSampleOrderStatus } from '@/api/sampleCutting'
|
||||
|
||||
type ChangedValue = string | number
|
||||
|
||||
interface SelectSaleTypeProps {
|
||||
onChange?: (value: ChangedValue) => void
|
||||
onCloseOverlay?: () => void
|
||||
defaultValue?: ChangedValue
|
||||
}
|
||||
|
||||
interface EnumList {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
// 剪样订单状态
|
||||
const SelectSampleCuttingStatus = (props: SelectSaleTypeProps, ref) => {
|
||||
const selectName = '剪样订单状态'
|
||||
const { onChange, defaultValue = 0 } = props
|
||||
console.log(props)
|
||||
const { fetchData } = EnumCutSampleOrderStatus()
|
||||
const [enumList, setEnumList] = useState<EnumList[]>([])
|
||||
|
||||
const getData = async() => {
|
||||
const res = await fetchData()
|
||||
setEnumList([{ id: 0, code: '', name: '全部记录' }, ...res.data.list])
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const [currentValue, setCurrentValue] = useState<ChangedValue>(defaultValue)
|
||||
|
||||
const handleClick = (value: ChangedValue) => {
|
||||
setCurrentValue(value)
|
||||
onChange?.(value)
|
||||
}
|
||||
|
||||
const dropDownRef = useRef<any>(null)
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
return {
|
||||
show: dropDownRef.current.show,
|
||||
showPopup: dropDownRef.current.showPopup,
|
||||
closePopup: dropDownRef.current.closePopup,
|
||||
}
|
||||
},
|
||||
[dropDownRef.current],
|
||||
)
|
||||
|
||||
return (
|
||||
<View className={styles.tab_bar}>
|
||||
{!!enumList.length
|
||||
&& enumList.map((item: EnumList, key) => {
|
||||
// 5 申请中 6 已完成
|
||||
if ([5, 6, 0].includes(item.id)) {
|
||||
return (
|
||||
<FilterButton round customClassName={styles.button} key={key} size="small" isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
</FilterButton>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default memo(forwardRef(SelectSampleCuttingStatus))
|
||||
Reference in New Issue
Block a user