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

✨ feat(ID1000873): 商城用户剪样（A4）

Browse Source 
【商城用户剪样（A4）】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000873
This commit is contained in:
xuan 2023-02-16 11:10:10 +08:00
parent 91a97502c1
commit af12929083
32 changed files with 2620 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
project.private.config.json
View File

@ -320,7 +320,28 @@
{
"name": "色卡详情",
"pathName": "pages/getColorCard/colorCardDetail/index",
"query": "id=5",
"query": "id=20",
"launchMode": "default",
"scene": null
},
{
"name": "领取剪样",
"pathName": "pages/sampleCutting/index",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "添加剪样",
"pathName": "pages/sampleCutting/sampleCuttingList/index",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "剪样详情",
"pathName": "pages/sampleCutting/sampleCuttingDetail/index",
"query": "id=1",
"launchMode": "default",
"scene": null
}

10
src/api/colorCard/colorCardOrder.ts
View File

@ -6,7 +6,7 @@ import { useRequest } from '@/use/useHttp'
*/
export const GetColorCardOrderList = () => {
return useRequest({
url: '/v2/mp/colorCardOrder/list',
url: '/v1/mp/colorCardOrder/list',
method: 'get',
})
}
@ -17,7 +17,7 @@ export const GetColorCardOrderList = () => {
*/
export const GetColorCardOrderDetail = () => {
return useRequest({
url: '/v2/mp/colorCardOrder',
url: '/v1/mp/colorCardOrder',
method: 'get',
})
}
@ -28,7 +28,7 @@ export const GetColorCardOrderDetail = () => {
*/
export const SubmitColorCardOrder = () => {
return useRequest({
url: '/v2/mp/colorCardOrder/submit',
url: '/v1/mp/colorCardOrder/submit',
method: 'post',
})
}
@ -39,7 +39,7 @@ export const SubmitColorCardOrder = () => {
*/
export const GetCanAddCardList = () => {
return useRequest({
url: '/v2/mp/colorCardOrder/canAddCard',
url: '/v1/mp/colorCardOrder/canAddCard',
method: 'post',
})
}
@ -50,7 +50,7 @@ export const GetCanAddCardList = () => {
*/
export const CancelColorCardOrder = () => {
return useRequest({
url: '/v2/mp/colorCardOrder/cancel',
url: '/v1/mp/colorCardOrder/cancel',
method: 'post',
})
}

13
src/api/colorCard/enum.ts Normal file
View File

@ -0,0 +1,13 @@
import { useRequest } from '@/use/useHttp'
/**
* 获取剪样订单列表
* @returns
*/
export const EnumColorCardStatus = () => {
return useRequest({
url: '/v1/mp/colorCardOrder/enum/auditStatus',
method: 'get',
})
}

3
src/api/colorCard/index.ts
View File

@ -5,3 +5,6 @@ export {
GetCanAddCardList,
CancelColorCardOrder,
} from './colorCardOrder'
export {
EnumColorCardStatus,
} from './enum'

13
src/api/sampleCutting/enum.ts Normal file
View File

@ -0,0 +1,13 @@
import { useRequest } from '@/use/useHttp'
/**
* 获取剪样订单列表
* @returns
*/
export const EnumCutSampleOrderStatus = () => {
return useRequest({
url: '/v1/mp/cutSampleOrder/status',
method: 'get',
})
}

11
src/api/sampleCutting/index.ts Normal file
View File

@ -0,0 +1,11 @@
export {
GetCutSampleOrderList,
GetCutSampleOrderProducts,
SubmitCutSampleOrder,
GetCutSampleOrderDetail,
CancelCutSampleOrder,
GetCutSampleOrderColorList,
} from './sampleCutting'
export {
EnumCutSampleOrderStatus,
} from './enum'

67
src/api/sampleCutting/sampleCutting.ts Normal file
View File

@ -0,0 +1,67 @@
import { useRequest } from '@/use/useHttp'
/**
* 获取剪样订单列表
* @returns
*/
export const GetCutSampleOrderList = () => {
return useRequest({
url: '/v1/mp/cutSampleOrder/list',
method: 'get',
})
}
/**
* 搜索剪样面料
* @returns
*/
export const GetCutSampleOrderProducts = () => {
return useRequest({
url: '/v1/mp/cutSampleOrder/products',
method: 'get',
})
}
/**
* 剪样提交订单
* @returns
*/
export const SubmitCutSampleOrder = () => {
return useRequest({
url: '/v1/mp/cutSampleOrder/submit',
method: 'post',
})
}
/**
* 获取剪样订单详情
* @returns
*/
export const GetCutSampleOrderDetail = () => {
return useRequest({
url: '/v1/mp/cutSampleOrder/detail',
method: 'get',
})
}
/**
* 取消剪样订单
* @returns
*/
export const CancelCutSampleOrder = () => {
return useRequest({
url: '/v1/mp/cutSampleOrder/cancel',
method: 'put',
})
}
/**
* 取消剪样订单
* @returns
*/
export const GetCutSampleOrderColorList = () => {
return useRequest({
url: '/v1/mp/product/color/absorb/list',
method: 'get',
})
}

4
src/app.config.ts
View File

@ -36,6 +36,10 @@ export default defineAppConfig({
'custom-wrapper': '/custom-wrapper',
},
subPackages: [
{
root: 'pages/sampleCutting',
pages: ['index', 'addSampleCutting/index', 'sampleCuttingList/index', 'sampleCuttingDetail/index'],
},
{
root: 'pages/getColorCard',
pages: ['index', 'addColorCard/index', 'colorCardList/index', 'colorCardDetail/index'],

35
src/components/LabAndImg2/index.module.scss Normal file
View File

@ -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;
}
}

81
src/components/LabAndImg2/index.tsx Normal file
View File

@ -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)

20
src/components/SelectColorCardStatus/index.module.scss Normal file
View File

@ -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;
}

78
src/components/SelectColorCardStatus/index.tsx Normal file
View File

@ -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))

20
src/components/SelectSampleCuttingStatus/index.module.scss Normal file
View File

@ -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;
}

78
src/components/SelectSampleCuttingStatus/index.tsx Normal file
View File

@ -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))

276
src/pages/getColorCard/colorCardDetail/index.tsx
View File

