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

✨ feat(提货详情): 已完成提货详情

Browse Source
This commit is contained in:
xuan 2022-09-26 10:45:46 +08:00
parent 0a3bdd83f3
commit 2a73febdba
6 changed files with 158 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/takeDelivery/components/ItemList/index.tsx
View File

@ -27,21 +27,21 @@ const ItemList:FC<PropsType> = (props) => {
})
}
const { fetchData, state } = TakeGoodsOrderAudit()
const { fetchData } = TakeGoodsOrderAudit()
// 确认审核
const handleAudit = (id: number) => {
Taro.showModal({
content: '确认要审核吗？',
content: '确认要提货吗？',
confirmColor: '#337FFF',
success: async (res) => {
if (res.confirm) {
const res = await fetchData({ id })
if (res.success) {
Taro.showToast({ title: '审核成功', icon: 'success' })
Taro.showToast({ title: '提货成功', icon: 'success' })
onSuccess?.()
}else{
Taro.showToast({ title: '审核失败', icon: 'error' })
Taro.showToast({ title: '操作失败', icon: 'error' })
}
}
},
@ -53,10 +53,10 @@ const ItemList:FC<PropsType> = (props) => {
<View className={styles.topBar}>
<View className={styles.topBar__orderNo}>
<View>单号：{itemData?.take_goods_order_no}</View>
{itemData?.take_goods_status === 0 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--takingGoods'])}>提货中</View>}
{itemData?.take_goods_status === 1 && (
<View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finished'])}>已收货</View>
{itemData?.take_goods_status === 0 && (
<View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--takingGoods'])}>提货中</View>
)}
{itemData?.take_goods_status === 1 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finished'])}>已收货</View>}
</View>
<Text className={styles.topBar__orderType}>{itemData?.take_goods_order_type_name}</Text>
</View>
@ -66,17 +66,18 @@ const ItemList:FC<PropsType> = (props) => {
<View className={styles.content__row__left}>货品信息：</View>
<View className={styles.content__row__right}>
<SaleModeTag saleMode={itemData.sale_mode} size='small' customClassName={styles.tag}></SaleModeTag>
{/* TODO: 面料字段、颜色字段 */}
{itemData.delivery_product_nums}种面料，{itemData.delivery_product_color_nums}种颜色，共
{itemData?.sale_mode === EnumSaleMode.Bulk ? `${itemData?.take_roll}条` : `${formatMeterDiv(itemData?.take_meters)}米`}
</View>
</View>
<View className={styles.content__row}>
<View className={styles.content__row__left}>供应信息：</View>
<View className={styles.content__row__right}>{itemData?.delivery_address || '空'}</View>
<View className={styles.content__row__right}>{itemData?.supplier_name || '空'}</View>
</View>
<View className={styles.content__row}>
<View className={styles.content__row__left}>创建时间：</View>
<View className={styles.content__row__right}>{formatDateTime(itemData?.create_time) || '空'}</View>
<View className={styles.content__row__right}>{formatDateTime(itemData?.take_goods_order_create_time) || '空'}</View>
</View>
</View>
<View className={styles.bottomBar}>

48
src/pages/takeDelivery/components/remark/index.module.scss Normal file
View File

@ -0,0 +1,48 @@
.order_popup{
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
.order_popup_title{
color: $font_size_big;
font-weight: 700;
color: #000000;
padding-bottom: 20px;
}
.order_popup_input{
width: 100%;
padding: 0 25px;
box-sizing: border-box;
margin-top: 43px;
position: relative;
.descDataNum{
position: absolute;
right: 40px;
bottom: 10px;
height: 39px;
font-size: $font_size_medium;
color: $color_font_two;
}
textarea{
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
height: 313px;
padding: 20px;
padding-bottom: 50px;
box-sizing: border-box;
font-size: $font_size;
border: 2px solid #e6e6e6;
}
}
.order_save_address{
height: 82px;
background: #007aff;
border-radius: 40px;
width: 668px;
text-align: center;
line-height: 82px;
color: #fff;
margin-top: 60px;
}
}

43
src/pages/takeDelivery/components/remark/index.tsx Normal file
View File

@ -0,0 +1,43 @@
import Popup from "@/components/popup"
import { Textarea, View } from "@tarojs/components"
import { useCallback, useEffect, useState } from "react"
import styles from './index.module.scss'
type Param = {
onBlur?: (val:any) => void
onSave?: (val: string) => void
defaultValue?: string
}
export default ({onBlur, onSave, defaultValue = ''}:Param) => {
const [descData, setDescData] = useState({
number: 0,
value: '',
count: 200
})
useEffect(() => {
getDesc(defaultValue)
}, [defaultValue])
const getDesc = (value) => {
let res = value
if(value.length > descData.count) {
res = value.slice(0, descData.count)
}
setDescData({...descData, number:res.length, value: res})
}
const setSave = () => {
onSave?.(descData.value)
}
return (
<View className={styles.order_popup}>
<View className={styles.order_popup_title}>编辑备注</View>
<View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
</View>
<View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
</View>
)
}

2
src/pages/takeDeliveryDetail/index.config.ts
View File

@ -1,3 +1,3 @@
export default {
navigationBarTitleText: '提货',
navigationBarTitleText: '提货详情',
}

2
src/pages/takeDeliveryDetail/index.module.scss
View File

@ -29,7 +29,7 @@ page {
margin: 0 24px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
justify-content: center;
align-items: center;
padding-top: 24px;
padding-bottom: calc(20px + constant(safe-area-inset-bottom));

77
src/pages/takeDeliveryDetail/index.tsx
View File

@ -1,4 +1,4 @@
import { TakeGoodsOrder, TakeGoodsOrderAudit, DeliveryNoticeOrderUpload, TakeGoodsOrderRefuse } from '@/api'
import { TakeGoodsOrder, TakeGoodsOrderAudit, TakeGoodsOrderRefuse } from '@/api'
import { formatDateTime, formatMeterDiv, formatWeightDiv } from '@/common/format'
import Cell from '@/components/cell'
import Divider from '@/components/divider'
@ -12,6 +12,8 @@ import { useRouter } from '@tarojs/taro'
import { alert } from '@/common/common'
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import Remark from '../takeDelivery/components/remark'
const TakeDeliveryDetail: FC = () => {
const router = useRouter()
@ -27,14 +29,16 @@ const TakeDeliveryDetail: FC = () => {
})
console.log('res==>', res.data)
setDetailInfo(res.data)
// 动态设置标题
Taro.setNavigationBarTitle({
title: res.data.take_goods_order_type_name,
})
}
useEffect(() => {
getData()
}, [])
const { fetchData: uploadData } = DeliveryNoticeOrderUpload()
const { fetchData: FetchAudit } = TakeGoodsOrderAudit()
const DetailItem = useMemo(() => {
@ -78,39 +82,63 @@ const TakeDeliveryDetail: FC = () => {
console.log('imageList===>', imageList)
setReadyToUploadList((prev) => [...prev, ...imageList])
}
const { fetchData: refuseOrder } = TakeGoodsOrderRefuse()
const [showRemarkModal, setShowRemarkModal] = useState(false)
const handleRefuseOrder = async (remark: string) => {
const res = await refuseOrder({
id: Number(router.params.id),
remark: remark,
})
if (res.success) {
alert.success('拒收成功')
getData()
} else {
alert.error('该操作失败')
}
}
const onRemarkSave = async (remark: string) => {
handleRefuseOrder(remark)
}
// 拒收
const handleRefuse = useCallback(async () => {}, [])
const handleRefuse = useCallback(() => {
setShowRemarkModal(true)
}, [])
// 审核
const handleAudit = useCallback(() => {
Taro.showModal({
confirmColor: '#337FFF',
title: '确定审核？',
title: '确定要提货？',
success: async function (res) {
if (res.confirm) {
const res = await FetchAudit({ id: Number(router.params.id) })
if (res.success) {
alert.success('审核成功')
alert.success('提货成功')
getData()
} else {
alert.error('审核失败')
alert.error('请求失败')
}
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
}, [readyToUploadList])
const { fetchData: refuseOrder } = TakeGoodsOrderRefuse()
const { fetchData: auditOrder } = TakeGoodsOrderAudit()
// 底部按钮栏
const BottomBar = useMemo(() => {
if (detailInfo?.take_goods_order_type === 0) {
if (detailInfo?.take_goods_order_type !== 0) {
// 采购提货
return (
<View className={styles.bottomBar}>
<NormalButton type='primary' plain round onClick={handleAudit}>
<NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '100%' }}>
确认提货
</NormalButton>
</View>
@ -118,11 +146,11 @@ const TakeDeliveryDetail: FC = () => {
} else {
// 退货提货
return (
<View className={styles.bottomBar}>
<NormalButton type='primary' round onClick={handleRefuse}>
<View className={styles.bottomBar} style={{ justifyContent: 'space-between' }}>
<NormalButton type='primary' round onClick={handleRefuse} customStyles={{ width: '25%' }}>
拒收
</NormalButton>
<NormalButton type='primary' plain round onClick={handleAudit}>
<NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '25%' }}>
确认提货
</NormalButton>
</View>
@ -176,13 +204,18 @@ const TakeDeliveryDetail: FC = () => {
<Cell title='提货时间：' desc={formatDateTime(detailInfo?.audit_time)}></Cell>
</View>
</LayoutBlock>
<LayoutBlock circle>
<View className={styles.orderInfoTop}>备注信息</View>
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
<View className='orderInfoDetail'>{detailInfo?.remark}</View>
</LayoutBlock>
{detailInfo?.take_goods_order_type !== 0 && (
<LayoutBlock circle>
<View className={styles.orderInfoTop}>备注信息</View>
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
<View className='orderInfoDetail'>{detailInfo?.remark}</View>
</LayoutBlock>
)}
</View>
{detailInfo?.take_goods_status === 0 && BottomBar}
<Popup show={showRemarkModal} showTitle={false} onClose={() => setShowRemarkModal(false)}>
<Remark onSave={onRemarkSave} defaultValue={detailInfo?.remark} />
</Popup>
</View>
)
}