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