@ -8,7 +8,7 @@ import AddressDetailBox from '@/pages/orderDetails/components/addressDetailBox'
import LabAndImg from '@/components/LabAndImg'
import Tag from '@/components/tag'
import Cell from '@/components/cell'
import { formatDateTime, formatRemoveHashTag } from '@/common/format'
import { formatDateTime, formatRemoveHashTag, formatUrl } from '@/common/format'
import NormalButton from '@/components/normalButton'
import Steps from '@/components/steps'
import Step from '@/components/steps/components/step'
@ -83,163 +83,151 @@ const ColorCardDetail = () => {
getData()
}, [])
return <MoveBtn showList={['businessManager']}>
<View className={styles.main} >
<View className={styles.context}>
<LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
<View className={styles.orderProcess}>订单进程</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.orderProcessBottom}>
<Steps current={order.order_status === 1 ? 0 : 1} direction="vertical" customStyle={{ padding: '0' }}>
{/*
return <View className={styles.main} >
<View className={styles.context}>
<LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
<View className={styles.orderProcess}>订单进程</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.orderProcessBottom}>
<Steps current={order.order_status === 1 ? 1 : 0} direction="vertical" customStyle={{ padding: '0' }}>
{/*
申请中 -> 已完成 2
申请中 -> 已取消 4
申请中 -> 已拒绝 3
*/}
<Step
title={
{
order.order_progress?.map((item, index) => {
return <Step key={index} status={item.order_status === 3 ? 'error' : undefined} title={
<View className={styles['step-title']}>
<Text className={styles['step-status']}>申请中</Text>
<Text>{formatDateTime(order?.order_progress?.[0].audit_time)}</Text>
<Text className={styles['step-status']}>{item.order_status_name}</Text>
<Text>{formatDateTime(item.audit_time)}</Text>
</View>
}
/>
{/* order.order_status === 1 申请中 */}
{
order.order_status !== 1
? <Step status={order.order_status === 3 ? 'error' : undefined} title={
<View className={styles['step-title']}>
<Text className={styles['step-status']}>{order?.order_progress?.[1].order_status_name}</Text>
<Text>{formatDateTime(order?.order_progress?.[1].audit_time)}</Text>
</View>
} description={
<>
{
order?.order_progress?.[1].audit_remark ? <View>{formatDateTime(order?.order_progress?.[1].audit_remark)}</View> : null
}
{
order?.order_progress?.[1].delivery_appendix_url
? <View className={styles.attachment}>
} description={
<>
{
item.audit_remark && <View>{item.audit_remark}</View>
}
{
item.delivery_appendix_url
&& <View className={styles.attachment}>
{
order?.order_progress?.[1].delivery_appendix_url?.map((url, index) => {
item.delivery_appendix_url?.map((url, index) => {
return <View className={styles['step-url-container']} key={index}>
<Image className={styles['step-url']} src={url} lazyLoad mode="aspectFill" />
<Image className={styles['step-url']} src={formatUrl(url)} lazyLoad mode="aspectFill" />
</View>
})
}
</View>
: null
}
</>
}
/>
: <Step title="已完成" />
}
</Steps>
</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.customerTop}>客户信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.customerBottom}>
<Text>{order?.purchaser_name}</Text>
<Text>{order?.purchaser_phone}</Text>
<Text></Text>
</View>
</LayoutBlock>
<LayoutBlock circle>
<View className={styles.address_box}>
<View className={styles.address_box_left}>
<View className={styles.cirle}>
<IconFont name="icon-dizhi1" size={60}></IconFont>
</View>
</View>
<View className={styles.address_box_right}>
<View className={styles.address}>{order?.address}</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
<View className={styles.bottom}>
<View className={styles.leftbottom}>
<View className={styles.name}>{order.target_user_name}</View>
<View className={styles.phone}>{order.target_user_phone}</View>
</View>
<View className={styles.reatName}>{order.shipment_mode_name}</View>
</View>
</View>
</View>
</LayoutBlock>
{/* 色卡信息 */}
<LayoutBlock customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
<View className={styles.colorCardTop}>色卡信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
{
order.color_card_info?.map((item) => {
return (
<View className={styles.colorCardBottom} key={item.id}>
<View style={{ minWidth: '24%' }}>
<View className={styles.leftCont}>
<LabAndImg value={labAndImgObj(item)} />
</View>
</View>
<View className={styles.rightCont}>
<View className={styles.rightCont__container}>
<View className={styles.rightCont__left}>
<View className={styles.rightCont__top}>
{item.name}
</View>
<View className={styles.rightCont__bottom}>
{
item.affiliation_product?.map((product_color, index) => {
return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
})
}
</View>
</View>
<View className={styles.rightCont__right}>
x{item.count}本
</View>
</View>
<Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
</View>
</View>
)
})
}
<View className={styles.paymentMethod}>快递到付</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.orderInfoTop}>订单信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.orderInfoDetail}>
<Cell title="订单编号：" desc={
<>
<Text className={styles.orderInfoDetail__desc}>{order.order_no}</Text>
<Tag type="primary" onClick={() => handleCopy(order.order_no)}>复制</Tag>
</>
}
</>
}
/>
})
}
></Cell>
<Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
<Cell title="业务员：" desc={order.sale_user_name}></Cell>
</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.orderInfoTop}>备注信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.remark}>{order?.remark || '暂无备注信息'}</View>
</LayoutBlock>
</View>
<View className={styles.bottomBar}>
{
order.order_status === 1
? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
取消订单
</NormalButton>
: null
}
</View>
</Steps>
</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.customerTop}>客户信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.customerBottom}>
<Text>{order?.purchaser_name}</Text>
<Text>{order?.purchaser_phone}</Text>
<Text></Text>
</View>
</LayoutBlock>
<LayoutBlock circle>
<View className={styles.address_box}>
<View className={styles.address_box_left}>
<View className={styles.cirle}>
<IconFont name="icon-dizhi1" size={60}></IconFont>
</View>
</View>
<View className={styles.address_box_right}>
<View className={styles.address}>{order?.address}</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
<View className={styles.bottom}>
<View className={styles.leftbottom}>
<View className={styles.name}>{order.target_user_name}</View>
<View className={styles.phone}>{order.target_user_phone}</View>
</View>
<View className={styles.reatName}>{order.shipment_mode_name}</View>
</View>
</View>
</View>
</LayoutBlock>
{/* 色卡信息 */}
<LayoutBlock customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
<View className={styles.colorCardTop}>色卡信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
{
order.color_card_info?.map((item) => {
return (
<View className={styles.colorCardBottom} key={item.id}>
<View style={{ minWidth: '24%' }}>
<View className={styles.leftCont}>
<LabAndImg value={labAndImgObj(item)} />
</View>
</View>
<View className={styles.rightCont}>
<View className={styles.rightCont__container}>
<View className={styles.rightCont__left}>
<View className={styles.rightCont__top}>
{item.name}
</View>
<View className={styles.rightCont__bottom}>
{
item.affiliation_product?.map((product_color, index) => {
return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
})
}
</View>
</View>
<View className={styles.rightCont__right}>
x{item.count}本
</View>
</View>
<Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
</View>
</View>
)
})
}
<View className={styles.paymentMethod}>快递到付</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.orderInfoTop}>订单信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.orderInfoDetail}>
<Cell title="订单编号：" desc={
<>
<Text className={styles.orderInfoDetail__desc}>{order.order_no}</Text>
<Tag type="primary" onClick={() => handleCopy(order.order_no)}>复制</Tag>
</>
}
></Cell>
<Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
<Cell title="业务员：" desc={order.sale_user_name}></Cell>
</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.orderInfoTop}>备注信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.remark}>{order?.remark || '暂无备注信息'}</View>
</LayoutBlock>
</View>
</MoveBtn>
<View className={styles.bottomBar}>
{
order.order_status === 1
? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
取消订单
</NormalButton>
: null
}
</View>
</View>
}
export default ColorCardDetail

33
src/pages/getColorCard/index.tsx
View File

