2022-10-10 17:14:21 +08:00

724 lines
22 KiB
TypeScript

import { View, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
import { mpenumsaleorderstatus, OrderListApi } from '@/api/order'
import OrderStatusList from './components/orderStatusList'
import Search from '@/components/search'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import styles from "./index.module.scss"
import classnames from "classnames";
import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import Taro, { faceVerifyForPay, useDidShow } from '@tarojs/taro'
import ItemList from './components/itemList'
import OfflinePay from './components/offlinePay'
import {
mpsaleOrdercancel,
mpshoppingCartproductColorlist,
orderPaymentorderPaymentMethodInfo,
orderPaymentpreCollectOrderorderPaymentMethodInfo,
orderPaymentorderPaymentSubmission,
orderPaymentpreCollectOrderorderPaymentSubmission,
GetPayCode
} from '@/api/order'
import PayPopup from './components/PayPopup'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
interface filterObj {
purchaser_id?: string | number,
clientName?: string,
sale_user_id?: string | number,
saleuserName?: string,
order_no?: string | undefined,
sale_mode?: Number | undefined,
shipment_mode?: Number | undefined
}
export default () => {
//页码和页数
const [searchField, setSearchField] = useState<{ status: number | unknown; page: number; size: number; order_no: string }>({
status: -1,
page: 1,
size: 10,
order_no: '',
})
//获取订单列表
const { fetchData: listFetchData, state: orderState } = OrderListApi()
const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const getOrderList = async () => {
let res = await listFetchData({
...getFilterData(searchField),
...getFilterData(searchObj)
})
setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
setshowPopup(false)
setRefresherTriggeredStatus(() => false)
}
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchField((val) => ({ ...val, size: 10 }))
}
//数据加载状态
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 pageNum = useRef({ size: searchField.size, page: searchField.page })
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 { fetchData: orderStatusListFetchData } = mpenumsaleorderstatus()
const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
const getOrderStatusList = async () => {
let res = await orderStatusListFetchData()
setStatusList((e) => [...e, ...res.data.list])
}
//监听筛选条件变化
useEffect(() => {
if (searchField.status != null) getOrderList()
}, [searchField])
// //状态改变
const changeStatus = useCallback((e) => {
pageNum.current.page = 1
setSearchField((value) => ({ ...value, status: e, size: 10 }))
setOrderData(() => ({ list: [], total: 0 }))
}, [])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
pageNum.current.page = 1
setOrderData(() => ({ list: [], total: 0 }))
setSearchField((val) => ({ ...val, order_no: e, size: 10 }))
}, [])
//筛选内容展示
const [showPopup, setshowPopup] = useState(false)
const showSelctPopup = () => {
setshowPopup(true)
}
//关闭筛选内容展示
const closePopup = () => {
setshowPopup(false)
}
useDidShow(() => {
//获取选择的客户
let pages = Taro.getCurrentPages();
let currPage = pages[pages.length - 1]; // 获取当前页面
console.log(currPage.data, '8888')
setsearchObj((e) => ({
...e,
purchaser_id: currPage.data?.clientId ? currPage.data?.clientId : '',
clientName: currPage.data?.clientName ? currPage.data?.clientName : '',
sale_user_id: currPage.data?.saleuserId ? currPage.data?.saleuserId : '',
saleuserName: currPage.data?.saleuserName ? currPage.data?.saleuserName : '',
}))
})
//筛选参数
const [searchObj, setsearchObj] = useState<filterObj>({
purchaser_id: '',
clientName: '',
sale_user_id: '',
saleuserName: '',
sale_mode: undefined,
shipment_mode: undefined
})
// 跳转选择客户
const navTo = (index) => {
if (index === 1) {
Taro.navigateTo({
url: '/pages/customerPage/index?clientId=' + searchObj?.purchaser_id
})
} else {
Taro.navigateTo({
url: '/pages/saleuserPage/index?saleuserId=' + searchObj?.sale_user_id
})
}
}
//订单类型
const [modeList, setModeList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }])
//选择订单类型
const handCheckMode = (item) => {
modeList.map(it => {
if (it.id === item.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setModeList([...modeList])
setsearchObj((e) => ({ ...e, sale_mode: item.id }))
}
///发货方式类型
const [deliveryList, setdeliveryList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 1, name: '自提' }, { id: 2, name: '物流' }])
//选择发货方式类型
const handCheckDelivery = (item) => {
deliveryList.map(it => {
if (it.id === item.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setdeliveryList([...deliveryList])
setsearchObj((e) => ({ ...e, shipment_mode: item.id }))
}
//是否不允许确认筛选
const isDisabled = useMemo(() => {
if (searchObj.clientName !== '' ||
searchObj.saleuserName !== '' ||
searchObj.sale_mode !== undefined ||
searchObj.shipment_mode !== undefined
) {
return false
} else {
return true
}
}, [searchObj])
//重置
const handReset = () => {
pageNum.current.page = 1
setsearchObj({
purchaser_id: '',
clientName: '',
sale_user_id: '',
saleuserName: '',
sale_mode: undefined,
shipment_mode: undefined,
})
setSearchField({ ...searchField, size: 10 })
const arrOne = resetArr(modeList)
setModeList([...arrOne])
const arrTwo = resetArr(deliveryList)
setdeliveryList([...arrTwo])
}
//数组重置
const resetArr = (arr) => {
arr.map(it => {
it.checked = false
return it
})
return arr
}
//确认筛选
const handSure = async () => {
getOrderList()
}
//扫描
const handScan = () => {
Taro.scanCode({
success(res) {
setSearchField((val) => ({ ...val, order_no: res.result }))
},
fail(res) {
console.log(res);
},
});
}
useEffect(() => {
getOrderStatusList()
}, [])
const { fetchData: cancelFetch } = mpsaleOrdercancel()
//取消订单
const cancle = async (e, item) => {
e.stopPropagation();
Taro.showModal({
content: "确定要取消吗?",
confirmText: "确认",
cancelText: "取消",
success: async function (res) {
if (res.confirm) {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await cancelFetch({ id: item.id })
if (res.msg === 'success') {
Taro.showToast({
title: '取消成功'
})
Taro.hideLoading()
getOrderList()
} else {
Taro.showToast({
title: res.msg,
icon: 'error'
})
}
}
}
})
}
//再次购买
const { fetchData: buyFetch } = mpshoppingCartproductColorlist()
const nextBuy = async (e, item) => {
e.stopPropagation();
Taro.showLoading({
title: '请稍等...',
mask: true
})
let arr: any = []
item.product_list.forEach(item => {
item.product_colors.forEach(it => {
arr.push({
length: it.length,
roll: it.roll,
product_color_id: it.id
})
})
})
let query = {
purchaser_id: item.purchaser_id,
sale_mode: item.sale_mode,
color_list: arr
}
const res = await buyFetch(query)
if (res.msg === 'success') {
Taro.showToast({
title: '加入购物车成功!'
})
Taro.hideLoading()
getOrderList()
} else {
Taro.showToast({
title: res.msg,
icon: 'error'
})
}
}
//去支付逻辑
const { fetchData: infoOneFetch } = orderPaymentorderPaymentMethodInfo()
const { fetchData: infoTwoFetch } = orderPaymentpreCollectOrderorderPaymentMethodInfo()
const [itemObj, setItemObj] = useState<any>({})
const [payList, setPayList] = useState<any[]>([
{
id: 2,
iconfont: "icon-yufukuan1",
name: "预存款",
fonts: "可用额度 ",
money: "",
isCheck: false,
},
{
id: 5,
iconfont: "icon-xianxiahuizong",
name: "货到付款",
fonts: "发货后3天内付款",
isCheck: false,
money: "",
color: '#ffffff'
},
{
id: 3,
iconfont: "icon-xianxiahuizong",
name: "x天账期",
fonts: "可用额度 ",
money: "",
isCheck: false,
color: '#ffffff'
},
{
iconfont: "icon-yue",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
color: '#ffffff'
},
])
const toPay = async (e, item) => {
e.stopPropagation();
setItemObj(item)
if (item.status !== 10) {
let res = await infoOneFetch({ id: item.should_collect_order_id })
payList.map((item) => {
if (item.id === 3) {
item.name = `${res.data.account_period}天账期`;
item.fonts = `可用额度${formatPriceDiv(
res.data.account_period_credit_available_line
).toLocaleString()}`;
}
if (item.id === 2) {
item.fonts = `可用额度${formatPriceDiv(
res.data.advance_deposit_balance
).toLocaleString()}`;
}
return item;
});
setPayList([...payList])
if (item.is_shipper_picks_up) {
const obj = payList.filter((item) => {
return item.id === 6;
});
console.log(obj, "456456");
if (obj.length === 0) {
payList.unshift({
id: 6,
iconfont: "icon-xianxiahuizong",
color: '#ffffff',
name: "货主自提",
fonts: "",
money: "",
isCheck: false,
});
setPayList([...payList])
}
}
} else {
let res = await infoTwoFetch({ id: item.pre_collect_order_id })
const arr: any = [];
arr.push(
{
id: 2,
iconfont: "icon-yufukuan1",
name: "预存款",
fonts: `可用额度${formatPriceDiv(
res.data.advance_deposit_balance
).toLocaleString()}`,
money: "",
isCheck: false,
},
{
iconfont: "icon-yue",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
color: '#ffffff'
},
);
if (item.is_shipper_picks_up) {
const obj = arr.filter((item) => {
return item.id === 6;
});
if (obj.length === 0) {
arr.unshift({
id: 6,
iconfont: "icon-xianxiahuizong",
name: "货主自提",
color: '#ffffff',
fonts: "",
money: "",
isCheck: false,
});
}
}
setPayList([...arr])
}
setShowSide(true)
setTitle('待支付款项')
setShowPay(true)
}
//选择支付方式
const clickItem = (item) => {
if (item.name === '扫码支付') { handScanpay() }
if (item.name === '线下汇款') { setShowOffine(true) }
payList.map(it => {
if (item.id === it.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setPayList([...payList])
}
//扫码支付
const [showSide, setShowSide] = useState(true)
const [title, setTitle] = useState('')
const [picUrl, setPicUrl] = useState('')
const { fetchData: payFetch } = GetPayCode()
const handScanpay = async () => {
const list: any = [];
itemObj.product_list.forEach((item) => {
item.product_colors.forEach((it) => {
list.push({
product_code: item.code,
product_name: item.name,
product_color_code: it.product_color_code,
product_color_name: it.product_color_name,
num: it.roll.toString(),
weight: formatWeightDiv(it.actual_weight).toString(),
sale_price: (it.sale_price / 100).toString(),
total_price:
it.total_sale_price !== 0
? (it.total_sale_price / 100).toString()
: (it.estimate_amount / 100).toString(),
length: (it.length / 100).toString(),
weight_error: formatWeightDiv(it.weight_error).toString(),
});
});
});
const query = {
list: list,
title: "面料销售电子确认单",
show_qrcode: true,
show_barcode: true,
show_wait_pay_amount: true,
order_type: itemObj.sale_mode_name,
shipment_mode: itemObj.shipment_mode_name,
company: itemObj.title_purchaser_name,
sale_user: itemObj.sale_user_name,
order_created_time: formatDateTime(itemObj.create_time),
order_no: itemObj.order_no,
target_user_name: itemObj.target_user_name,
target_address: itemObj.address_detail,
target_description: itemObj.remark,
pay_account: itemObj.transfer_remittance_account,
bank_account_name: itemObj.account_name,
bank_name: itemObj.bank_of_deposit,
pay_type: itemObj.settle_mode_name,
client: itemObj.purchaser_name,
phone: itemObj.target_user_phone,
order_total_length: (itemObj.total_number / 100).toString(),
order_total_price: (
itemObj.bill_total_sale_price / 100
).toString(),
total_weight_error_discount: (
itemObj.total_weight_error_discount / 100
).toString(),
order_total_num: itemObj.total_number.toString(),
qrcode: "",
order_total_weight: (itemObj.total_weight / 1000).toString(),
estimate_amount: (itemObj.estimate_amount / 100).toString(),
total_sale_price: (itemObj.total_sale_price / 100).toString(),
show_total_sale_price: true,
show_total_weight_error_discount: true,
actual_amount: (itemObj.actual_amount / 100).toString(),
wait_pay_amount: (itemObj.wait_pay_amount / 100).toString(),
order_total_weight_error: (
itemObj.total_weight_error / 1000
).toString(),
};
const res = await payFetch(query)
if (res.data) {
console.log(res.data.base64)
setShowSide(false)
setTitle('查看销售码单')
setPicUrl(res.data.base64)
}
}
//确认交易
const { fetchData: payOneFetch } = orderPaymentorderPaymentSubmission()
const { fetchData: payTwoFetch } = orderPaymentpreCollectOrderorderPaymentSubmission()
const handsurePay = (obj) => {
let arr: any = []
// if (obj.status !== 10) {
arr = payList.filter(item => {
return item.checked
})
if (!arr.length) {
Taro.showToast({
title: '请选择后再提交',
icon: 'error'
})
return false
}
Taro.showModal({
content: "确定交易吗?",
confirmText: "确认",
cancelText: "取消",
success: async function (res) {
if (res.confirm) {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const restult = await (obj.status !== 10 ? payOneFetch({ id: Number(obj.should_collect_order_id), payment_method: Number(arr[0]?.id) }) : payTwoFetch({ id: Number(obj.pre_collect_order_id), payment_method: Number(arr[0]?.id) }))
if (restult?.msg === 'success') {
Taro.showToast({
title: '交易成功'
})
Taro.hideLoading()
setShowPay(false)
getOrderList()
} else {
Taro.showToast({
title: restult?.msg,
icon: 'error'
})
}
}
}
})
// }
}
//显示支付
const [showPay, setShowPay] = useState(false)
//显示线下汇款
const [showOffline, setShowOffine] = useState(false)
return (
<View>
<View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
<Search handScan={() => handScan()} defaultValue={searchField.order_no} showScan placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
<View className={styles.flexBox} onClick={() => showSelctPopup()}>
<IconFont name='icon-shaixuan' size={35} color={!isDisabled ? '#0D7CFF' : ''} customClassName={styles['activeshaixuan']} />
{/* <View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View> */}
<View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}></View>
</View>
</Search>
</View>
<View style={{ background: '#FFFFFF' }}>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
</View>
<View className={styles.order_list}>
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrolltolower}
refresherEnabled={true}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list?.map((item, index) => {
return (
<View key={item.id} className={styles.order_item_con}>
<ItemList
obj={item}
key={index}
cancle={(e, item) => cancle(e, item)}
nextBuy={(e, item) => nextBuy(e, item)}
toPay={(e, item) => toPay(e, item)}></ItemList>
</View>
)
})}
</InfiniteScroll>
{/* <View className={styles.kongboxTwo}></View> */}
</View>
<Popup title={'筛选订单'} show={showPopup} onClose={() => closePopup()}>
<View className={styles.popupBox}>
<View className={styles.topBox}>
<View className={styles.leftTop} onClick={() => navTo(1)}>
<View className={styles.lefttopTitle}></View>
<View className={classnames(searchObj.clientName === '' ? styles.lefttopSelectBox : styles.activelefttopSelectBox)}>
<View className={styles.lefttopSelectName}>{searchObj.clientName === '' ? '请选择客户' : searchObj.clientName}</View>
<View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
</View>
</View>
<View className={styles.leftTop} onClick={() => navTo(2)}>
<View className={styles.lefttopTitle}></View>
<View className={classnames(searchObj.saleuserName === '' ? styles.lefttopSelectBox : styles.activelefttopSelectBox)}>
<View className={styles.lefttopSelectName}>{searchObj.saleuserName === '' ? '请选择客户' : searchObj.saleuserName}</View>
<View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
</View>
</View>
</View>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}></View>
<View className={styles.flexModebox}>
{modeList.map((item, index) => {
return (
<View
onClick={() => {
handCheckMode(item)
}}
className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)}
key={index}>
{item.name}
</View>
)
})}
</View>
</View>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}></View>
<View className={styles.flexModebox}>
{deliveryList.map((item, index) => {
return (
<View
onClick={() => {
handCheckDelivery(item)
}}
className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)}
key={index}>
{item.name}
</View>
)
})}
</View>
</View>
<View>{isDisabled}</View>
{/* <View style={{ height: '160rpx' }}></View> */}
<View className={styles.bottomBox}>
<Button
className={styles.resetBox}
onClick={() => {
handReset()
}}>
{' '}
</Button>
<Button
className={classnames(isDisabled ? styles.button : styles.activeButton)}
disabled={isDisabled}
onClick={() => {
handSure?.()
}}>
{' '}
</Button>
</View>
{/* <View className={styles.areaBox}></View> */}
</View>
</Popup>
<PayPopup
list={payList}
obj={itemObj}
showPopup={showPay}
popupClose={() => setShowPay(false)}
clickItem={(item) => clickItem(item)}
handsurePay={(obj) => handsurePay(obj)}
showSide={showSide}
title={title}
picUrl={picUrl}></PayPopup>
<OfflinePay show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={itemObj}></OfflinePay>
</View>
)
}