✨ feat(ID1000804):销售单据调整数量、删除或新增面料；
This commit is contained in:
Haiyi
parent
eb0d906415
commit
02f2cf2bd7
@ -281,6 +281,20 @@
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
"pathName": "pages/orderEdit/index",
|
||||
"query": "orderId=34111",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
"pathName": "pages/orderEdit/index",
|
||||
"query": "orderId=33992",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -211,3 +211,17 @@ export const EnumPurchaserType = () => {
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
// 订单修改添加面料
|
||||
export const MpsaleOrderaddProductList = () => {
|
||||
return useRequest({
|
||||
url: '/v2/mp/saleOrder/addProductList',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
// 提交修改订单
|
||||
export const MpsaleOrdersubmit = () => {
|
||||
return useRequest({
|
||||
url: '/v2/mp/saleOrder/submit',
|
||||
method: 'put',
|
||||
})
|
||||
}
|
||||
|
||||
@ -140,5 +140,13 @@ export default defineAppConfig({
|
||||
root: 'pages/customerEditor',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: 'pages/orderEdit',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: 'pages/addFabric',
|
||||
pages: ['index'],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@ -72,6 +72,7 @@ const AddressList = (props: Params, AddressListRef) => {
|
||||
const { fetchData: selectFetch } = MpSaleOrderAddress()
|
||||
const handleSelect = async(item: any, index: number) => {
|
||||
if (router.params.orderId && router.params.orderId != '-100') {
|
||||
console.log(router.params.orderId != '-100', 'ssss')
|
||||
console.log(typeof (router.params.orderId) != 'undefined', 'router.params.orderId')
|
||||
Taro.showLoading({
|
||||
title: '请稍等...',
|
||||
|
||||
@ -20,6 +20,7 @@ interface prosObj {
|
||||
handApplyGoods?: () => void
|
||||
handApplyMoney?: () => void
|
||||
handShowCodeList?: () => void
|
||||
handEdit?: () => void
|
||||
showDetail?: boolean
|
||||
goodsObj?: any
|
||||
}
|
||||
@ -42,6 +43,7 @@ const BottomBtns = (props: prosObj, ref) => {
|
||||
handApplyGoods,
|
||||
handApplyMoney,
|
||||
handShowCodeList,
|
||||
handEdit,
|
||||
showDetail = false,
|
||||
goodsObj = {},
|
||||
} = props
|
||||
@ -94,6 +96,7 @@ const BottomBtns = (props: prosObj, ref) => {
|
||||
|| (obj.sale_mode === 2 && obj.status === 2)
|
||||
|| (obj.sale_mode === 2 && obj.status === 7)
|
||||
|| (obj.sale_mode === 1 && obj.status === 10)
|
||||
|| (obj.sale_mode === 1 && obj.status === 7)
|
||||
|| (obj.sale_mode === 2 && obj.status === 10)
|
||||
) {
|
||||
return true
|
||||
@ -158,6 +161,16 @@ const BottomBtns = (props: prosObj, ref) => {
|
||||
else { return false }
|
||||
}, [obj])
|
||||
|
||||
// 判断是否显示修改订单
|
||||
const showEdit = useMemo(() => {
|
||||
if (obj.status == 0 || obj.status == 1) {
|
||||
return true
|
||||
}
|
||||
else {
|
||||
return false
|
||||
}
|
||||
}, [obj])
|
||||
|
||||
// 多的不显示别的按钮
|
||||
const [btnList, setbtnList] = useState<any[]>([])
|
||||
const itemNums = useMemo(() => {
|
||||
@ -233,6 +246,16 @@ const BottomBtns = (props: prosObj, ref) => {
|
||||
sort: 2,
|
||||
})
|
||||
}
|
||||
if (showEdit) {
|
||||
nums = nums + 1
|
||||
console.log('101010')
|
||||
arr.push({
|
||||
key: 'showEdit',
|
||||
label: '修改订单',
|
||||
bgKind: 3,
|
||||
sort: 9,
|
||||
})
|
||||
}
|
||||
console.log(arr, 'arr')
|
||||
const fiterArr = arr.sort((a, b) => a.sort - b.sort)
|
||||
setbtnList([...fiterArr])
|
||||
@ -266,6 +289,9 @@ const BottomBtns = (props: prosObj, ref) => {
|
||||
if (key === 'canBuy') {
|
||||
toPay?.(e)
|
||||
}
|
||||
if (key === 'showEdit') {
|
||||
handEdit?.()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
125
src/pages/addFabric/components/goods/index.module.scss
Normal file
125
src/pages/addFabric/components/goods/index.module.scss
Normal file
@ -0,0 +1,125 @@
|
||||
.itemBox {
|
||||
width: 686px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
display: flex;
|
||||
margin-left: 32px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.picBox {
|
||||
margin-right: 24px;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.pic {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.posBox {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 69px;
|
||||
height: 29px;
|
||||
background: #000000;
|
||||
border-radius: 15px 0px 8px 0px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.leftBox {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
margin-right: 24px;
|
||||
|
||||
.pic {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.posBox {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 69px;
|
||||
height: 29px;
|
||||
background: #000000;
|
||||
border-radius: 15px 0px 8px 0px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
.productName {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #a6a6a6;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.flexTag {
|
||||
display: flex;
|
||||
|
||||
.tagOne {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
background: #e3ecff;
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #4581FF;
|
||||
text-align: center;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.tagTwo {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
background: #ffeedb;
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FE8E0F;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
43
src/pages/addFabric/components/goods/index.tsx
Normal file
43
src/pages/addFabric/components/goods/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { Image, View } from '@tarojs/components'
|
||||
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from '../goods/index.module.scss'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
|
||||
|
||||
const Goods = (props: any) => {
|
||||
const labAndImgObj = useCallback((item) => {
|
||||
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
|
||||
}, [])
|
||||
return (
|
||||
<View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
|
||||
{
|
||||
props.data?.texture_url === '' && <>
|
||||
|
||||
<View className={styles.picBox}>
|
||||
<Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
|
||||
<View className={styles.posBox}>{props.data?.product_color_count}色</View>
|
||||
</View>
|
||||
</>
|
||||
}
|
||||
{
|
||||
props.data?.texture_url !== ''
|
||||
&& <>
|
||||
<View className={styles.leftBox}>
|
||||
<LabAndImg value={labAndImgObj(props.data)} />
|
||||
{/* <Image className={styles.pic} mode={'aspectFill'} src={props.data?.picUrl}></Image> */}
|
||||
<View className={styles.posBox}>{props.data?.product_color_count}色</View>
|
||||
</View>
|
||||
</>
|
||||
}
|
||||
<View className={styles.rightBox}>
|
||||
<View className={styles.productName}>{formatHashTag(props.data?.code, props.data?.name)}</View>
|
||||
<View className={styles.tips}>{props.data?.component}</View>
|
||||
<View className={styles.flexTag}>
|
||||
<View className={styles.tagOne}>{props.data?.width}</View>
|
||||
<View className={styles.tagTwo}>{props.data?.weight_density}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default memo(Goods)
|
||||
221
src/pages/addFabric/components/goodsItem/index.module.scss
Normal file
221
src/pages/addFabric/components/goodsItem/index.module.scss
Normal file
@ -0,0 +1,221 @@
|
||||
.goodsBox {
|
||||
display: flex;
|
||||
margin-bottom: 32px;
|
||||
|
||||
// justify-content: space-between;
|
||||
.pic {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
border-radius: 8px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.rightGoodbox {
|
||||
padding-bottom: 31px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// margin-right: 32px;
|
||||
width: 538px;
|
||||
|
||||
.leftFontsbox {
|
||||
.title {
|
||||
width: 260px;
|
||||
height: 34px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: 0, 124, 247;
|
||||
}
|
||||
|
||||
.activeTitle {
|
||||
width: 260px;
|
||||
height: 34px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #9c9c9c;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: 0, 124, 247;
|
||||
}
|
||||
.productName {
|
||||
width: 260px;
|
||||
height: 30px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.productNums {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.activeProductNums {
|
||||
color: #9c9c9c;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.productNameone {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
height: 40px;
|
||||
}
|
||||
.activepPoductName {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #9c9c9c;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.rightFontsbox {
|
||||
.moneyFlex {
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.lastBox {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
text-decoration: line-through;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.money {
|
||||
margin-left: 15px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #f41a39;
|
||||
}
|
||||
.activeMoney {
|
||||
color: #fba4b0;
|
||||
margin-left: 15px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// .inputBox {
|
||||
// width: 189px;
|
||||
// height: 64px;
|
||||
// border-radius: 8px;
|
||||
// border: 1px solid #979797;
|
||||
// display: flex;
|
||||
|
||||
// .reduceBox {
|
||||
// width: 64px;
|
||||
// height: 64px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
|
||||
// .reduce {
|
||||
// width: 20px;
|
||||
// height: 3px;
|
||||
// background: #000000;
|
||||
// border-radius: 1px;
|
||||
// opacity: 0.8;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .numsBox {
|
||||
// width: 61px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// font-size: 24px;
|
||||
// font-weight: 400;
|
||||
// color: #000000;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// .addBox {
|
||||
// width: 64px;
|
||||
// height: 64px;
|
||||
// display: flex;
|
||||
// line-height: 64px;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// flex-direction: column;
|
||||
// color: #000;
|
||||
// font-size: 35px;
|
||||
// }
|
||||
// }
|
||||
.inputBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.reduceBox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #337fff;
|
||||
.reduce {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #337fff;
|
||||
border-radius: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.numsBox {
|
||||
width: 81px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.addBox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 35px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #337fff;
|
||||
background-color: #337fff;
|
||||
}
|
||||
}
|
||||
.addtine {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
font-size: 35px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #979797;
|
||||
float: right;
|
||||
}
|
||||
.isAdd {
|
||||
margin-top: 30px;
|
||||
float: right;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
126
src/pages/addFabric/components/goodsItem/index.tsx
Normal file
126
src/pages/addFabric/components/goodsItem/index.tsx
Normal file
@ -0,0 +1,126 @@
|
||||
import { Image, Input, ScrollView, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
|
||||
interface props {
|
||||
clickAdd: (any) => void
|
||||
// onInputEven?: (a: any, c: any) => void,
|
||||
clickReduce: (any) => void
|
||||
handPlus: (any) => void
|
||||
modeFont?: number
|
||||
value: {
|
||||
showInput?: boolean
|
||||
nums?: string
|
||||
bulk_price?: Number | 0
|
||||
length_cut_price?: Number
|
||||
weight_cut_price?: Number
|
||||
code?: string
|
||||
rgb?: { r: number; g: number; b: number }
|
||||
lab?: { l: number; a: number; b: number }
|
||||
texture_url: string
|
||||
name?: string
|
||||
roll?: number | string
|
||||
buyNums?: number | string
|
||||
id?: number
|
||||
isChecked?: boolean
|
||||
weight_error?: number | string
|
||||
last_bulk_price?: number
|
||||
last_length_cut_price?: number
|
||||
last_weight_cut_price?: number
|
||||
}
|
||||
goodList?: any[]
|
||||
onBlur?: (a: any, c: any) => void
|
||||
}
|
||||
const GoodsItem = (props: props) => {
|
||||
const [value, setValue] = useState<any>({ count: props.value.nums })
|
||||
|
||||
const onInputEven = (e) => {
|
||||
const res = e.detail.value
|
||||
if (props.modeFont == 0) {
|
||||
if (Number(res) < 1) {
|
||||
setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
if (props.modeFont == 1) {
|
||||
if (Number(res) < 0) {
|
||||
setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
if (props.modeFont == 2) {
|
||||
if (Number(res) < 0) {
|
||||
setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const type = useMemo(() => {
|
||||
if (props.modeFont === 0) {
|
||||
return 'number'
|
||||
}
|
||||
else {
|
||||
return 'digit'
|
||||
}
|
||||
}, [props.modeFont])
|
||||
|
||||
const labAndImgObj = useCallback((item) => {
|
||||
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
|
||||
}, [])
|
||||
return (
|
||||
<View className={styles.goodsBox}>
|
||||
|
||||
{/* {
|
||||
props?.value?.rgb?.r == 0 && props?.value?.rgb?.g == 0 && props?.value?.rgb?.b == 0 && <Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
|
||||
}
|
||||
{
|
||||
(props?.value?.rgb?.r != 0 || props?.value?.rgb?.g != 0 || props?.value?.rgb?.b != 0)
|
||||
&& <View className={styles.pic} style={{ backgroundColor: `rgb(${props?.value?.rgb?.r} ${props?.value?.rgb?.g} ${props?.value.rgb?.b})` }}></View>
|
||||
} */}
|
||||
<View className={styles.pic}>
|
||||
<LabAndImg value={labAndImgObj(props.value)} />
|
||||
</View>
|
||||
<View className={styles.rightGoodbox}>
|
||||
<View className={styles.leftFontsbox}>
|
||||
<View className={classnames(props.value.isChecked ? styles.activeTitle : styles.title)}>{props.value?.code} {props.value?.name}</View>
|
||||
<View className={classnames(props.value.isChecked ? styles.activeProductNums : styles.productNums)}>剩：{props.value?.roll}件</View>
|
||||
{
|
||||
props?.modeFont == 0 && <View className={classnames(props.value.isChecked ? styles.activepPoductName : styles.productNameone)}>空差：{props?.value?.weight_error as number / 1000 || 0}Kg</View>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.rightFontsbox}>
|
||||
<View className={styles.moneyFlex}>
|
||||
{
|
||||
props?.modeFont == 0 && props.value?.last_bulk_price !== props.value?.bulk_price && <View className={styles.lastBox}>¥{props?.modeFont == 0 ? Number(props.value?.last_bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.last_length_cut_price) / 100 : Number(props.value?.last_weight_cut_price) / 100} {props.modeFont as any != 1 ? '/Kg' : '/m'}</View>
|
||||
}
|
||||
<View className={classnames(props.value.isChecked ? styles.activeMoney : styles.money)}>¥{props?.modeFont == 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont == 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont != 1 ? '/Kg' : '/m'}</View>
|
||||
</View>
|
||||
{
|
||||
!props.value.isChecked && props.value.showInput && <View className={styles.inputBox}>
|
||||
<View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
|
||||
<View className={styles.reduce}>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.numsBox}>
|
||||
<Input alwaysEmbed cursorSpacing={100} adjustPosition type={type as any} value={value.count} onInput={onInputEven} onBlur={e => props.onBlur?.(e, props.value.id)}></Input>
|
||||
|
||||
{/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
|
||||
</View>
|
||||
<View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
|
||||
+
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
{
|
||||
!props.value.showInput && !props.value.isChecked && <View className={styles.addtine} onClick={() => props.clickAdd?.(props.value)}>+</View>
|
||||
}
|
||||
{
|
||||
props.value.isChecked && <View className={styles.isAdd} >面料已添加</View>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default memo(GoodsItem)
|
||||
// ($event) => onInputEven($event, props.value)
|
||||
163
src/pages/addFabric/components/shoppingCart/index.module.scss
Normal file
163
src/pages/addFabric/components/shoppingCart/index.module.scss
Normal file
@ -0,0 +1,163 @@
|
||||
.shopcartBox {
|
||||
padding: 0 32px;
|
||||
|
||||
.topTitle {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.selectFont {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-bottom: 24px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.typeFont {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.flexType {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.activemodeFont {
|
||||
margin-right: 16px;
|
||||
width: 160px;
|
||||
height: 68px;
|
||||
background: rgba(51, 127, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #337fff;
|
||||
box-sizing: border-box;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #337fff;
|
||||
text-align: center;
|
||||
line-height: 68px;
|
||||
}
|
||||
|
||||
.modeFont {
|
||||
margin-right: 16px;
|
||||
width: 160px;
|
||||
height: 68px;
|
||||
background: #e9e9e9;
|
||||
border-radius: 8px;
|
||||
opacity: 0.4;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
line-height: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.flexFonts {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.kingFont {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.danwei {
|
||||
margin-left: 16px;
|
||||
width: 148px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e42945;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #e42945;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.scrollviewBig {
|
||||
.scrollview {
|
||||
// height: 300px;
|
||||
|
||||
.kongBox {
|
||||
height: 181px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kongOne {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.loading_more {
|
||||
height: 300px;
|
||||
padding-bottom: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.posBox {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.noBottom {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
.flexBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.selectFont {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #cfcfcf;
|
||||
}
|
||||
.rightBtn {
|
||||
margin-right: 48px;
|
||||
width: 256px;
|
||||
height: 80px;
|
||||
background: #4581ff;
|
||||
border-radius: 40px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrllStyle {
|
||||
height: 75vh;
|
||||
}
|
||||
216
src/pages/addFabric/components/shoppingCart/index.tsx
Normal file
216
src/pages/addFabric/components/shoppingCart/index.tsx
Normal file
@ -0,0 +1,216 @@
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import VirtualList from '@tarojs/components/virtual-list'
|
||||
import Goods from '../goodsItem'
|
||||
import styles from './index.module.scss'
|
||||
import Divider from '@/components/Divider'
|
||||
import Search from '@/components/search'
|
||||
import Popup from '@/components/popup'
|
||||
import BottomCustomer from '@/components/BottomCustomer'
|
||||
import DotLoading from '@/components/dotLoading'
|
||||
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
|
||||
|
||||
interface prosObj {
|
||||
sale_mode?: number
|
||||
showPopup?: false | true
|
||||
closePopup?: () => void
|
||||
goodList?: any[]
|
||||
// typeList?: any[]
|
||||
handCheck?: (any) => void
|
||||
addNums?: (any) => void
|
||||
reduceNums?: (any) => void
|
||||
getSearchData: (any) => void
|
||||
handPlus: (any) => void
|
||||
handSure: () => void
|
||||
obj?: {
|
||||
code?: string
|
||||
name?: string
|
||||
|
||||
}
|
||||
modeFont: Number | string
|
||||
hasBottom?: true | false // 默认不占位底部
|
||||
onBlur?: (e: string, res: object) => void
|
||||
}
|
||||
const ShoppingCart = (props: prosObj, ref) => {
|
||||
const {
|
||||
sale_mode = -1,
|
||||
showPopup = false,
|
||||
closePopup,
|
||||
goodList = [],
|
||||
handCheck,
|
||||
addNums,
|
||||
reduceNums,
|
||||
getSearchData,
|
||||
handPlus,
|
||||
obj = {},
|
||||
modeFont = 0,
|
||||
handSure,
|
||||
hasBottom = true,
|
||||
onBlur,
|
||||
} = props
|
||||
|
||||
const SearchRef = useRef<any>()
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
Object: props,
|
||||
SearchRef,
|
||||
}))
|
||||
|
||||
// 判断选择的类型
|
||||
const showModefont = useMemo(() => {
|
||||
if (sale_mode == 0) {
|
||||
return '条'
|
||||
}
|
||||
else {
|
||||
return '米'
|
||||
}
|
||||
}, [sale_mode])
|
||||
|
||||
// 已选的颜色
|
||||
const selectTotal = useMemo(() => {
|
||||
const totalArr = goodList.filter((item) => {
|
||||
return item.showInput
|
||||
})
|
||||
return totalArr.length
|
||||
}, [goodList])
|
||||
|
||||
// 选择的条数或者米数
|
||||
const selectNums = useMemo(() => {
|
||||
const arr: any = []
|
||||
goodList.forEach((item) => {
|
||||
if (item.showInput) {
|
||||
arr.push(Number(item.nums))
|
||||
}
|
||||
})
|
||||
const hate = sum(arr)
|
||||
return hate
|
||||
}, [goodList])
|
||||
// onInputEven={(e, item) => oninputEvent?.(e, item)}
|
||||
|
||||
function sum(arr) {
|
||||
let s = 0
|
||||
for (let i = arr.length - 1; i >= 0; i--) {
|
||||
s += arr[i]
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
// 确认添加
|
||||
const handTake = () => {
|
||||
if (selectTotal == 0) {
|
||||
return Taro.showToast({
|
||||
title: '请选择一条添加！',
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
else {
|
||||
handSure()
|
||||
}
|
||||
}
|
||||
|
||||
const rows = ({ id, index, style, data }: any) => {
|
||||
const item = data[index]
|
||||
return (
|
||||
<>
|
||||
<Goods
|
||||
onBlur={(e, id) => onBlur?.(e, id)}
|
||||
modeFont={(sale_mode as number)}
|
||||
handPlus={item => handPlus?.(item)}
|
||||
value={item || {}}
|
||||
clickAdd={item => addNums?.(item)}
|
||||
clickReduce={(item) => { reduceNums?.(item) }}
|
||||
goodList={goodList}
|
||||
></Goods>
|
||||
</>
|
||||
)
|
||||
}
|
||||
const Rows = memo(rows)
|
||||
|
||||
return (
|
||||
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
|
||||
<ScrollView className={styles.scrllStyle} scrollY>
|
||||
<View className={styles.shopcartBox}>
|
||||
<View className={styles.topTitle}>
|
||||
{formatHashTag(obj?.code, obj?.name)}
|
||||
</View>
|
||||
{/* <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider> */}
|
||||
{/* <View className={styles.typeFont}>布料类型</View>
|
||||
<View className={styles.flexType}>
|
||||
{typeList.map((item, index) => {
|
||||
return (
|
||||
<View
|
||||
onClick={() => {
|
||||
handCheck?.(item)
|
||||
}}
|
||||
key={index}
|
||||
className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}
|
||||
>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View> */}
|
||||
<View style={{ position: 'sticky', top: 0, background: 'white', zIndex: '9999' }}>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.flexFonts}>
|
||||
<View className={styles.kingFont}>颜色分类({goodList?.length})</View>
|
||||
<View className={styles.danwei}>
|
||||
{sale_mode == 0 ? '大货' : sale_mode == 1 ? '剪版' : '散剪'}单位：{showModefont}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.searchBox}>
|
||||
<Search
|
||||
ref={SearchRef}
|
||||
cursorSpacing={100}
|
||||
placeholder="请输入搜索布料"
|
||||
showBtn={false}
|
||||
changeOnSearch={getSearchData}
|
||||
adjustPosition
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
{goodList.length > 0 && (
|
||||
<>
|
||||
<View className={styles.scrollviewBig}>
|
||||
<VirtualList
|
||||
className={styles.scrollview}
|
||||
height={350} /* 列表的高度 */
|
||||
width="100%" /* 列表的宽度 */
|
||||
itemData={goodList} /* 渲染列表的数据 */
|
||||
itemCount={goodList.length + 0} /* 渲染列表的长度 */
|
||||
itemSize={100} /* 列表单项的高度 */
|
||||
overscanCount={1}
|
||||
>
|
||||
{Rows}
|
||||
</VirtualList>
|
||||
</View>
|
||||
|
||||
{/* <View className={styles.kongOne}></View> */}
|
||||
</>
|
||||
)}
|
||||
{goodList.length === 0 && (
|
||||
<>
|
||||
<View className={styles.loading_more}>
|
||||
加载中
|
||||
<DotLoading />
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
{/* {!hasBottom && <View style={{ height: '100rpx' }}></View>} */}
|
||||
{/* <View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}> */}
|
||||
<View className={styles.noBottom}>
|
||||
<View className={styles.flexBox}>
|
||||
<View className={styles.selectFont}>
|
||||
当前已选{selectTotal} 种颜色，共 {selectNums} {showModefont}
|
||||
</View>
|
||||
<View className={styles.rightBtn} onClick={() => handTake()}>确认添加</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
export default memo(forwardRef(ShoppingCart))
|
||||
3
src/pages/addFabric/index.config.ts
Normal file
3
src/pages/addFabric/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '添加面料',
|
||||
}
|
||||
91
src/pages/addFabric/index.module.scss
Normal file
91
src/pages/addFabric/index.module.scss
Normal file
@ -0,0 +1,91 @@
|
||||
page {
|
||||
background: #ffff;
|
||||
}
|
||||
|
||||
.main {
|
||||
background: #ffff;
|
||||
|
||||
.topBox {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.cancelFont {
|
||||
width: 76px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 750px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.05;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.order_list {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
.topBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.histroyLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.histroyFonts {
|
||||
margin-left: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.back {
|
||||
margin-right: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_delect {
|
||||
margin-right: 45px;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
.bigBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 32px;
|
||||
|
||||
.itemBox {
|
||||
background: #f7f7f7;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
428
src/pages/addFabric/index.tsx
Normal file
428
src/pages/addFabric/index.tsx
Normal file
@ -0,0 +1,428 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
|
||||
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import Goods from './components/goods'
|
||||
import ShopCart from './components/shoppingCart'
|
||||
import Search from '@/components/search'
|
||||
import Empty from '@/components/empty'
|
||||
import { MpProductList } from '@/api/search'
|
||||
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
|
||||
import {
|
||||
MpProductColorList,
|
||||
} from '@/api/order'
|
||||
import { ProductListApi } from '@/api/index'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
|
||||
const SearchPage = () => {
|
||||
const pages = Taro.getCurrentPages() // 获取当前的页面栈
|
||||
const prevPage = pages[pages.length - 2]
|
||||
const router: any = useRouter()
|
||||
const onj = JSON.parse(Taro.getStorageSync('userInfo'))
|
||||
const [search, setSearchObj] = useState({
|
||||
modeId: router.params.sale_mode,
|
||||
goodsId: null,
|
||||
code_or_name: '',
|
||||
physical_warehouse: onj.physical_warehouse,
|
||||
purchaser_id: -1,
|
||||
})
|
||||
|
||||
const [paramGoods, setparamGoods] = useState<any[]>([])
|
||||
|
||||
useDidShow(() => {
|
||||
prevPage.setData({ // 设置上一个页面的值
|
||||
selectGoodsList: [],
|
||||
productId: '',
|
||||
})
|
||||
let arr: any[] = []
|
||||
arr = JSON.parse(decodeURIComponent(router.params.goodList))
|
||||
setparamGoods(arr)
|
||||
})
|
||||
|
||||
const [goodList, setGoodlist] = useState<any[]>([])
|
||||
|
||||
const [showShopCart, setShowShopCart] = useState(false)
|
||||
|
||||
// 获取商品
|
||||
const { fetchData: colorlistFetch } = MpProductColorList()
|
||||
const getGoodList = async() => {
|
||||
const res = await colorlistFetch({ product_id: search.goodsId, code_or_name: search.code_or_name, physical_warehouse: search?.physical_warehouse, purchaser_id: router.params.purchaser_id })
|
||||
res.data.list.map((item) => {
|
||||
item.showInput = false
|
||||
if (search.modeId == 0) {
|
||||
item.nums = 1
|
||||
item.buyNums = 1
|
||||
}
|
||||
if (search.modeId == 1) {
|
||||
item.nums = 0.3
|
||||
item.buyNums = 0.3
|
||||
}
|
||||
if (search.modeId == 2) {
|
||||
item.nums = 3
|
||||
item.buyNums = 3
|
||||
}
|
||||
return item
|
||||
})
|
||||
paramGoods?.forEach((edg) => {
|
||||
if (search.goodsId == edg.id) {
|
||||
edg?.product_colors?.forEach((it) => {
|
||||
res.data.list?.map((gg) => {
|
||||
if (it.id == gg.id) {
|
||||
gg.isChecked = true
|
||||
}
|
||||
return gg
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
setGoodlist([...res.data.list])
|
||||
}
|
||||
|
||||
// 监听选择的类型
|
||||
useEffect(() => {
|
||||
setSearchObj(search)
|
||||
if (search.goodsId) { getGoodList() }
|
||||
}, [search])
|
||||
|
||||
// 确认添加
|
||||
const handSure = () => {
|
||||
setShowShopCart(false)
|
||||
let arr: any[] = []
|
||||
// 洗数据将面料Id底下的数据再装到自己的颜色列表里面
|
||||
arr = orderData?.list?.filter((item) => {
|
||||
return item.id == search.goodsId
|
||||
})
|
||||
const filterArr = goodList.filter((item) => {
|
||||
return item.showInput
|
||||
})
|
||||
arr.forEach((item) => {
|
||||
filterArr.forEach((it) => {
|
||||
// it.sale_price = search.modeId == 0 ? it.bulk_price : search.modeId == 1 ? it.length_cut_price : it.weight_cut_price
|
||||
item.product_colors = [...filterArr]
|
||||
})
|
||||
})
|
||||
if (filterArr.length > 0) {
|
||||
prevPage.setData({ // 设置上一个页面的值
|
||||
selectGoodsList: arr,
|
||||
productId: search.goodsId,
|
||||
})
|
||||
}
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
|
||||
// 点击输入框的加
|
||||
const handPlus = useCallback((item) => {
|
||||
goodList.map((it) => {
|
||||
if (item.id === it.id) {
|
||||
if (isInteger(item.nums)) {
|
||||
item.nums++
|
||||
}
|
||||
else {
|
||||
item.nums++
|
||||
item.nums = Math.trunc(item.nums)
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}, [goodList])
|
||||
|
||||
// 输入了搜索关键字
|
||||
const getSearchDataInput = useCallback((eq) => {
|
||||
setSearchObj(e => ({ ...e, code_or_name: eq }))
|
||||
}, [])
|
||||
|
||||
const [goodObj, setGoodsobj] = useState({})
|
||||
const ShopCartRef = useRef<any>()
|
||||
// 点击对应商品显示购物车
|
||||
const showCart = async(item) => {
|
||||
setSearchObj(e => ({ ...e, goodsId: item.id, purchaser_id: router.params.purchaser_id }))
|
||||
setShowShopCart(true)
|
||||
setGoodsobj(item)
|
||||
ShopCartRef.current.SearchRef.current.clearInput()
|
||||
}
|
||||
|
||||
// 点击加展示输入框
|
||||
const handAdd = useCallback((item) => {
|
||||
goodList.map((it) => {
|
||||
if (item.id === it.id) {
|
||||
it.showInput = true
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}, [goodList])
|
||||
|
||||
// 点击减
|
||||
const reduceNums = useCallback((item) => {
|
||||
goodList.map((it) => {
|
||||
if (item.id === it.id) {
|
||||
if (isInteger(item.nums)) {
|
||||
item.nums--
|
||||
}
|
||||
else {
|
||||
item.nums = Math.trunc(item.nums)
|
||||
}
|
||||
|
||||
if (search.modeId == 0) {
|
||||
if (item.nums < 1) {
|
||||
it.showInput = false
|
||||
it.nums = 1
|
||||
}
|
||||
}
|
||||
if (search.modeId == 1) {
|
||||
if (item.nums < 0.3) {
|
||||
it.showInput = false
|
||||
it.nums = 0.3
|
||||
}
|
||||
}
|
||||
if (search.modeId == 2) {
|
||||
if (item.nums < 3) {
|
||||
it.showInput = false
|
||||
it.nums = 3
|
||||
}
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}, [goodList])
|
||||
|
||||
// 选择类型
|
||||
// const handCheckMode = (item) => {
|
||||
// typeList.map((it) => {
|
||||
// if (it.id === item.id) {
|
||||
// it.checked = true
|
||||
// setSearchObj(e => ({ ...e, modeId: it.id }))
|
||||
// }
|
||||
// else {
|
||||
// it.checked = false
|
||||
// }
|
||||
// return it
|
||||
// })
|
||||
// setTypeList([...typeList])
|
||||
// setGoodlist([])
|
||||
// }
|
||||
|
||||
// 关闭弹窗
|
||||
const closePoup = () => {
|
||||
setShowShopCart(false)
|
||||
}
|
||||
|
||||
// 搜索商品的数组
|
||||
const [searchList, setSearchList] = useState<any[]>([])
|
||||
// 是否有值输入框
|
||||
const [hasFonts, setHasFonts] = useState(false)
|
||||
// useEffect(() => {
|
||||
// getHistory()
|
||||
// }, [])
|
||||
|
||||
// 搜索获取商品数据
|
||||
const { fetchData: productFetch } = MpProductList()
|
||||
const getProduct = debounce(async(e) => {
|
||||
Taro.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true,
|
||||
})
|
||||
// await historyputFetch({ key: e, scene: 0 }).then((res) => {
|
||||
// if (res.data) {
|
||||
// getHistory()
|
||||
// }
|
||||
// })
|
||||
productFetch({ code_or_name: e }).then((res) => {
|
||||
if (res.data) {
|
||||
Taro.hideLoading()
|
||||
setSearchList([...res?.data?.list])
|
||||
}
|
||||
})
|
||||
}, 300)
|
||||
|
||||
// 输入了搜索关键字
|
||||
const getSearchData = useCallback((e) => {
|
||||
if (e) {
|
||||
setHasFonts(true)
|
||||
getProduct(e)
|
||||
}
|
||||
else {
|
||||
setHasFonts(false)
|
||||
setSearchList([])
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 返回
|
||||
const back = () => {
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
// 判断是否整数类型
|
||||
function isInteger(obj) {
|
||||
return (obj | 0) === obj
|
||||
}
|
||||
|
||||
// 输入框失焦
|
||||
const onBlur = (e, id) => {
|
||||
goodList.map((item) => {
|
||||
if (item.id == id) {
|
||||
if (search.modeId == 0 && (e.detail.value == '' || Number(e.detail.value) == 0)) {
|
||||
item.showInput = false
|
||||
item.nums = 1
|
||||
}
|
||||
else if (search.modeId == 0 && (e.detail.value != '' || Number(e.detail.value) > 0)) {
|
||||
item.nums = e.detail.value
|
||||
}
|
||||
if (search.modeId == 1 && Number(e.detail.value) < 0.3) {
|
||||
item.nums = 0.3
|
||||
item.showInput = false
|
||||
}
|
||||
else if (search.modeId == 1 && Number(e.detail.value) >= 0.3) {
|
||||
if (isInteger(Number(e.detail.value))) {
|
||||
item.nums = Number(e.detail.value)
|
||||
}
|
||||
else {
|
||||
item.nums = Number(e.detail.value).toFixed(2)
|
||||
}
|
||||
}
|
||||
if (search.modeId == 2 && Number(e.detail.value) < 3) {
|
||||
item.nums = 3
|
||||
item.showInput = false
|
||||
}
|
||||
else if (search.modeId == 2 && Number(e.detail.value) >= 3) {
|
||||
if (isInteger(Number(e.detail.value))) {
|
||||
item.nums = Number(e.detail.value)
|
||||
}
|
||||
else {
|
||||
item.nums = Number(e.detail.value).toFixed(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}
|
||||
|
||||
// 选择中后的值到输入框
|
||||
const [defaultvalue, setdefaultvalue] = useState('')
|
||||
|
||||
const { fetchData: productFetchData, state: orderState } = ProductListApi()
|
||||
|
||||
// 页码和页数
|
||||
const [searchField, setSearchField] = useState<{ page: number; size: number }>({
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
// 监听筛选条件变化
|
||||
useEffect(() => {
|
||||
getOrderList()
|
||||
}, [searchField])
|
||||
|
||||
const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
|
||||
|
||||
const pageNum = useRef({ size: searchField.size, page: searchField.page })
|
||||
|
||||
// 数据加载状态
|
||||
const statusMore = useMemo(() => {
|
||||
console.log({ list: orderData.list, total: orderData.total, status: orderState.loading }, '{ list: orderData.list, total: orderData.total, status: orderState.loading }')
|
||||
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading! })
|
||||
}, [orderData, orderState])
|
||||
|
||||
const getScrolltolower = useCallback(() => {
|
||||
if (orderData.list.length < orderData.total) {
|
||||
pageNum.current.page++
|
||||
const size = pageNum.current.size * pageNum.current.page
|
||||
setSearchField({ ...searchField, size })
|
||||
}
|
||||
}, [orderData])
|
||||
|
||||
// 列表下拉刷新
|
||||
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
||||
const getOrderList = async() => {
|
||||
const res = await productFetchData({
|
||||
...getFilterData(searchField),
|
||||
})
|
||||
setOrderData(e => ({ ...e, list: res.data?.list, total: res.data?.total }))
|
||||
setRefresherTriggeredStatus(() => false)
|
||||
}
|
||||
|
||||
const getRefresherRefresh = async() => {
|
||||
pageNum.current.size = 1
|
||||
setRefresherTriggeredStatus(true)
|
||||
setSearchField(val => ({ ...val, size: 10 }))
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.main}>
|
||||
<View className={styles.topBox}>
|
||||
<Search placeholder="请输入搜索布料" defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} >
|
||||
<View className={styles.cancelFont} onClick={() => back()}>取消</View>
|
||||
</Search>
|
||||
</View>
|
||||
<View className={styles.line}></View>
|
||||
{
|
||||
!hasFonts && <>
|
||||
<View className={styles.order_list}>
|
||||
<InfiniteScroll
|
||||
statusMore={statusMore}
|
||||
selfonScrollToLower={getScrolltolower}
|
||||
refresherEnabled
|
||||
refresherTriggered={refresherTriggeredStatus}
|
||||
selfOnRefresherRefresh={getRefresherRefresh}
|
||||
>
|
||||
{orderData?.list?.map((item, index) => {
|
||||
return (
|
||||
<View key={item.id} className={styles.order_item_con}>
|
||||
<Goods clickItem={() => showCart(item)} key={index} data={item}></Goods>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
</>
|
||||
}
|
||||
{
|
||||
hasFonts && <>
|
||||
<View className={styles.topBox}>
|
||||
<View className={styles.histroyLeft}>
|
||||
<View className={styles.histroyFonts}>搜索结果</View>
|
||||
{/* <View className={styles.back} onClick={() => handBack()}>返回</View> */}
|
||||
</View>
|
||||
</View>
|
||||
{
|
||||
!!searchList.length && searchList.map((item, index) => {
|
||||
return (
|
||||
<Goods clickItem={() => showCart(item)} key={index} data={item}></Goods>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
!searchList.length && <Empty picUrl="https://cdn.zzfzyc.com/empty.png" text="暂无数据"></Empty>
|
||||
}
|
||||
</>
|
||||
}
|
||||
<ShopCart
|
||||
ref={ShopCartRef}
|
||||
sale_mode={router.params.sale_mode}
|
||||
handSure={() => handSure()}
|
||||
modeFont={router.params.sale_mode}
|
||||
handPlus={item => handPlus(item)}
|
||||
obj={goodObj}
|
||||
getSearchData={(e) => { getSearchDataInput(e) }}
|
||||
hasBottom={false}
|
||||
reduceNums={(item) => { reduceNums(item) }}
|
||||
addNums={(item) => { handAdd(item) }}
|
||||
showPopup={showShopCart}
|
||||
closePopup={() => closePoup()}
|
||||
goodList={goodList}
|
||||
onBlur={(e, id) => onBlur(e, id)}
|
||||
></ShopCart>
|
||||
|
||||
</View>
|
||||
|
||||
)
|
||||
}
|
||||
export default memo(SearchPage)
|
||||
// oninputEvent={(e, item) => { onInputEven?.(e, item) }}
|
||||
@ -1,228 +1,239 @@
|
||||
.itemBox {
|
||||
margin-top: 38px;
|
||||
overflow: hidden;
|
||||
margin-right: 24px;
|
||||
// height: 560px;
|
||||
padding-bottom: 20px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
margin-left: 24px;
|
||||
margin-top: 38px;
|
||||
overflow: hidden;
|
||||
margin-right: 24px;
|
||||
// height: 560px;
|
||||
padding-bottom: 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
margin-left: 24px;
|
||||
|
||||
.topItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
.topItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
|
||||
.orderNo {
|
||||
.orderNo {
|
||||
font-size: 28px;
|
||||
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-left: 32px;
|
||||
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-right: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #0D7CFF;
|
||||
}
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-right: 32px;
|
||||
font-size: 28px;
|
||||
|
||||
font-weight: 500;
|
||||
color: #0d7cff;
|
||||
}
|
||||
}
|
||||
.flexBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.pussName {
|
||||
margin-left: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-left: 32px;
|
||||
font-size: 28px;
|
||||
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
.editFont {
|
||||
margin-right: 32px;
|
||||
width: 84px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #337fff;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
font-weight: 400;
|
||||
color: #337fff;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-left: 32px;
|
||||
// width: 638px;
|
||||
margin-right: 32px;
|
||||
height: 1px;
|
||||
background: #e7e7e7;
|
||||
// opacity: 0.1;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contBox {
|
||||
// padding-right: 32px;
|
||||
// width: 100%;
|
||||
// width: 638rpx;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.leftCont {
|
||||
// min-width: 24%;
|
||||
width: 134px;
|
||||
height: 134px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.leftContNums {
|
||||
width: 134px;
|
||||
height: 39px;
|
||||
background: #000000;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 20px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-left: 32px;
|
||||
// width: 638px;
|
||||
margin-right: 32px;
|
||||
height: 1px;
|
||||
background: #e7e7e7;
|
||||
// opacity: 0.1;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.rightCont {
|
||||
min-width: 76%;
|
||||
margin-left: 24px;
|
||||
|
||||
.contBox {
|
||||
// padding-right: 32px;
|
||||
// width: 100%;
|
||||
// width: 638rpx;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.leftCont {
|
||||
// min-width: 24%;
|
||||
width: 134px;
|
||||
height: 134px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.leftContNums {
|
||||
width: 134px;
|
||||
height: 39px;
|
||||
background: #000000;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
min-width: 76%;
|
||||
margin-left: 24px;
|
||||
|
||||
.rightTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 76%;
|
||||
// width: 480px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.productBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.productName {
|
||||
max-width: 285px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 8px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.productMode {
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
background: #337FFF;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipMode {
|
||||
margin-right: 60px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.colorsBox {
|
||||
padding-right: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 480px;
|
||||
// margin-right: 32px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.colorNameOne {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
width: 133px;
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.colorName {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colorNameTwo {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.lineOne {
|
||||
// width: 638px;
|
||||
margin-right: 32px;
|
||||
height: 1px;
|
||||
background: #e7e7e7;
|
||||
// opacity: 0.1;
|
||||
margin-left: 32px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.bottomMsg {
|
||||
|
||||
margin-top: 16px;
|
||||
.rightTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 76%;
|
||||
// width: 480px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.msgLeft {
|
||||
margin-left: 32px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.productBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.msgRight {
|
||||
margin-right: 32px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.msgRightOne {
|
||||
margin-right: 32px;
|
||||
.productName {
|
||||
max-width: 285px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 8px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.productMode {
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
background: #337fff;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
|
||||
font-weight: 500;
|
||||
color: #F64861;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipMode {
|
||||
margin-right: 60px;
|
||||
font-size: 28px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.colorsBox {
|
||||
padding-right: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 480px;
|
||||
// margin-right: 32px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.colorNameOne {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
width: 133px;
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.colorName {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colorNameTwo {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lineOne {
|
||||
// width: 638px;
|
||||
margin-right: 32px;
|
||||
height: 1px;
|
||||
background: #e7e7e7;
|
||||
// opacity: 0.1;
|
||||
margin-left: 32px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.bottomMsg {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.msgLeft {
|
||||
margin-left: 32px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
margin-top: 40px;
|
||||
.msgRight {
|
||||
margin-right: 32px;
|
||||
font-size: 24px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
}
|
||||
|
||||
.msgRightOne {
|
||||
margin-right: 32px;
|
||||
font-size: 28px;
|
||||
|
||||
font-weight: 500;
|
||||
color: #f64861;
|
||||
}
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,7 +49,12 @@ const ItemList = (props: propsObj) => {
|
||||
<View className={styles.orderNo}>单号：{props?.obj?.order_no}</View>
|
||||
<View className={styles.status}>{props?.obj?.status_name}</View>
|
||||
</View>
|
||||
<View className={styles.pussName}>{props?.obj?.purchaser_name}</View>
|
||||
<View className={styles.flexBox}>
|
||||
<View className={styles.pussName}>{props?.obj?.purchaser_name}</View>
|
||||
{
|
||||
props?.obj?.is_modify && <View className={styles.editFont}>已修改</View>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.line}></View>
|
||||
<View className={styles.contBox}>
|
||||
<View style={{ minWidth: '24%' }}>
|
||||
|
||||
@ -18,6 +18,7 @@ interface prosObj {
|
||||
handSureGoods?: (any) => void
|
||||
handShowCodeList?: (any) => void
|
||||
cancle?: (any) => void
|
||||
handEdit?: () => void
|
||||
goodsObj?: any
|
||||
// handSureGoods?: () => void,
|
||||
}
|
||||
@ -36,6 +37,7 @@ const BottomApply = (props: prosObj) => {
|
||||
handSureGoods,
|
||||
cancle,
|
||||
handShowCodeList,
|
||||
handEdit,
|
||||
goodsObj = {},
|
||||
nextBuy,
|
||||
// handSureGoods
|
||||
@ -149,6 +151,7 @@ const BottomApply = (props: prosObj) => {
|
||||
|| (obj.sale_mode === 2 && obj.status === 2)
|
||||
|| (obj.sale_mode === 2 && obj.status === 7)
|
||||
|| (obj.sale_mode === 1 && obj.status === 10)
|
||||
|| (obj.sale_mode === 1 && obj.status === 7)
|
||||
|| (obj.sale_mode === 2 && obj.status === 10)
|
||||
) {
|
||||
return true
|
||||
@ -156,6 +159,16 @@ const BottomApply = (props: prosObj) => {
|
||||
else { return false }
|
||||
}, [obj])
|
||||
|
||||
// 判断是否显示修改订单
|
||||
const showEdit = useMemo(() => {
|
||||
if (obj.status == 0 || obj.status == 1) {
|
||||
return true
|
||||
}
|
||||
else {
|
||||
return false
|
||||
}
|
||||
}, [obj])
|
||||
|
||||
const [btnList, setbtnList] = useState<any[]>([])
|
||||
useMemo(() => {
|
||||
const arr: any[] = []
|
||||
@ -223,6 +236,16 @@ const BottomApply = (props: prosObj) => {
|
||||
sort: 2,
|
||||
})
|
||||
}
|
||||
if (showEdit) {
|
||||
nums = nums + 1
|
||||
console.log('101010')
|
||||
arr.push({
|
||||
key: 'showEdit',
|
||||
label: '修改订单',
|
||||
bgKind: 3,
|
||||
sort: 9,
|
||||
})
|
||||
}
|
||||
const fiterArr = arr.sort((a, b) => a.sort - b.sort)
|
||||
setbtnList([...fiterArr])
|
||||
return nums
|
||||
@ -250,6 +273,9 @@ const BottomApply = (props: prosObj) => {
|
||||
// if (key === 'canBuy') {
|
||||
// toPay?.(e)
|
||||
// }
|
||||
if (key === 'showEdit') {
|
||||
handEdit?.()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -202,6 +202,16 @@ const OrderDetails = () => {
|
||||
if (it.leftTitle === '业务员：') {
|
||||
it.rightTitle = res.data.sale_user_name
|
||||
}
|
||||
if (res.data.change_time !== '') {
|
||||
if (it.leftTitle === '编辑时间：') {
|
||||
it.rightTitle = formatDateTime(res.data.change_time)
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (it.leftTitle === '编辑时间：') {
|
||||
it.showFont = false
|
||||
}
|
||||
}
|
||||
})
|
||||
setOrderMsg([...orderMsg])
|
||||
setReceivingStatus(res.data.shipment_mode)
|
||||
@ -231,18 +241,28 @@ const OrderDetails = () => {
|
||||
leftTitle: '订单编号：',
|
||||
rightTitle: '------',
|
||||
showBtn: true,
|
||||
showFont: true,
|
||||
},
|
||||
{
|
||||
leftTitle: '创建时间：',
|
||||
rightTitle: '------',
|
||||
showFont: true,
|
||||
},
|
||||
{
|
||||
leftTitle: '发货时间：',
|
||||
rightTitle: '------',
|
||||
showFont: true,
|
||||
},
|
||||
{
|
||||
leftTitle: '业务员：',
|
||||
rightTitle: '------',
|
||||
showFont: true,
|
||||
},
|
||||
{
|
||||
leftTitle: '编辑时间：',
|
||||
rightTitle: '------',
|
||||
showFont: true,
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
@ -766,6 +786,13 @@ const OrderDetails = () => {
|
||||
setshowCodeList(true)
|
||||
}
|
||||
|
||||
// 修改订单
|
||||
const handEdit = () => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/orderEdit/index?orderId=${infoObj.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.mainBox}>
|
||||
{(infoObj?.status != 10 && <OrderState orderInfo={infoObj} />)}
|
||||
@ -831,7 +858,8 @@ const OrderDetails = () => {
|
||||
{
|
||||
orderMsg.map((item, index) => {
|
||||
return (
|
||||
<View className={styles.detailBox} key={index}>
|
||||
|
||||
item.showFont && <View className={styles.detailBox} key={index}>
|
||||
<View className={styles.detailFont}>
|
||||
{item.leftTitle}
|
||||
</View>
|
||||
@ -902,6 +930,7 @@ const OrderDetails = () => {
|
||||
handSureGoods={() => handSureGoods?.()}
|
||||
handApplyGoods={() => handApplyGood?.()}
|
||||
handApplyMoney={() => handApplyMoney?.()}
|
||||
handEdit={() => handEdit?.()}
|
||||
></BottomBtns>
|
||||
</View>
|
||||
<PayPopup
|
||||
|
||||
253
src/pages/orderEdit/components/GoodsItem/index.module.scss
Normal file
253
src/pages/orderEdit/components/GoodsItem/index.module.scss
Normal file
@ -0,0 +1,253 @@
|
||||
.goodsBox {
|
||||
margin-top: 24px;
|
||||
overflow: hidden;
|
||||
border-bottom: 8px solid #f7f7f7;
|
||||
|
||||
.goodsProduct {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.goodsLine {
|
||||
margin-right: 24px;
|
||||
margin-left: 24px;
|
||||
// width: 638px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
margin-left: 32px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.itemGoods {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
|
||||
.itemPic {
|
||||
margin-left: 32px;
|
||||
margin-right: 42px;
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
// background: #322F2F;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.itemRight {
|
||||
padding-bottom: 24px;
|
||||
margin-right: 32px;
|
||||
width: 495px;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
|
||||
.item_right_top {
|
||||
margin-bottom: 41px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.itemName {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.itemNums {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.itemMoneyOne {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.item_right_Bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.flexBox {
|
||||
display: flex;
|
||||
.itemMoney {
|
||||
font-size: 28px;
|
||||
margin-right: 10px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.lastBox {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.newBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.reduceBox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #337fff;
|
||||
.reduce {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #337fff;
|
||||
border-radius: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.numsBox {
|
||||
width: 81px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.addBox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 35px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #337fff;
|
||||
background-color: #337fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itemGoods:last-child {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
|
||||
.itemPic {
|
||||
margin-left: 32px;
|
||||
margin-right: 42px;
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
// background: #322F2F;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.itemRight {
|
||||
padding-bottom: 24px;
|
||||
width: 495px;
|
||||
border-bottom: none;
|
||||
|
||||
.item_right_top {
|
||||
margin-bottom: 41px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.itemName {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.itemNums {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.itemMoneyOne {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.item_right_Bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.flexBox {
|
||||
display: flex;
|
||||
.itemMoney {
|
||||
font-size: 28px;
|
||||
margin-right: 10px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.lastBox {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.newBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.reduceBox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #337fff;
|
||||
.reduce {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #337fff;
|
||||
border-radius: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.numsBox {
|
||||
width: 81px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.addBox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 35px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #337fff;
|
||||
background-color: #337fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goodsBox:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
110
src/pages/orderEdit/components/GoodsItem/index.tsx
Normal file
110
src/pages/orderEdit/components/GoodsItem/index.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import { Input, View } from '@tarojs/components'
|
||||
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
||||
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
|
||||
|
||||
// 产品商品元素
|
||||
interface PropGoods {
|
||||
list: any[]
|
||||
obj: {
|
||||
sale_mode?: number | string
|
||||
}
|
||||
modeFont: number
|
||||
clickReduce?: (item: any) => void
|
||||
handPlus?: (item: any) => void
|
||||
onBlur?: (e: any, item: any) => void
|
||||
}
|
||||
const GoodsItem = (porps: PropGoods) => {
|
||||
const { list = [], obj = {} } = porps
|
||||
const labAndImgObj = useCallback((item) => {
|
||||
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
|
||||
}, [])
|
||||
|
||||
// const [value, setValue] = useState<any>({ count: props.value.nums })
|
||||
|
||||
const onInputEven = (e, it) => {
|
||||
const res = e.detail.value
|
||||
if (porps.modeFont == 0) {
|
||||
if (Number(res) < 1) {
|
||||
// setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
if (porps.modeFont == 1) {
|
||||
if (Number(res) < 0) {
|
||||
// setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
if (porps.modeFont == 2) {
|
||||
if (Number(res) < 0) {
|
||||
// setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const type = useMemo(() => {
|
||||
if (porps.modeFont === 0) {
|
||||
return 'number'
|
||||
}
|
||||
else {
|
||||
return 'digit'
|
||||
}
|
||||
}, [porps.modeFont])
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
list.map((item, index) => {
|
||||
return (
|
||||
<View className={styles.goodsBox} key={index}>
|
||||
<View className={styles.goodsProduct}>{item.code}# {item.name}</View>
|
||||
<View className={styles.goodsLine}></View>
|
||||
{
|
||||
item.product_colors.map((it, inx) => {
|
||||
return (
|
||||
<View className={styles.itemGoods} key={inx}>
|
||||
<View className={styles.itemPic}>
|
||||
<LabAndImg value={labAndImgObj(it)} />
|
||||
</View>
|
||||
{/* <View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View> */}
|
||||
<View className={styles.itemRight}>
|
||||
<View className={styles.item_right_top}>
|
||||
<View className={styles.itemName}>{formatHashTag(it.code, it.name)}</View>
|
||||
<View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View>
|
||||
{/* <View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View> */}
|
||||
</View>
|
||||
<View className={styles.item_right_Bottom}>
|
||||
<View className={styles.flexBox}>
|
||||
<View className={styles.itemMoney}>¥{formatPriceDiv(it.sale_price)}/{obj?.sale_mode === 1 ? 'm' : 'kg'}</View>
|
||||
{/* {
|
||||
obj?.sale_mode === 0 && it?.sale_price !== it?.standard_sale_price && <View className={styles.lastBox}>¥{it?.standard_sale_price / 100}/{obj?.sale_mode === 1 ? 'm' : 'kg'}</View>
|
||||
} */}
|
||||
</View>
|
||||
<View className={styles.newBox}>
|
||||
<View className={styles.reduceBox} onClick={() => { porps.clickReduce?.(it) }}>
|
||||
<View className={styles.reduce}>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.numsBox}>
|
||||
<Input alwaysEmbed cursorSpacing={100} adjustPosition type={type as any} value={it.nums} onInput={e => onInputEven(e, it)} onBlur={e => porps.onBlur?.(e, it)}></Input>
|
||||
</View>
|
||||
<View className={styles.addBox} onClick={() => { porps.handPlus?.(it) }}>
|
||||
+
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
export default memo(GoodsItem)
|
||||
@ -0,0 +1,144 @@
|
||||
.addressBox {
|
||||
margin-right: 24px;
|
||||
// width: 702px;
|
||||
min-height: 223px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
|
||||
.topBox {
|
||||
padding-top: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cirle {
|
||||
border-radius: 50%;
|
||||
margin-left: 32px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #4a7fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.dingwei {
|
||||
color: #ffffff;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-left: 24px;
|
||||
width: 461px;
|
||||
height: 78px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-right: 41px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /*这里设置几行*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_more {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-top: 16px;
|
||||
float: right;
|
||||
margin-right: 32px;
|
||||
width: 550px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 44px;
|
||||
.reatName {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #337fff;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.leftbottom {
|
||||
margin-left: 120px;
|
||||
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;
|
||||
// margin-right: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.reatBox {
|
||||
position: relative;
|
||||
margin-right: 32px;
|
||||
|
||||
.updateBtn {
|
||||
width: 200px;
|
||||
font-size: $font_size_min;
|
||||
background-color: #f0f0f0;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
color: $color_font_two;
|
||||
// position: absolute;
|
||||
bottom: 10px;
|
||||
// right: -10px;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
|
||||
.updateBtn_list {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
|
||||
.updateBtn_item_select {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.updateBtn_item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.updateBtn_select {
|
||||
color: #fff;
|
||||
background-color: $color_main;
|
||||
border-radius: 16px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 61px;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
76
src/pages/orderEdit/components/addressDetailBox/index.tsx
Normal file
76
src/pages/orderEdit/components/addressDetailBox/index.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import { memo, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import { alert } from '@/common/common'
|
||||
|
||||
interface propsObj {
|
||||
receivingStatus: Number | null
|
||||
onReceivingStatus?: (any, Number) => void
|
||||
obj?: any
|
||||
navSelect?: (any) => void
|
||||
showBtn?: boolean
|
||||
showWhatFont?: string
|
||||
}
|
||||
const AddressDetailBox = (props: propsObj) => {
|
||||
const {
|
||||
receivingStatus = null,
|
||||
onReceivingStatus,
|
||||
obj = {},
|
||||
navSelect,
|
||||
showBtn = true,
|
||||
showWhatFont = '',
|
||||
} = props
|
||||
|
||||
return (
|
||||
<View className={styles.addressBox}>
|
||||
<View className={styles.topBox} onClick={() => navSelect?.(obj)}>
|
||||
<View className={styles.cirle}>
|
||||
<IconFont name="icon-cangku1" size={60}></IconFont>
|
||||
</View>
|
||||
{
|
||||
receivingStatus == 1 && <View className={styles.address}>{obj.take_goods_address || '中华人民共和国广东省佛山市禅城区陆盈纺织仓库'}</View>
|
||||
}
|
||||
{
|
||||
(obj?.address_id != 0 && receivingStatus == 2)
|
||||
&& <View className={styles.address}>{obj?.province_name}{obj?.city_name}{obj?.district_name}{obj?.address_detail}</View>
|
||||
}
|
||||
{
|
||||
(obj?.address_id == 0 && receivingStatus == 2)
|
||||
&& <View className={styles.address}></View>
|
||||
}
|
||||
{
|
||||
receivingStatus !== 1
|
||||
&& <IconFont name="icon-chakanquanbukehu" size={50} ></IconFont>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.line}></View>
|
||||
<View className={styles.bottom}>
|
||||
<View className={styles.leftbottom}>
|
||||
<View className={styles.name}>{receivingStatus === 1 ? '谭先生' : obj?.address_id == 0 ? '' : obj.target_user_name}</View>
|
||||
<View className={styles.phone}>{receivingStatus === 1 ? 13242128982 : obj?.address_id == 0 ? '' : obj.purchaser_phone}</View>
|
||||
</View>
|
||||
{
|
||||
showBtn && <View className={styles.reatBox}>
|
||||
<View className={styles.updateBtn}>
|
||||
<View className={styles.updateBtn_list}>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus == 1 && styles.updateBtn_item_select)} onClick={e => onReceivingStatus?.(e, 1)}>
|
||||
自提
|
||||
</View>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus == 2 && styles.updateBtn_item_select)} onClick={e => onReceivingStatus?.(e, 2)}>
|
||||
物流
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ transform: receivingStatus == 1 ? 'translateX(0)' : 'translateX(100%)' }} className={classnames(styles.updateBtn_select)}></View>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
{
|
||||
!showBtn && <View className={styles.reatName}>{showWhatFont}</View>
|
||||
}
|
||||
</View>
|
||||
</View >
|
||||
)
|
||||
}
|
||||
export default memo(AddressDetailBox)
|
||||
4
src/pages/orderEdit/index.config.ts
Normal file
4
src/pages/orderEdit/index.config.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '订单详情',
|
||||
|
||||
}
|
||||
212
src/pages/orderEdit/index.module.scss
Normal file
212
src/pages/orderEdit/index.module.scss
Normal file
@ -0,0 +1,212 @@
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.mainBox {
|
||||
.pussBox {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.pussName {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.pussPhone {
|
||||
margin-left: 88px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.addBtn {
|
||||
margin: 24px;
|
||||
width: 702px;
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #337fff;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #337fff;
|
||||
text-align: center;
|
||||
line-height: 82px;
|
||||
}
|
||||
.total {
|
||||
margin-top: 44px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-left: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.productBox {
|
||||
// width: 702px;
|
||||
margin-right: 24px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
margin-left: 24px;
|
||||
padding-bottom: 36px;
|
||||
overflow: hidden;
|
||||
|
||||
.flexMoney {
|
||||
display: flex;
|
||||
margin-top: 32px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.flexTotalBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.totalFont {
|
||||
margin-left: 32px;
|
||||
margin-right: 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.tishi {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.shoudPay {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #f64861;
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.defaltBox {
|
||||
margin: 24px;
|
||||
padding: 24px 32px 24px 24px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
|
||||
.titleBox {
|
||||
// margin-right: 24px;
|
||||
// margin-left: 24px;
|
||||
// width: 638px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.modeName {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #337fff;
|
||||
}
|
||||
}
|
||||
|
||||
.modeLine {
|
||||
margin-top: 24px;
|
||||
// width: 638px;
|
||||
// margin-right: 24px;
|
||||
// margin-left: 24px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.detailBox {
|
||||
display: flex;
|
||||
margin-top: 24px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.detailRightFlex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detailRight {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.detailBtn {
|
||||
margin-left: 16px;
|
||||
width: 65px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #337fff;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #337fff;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.detailFont {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #b8b8b8;
|
||||
}
|
||||
}
|
||||
|
||||
.remarkFont {
|
||||
margin-top: 24px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.safeBottom {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 750px;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
padding-bottom: 24px;
|
||||
.bottomBtn {
|
||||
width: 702px;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
height: 80px;
|
||||
background: #337fff;
|
||||
border-radius: 44px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.order_save_address {
|
||||
height: 82px;
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
// width: 668px;
|
||||
text-align: center;
|
||||
line-height: 82px;
|
||||
color: #fff;
|
||||
margin-top: 20px;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
789
src/pages/orderEdit/index.tsx
Normal file
789
src/pages/orderEdit/index.tsx
Normal file
@ -0,0 +1,789 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
||||
import type { ReactNode } from 'react'
|
||||
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import AddressDetailBox from './components/addressDetailBox'
|
||||
import GoodsItem from './components/GoodsItem'
|
||||
import Remark from '@/components/textareaEnhance'
|
||||
import Popup from '@/components/popup'
|
||||
import { debounce } from '@/common/util'
|
||||
import {
|
||||
MpSaleOrder,
|
||||
MpSaleOrderPut,
|
||||
MpsaleOrderaddProductList,
|
||||
MpsaleOrdersubmit,
|
||||
} from '@/api/order'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
|
||||
import { MpPurchaserAddressList } from '@/api/addressList'
|
||||
|
||||
// 卡片盒子元素
|
||||
interface Obs {
|
||||
title?: string
|
||||
modeName?: string
|
||||
showMode?: boolean
|
||||
children?: ReactNode
|
||||
clickNode?: () => void
|
||||
}
|
||||
|
||||
const DefaultBox = (props: Obs) => {
|
||||
const {
|
||||
title = '标题',
|
||||
modeName = '大货',
|
||||
showMode = false,
|
||||
children,
|
||||
clickNode,
|
||||
} = props
|
||||
|
||||
return (
|
||||
<View className={styles.defaltBox}>
|
||||
<View className={styles.titleBox}>
|
||||
<View className={styles.title}>{title}</View>
|
||||
{
|
||||
showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.modeLine}></View>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
const DefaultBoxWithMemo = memo(DefaultBox)
|
||||
|
||||
const OrderDetails = () => {
|
||||
const router = useRouter()
|
||||
const addrssRef = useRef<any>([])
|
||||
const pages = Taro.getCurrentPages()
|
||||
const currPage = pages[pages.length - 1] // 获取当前页面
|
||||
const { fetchData: addressFetch } = MpPurchaserAddressList()
|
||||
let selectId = -1
|
||||
|
||||
// 收货方法,1:自提，2物流
|
||||
const [receivingStatus, setReceivingStatus] = useState<any>(null)
|
||||
// 切换自提或者物流
|
||||
const onReceivingStatus = debounce(async(e, value) => {
|
||||
e.stopPropagation()
|
||||
if (receivingStatus === value) {
|
||||
alert.error('不能选择相同的方式')
|
||||
return false
|
||||
}
|
||||
Taro.showLoading({
|
||||
title: '请稍等...',
|
||||
mask: true,
|
||||
})
|
||||
// 判断是否有默认地址
|
||||
if (value === 2 && addrssRef.current.length > 0 && !currPage.data?.addressObj) {
|
||||
setInfoObj(val => ({
|
||||
...val,
|
||||
province_name: addrssRef.current[0]?.province_name,
|
||||
address_id: addrssRef.current[0]?.id,
|
||||
city_name: addrssRef.current[0]?.city_name,
|
||||
address_detail: addrssRef.current[0]?.address_detail,
|
||||
district_name: addrssRef.current[0]?.district_name,
|
||||
target_user_name: addrssRef.current[0]?.name,
|
||||
purchaser_phone: addrssRef.current[0]?.phone,
|
||||
}))
|
||||
}
|
||||
// 没有默认地址提示进去选择地址
|
||||
if (value === 2 && !addrssRef.current.length && !infoObj?.address_id) {
|
||||
alert.error('请选择地址')
|
||||
}
|
||||
setReceivingStatus(value)
|
||||
Taro.hideLoading()
|
||||
}, 300)
|
||||
|
||||
// 获取客户地址
|
||||
// 获取地址
|
||||
const getAddress = async(id) => {
|
||||
const result = await addressFetch({ purchaser_id: id })
|
||||
addrssRef.current = result?.data?.list.filter((item) => { return item.is_default })
|
||||
}
|
||||
|
||||
const { fetchData: infoFetch } = MpSaleOrder()
|
||||
const [infoObj, setInfoObj] = useState<any>({})
|
||||
const [goodList, setgoodList] = useState<any>([])
|
||||
// 获取订单详情
|
||||
const getDetail = async() => {
|
||||
Taro.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true,
|
||||
})
|
||||
const res = await infoFetch({ id: router.params.orderId })
|
||||
setInfoObj(res.data)
|
||||
res.data.product_list.forEach((item) => {
|
||||
item.product_colors.map((it) => {
|
||||
it.nums = res.data?.sale_mode == 0 ? it.roll : it.length / 100
|
||||
return it
|
||||
})
|
||||
})
|
||||
setgoodList([...res.data.product_list])
|
||||
orderMsg.map((it) => {
|
||||
if (it.leftTitle === '订单编号：') {
|
||||
it.rightTitle = res.data.order_no
|
||||
}
|
||||
if (it.leftTitle === '创建时间：') {
|
||||
it.rightTitle = formatDateTime(res.data.create_time)
|
||||
}
|
||||
if (it.leftTitle === '发货时间：') {
|
||||
it.rightTitle = formatDateTime(res.data.delivery_time)
|
||||
}
|
||||
if (it.leftTitle === '业务员：') {
|
||||
it.rightTitle = res.data.sale_user_name
|
||||
}
|
||||
})
|
||||
setOrderMsg([...orderMsg])
|
||||
setReceivingStatus(res.data.shipment_mode)
|
||||
// 小程序提供的api，通知页面停止下拉刷新效果
|
||||
Taro.stopPullDownRefresh()
|
||||
Taro.hideLoading()
|
||||
getAddress(res.data?.purchaser_id)
|
||||
}
|
||||
|
||||
// 订单信息文字数组
|
||||
const [orderMsg, setOrderMsg] = useState<any[]>([
|
||||
{
|
||||
leftTitle: '订单编号：',
|
||||
rightTitle: '------',
|
||||
showBtn: true,
|
||||
},
|
||||
{
|
||||
leftTitle: '创建时间：',
|
||||
rightTitle: '------',
|
||||
},
|
||||
{
|
||||
leftTitle: '发货时间：',
|
||||
rightTitle: '------',
|
||||
},
|
||||
{
|
||||
leftTitle: '业务员：',
|
||||
rightTitle: '------',
|
||||
},
|
||||
])
|
||||
|
||||
// 备注操作
|
||||
const [showDesc, setShowDesc] = useState(false)
|
||||
const { fetchData: remarkFetch } = MpSaleOrderPut()
|
||||
const getRemark = async() => {
|
||||
const res = await remarkFetch({ remark: infoObj.remark, id: Number(router.params.orderId) })
|
||||
if (res.msg === 'success') {
|
||||
Taro.showToast({
|
||||
title: '成功',
|
||||
icon: 'success',
|
||||
})
|
||||
setShowDesc(false)
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getDetail()
|
||||
}, [])
|
||||
|
||||
// 面料修改获取金额列表接口
|
||||
const { fetchData: editFetch } = MpsaleOrderaddProductList()
|
||||
|
||||
useDidShow(() => {
|
||||
// getDetail()
|
||||
const pages = Taro.getCurrentPages()
|
||||
const currPage = pages[pages.length - 1] // 获取当前页面
|
||||
// 获取选择回来的地址
|
||||
if (currPage.data?.addressObj) {
|
||||
setInfoObj(val => ({
|
||||
...val,
|
||||
province_name: currPage.data?.addressObj?.province_name ? currPage.data?.addressObj?.province_name : '',
|
||||
address_id: currPage.data?.addressObj?.id ? currPage.data?.addressObj?.id : '',
|
||||
city_name: currPage.data?.addressObj?.city_name ? currPage.data?.addressObj?.city_name : '',
|
||||
address_detail: currPage.data?.addressObj?.address_detail ? currPage.data?.addressObj?.address_detail : '',
|
||||
district_name: currPage.data?.addressObj?.district_name ? currPage.data?.addressObj?.district_name : '',
|
||||
target_user_name: currPage.data?.addressObj?.name ? currPage.data?.addressObj?.name : '',
|
||||
purchaser_phone: currPage.data?.addressObj?.phone ? currPage.data?.addressObj?.phone : '',
|
||||
}))
|
||||
}
|
||||
|
||||
selectId = currPage.data?.addressObj?.id
|
||||
const obj = currPage?.data?.ids?.filter((item) => { return item == selectId })
|
||||
if (currPage?.data?.ids && obj.length === 0 && infoObj?.address_id == 0) {
|
||||
setInfoObj(val => ({
|
||||
...val,
|
||||
province_name: '',
|
||||
address_id: '',
|
||||
city_name: '',
|
||||
address_detail: '',
|
||||
district_name: '',
|
||||
target_user_name: '',
|
||||
purchaser_phone: '',
|
||||
}))
|
||||
}
|
||||
if (!currPage.data?.addressObj && infoObj?.address_id == 0) {
|
||||
setReceivingStatus(1)
|
||||
}
|
||||
else {
|
||||
setReceivingStatus(2)
|
||||
}
|
||||
// 获取选择回来的商品
|
||||
if (currPage.data?.selectGoodsList && currPage.data?.selectGoodsList.length > 0) {
|
||||
for (let i = 0; i < currPage.data?.selectGoodsList.length; i++) {
|
||||
let flag = true
|
||||
for (let j = 0; j < goodList.length; j++) {
|
||||
if (goodList[j].id === currPage.data?.selectGoodsList[i].id) {
|
||||
flag = false
|
||||
goodList[j].product_colors.push(...currPage.data?.selectGoodsList[i].product_colors)
|
||||
}
|
||||
}
|
||||
if (flag) { goodList.push(currPage.data?.selectGoodsList[i]) }
|
||||
}
|
||||
handEditMoney(1)
|
||||
}
|
||||
})
|
||||
|
||||
const goodsObjRef = useRef<any>()
|
||||
useEffect(() => {
|
||||
goodsObjRef.current = goodList
|
||||
}, [goodList])
|
||||
|
||||
// 面料修改或者添加获取实时金额
|
||||
const handEditMoney = async(toastEnum) => {
|
||||
let toastMsg = ''
|
||||
if (toastEnum == 1) {
|
||||
toastMsg = '添加商品成功'
|
||||
}
|
||||
else {
|
||||
toastMsg = '修改商品成功'
|
||||
}
|
||||
Taro.showLoading({
|
||||
title: '请稍等...',
|
||||
})
|
||||
const arr: any = []
|
||||
goodsObjRef.current.forEach((ec) => {
|
||||
ec.product_colors.forEach((v) => {
|
||||
const colorsArr: any[] = []
|
||||
colorsArr.push({
|
||||
product_color_id: v.id,
|
||||
length: infoObj?.sale_mode == 0 ? 0 : Number(v.nums) * 100,
|
||||
roll: infoObj?.sale_mode != 0 ? 0 : Number(v.nums),
|
||||
sale_price: v.sale_price,
|
||||
})
|
||||
arr.push({
|
||||
product_id: ec.id,
|
||||
sale_mode: Number(infoObj?.sale_mode),
|
||||
color_list: colorsArr,
|
||||
})
|
||||
})
|
||||
})
|
||||
// 合并相同的数据
|
||||
const idArray: any[] = []
|
||||
const newAarray: any[] = []
|
||||
|
||||
arr.forEach((ele, i) => {
|
||||
if (!idArray.includes(ele.product_id)) {
|
||||
newAarray.push({
|
||||
product_id: ele.product_id,
|
||||
name: ele.name,
|
||||
sale_mode: Number(infoObj?.sale_mode),
|
||||
color_list: ele.color_list,
|
||||
})
|
||||
|
||||
idArray.push(ele.product_id)
|
||||
}
|
||||
else {
|
||||
newAarray.map((dom, k) => {
|
||||
if (dom.product_id == ele.product_id) {
|
||||
dom.color_list = [...ele.color_list, ...dom.color_list]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const res = await editFetch({ add_product_list_param: newAarray, sale_order_id: infoObj?.id })
|
||||
if (res.data) {
|
||||
Taro.hideLoading()
|
||||
Taro.showToast({
|
||||
title: toastMsg,
|
||||
icon: 'none',
|
||||
})
|
||||
goodList.map((item) => {
|
||||
res.data.list?.map((v) => {
|
||||
if (item.id == v.id) {
|
||||
item.product_colors?.forEach((edg) => {
|
||||
v.product_colors?.forEach((ac) => {
|
||||
if (edg.id == ac.id) {
|
||||
edg.total_sale_price = ac.total_sale_price
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
return item
|
||||
})
|
||||
setgoodList([...goodList])
|
||||
}
|
||||
else {
|
||||
Taro.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
// 页面下拉刷新
|
||||
usePullDownRefresh(() => {
|
||||
getDetail()
|
||||
})
|
||||
|
||||
// 选择地址
|
||||
const handSelect = (obj) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/addressManager/index?orderId=${-100}&purchaser_id=${obj.purchaser_id}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 是否显示按钮
|
||||
const showBtn = useMemo(() => {
|
||||
if ((infoObj.status === 8 || infoObj.status === 9 || infoObj.status === 4 || infoObj.status === 5 || infoObj.status === 11 || infoObj.status === 3)) {
|
||||
return false
|
||||
}
|
||||
else {
|
||||
return true
|
||||
}
|
||||
}, [infoObj])
|
||||
|
||||
const showWhatFont = useMemo(() => {
|
||||
if (infoObj.shipment_mode === 1) {
|
||||
return '自提商品'
|
||||
}
|
||||
else {
|
||||
return '物流'
|
||||
}
|
||||
}, [infoObj])
|
||||
|
||||
const onChange = (e) => {
|
||||
setInfoObj(val => ({ ...val, remark: e }))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setInfoObj(infoObj)
|
||||
}, [infoObj])
|
||||
|
||||
const showRemarkFont = useMemo(() => {
|
||||
if (infoObj.status === 10 || infoObj.status == 0 || infoObj.status == 1 || infoObj.status == 2 || infoObj.status == 7) {
|
||||
return `${'填写/修改备注'} >`
|
||||
}
|
||||
else {
|
||||
return ''
|
||||
}
|
||||
}, [infoObj])
|
||||
|
||||
// 待接单、配布中、已配布状态时，叫预估金额，其他状态叫合计金额。
|
||||
const payFont = useMemo(() => {
|
||||
if (infoObj?.status === 0 || infoObj?.status === 1 || infoObj?.status === 2) {
|
||||
return '预估金额'
|
||||
}
|
||||
else {
|
||||
return '合计金额'
|
||||
}
|
||||
}, [infoObj])
|
||||
|
||||
// 复制功能
|
||||
const clipboardData = () => {
|
||||
Taro.setClipboardData({
|
||||
data: infoObj?.order_no || '',
|
||||
success(res) {
|
||||
Taro.showToast({
|
||||
icon: 'none',
|
||||
title: '复制成功',
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 判断是否整数类型
|
||||
function isInteger(obj) {
|
||||
return (obj | 0) === obj
|
||||
}
|
||||
|
||||
// 删除面料的ids数组
|
||||
const [deleteProductIds, setdeleteProductIds] = useState<any[]>([])
|
||||
|
||||
// 删除商品弹窗
|
||||
const handCancelToast = (item) => {
|
||||
// const deletIds: any[] = []
|
||||
for (let i = 0; i < goodList?.length; i++) {
|
||||
if (goodList.length === 1 && goodList[i].product_colors?.length === 1) {
|
||||
return Taro.showToast({
|
||||
icon: 'none',
|
||||
title: '至少保留一个面料',
|
||||
})
|
||||
}
|
||||
}
|
||||
Taro.showModal({
|
||||
content: '删除所选商品？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
// 删除某项商品
|
||||
goodList.forEach((edg) => {
|
||||
edg?.product_colors.map((it, index) => {
|
||||
if (item.id == it.id) {
|
||||
deleteProductIds.push(item.id)
|
||||
edg?.product_colors.splice(index, 1)
|
||||
}
|
||||
return it
|
||||
})
|
||||
return edg
|
||||
})
|
||||
// 子商品没有了大商品也删除
|
||||
goodList.forEach((edg, index) => {
|
||||
if (!edg?.product_colors.length) {
|
||||
goodList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
setgoodList([...goodList])
|
||||
setdeleteProductIds([...deleteProductIds])
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 输入框减
|
||||
const clickReduce = useCallback((item) => {
|
||||
goodList.forEach((edg) => {
|
||||
edg?.product_colors.map((it) => {
|
||||
if (item.id == it.id) {
|
||||
if (infoObj?.sale_mode == 0 && item.nums == 1) {
|
||||
return handCancelToast(item)
|
||||
}
|
||||
if (infoObj?.sale_mode == 1 && item.nums == 0.3) {
|
||||
return handCancelToast(item)
|
||||
}
|
||||
if (infoObj?.sale_mode == 2 && item.nums == 3) {
|
||||
return handCancelToast(item)
|
||||
}
|
||||
if (isInteger(item.nums)) {
|
||||
it.nums--
|
||||
handEditMoney(2)
|
||||
}
|
||||
else {
|
||||
it.nums = Math.trunc(item.nums)
|
||||
handEditMoney(2)
|
||||
}
|
||||
}
|
||||
return it
|
||||
})
|
||||
return edg
|
||||
})
|
||||
setgoodList([...goodList])
|
||||
// if ((infoObj?.sale_mode == 0 && item.nums > 1) || (infoObj?.sale_mode == 1 && item.nums > 0.3) || (infoObj?.sale_mode == 2 && item.nums > 3)) {
|
||||
// handEditMoney(2)
|
||||
// }
|
||||
}, [goodList])
|
||||
|
||||
// 输入框加
|
||||
const handPlus = useCallback((item) => {
|
||||
goodList.forEach((edg) => {
|
||||
edg?.product_colors.map((it) => {
|
||||
if (item.id == it.id) {
|
||||
if (isInteger(item.nums)) {
|
||||
item.nums++
|
||||
}
|
||||
else {
|
||||
item.nums++
|
||||
item.nums = Math.trunc(item.nums)
|
||||
}
|
||||
}
|
||||
return it
|
||||
})
|
||||
return edg
|
||||
})
|
||||
setgoodList([...goodList])
|
||||
handEditMoney(2)
|
||||
}, [goodList])
|
||||
|
||||
// 输入框监听
|
||||
const onBlur = useCallback((e, item) => {
|
||||
goodList.forEach((edg) => {
|
||||
edg?.product_colors.map((it) => {
|
||||
if (it.id == item.id) {
|
||||
if (infoObj.sale_mode == 0 && (e.detail.value == '' || Number(e.detail.value) == 0)) {
|
||||
it.nums = 1
|
||||
}
|
||||
else if (infoObj.sale_mode == 0 && (e.detail.value != '' || Number(e.detail.value) > 0)) {
|
||||
it.nums = Number(e.detail.value)
|
||||
}
|
||||
|
||||
if (infoObj.sale_mode == 1 && Number(e.detail.value) < 0.3) {
|
||||
it.nums = 0.3
|
||||
}
|
||||
else if (infoObj.sale_mode == 1 && Number(e.detail.value) >= 0.3) {
|
||||
if (isInteger(Number(e.detail.value))) {
|
||||
it.nums = Number(e.detail.value)
|
||||
}
|
||||
else {
|
||||
it.nums = Number(e.detail.value).toFixed(2)
|
||||
}
|
||||
}
|
||||
|
||||
if (infoObj.sale_mode == 2 && Number(e.detail.value) < 3) {
|
||||
it.nums = 3
|
||||
}
|
||||
else if (infoObj.sale_mode == 2 && Number(e.detail.value) >= 3) {
|
||||
if (isInteger(Number(e.detail.value))) {
|
||||
it.nums = Number(e.detail.value)
|
||||
}
|
||||
else {
|
||||
it.nums = Number(e.detail.value).toFixed(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
return it
|
||||
})
|
||||
return edg
|
||||
})
|
||||
setgoodList([...goodList])
|
||||
handEditMoney(2)
|
||||
}, [goodList])
|
||||
|
||||
// 添加面料
|
||||
const navTo = () => {
|
||||
const arr = JSON.stringify(goodList).replace(/%/g, '%25')
|
||||
Taro.navigateTo({
|
||||
url: `/pages/addFabric/index?goodList=${arr}&purchaser_id=${infoObj?.purchaser_id}&sale_mode=${infoObj?.sale_mode}`,
|
||||
})
|
||||
}
|
||||
|
||||
const { fetchData: submitFetch } = MpsaleOrdersubmit()
|
||||
// 提交修改
|
||||
const handSubmit = () => {
|
||||
if (infoObj?.address_id == 0 || !infoObj?.address_id) {
|
||||
return Taro.showToast(
|
||||
{
|
||||
title: '请选择收货地址',
|
||||
icon: 'error',
|
||||
},
|
||||
)
|
||||
}
|
||||
const quertArr: any[] = []
|
||||
|
||||
goodList.forEach((item) => {
|
||||
item.product_colors?.forEach((edc) => {
|
||||
quertArr.push({
|
||||
length: infoObj?.sale_mode != 0 ? edc.nums * 100 : 0,
|
||||
product_color_id: edc.id,
|
||||
product_id: item.id,
|
||||
roll: infoObj?.sale_mode == 0 ? edc.nums : 0,
|
||||
// sale_order_detail_id: edc.sale_order_detail_id ? edc.sale_order_detail_id : 0,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const query = {
|
||||
address_id: infoObj?.address_id,
|
||||
commodity_list: quertArr,
|
||||
delete_detail_list: filterArr(deleteProductIds),
|
||||
remar: infoObj?.remark,
|
||||
sale_order_id: infoObj?.id,
|
||||
shipment_mode: receivingStatus,
|
||||
}
|
||||
console.log(query, 'quertArrquertArr')
|
||||
Taro.showModal({
|
||||
content: '是否确认提交修改',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
Taro.showLoading({
|
||||
title: '加载中...',
|
||||
})
|
||||
const res = await submitFetch(query)
|
||||
if (res.data) {
|
||||
Taro.hideLoading()
|
||||
Taro.redirectTo({
|
||||
url: `/pages/orderDetails/index?id=${res.data.id}`,
|
||||
})
|
||||
}
|
||||
else {
|
||||
Taro.hideLoading()
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 数组去重
|
||||
const filterArr = (arr) => {
|
||||
const newArr: any[] = []
|
||||
// 控制外循环
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
for (let j = i + 1; j < arr.length; j++) {
|
||||
if (arr[i] == arr[j]) {
|
||||
arr[j] = 0
|
||||
}
|
||||
}
|
||||
// 去除值为0的
|
||||
if (arr[i] == 0) {
|
||||
continue
|
||||
}
|
||||
else {
|
||||
// 放入新的数组
|
||||
newArr.push(arr[i])
|
||||
}
|
||||
}
|
||||
return newArr
|
||||
}
|
||||
|
||||
// 计算预估金额
|
||||
const totalMoney = useMemo(() => {
|
||||
const arr: any = []
|
||||
goodList.forEach((item) => {
|
||||
item.product_colors.forEach((it) => {
|
||||
arr.push(Number(it.total_sale_price))
|
||||
})
|
||||
})
|
||||
const hate = sum(arr)
|
||||
return hate
|
||||
}, [goodList])
|
||||
|
||||
// 计算总面料
|
||||
const totalProduct = useMemo(() => {
|
||||
const arr: any = []
|
||||
goodList.forEach((item) => {
|
||||
arr.push(item)
|
||||
})
|
||||
return arr.length
|
||||
}, [goodList])
|
||||
|
||||
// 计算总颜色
|
||||
const totalColors = useMemo(() => {
|
||||
const arr: any = []
|
||||
goodList.forEach((item) => {
|
||||
item.product_colors.forEach((it) => {
|
||||
arr.push(it)
|
||||
})
|
||||
})
|
||||
return arr.length
|
||||
}, [goodList])
|
||||
|
||||
// 计算总颜色数量
|
||||
const totalColorsNums = useMemo(() => {
|
||||
const arr: any = []
|
||||
goodList.forEach((item) => {
|
||||
item.product_colors.forEach((it) => {
|
||||
arr.push(Number(it.nums))
|
||||
})
|
||||
})
|
||||
const hate = sum(arr)
|
||||
return hate
|
||||
}, [goodList])
|
||||
|
||||
function sum(arr) {
|
||||
let s = 0
|
||||
for (let i = arr.length - 1; i >= 0; i--) {
|
||||
s += arr[i]
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.mainBox}>
|
||||
<AddressDetailBox
|
||||
showBtn={showBtn}
|
||||
showWhatFont={showWhatFont}
|
||||
navSelect={obj => handSelect(obj)}
|
||||
obj={infoObj}
|
||||
receivingStatus={receivingStatus}
|
||||
onReceivingStatus={(e, value) => onReceivingStatus(e, value)}
|
||||
></AddressDetailBox>
|
||||
<DefaultBox
|
||||
showMode
|
||||
title="客户信息"
|
||||
modeName={infoObj.sale_mode_name}
|
||||
>
|
||||
<View className={styles.pussBox}>
|
||||
<View className={styles.pussName}>{infoObj.purchaser_name}</View>
|
||||
<View className={styles.pussPhone}>{infoObj.purchaser_phone}</View>
|
||||
</View>
|
||||
</DefaultBox>
|
||||
<View className={styles.addBtn} onClick={() => navTo()}>添加面料</View>
|
||||
<View className={styles.total}> {totalProduct} 种面料，{totalColors} 个颜色，共 {totalColorsNums} {infoObj.sale_mode === 0 ? '条' : 'm'}</View>
|
||||
<View className={styles.productBox}>
|
||||
<GoodsItem
|
||||
list={goodList}
|
||||
obj={infoObj}
|
||||
clickReduce={it => clickReduce(it)}
|
||||
handPlus={it => handPlus(it)}
|
||||
onBlur={(e, it) => onBlur(e, it)}
|
||||
modeFont={infoObj?.sale_mode}
|
||||
></GoodsItem>
|
||||
<View className={styles.flexMoney}>
|
||||
<View className={styles.flexTotalBox}>
|
||||
<View className={styles.totalFont}>{payFont}</View>
|
||||
</View>
|
||||
<View className={styles.shoudPay}>¥{formatPriceDiv(totalMoney)}</View>
|
||||
</View>
|
||||
{/* <View className={styles.flexMoney}>
|
||||
<View className={styles.flexTotalBox}>
|
||||
<View className={styles.totalFont}>实付金额</View>
|
||||
</View>
|
||||
<View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.actual_amount)}</View>
|
||||
</View> */}
|
||||
{
|
||||
infoObj?.wait_pay_amount < 0 && <View className={styles.flexMoney}>
|
||||
<View className={styles.flexTotalBox}>
|
||||
<View className={styles.totalFont}>{infoObj?.wait_pay_amount?.toString().indexOf('-') !== -1 ? '退款金额' : '待付金额'}</View>
|
||||
</View>
|
||||
<View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.wait_pay_amount)}</View>
|
||||
</View>
|
||||
}
|
||||
{
|
||||
infoObj?.wait_pay_amount > 0 && <View className={styles.flexMoney}>
|
||||
<View className={styles.flexTotalBox}>
|
||||
<View className={styles.totalFont}>{infoObj?.wait_pay_amount?.toString().indexOf('-') !== -1 ? '退款金额' : '待付金额'}</View>
|
||||
</View>
|
||||
<View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.wait_pay_amount)}</View>
|
||||
</View>
|
||||
}
|
||||
|
||||
</View>
|
||||
<DefaultBox title="订单信息">
|
||||
{
|
||||
orderMsg.map((item, index) => {
|
||||
return (
|
||||
<View className={styles.detailBox} key={index}>
|
||||
<View className={styles.detailFont}>
|
||||
{item.leftTitle}
|
||||
</View>
|
||||
<View className={styles.detailRightFlex}>
|
||||
<View className={styles.detailRight}>{item.rightTitle}</View>
|
||||
{item.showBtn && <View className={styles.detailBtn} onClick={() => clipboardData()}>复制</View>}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</DefaultBox>
|
||||
<DefaultBox title="备注信息" showMode modeName={showRemarkFont} clickNode={() => setShowDesc(showRemarkFont != '')}>
|
||||
<View className={styles.remarkFont}>{infoObj.remark === '' ? '暂无' : infoObj.remark}</View>
|
||||
</DefaultBox>
|
||||
|
||||
<Popup show={showDesc} title="填写/编辑备注" showTitle onClose={() => setShowDesc(false)}>
|
||||
<View style={{ margin: '24rpx' }}>
|
||||
<Remark
|
||||
// onSave={(e) => getRemark(e)}
|
||||
onChange={e => onChange(e)}
|
||||
defaultValue={infoObj.remark}
|
||||
/>
|
||||
<View className={styles.order_save_address} onClick={() => getRemark()}>保存</View>
|
||||
</View>
|
||||
|
||||
</Popup>
|
||||
<View className={styles.safeBottom}></View>
|
||||
<View className={styles.bottomBox}>
|
||||
<View className={styles.bottomBtn} onClick={() => handSubmit()}>提交修改</View>
|
||||
</View>
|
||||
</View >
|
||||
)
|
||||
}
|
||||
export default OrderDetails
|
||||
Loading…
x
Reference in New Issue
Block a user