@ -8,12 +8,11 @@ import Search from '@/components/search'
import NormalButton from '@/components/normalButton'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import FilterButton from '@/components/filterButton'
import { alert, goLink } from '@/common/common'
import { CancelColorCardOrder, GetColorCardOrderList } from '@/api/colorCard'
import IconFont from '@/components/iconfont/iconfont'
import Empty from '@/components/empty'
import { COLOR_CARD_LIST_EMPTY_IMAGE } from '@/common/constant'
import SelectColorCardStatus from '@/components/SelectColorCardStatus'
const GetColorCard = () => {
const { fetchData, state } = GetColorCardOrderList()
@ -23,6 +22,7 @@ const GetColorCard = () => {
return alert.error(res.msg)
}
setColorList({ list: res.data.list, total: res.data.total })
setRefresherTriggeredStatus(false)
}
// status 1 申请中 2 已完成
@ -68,24 +68,9 @@ const GetColorCard = () => {
setSearchField(e => ({ ...e, name: value }))
}, 300)
const FilterOptions = [
{
key: 0,
label: '全部记录',
},
{
key: 1,
label: '申请中',
},
{
key: 2,
label: '已完成',
},
]
const handleClickFilter = (item: typeof FilterOptions[number]) => {
if (searchField.status === item.key) { return }
setSearchField(e => ({ ...e, status: item.key }))
const handleClickFilter = (value) => {
if (searchField.status === value) { return }
setSearchField(e => ({ ...e, status: value }))
}
useEffect(() => {
@ -127,13 +112,7 @@ const GetColorCard = () => {
<View className={styles.search}>
<Search placeholder="请输入客户或业务员" showBtn={false} changeOnSearch={getSearchData} />
</View>
<View className={styles.tab_bar}>
{
FilterOptions.map((item, index) => {
return <FilterButton key={index} isActive={searchField.status === item.key} round customClassName={styles.button} size="small" onClick={() => handleClickFilter(item)}>{item.label}</FilterButton>
})
}
</View>
<SelectColorCardStatus onChange={handleClickFilter} />
<View className={styles.color_card_list}>
<InfiniteScroll
emptySlot={<Empty picUrl={COLOR_CARD_LIST_EMPTY_IMAGE} text="还没有领取过色卡" />}

3
src/pages/sampleCutting/addSampleCutting/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '领取剪样',
}

132
src/pages/sampleCutting/addSampleCutting/index.module.scss Normal file
View File

@ -0,0 +1,132 @@
page {
background: #f7f7f7;
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.layoutBlock {
padding: 24px 34px;
}
.main {
background-color: $color_bg_one;
height: 100%;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
}
.context {
flex: 1 1 auto;
height: 100%;
overflow-y: scroll;
}
.addButton {
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
.customerTop {
color: #333333;
font-size: 28px;
}
.customerBottom {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
color: #9b9b9b;
font-size: 28px;
}
.colorCardTop {
font-size: 28px;
}
.colorCardBottom {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
overflow: hidden;
margin-bottom: 24px;
.leftCont {
width: 134px;
height: 134px;
border-radius: 8px;
margin-right: 24px;
}
.rightCont {
flex: 1 1 auto;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
&__top {
font-size: 28px;
@include common_ellipsis(1);
}
&__bottom {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 100%;
align-items: flex-end;
}
&__left {
flex: 1 1 auto;
overflow: hidden;
}
&__right {
width: 30%;
}
}
}
.paymentMethod {
text-align: right;
font-size: 28px;
color: #f64861;
}
.remarkTop {
display: flex;
justify-content: space-between;
.remarkTitle {
font-size: 28px;
font-weight: 500;
color: #393939;
}
.remarkTag {
display: flex;
flex-flow: row nowrap;
font-size: 24px;
color: #626262;
}
}
.remarkBottom {
.remarkContent {
font-size: 28px;
color: #999999;
}
}
.bottomBar {
.bottomTotal {
color: #aeaeae;
font-size: 24px;
}
position: relative;
z-index: 99;
box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
flex: none;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 24px;
background-color: white;
padding-bottom: calc(20px + constant(safe-area-inset-bottom));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.bottomBar__button {
font-size: 28px;
}

434
src/pages/sampleCutting/addSampleCutting/index.tsx Normal file
View File

@ -0,0 +1,434 @@
import { Text, View } from '@tarojs/components'
import Taro, { useDidShow, useUnload } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useState } from 'react'
import type { SampleCuttingCache } from '../sampleCuttingList'
import styles from './index.module.scss'
import LayoutBlock from '@/components/layoutBlock'
import NormalButton from '@/components/normalButton'
import Divider from '@/components/divider'
import IconFont from '@/components/iconfont/iconfont'
import LabAndImg from '@/components/LabAndImg'
import Counter from '@/components/counter'
import { alert, goLink } from '@/common/common'
import { ClientListApi } from '@/api/order'
import AddressDetailBox from '@/pages/orderDetails/components/addressDetailBox'
import Popup from '@/components/popup'
import Remark from '@/pages/orderDetails/components/remark'
import { formatRemoveHashTag } from '@/common/format'
import { SubmitCutSampleOrder } from '@/api/sampleCutting'
const AddColorCard = () => {
// 获取选择的客户
const pages = Taro.getCurrentPages()
const currPage = pages[pages.length - 1] // 获取当前页面
const [addressInfo, setAddressInfo] = useState<any>({})
// 获取客户
const [clientList, setClientList] = useState<any[]>([])
const { fetchData: fetchClientData } = ClientListApi()
const [order, setOrder] = useState<SampleCuttingCache[]>([])
useDidShow(() => {
const sampleCuttingCache = Taro.getStorageSync('sampleCuttingCache')
if (sampleCuttingCache) {
console.log('sampleCuttingCache', JSON.parse(sampleCuttingCache))
setOrder(JSON.parse(sampleCuttingCache))
}
})
const [clientInfo, setClientInfo] = useState({
clientId: -1,
clientName: '',
clientPhone: '',
})
const getClient = async() => {
const res = await fetchClientData({
page: 1, size: 10,
})
if (!res.success) {
return alert.error(res.msg)
}
currPage.data.clientId = res.data.list.length > 0 ? res.data.list[0]?.id : -1
currPage.data.clientName = res.data.list.length > 0 ? res.data.list[0]?.name : ''
currPage.data.clientPhone = res.data.list.length > 0 ? res.data.list[0]?.phone : ''
const {
clientId,
clientName,
clientPhone,
} = currPage.data
setClientInfo({
clientId,
clientName,
clientPhone,
})
setClientList([...res.data.list])
}
useEffect(() => {
getClient()
}, [])
useUnload(() => {
Taro.removeStorageSync('sampleCuttingCache')
})
// 选择客户
const handleSelectCustomer = () => {
goLink(`/pages/customerPage/index?clientId=${clientInfo?.clientId}`)
}
// 添加剪样
const handleAddColorCard = () => {
Taro.setStorageSync('sampleCuttingCache', JSON.stringify(order))
goLink('/pages/sampleCutting/sampleCuttingList/index', { isGoBack: true, isAddSampleCutIdList: order.map(item => item.product_id) })
}
const { fetchData } = SubmitCutSampleOrder()
// 提交订单
const handleSubmitOrder = async() => {
if (!addressInfo.address_id) {
Taro.showToast({
title: '请选择地址',
icon: 'none',
duration: 2000,
})
return
}
if (!clientInfo.clientId) {
Taro.showToast({
title: '请选择客户',
icon: 'none',
duration: 2000,
})
return
}
const productColorList: any[] = []
order.forEach((item) => {
item.multipleSelection.forEach((mul) => {
productColorList.push({
product_color_id: mul.product_color_id,
color_num: mul.count,
})
})
})
// 请求数据
const res = await fetchData({
address_id: addressInfo.address_id,
cut_sample_order_product_color_list: productColorList,
purchaser_id: clientInfo.clientId,
remark,
shipment_mode: 2, // 物流
})
if (res.success) {
Taro.showToast({
title: '提交成功',
icon: 'success',
duration: 2000,
})
Taro.removeStorageSync('sampleCuttingCache')
setTimeout(() => {
goLink('/pages/sampleCutting/sampleCuttingDetail/index', { id: res.data.id }, 'redirectTo')
}, 2000)
}
}
const labAndImgObj = useCallback((item) => {
return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
}, [])
const getInputValue = () => {
}
const deleteColorCard = (productId: number, colorId: number) => {
setOrder((prev) => {
let newOlder: SampleCuttingCache[] = []
const targetProductIndex = prev.findIndex(item => item.product_id === productId)
if (prev[targetProductIndex].multipleSelection.length === 1) {
if (prev.length === 1) {
alert.none('最后一个剪样不能删除')
return prev
}
prev.splice(targetProductIndex, 1)
newOlder = [...prev]
}
else {
newOlder = prev.map((item) => {
if (item.product_id === productId) {
item.multipleSelection = item.multipleSelection.filter(mul => mul.product_color_id !== colorId)
}
return item
})
}
Taro.setStorageSync('sampleCuttingCache', JSON.stringify(newOlder))
return newOlder
})
}
const handleCountChange = (value: number, productId: number, colorId: number) => {
console.log('value', value)
if (order.length === 1 && value === 0) {
Taro.showToast({
title: '最后一个剪样不能删除',
icon: 'none',
duration: 2000,
})
return
}
if (value === 0) {
Taro.showModal({
content: '确认删除所选剪样？',
confirmText: '删除',
confirmColor: '#337fff',
success(res) {
if (res.confirm) {
deleteColorCard(productId, colorId)
}
},
})
return
}
setOrder((prev) => {
const newOlder = prev.map((item) => {
if (item.product_id === productId) {
item.multipleSelection = item.multipleSelection.map((mul) => {
if (mul.product_color_id === colorId) {
mul.count = value
}
return mul
})
}
return item
})
Taro.setStorageSync('sampleCuttingCache', JSON.stringify(newOlder))
return newOlder
})
}
const handSelect = () => {
goLink(`/pages/addressManager/index?purchaser_id=${clientInfo.clientId}`)
}
// 接受选择客户页面传递过来的数据
useDidShow(() => {
// 判断是否有跳转选择客户
if (currPage.data?.clientId && currPage.data?.clientId !== '') {
setClientInfo({
clientId: currPage.data?.clientId,
clientName: currPage.data?.clientName,
clientPhone: currPage.data?.clientPhone,
})
}
// 默认客户
if (currPage.data?.clientId == null) {
setClientInfo(() => {
return {
clientId: clientList.length > 0 ? clientList[0]?.id : -1,
clientName: clientList.length > 0 ? clientList[0]?.name : '',
clientPhone: clientList.length > 0 ? clientList[0]?.phone : '',
}
})
}
})
const initAddressInfo = () => {
setAddressInfo(val => ({
...val,
province_name: '',
address_id: '',
city_name: '',
address_detail: '',
district_name: '',
target_user_name: '',
purchaser_phone: '',
}))
}
useDidShow(() => {
// 获取选择的地址
console.log('addressObj', currPage.data?.addressObj, clientInfo.clientId, currPage.data?.clientId)
if (!currPage.data?.addressObj) { return initAddressInfo() }
const {
purchaser_id,
province_name,
id,
city_name,
address_detail,
district_name,
name,
phone,
} = currPage.data?.addressObj
if (purchaser_id === currPage.data?.clientId) {
setAddressInfo(val => ({
...val,
province_name: province_name || '',
address_id: id || '',
city_name: city_name || '',
address_detail: address_detail || '',
district_name: district_name || '',
target_user_name: name || '',
purchaser_phone: phone || '',
}))
}
else {
initAddressInfo()
}
const selectId = id
const obj = currPage?.data?.ids?.filter((item) => { return item == selectId })
console.log('ids', currPage?.data?.ids)
if (currPage?.data?.ids && obj.length === 0) {
initAddressInfo()
}
})
// 备注操作
const [showDesc, setShowDesc] = useState(false)
const [remark, setRemark] = useState('')
const handleShowDesc = () => {
setShowDesc(true)
}
const getRemark = useCallback((value: string) => {
setShowDesc(false)
console.log('remark', value)
setRemark(value)
}, [])
const totalColorNumber = useMemo(() => {
return order.reduce((prev, curr) => {
return prev + curr.multipleSelection.length
}, 0)
}, [order])
const totalColorCount = useMemo(() => {
return order.reduce((prev, curr) => {
return prev + curr.multipleSelection.reduce((subPrev, subCurr) => {
return subPrev + subCurr.count
}, 0)
}, 0)
}, [order])
return <View className={styles.main}>
<View className={styles.context}>
{/* 客户信息 */}
<LayoutBlock circle onClick={handleSelectCustomer} customStyle={{ marginTop: '12px' }} customClassName={styles.layoutBlock}>
<View className={styles.customerTop}>
<View>客户信息</View>
</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.customerBottom}>
{
clientInfo.clientId !== -1
? (<>
<Text style={{ color: '#333333' }}>
{clientInfo.clientName}
</Text>
<Text style={{ color: '#333333' }}>
{clientInfo.clientPhone}
</Text>
</>
)
: <View>选择领取客户</View>
}
<IconFont name="icon-chakanquanbukehu" color="#444444" size={32}></IconFont>
</View>
</LayoutBlock>
{
clientInfo.clientId !== -1 && <AddressDetailBox
showBtn={false}
showWhatFont="物流"
navSelect={handSelect}
obj={addressInfo}
receivingStatus={2}
icon={<IconFont name="icon-dizhi1" size={60}></IconFont>}
></AddressDetailBox>
}
<NormalButton customClassName={styles.addButton} circle onClick={handleAddColorCard} plain size="normal" type="primary">添加剪样</NormalButton>
{
order.map((item, index) => {
return <LayoutBlock key={index} customStyle={{ marginTop: '12px' }} circle customClassName={styles.layoutBlock}>
<View className={styles.colorCardTop}>{item.product_code_and_name}</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
{
item.multipleSelection.map((mul) => {
return (
<View className={styles.colorCardBottom} key={mul.product_color_id}>
<View style={{ minWidth: '24%' }}>
<View className={styles.leftCont}>
<LabAndImg value={labAndImgObj(mul)} />
</View>
</View>
<View className={styles.rightCont}>
<View className={styles.rightCont__top}>
{`#${formatRemoveHashTag(mul.product_color_code)} ${mul.product_color_name}`}
</View>
<View className={styles.rightCont__bottom}>
<View className={styles.rightCont__left}>
{/* {
item.affiliation_product.map((product_color, index) => {
return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color.code)}</Tag>
})
} */}
</View>
<View className={styles.rightCont__right}>
<Counter
onBlue={getInputValue}
defaultNum={mul?.count || 1}
onChange={e => handleCountChange(e, item.product_id, mul.product_color_id)}
onClickBtn={getInputValue}
unit="份"
minNum={0}
maxNum={999}
/>
</View>
</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0 0 ' }}></Divider>
</View>
</View>
)
})
}
<View className={styles.paymentMethod}>快递到付</View>
</LayoutBlock>
})
}
{/* 备注信息 */}
<LayoutBlock circle customClassName={styles.layoutBlock} onClick={handleShowDesc}>
<View className={styles.remarkTop}>
<View className={styles.remarkTitle}>备注信息</View>
<View className={styles.remarkTag}>
<Text>填写/修改备注</Text>
<IconFont name="icon-chakanquanbukehu" color="#444444" size={32}></IconFont>
</View>
</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.remarkBottom}>
<View className={styles.remarkContent}>{ remark || '尚未备注信息' }</View>
</View>
</LayoutBlock>
</View>
<View className={styles.bottomBar}>
<View className={styles.bottomTotal}>
当前共 {order.length} 种面料, {totalColorNumber || 0} 种色号，共 {totalColorCount || 0} 份
</View>
<NormalButton
customClassName={styles.bottomBar__button}
type="primary"
round
onClick={handleSubmitOrder}
>
提交订单
</NormalButton>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={getRemark} defaultValue={remark} showInput={!!showDesc} />
</Popup>
</View>
}
export default AddColorCard

138
src/pages/sampleCutting/components/itemList/index.module.scss Normal file
View File

@ -0,0 +1,138 @@
.topItem {
display: flex;
align-items: center;
justify-content: space-between;
.orderNo {
font-size: 28px;
font-weight: 550;
color: #000000;
}
.status {
font-size: 28px;
font-weight: 550;
color: #0d7cff;
}
}
.flexBox {
display: flex;
align-items: center;
.pussName {
margin-right: 10px;
font-size: 28px;
font-weight: 500;
color: #666666;
}
.tag {
background-color: #e3ecff;
border-color: transparent;
color: #337fff;
}
}
.contBox {
width: 100%;
display: flex;
justify-content: space-between;
overflow: hidden;
.leftCont {
width: 134px;
height: 134px;
border-radius: 8px;
position: relative;
}
.rightCont {
width: calc(100% - 134px);
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
margin-left: 24px;
justify-content: space-between;
.rightTop {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
.productName {
width: 70%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 8px;
font-size: 28px;
color: #000000;
}
.shipMode {
width: 25%;
font-size: 28px;
color: #000000;
text-align: right;
}
}
.colorsBox {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24px;
.colorName {
flex: 1 1 auto;
color: #797979;
@include common_ellipsis(1);
}
.colorCount {
color: #797979;
}
}
}
}
.lineOne {
// width: 638px;
margin-right: 32px;
height: 1px;
background: #e7e7e7;
// opacity: 0.1;
margin-left: 32px;
margin-top: 24px;
}
.bottomMsg {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.msgLeft {
font-size: 24px;
font-weight: 400;
color: #a1a1a1;
}
.msgRight {
font-size: 24px;
font-weight: 400;
color: #a1a1a1;
}
}
.paymentMethod {
display: flex;
justify-content: flex-end;
.msgRightOne {
font-size: 28px;
font-weight: 500;
color: #f64861;
align-self: flex-end;
}
}
.bottomBox {
display: flex;
justify-content: flex-end;
margin-top: 32px;
}

99
src/pages/sampleCutting/components/itemList/index.tsx Normal file
View File

@ -0,0 +1,99 @@
import type { ITouchEvent } from '@tarojs/components'
import { ScrollView, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import BottomBtns from '@/components/BottomBtns'
import { formatHashTag, formatPriceDiv } from '@/common/format'
import LabAndImg from '@/components/LabAndImg'
import NormalButton from '@/components/normalButton'
import Divider from '@/components/divider'
import Tag from '@/components/tag'
import LayoutBlock from '@/components/layoutBlock'
import { goLink } from '@/common/common'
interface PropsType {
data?: any
cancel?: (e: ITouchEvent) => void
}
const ItemList = (props: PropsType) => {
const { data, cancel } = props
const labAndImgObj = useCallback((item) => {
return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
}, [])
// 进入详情页
const navTo = () => {
goLink('/pages/sampleCutting/sampleCuttingDetail/index', { id: data.order_id })
}
return (
<LayoutBlock onClick={navTo} circle>
<View className={styles.topItem}>
<View className={styles.orderNo}>单号：{data.order_no}</View>
<View className={styles.status}>{data.mp_cut_sample_audit_status_name}</View>
</View>
<View className={styles.flexBox}>
<View className={styles.pussName}>{data.purchaser_name}</View>
{
data.sale_user_name && <Tag type="primary" size="normal" circle customClassName={styles.tag} plain>
{data.sale_user_name}
</Tag>
}
</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.contBox}>
<View style={{ minWidth: '24%' }}>
<View className={styles.leftCont}>
<LabAndImg value={labAndImgObj(data.cut_sample_order_product_list[0])} />
</View>
</View>
<View className={styles.rightCont}>
<View className={styles.rightTop}>
<View className={styles.productName}>{data.cut_sample_order_product_list[0].name}</View>
<View className={styles.shipMode}>{data.shipment_mode_name}</View>
</View>
{
data.cut_sample_order_product_list[0].product_colors?.map((item, index) => {
if (index < 2) {
return <View className={styles.colorsBox} key={index}>
<View className={styles.colorName}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.colorCount}>x{item.color_num || 0}份</View>
</View>
}
else {
return null
}
})
}
</View>
</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.bottomMsg}>
<View className={styles.msgLeft}>剪样信息：</View>
<View className={styles.msgRight}>{data?.total_fabrics || 0} 种面料，{data?.total_colors || 0} 种剪样，共 {data?.total_number || 0} 份</View>
</View>
<View className={styles.paymentMethod}>
<View className={styles.msgRightOne}>快递到付</View>
</View>
<View className={styles.bottomBox}>
{
data.order_status === 1 && <NormalButton
customStyles={{ fontSize: '14px' }}
type="info"
size="normal"
round
plain
onClick={cancel}
>
取消订单
</NormalButton>
}
</View>
</LayoutBlock>
)
}
export default memo(ItemList)

4
src/pages/sampleCutting/components/productColorPopup/index.tsx Normal file
View File

@ -0,0 +1,4 @@
const ProductColorPopup = (props) => {
}
export default ProductColorPopup

3
src/pages/sampleCutting/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '领取剪样',
}

66
src/pages/sampleCutting/index.module.scss Normal file
View File

@ -0,0 +1,66 @@
page {
background: #f7f7f7;
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.main {
background-color: $color_bg_one;
height: 100%;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
.search {
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
align-items: center;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
}
.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);
}
.color_card_list{
flex: 1 1 auto;
height: 100%;
overflow: hidden;
.order_item{
margin: 20px 0;
}
}
.bottomBar {
position: relative;
z-index: 99;
box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
flex: none;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 24px;
background-color: white;
padding-bottom: calc(20px + constant(safe-area-inset-bottom));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
}
.tab_bar .button{
padding: 0 60px;
}
.bottomBar__button{
width: 100%;
font-size: 28px;
}

164
src/pages/sampleCutting/index.tsx Normal file
View File

@ -0,0 +1,164 @@
import type { ITouchEvent } from '@tarojs/components'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import ItemList from './components/itemList'
import Search from '@/components/search'
import NormalButton from '@/components/normalButton'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import FilterButton from '@/components/filterButton'
import { alert, goLink } from '@/common/common'
import Empty from '@/components/empty'
import { COLOR_CARD_LIST_EMPTY_IMAGE } from '@/common/constant'
import { CancelCutSampleOrder, GetCutSampleOrderList } from '@/api/sampleCutting'
import SelectSampleCuttingStatus from '@/components/SelectSampleCuttingStatus'
const GetSampleCutting = () => {
const { fetchData, state } = GetCutSampleOrderList()
const getData = async() => {
const res = await fetchData(getFilterData(searchField))
if (!res.success) {
return alert.error(res.msg)
}
setSampleCuttingList({ list: res.data.list, total: res.data.total })
setRefresherTriggeredStatus(false)
}
// status 1 申请中 2 已完成
// 页码和页数
const [searchField, setSearchField] = useState<{ purchaser_and_sale_user?: string; mp_cut_sample_audit_status?: number; page: number; size: number }>({
purchaser_and_sale_user: '',
mp_cut_sample_audit_status: 0,
page: 1,
size: 10,
})
const [sampleCuttingList, setSampleCuttingList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
// 列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
// 数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: sampleCuttingList.list, total: sampleCuttingList.total, status: state.loading! })
}, [sampleCuttingList, state.loading])
// 筛选参数
// 上拉加载数据
const pageNum = useRef({ size: searchField.size, page: searchField.page })
const getRefresherRefresh = async() => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchField(val => ({ ...val, size: 10 }))
}
const getScrollToLower = useCallback(() => {
if (sampleCuttingList.list.length < sampleCuttingList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({ ...searchField, size })
}
}, [sampleCuttingList])
// 领取剪样
const getSampleCutting = () => {
goLink('/pages/sampleCutting/sampleCuttingList/index')
}
// 搜索
const getSearchData = debounce((value: string) => {
setSearchField(e => ({ ...e, purchaser_and_sale_user: value }))
}, 300)
const FilterOptions = [
{
key: 0,
label: '全部记录',
},
{
key: 5,
label: '申请中',
},
{
key: 6,
label: '已完成',
},
]
const handleClickFilter = (value) => {
if (searchField.mp_cut_sample_audit_status === value) { return }
setSearchField(e => ({ ...e, mp_cut_sample_audit_status: value }))
}
useEffect(() => {
getData()
}, [searchField])
const { fetchData: cancelOrderApi } = CancelCutSampleOrder()
const cancelOrder = async(id: number) => {
const res = await cancelOrderApi({ id })
if (res.success) {
getData()
}
}
// 取消订单
const handleCancel = (e: ITouchEvent, id: number) => {
e.stopPropagation()
Taro.showModal({
content: '确定取消该订单？',
confirmColor: '#337fff',
confirmText: '确认',
success: (res) => {
if (res.confirm) {
cancelOrder(id)
console.log('用户点击确定')
}
},
})
}
// 监听选择的类型
// useEffect(() => {
// setSearchObj(search)
// if (search.goodsId) { getGoodList() }
// }, [search])
return <View className={styles.main}>
<View className={styles.search}>
<Search placeholder="请输入客户或业务员" showBtn={false} changeOnSearch={getSearchData} />
</View>
<SelectSampleCuttingStatus onChange={handleClickFilter} />
<View className={styles.color_card_list}>
<InfiniteScroll
emptySlot={<Empty picUrl={COLOR_CARD_LIST_EMPTY_IMAGE} text="还没有领取过剪样" />}
statusMore={statusMore}
selfonScrollToLower={getScrollToLower}
refresherEnabled
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}
safeAreaInsetBottom={false}
>
{sampleCuttingList?.list?.map((item, index) => {
return (
<View key={item.order_id} className={styles.order_item}>
<ItemList data={item} key={index} cancel={e => handleCancel(e, item.order_id)}></ItemList>
</View>
)
})}
</InfiniteScroll>
</View>
<View className={styles.bottomBar}>
<NormalButton
customClassName={styles.bottomBar__button}
type="primary"
round
onClick={getSampleCutting}
>
领取剪样
</NormalButton>
</View>
</View>
}
export default GetSampleCutting

3
src/pages/sampleCutting/sampleCuttingDetail/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '剪样订单详情',
}

203
src/pages/sampleCutting/sampleCuttingDetail/index.module.scss Normal file
View File

@ -0,0 +1,203 @@
page {
background: #f7f7f7;
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.main {
background-color: $color_bg_one;
height: 100%;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
.context {
flex: 1 1 auto;
height: 100%;
overflow-y: scroll;
}
.orderProcess {
font-size: 28px;
}
.orderInfoTop {
font-size: 28px;
color: $color_font_one;
}
.customerTop {
color: #333333;
font-size: 28px;
}
.customerBottom {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
color: #343434;
font-size: 28px;
}
.colorCardTop {
font-size: 28px;
}
.colorCardBottom {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
overflow: hidden;
margin-bottom: 24px;
.leftCont {
width: 134px;
height: 134px;
border-radius: 8px;
margin-right: 24px;
}
.rightCont {
flex: 1 1 auto;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
&__top {
font-size: 28px;
@include common_ellipsis(1);
}
&__bottom {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 100%;
}
&__container {
display: flex;
flex-flow: row nowrap;
}
&__left {
flex: 1 1 auto;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
}
&__right {
font-size: 28px;
}
}
}
.paymentMethod {
text-align: right;
font-size: 28px;
color: #f64861;
}
}
.address_box {
display: flex;
.address_box_left {
margin-right: 24px;
.cirle {
border-radius: 50%;
width: 64px;
height: 64px;
background: #4a7fff;
display: flex;
align-items: center;
justify-content: center;
}
}
.address_box_right {
flex: 1 1 auto;
.address {
height: 78px;
font-size: 28px;
font-weight: 500;
@include common_ellipsis(2);
color: #000000;
margin-right: 41px;
display: flex;
align-items: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /*这里设置几行*/
overflow: hidden;
}
.bottom {
display: flex;
align-items: center;
justify-content: space-between;
.reatName {
font-size: 28px;
font-weight: 500;
color: #337fff;
margin-right: 32px;
}
.leftbottom {
display: flex;
align-items: center;
.name {
line-height: 34px;
width: 84px;
height: 34px;
@include common_ellipsis();
font-size: 28px;
font-weight: 400;
color: #343434;
margin-right: 16px;
}
.phone {
height: 34px;
font-size: 28px;
font-weight: 400;
color: #343434;
}
}
}
}
}
.bottomBar {
position: relative;
z-index: 99;
box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
flex: none;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 24px;
background-color: white;
padding-bottom: calc(20px + constant(safe-area-inset-bottom));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.bottomBar__button {
font-size: 28px;
}
.remark {
font-size: 28px;
color: #9b9b9b;
}
.step-title {
display: flex;
flex-flow: row nowrap;
font-size: 28px;
align-items: center;
}
.step-status {
font-weight: 550;
color: #393939;
margin-right: 40px;
}
.attachment{
display: flex;
flex-flow: row nowrap;
.step-url-container {
margin-right: 16px;
width: 128px;
height: 128px;
}
.step-url {
width: 100%;
height: 100%;
border-radius: 8px;
}
}

233
src/pages/sampleCutting/sampleCuttingDetail/index.tsx Normal file
View File

@ -0,0 +1,233 @@
import { Image, Text, View } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import LayoutBlock from '@/components/layoutBlock'
import Divider from '@/components/divider'
import LabAndImg from '@/components/LabAndImg'
import Tag from '@/components/tag'
import Cell from '@/components/cell'
import { formatDateTime, formatHashTag, formatRemoveHashTag, formatUrl } from '@/common/format'
import NormalButton from '@/components/normalButton'
import Steps from '@/components/steps'
import Step from '@/components/steps/components/step'
import { alert } from '@/common/common'
import IconFont from '@/components/iconfont/iconfont'
import { CancelCutSampleOrder, GetCutSampleOrderDetail } from '@/api/sampleCutting'
const SampleCuttingDetail = () => {
const { fetchData } = GetCutSampleOrderDetail()
const router = useRouter()
const getData = async() => {
console.log('id', router.params.id)
const res = await fetchData({ id: Number(router.params.id) })
if (!res.success) {
return alert.error(res.msg)
}
setOrder(res.data)
}
const [order, setOrder] = useState<any>({})
const labAndImgObj = useCallback((item) => {
return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
}, [])
// 复制
const handleCopy = (data: string) => {
Taro.setClipboardData({
data,
success() {
Taro.showToast({
title: '复制成功',
})
},
})
}
const { fetchData: cancelOrderApi } = CancelCutSampleOrder()
const cancelOrder = async(id: number) => {
const res = await cancelOrderApi({ id })
if (res.success) {
getData()
alert.success('取消成功')
}
else {
alert.error(res.msg)
}
}
// 取消订单
const handleCancel = () => {
Taro.showModal({
content: '确定取消该订单？',
confirmColor: '#337fff',
confirmText: '确认',
success: (res) => {
if (res.confirm) {
cancelOrder(Number(router.params.id))
console.log('用户点击确定')
}
},
})
}
useEffect(() => {
getData()
}, [])
return <View className={styles.main} >
<View className={styles.context}>
<LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
<View className={styles.orderProcess}>订单进程</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.orderProcessBottom}>
<Steps current={order.order_form?.[0].order_status === 5 ? 1 : 0} direction="vertical" customStyle={{ padding: '0' }}>
{/*
申请中5 -> 已完成 6
申请中5 -> 已取消 3
申请中5 -> 已拒绝 4
*/}
{
order.order_form?.map((item, index) => {
return <Step key={index} status={item.order_status === 4 ? 'error' : undefined} title={
<View className={styles['step-title']}>
<Text className={styles['step-status']}>{item.order_status_name}</Text>
<Text>{formatDateTime(item.order_time)}</Text>
</View>
} description={
<>
{
item.audit_remark && <View>{item.audit_remark}</View>
}
{
item.delivery_appendix_url
&& <View className={styles.attachment}>
{
item.delivery_appendix_url?.map((url, index) => {
return <View className={styles['step-url-container']} key={index}>
<Image className={styles['step-url']} src={formatUrl(url)} lazyLoad mode="aspectFill" />
</View>
})
}
</View>
}
</>
}
/>
})
}
</Steps>
</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.customerTop}>客户信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.customerBottom}>
<Text>{order?.purchaser_name}</Text>
<Text>{order?.phone}</Text>
{/* 占位作用勿删除 */}
<Text></Text>
</View>
</LayoutBlock>
<LayoutBlock circle>
<View className={styles.address_box}>
<View className={styles.address_box_left}>
<View className={styles.cirle}>
<IconFont name="icon-dizhi1" size={60}></IconFont>
</View>
</View>
<View className={styles.address_box_right}>
<View className={styles.address}>{order?.province_name}{order?.city_name}{order?.district_name}{order?.address_detail}</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
<View className={styles.bottom}>
<View className={styles.leftbottom}>
<View className={styles.name}>{order.target_user_name}</View>
<View className={styles.phone}>{order.target_user_phone}</View>
</View>
<View className={styles.reatName}>{order.shipment_mode_name}</View>
</View>
</View>
</View>
</LayoutBlock>
{
order.cut_sample_order_product_list?.map((item, index) => {
return <LayoutBlock key={index} customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
<View className={styles.colorCardTop}>{formatHashTag(item.code, item.name)}</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
{
item.product_colors?.map((mul) => {
return (
<View className={styles.colorCardBottom} key={mul.product_color_id}>
<View style={{ minWidth: '24%' }}>
<View className={styles.leftCont}>
<LabAndImg value={labAndImgObj(mul)} />
</View>
</View>
<View className={styles.rightCont}>
<View className={styles.rightCont__container}>
<View className={styles.rightCont__left}>
<View className={styles.rightCont__top}>
{`#${formatRemoveHashTag(mul.code)} ${mul.name}`}
</View>
<View className={styles.rightCont__bottom}>
{/* {
item.affiliation_product?.map((product_color, index) => {
return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
})
} */}
</View>
</View>
<View className={styles.rightCont__right}>
x{mul.color_num}份
</View>
</View>
<Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
</View>
</View>
)
})
}
<View className={styles.paymentMethod}>快递到付</View>
</LayoutBlock>
})
}
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.orderInfoTop}>订单信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.orderInfoDetail}>
<Cell title="订单编号：" desc={
<>
<Text className={styles.orderInfoDetail__desc}>{order?.order_no}</Text>
<Tag type="primary" onClick={() => handleCopy(order?.order_no)}>复制</Tag>
</>
}
></Cell>
<Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
<Cell title="业务员：" desc={order?.sale_user_name}></Cell>
</View>
</LayoutBlock>
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
<View className={styles.orderInfoTop}>备注信息</View>
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.remark}>{order?.order_remark || '暂无备注信息'}</View>
</LayoutBlock>
</View>
<View className={styles.bottomBar}>
{
order.order_form?.[0].order_status === 5
? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
取消订单
</NormalButton>
: null
}
</View>
</View>
}
export default SampleCuttingDetail

3
src/pages/sampleCutting/sampleCuttingList/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '添加剪样',
}

186
src/pages/sampleCutting/sampleCuttingList/index.module.scss Normal file
View File

@ -0,0 +1,186 @@
page {
background: #f7f7f7;
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.main {
background-color: $color_bg_one;
height: 100%;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
}
.search {
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
align-items: center;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
&__cancel {
margin: 0 32px;
color: #727272;
font-size: 28px;
}
}
.context {
flex: 1 1 auto;
height: 100%;
overflow: hidden;
background-color: white;
}
.bottomBar {
position: relative;
z-index: 99;
box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
flex: none;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 24px;
background-color: white;
padding-bottom: calc(20px + constant(safe-area-inset-bottom));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.bottomBar__button {
width: 100%;
font-size: 28px;
}
.colorCard {
padding: 24px 0;
border-bottom: 1px solid #f6f6f6;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
&__image {
width: 144px;
height: 144px;
border-radius: 8px;
margin-right: 24px;
overflow: hidden;
position: relative;
}
&__title {
font-size: 28px;
color: #383838;
}
&__code {
font-size: 24px;
color: #b3b3b3;
}
&__content {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
.addButton {
width: 30%;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
.imageTag {
width: 50%;
background-color: #000;
box-sizing: border-box;
position: absolute;
padding: 7px;
bottom: 0px;
right: 0px;
opacity: 0.55;
color: #ffffff;
text-align: center;
font-size: 22px;
z-index: 1;
border-top-left-radius: 16px;
transform: perspective(1em) scale(1, 1.1) rotateX(5deg);
/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
transform-origin: bottom right;
}
.collection_con {
display: flex;
flex-flow: column nowrap;
max-height: 75vh;
.header {
padding: 32px 48px;
.title {
font-size: 32px;
@include common_ellipsis;
color: #3d3d3d;
font-weight: 500;
}
.sub_title {
font-size: 28px;
color: #b6b6b6;
margin-top: 8px;
}
}
.productList {
flex: 1 1 auto;
overflow-y: scroll;
margin-top: 30px;
padding: 0 48px;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
justify-content: space-between;
.item {
width: 100%;
margin-bottom: 28px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
.item_color {
box-sizing: border-box;
width: 136px;
height: 136px;
border-radius: 50%;
}
.item_name {
text-align: center;
margin-top: 10px;
font-size: 24px;
color: #666666;
@include common_ellipsis;
}
}
}
}
.popup_bottom {
padding: 12px;
padding-bottom: 0;
}
.productColorActive {
border: 4px solid $color_main;
position: relative;
.activeIcon {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
border: 4px solid white;
background-color: $color_main;
position: absolute;
top: -2px;
right: -2px;
box-sizing: border-box;
width: 32px;
height: 32px;
border: 2px solid $color_main;
border-radius: 50%;
z-index: 99;
}
}

355
src/pages/sampleCutting/sampleCuttingList/index.tsx Normal file
View File

@ -0,0 +1,355 @@
import { ScrollView, Text, View } from '@tarojs/components'
import Taro, { useDidShow, useRouter, useUnload } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import Search from '@/components/search'
import NormalButton from '@/components/normalButton'
import LabAndImg from '@/components/LabAndImg2'
import Tag from '@/components/tag'
import MCheckbox from '@/components/checkbox'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import { alert, goLink } from '@/common/common'
import { formatHashTag, formatRemoveHashTag } from '@/common/format'
import Popup from '@/components/popup'
import IconFont from '@/components/iconfont/iconfont'
import { GetCutSampleOrderColorList, GetCutSampleOrderProducts } from '@/api/sampleCutting'
export interface SampleCuttingCache {
product_id: number
product_code_and_name: string
multipleSelection: {
product_color_id: number
product_color_code: string
product_color_name: string
lab: {
l: number
a: number
b: number
}
rgb: {
r: number
g: number
b: number
}
texture_url: string
count: number
}[]
}
const SampleCuttingList = () => {
const router = useRouter()
const isAdd = router?.params?.isAddSampleCutIdList
const { fetchData, state } = GetCutSampleOrderProducts()
const [orderList, setOrderList] = useState<{ list: any[]; total: number }>({
list: [],
total: 0,
})
const multipleSelection = useRef<SampleCuttingCache[]>([])
// 搜索
const getSearchData = debounce((value: string) => {
console.log('search', value)
setSearchField(val => ({ ...val, product_code_and_name: value }))
}, 300)
// 取消
const handleCancel = () => {
Taro.navigateBack()
}
// redirectTo 会触发 onLoad 事件
let isRedirect = false
// 确认
const handleSubmit = () => {
Taro.setStorageSync('sampleCuttingCache', JSON.stringify(multipleSelection.current))
if (router?.params.isGoBack) {
isRedirect = true
Taro.navigateBack({
delta: 1,
})
}
else {
isRedirect = true
// 携带id跳转
goLink('/pages/sampleCutting/addSampleCutting/index', null, 'redirectTo')
}
}
const labAndImgObj = useCallback((item) => {
return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
}, [])
// 页码和页数
const [searchField, setSearchField] = useState<{ product_code_and_name?: string; product_ids?: string; page: number; size: number }>({
product_code_and_name: '',
product_ids: '',
page: 1,
size: 10,
})
const getData = async() => {
console.log('searchField==>', searchField)
const res = await fetchData(getFilterData(searchField))
if (!res.success) {
return alert.error(res.msg)
}
setOrderList({ list: res.data.list, total: res.data.total })
}
useEffect(() => {
getData()
}, [searchField])
useDidShow(() => {
const cache = Taro.getStorageSync('sampleCuttingCache')
if (cache) {
multipleSelection.current = JSON.parse(cache) as SampleCuttingCache[]
}
if (isAdd) {
console.log('isAdd', isAdd)
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
setSearchField(val => ({ ...val, product_ids: isAdd }))
}
})
// 上拉加载数据
const pageNum = useRef({ size: searchField.size, page: searchField.page })
// 列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
// 下拉刷新
const getRefresherRefresh = async() => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchField(val => ({ ...val, size: 10 }))
}
// 数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: orderList.list, total: orderList.total, status: state.loading! })
}, [orderList, state.loading])
const getScrollToLower = useCallback(() => {
if (orderList.list.length < orderList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({ ...searchField, size })
}
}, [orderList])
const { fetchData: getColorList } = GetCutSampleOrderColorList()
const currentSelect = useRef<any>({})
const handleClickAddButton = async(item: any) => {
currentSelect.current = item
const res = await getColorList({ id: item.id })
if (res.success) {
setProductList(res.data.list)
const index = multipleSelection.current.findIndex(val => val.product_id === item.id)
if (index !== -1) {
setProductMultipleSelection(multipleSelection.current[index].multipleSelection)
}
else {
setProductMultipleSelection([])
}
setShow(true)
}
else {
return alert.error(res.msg)
}
}
useUnload(() => {
console.log('onUnload', isRedirect)
if (!isRedirect) {
Taro.removeStorageSync('sampleCuttingCache')
}
})
const [show, setShow] = useState(false)
const onClose = () => {
setShow(false)
setProductMultipleSelection([])
}
const [productList, setProductList] = useState<any[]>([])
// 点击产品颜色
const handleClickProductColor = (item: any) => {
const index = productMultipleSelection.findIndex(val => val.product_color_id === item.product_color_id)
console.log(index, productMultipleSelection)
if (index !== -1) {
setProductMultipleSelection((prev) => {
prev.splice(index, 1)
return [...prev]
})
}
else {
setProductMultipleSelection(prev => [...prev, {
product_color_id: item.product_color_id,
product_color_code: item.product_color_code,
product_color_name: item.product_color_name,
lab: item.lab,
rgb: item.rgb,
texture_url: item.texture_url,
count: 1,
}])
}
}
const handleClose = () => {
onClose()
}
const handleAddProduct = () => {
const index = multipleSelection.current.findIndex(mul => mul.product_id === currentSelect.current.id)
if (index !== -1) {
multipleSelection.current[index].multipleSelection = productMultipleSelection
}
else {
multipleSelection.current.push({
product_id: currentSelect.current.id,
product_code_and_name: formatHashTag(currentSelect.current.code, currentSelect.current.name) as string,
multipleSelection: productMultipleSelection,
})
}
onClose()
}
const [productMultipleSelection, setProductMultipleSelection] = useState<SampleCuttingCache['multipleSelection']>([])
return <View className={styles.main}>
<View className={styles.search}>
<Search placeholder="请输入搜索面料剪样" showBtn={false} changeOnSearch={getSearchData} >
<View className={styles.search__cancel} onClick={handleCancel}>取消</View>
</Search>
</View>
<View className={styles.context}>
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrollToLower}
refresherEnabled
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}
safeAreaInsetBottom={false}
>
{
orderList.list.map((item) => {
return <View key={item.id} style={{ padding: '0 16px', backgroundColor: 'white' }}>
<View className={styles.colorCard}>
<View style={{ minWidth: '24%' }}>
<View className={styles.colorCard__image}>
<LabAndImg value={labAndImgObj(item)} />
{
item.is_multiple_product ? <View className={styles.imageTag}>24色</View> : null
}
</View>
</View>
<View className={styles.colorCard__content}>
<View className={styles.colorCard__title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.colorCard__code}>
<Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} size="small" circle>{item.width}</Tag>
<Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} size="small" circle>{item.weight_density}</Tag>
</View>
<View className={styles.colorCard__code}>
{item.component}
</View>
</View>
<View className={styles.addButton}>
<NormalButton
type="primary"
size="small"
customStyles={{ padding: '0 40rpx' }}
plain
round
onClick={() => handleClickAddButton(item)}
>
{
isAdd?.includes(item.id) || multipleSelection.current.some(mul => mul.product_id === item.id) ? '继续添加' : '添加'
}
</NormalButton>
{/* <MCheckbox
disabled={isAdd?.includes(item.id)}
status={isAdd?.includes(item.id) || item.status}
onSelect={() => onSelect(item)}
onClose={() => onUnSelect(item)}
/> */}
</View>
</View>
</View>
})
}
</InfiniteScroll>
</View>
<View className={styles.bottomBar}>
<NormalButton
customClassName={styles.bottomBar__button}
type="primary"
round
disabled={multipleSelection.current.length === 0}
onClick={handleSubmit}
>
{
multipleSelection.current.length ? `确认（已选 ${multipleSelection.current.length} 个）` : '确认'
}
</NormalButton>
</View>
<Popup show={show} onClose={onClose} showTitle={false}>
<View className={styles.collection_con}>
<View className={styles.header}>
<View className={styles.title}>{formatHashTag(currentSelect.current.code, currentSelect.current.name)}( {productList.length} )</View>
<View className={styles.sub_title}>
剪样大小为A4，大约22cm*30cm
</View>
</View>
<View className={styles.productList}>
{
productList.map((item, index) => {
const isChecked = productMultipleSelection.some(mul => mul.product_color_id === item.product_color_id)
return <View key={index} className={styles.item} onClick={() => handleClickProductColor(item)}>
<View className={classNames(styles.item_color, isChecked ? styles.productColorActive : null)}>
{
isChecked
? <View className={styles.activeIcon}>
<IconFont name="icon-lujing" size={20} color="white"></IconFont>
</View>
: null
}
<LabAndImg
value={item}
round
name={formatRemoveHashTag(item.product_color_code)}
/>
</View>
<View className={styles.item_name}>{item.product_color_name}</View>
</View>
})
}
</View>
</View>
<View className={classNames(styles.bottomBar, styles.popup_bottom)}>
<NormalButton
customClassName={styles.bottomBar__button}
type="primary"
round
plain
customStyles={{ width: '48%' }}
onClick={handleClose}
>
取消
</NormalButton>
<NormalButton
customClassName={styles.bottomBar__button}
type="primary"
round
customStyles={{ width: '48%' }}
disabled={productMultipleSelection.length === 0}
onClick={handleAddProduct}
>
领取剪样（{productMultipleSelection.length}）
</NormalButton>
</View>
</Popup>
</View>
}
export default SampleCuttingList

6
src/pages/user/index.tsx
View File

@ -85,6 +85,12 @@ const feature: IconCardType[] = [
path: '/pages/getColorCard/index',
jurisdiction: 'receive_color_card_page',
},
{
iconName: 'icon-lingquseka',
name: '领取剪样',
path: '/pages/sampleCutting/index',
jurisdiction: 'receive_color_card_page',
},
]
const fabric: IconCardType[] = [