筛选完成
This commit is contained in:
@@ -46,14 +46,18 @@
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
.order_desc_con{
|
||||
flex:1;
|
||||
width: 150px;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_desc_text{
|
||||
.order_desc_text, .order_desc_text_hint{
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
margin-right: 10px;
|
||||
flex:1;
|
||||
}
|
||||
.order_desc_text_hint{
|
||||
text-align: right;
|
||||
}
|
||||
.miconfont{
|
||||
font-size: 20px;
|
||||
@@ -86,6 +90,9 @@
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
.ok_order_btn {
|
||||
opacity: 1;
|
||||
}
|
||||
.order_number_desc{
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
|
||||
+78
-21
@@ -1,30 +1,35 @@
|
||||
import { SaleOrderPreViewApi } from "@/api/order";
|
||||
import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
|
||||
import { formatPriceDiv } from "@/common/fotmat";
|
||||
import Popup from "@/components/popup";
|
||||
import SearchInput from "@/components/searchInput";
|
||||
import { Text, Textarea, View } from "@tarojs/components"
|
||||
import Taro, { useRouter } from "@tarojs/taro";
|
||||
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import AddressInfo from "./components/addressInfo";
|
||||
import AddressInfo,{AddressInfoParam} from "./components/addressInfo";
|
||||
import EstimatedAmount from "./components/estimatedAmount";
|
||||
import KindList from "./components/kindList";
|
||||
import OrderState from "./components/orderState";
|
||||
import Remark from "./components/remark";
|
||||
import styles from './comfirm.module.scss'
|
||||
import { getParam } from "@/common/system";
|
||||
import useLogin from "@/use/useLogin";
|
||||
import { alert, goLink } from "@/common/common";
|
||||
|
||||
export default () => {
|
||||
const {checkLogin} = useLogin()
|
||||
|
||||
const [showDesc, setShowDesc] = useState(false)
|
||||
//下单信息
|
||||
type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]}
|
||||
const [submitOrder, setSubmitOrder] = useState<OrderParams>()
|
||||
const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
|
||||
|
||||
//获取购物车传过来的id
|
||||
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
|
||||
const param = getParam()
|
||||
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
|
||||
useEffect(() => {
|
||||
useDidShow(async () => {
|
||||
await checkLogin()
|
||||
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
|
||||
param?.ids?.split('-')?.map(item => {
|
||||
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
|
||||
@@ -32,11 +37,11 @@ import { getParam } from "@/common/system";
|
||||
})
|
||||
})
|
||||
getSaleOrderPreView()
|
||||
setSubmitOrder((val) => ({...val, sale_mode:param?.sale_mode}))
|
||||
}, [])
|
||||
setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
|
||||
})
|
||||
|
||||
//获取销售预览订单
|
||||
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string}
|
||||
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string, default_address:AddressInfoParam}
|
||||
const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
|
||||
const {fetchData} = SaleOrderPreViewApi()
|
||||
const getSaleOrderPreView = async () => {
|
||||
@@ -48,8 +53,11 @@ import { getParam } from "@/common/system";
|
||||
|
||||
//监听获取到的数据
|
||||
useEffect(() => {
|
||||
if(preViewOrder)
|
||||
if(preViewOrder) {
|
||||
formatData()
|
||||
//当有默认地址时设置默认地址id
|
||||
preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
|
||||
}
|
||||
}, [preViewOrder])
|
||||
|
||||
//格式化数据格式
|
||||
@@ -83,16 +91,34 @@ import { getParam } from "@/common/system";
|
||||
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
|
||||
list: Object.values(dataList)
|
||||
})
|
||||
setSubmitOrder({...submitOrder, list: orderList})
|
||||
setSubmitOrderData({...submitOrderData, list: orderList})
|
||||
}
|
||||
}
|
||||
const formatPreViewOrderMemo = useMemo(() => {
|
||||
console.log('formatPreViewOrder::',formatPreViewOrder)
|
||||
return formatPreViewOrder
|
||||
}, [formatPreViewOrder])
|
||||
|
||||
//格式化初始地址
|
||||
const defaultAddress = useMemo(() => {
|
||||
const address = preViewOrder?.default_address
|
||||
if(address) {
|
||||
return {
|
||||
province_name: address.province_name,
|
||||
city_name: address.city_name,
|
||||
district_name: address.district_name,
|
||||
address_detail: address.address_detail,
|
||||
id: address.id,
|
||||
name: address.name,
|
||||
phone: address.phone
|
||||
}
|
||||
}
|
||||
return null
|
||||
}, [preViewOrder])
|
||||
|
||||
//获取地址
|
||||
const getAddress = (e) => {
|
||||
setSubmitOrder((val) => ({...val, address_id:e.id}))
|
||||
setSubmitOrderData((val) => ({...val, address_id:e.id}))
|
||||
}
|
||||
|
||||
//收货方法 1:自提,2:物流
|
||||
@@ -101,41 +127,72 @@ import { getParam } from "@/common/system";
|
||||
{value:2, label:'物流', selected:false}
|
||||
])
|
||||
const selectShipmentMode = (value) => {
|
||||
setSubmitOrder((val) => ({...val, shipment_mode:value}))
|
||||
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
|
||||
}
|
||||
|
||||
//获取备注
|
||||
const getRemark = useCallback((e) => {
|
||||
setSubmitOrder((val) => ({...val, remark:e}))
|
||||
setSubmitOrderData((val) => ({...val, remark:e}))
|
||||
setShowDesc(() => false)
|
||||
}, [])
|
||||
|
||||
//提交按钮是否可用
|
||||
const btnStatus = useMemo(() => {
|
||||
console.log('submitOrder::',submitOrder)
|
||||
return submitOrder?.address_id&& submitOrder.list?.length &&submitOrder.shipment_mode
|
||||
}, [submitOrder])
|
||||
console.log('submitOrder::',submitOrderData)
|
||||
return submitOrderData?.address_id&& submitOrderData.list?.length &&submitOrderData.shipment_mode
|
||||
}, [submitOrderData])
|
||||
|
||||
//提交订单
|
||||
const {fetchData: saleOrderFetchData} = SaleOrderApi()
|
||||
const submitOrderEven = () => {
|
||||
if(!submitOrderData?.address_id) {
|
||||
alert.error('请选择地址')
|
||||
return false
|
||||
}
|
||||
if(!submitOrderData?.shipment_mode) {
|
||||
alert.error('请选择收货方式')
|
||||
return false
|
||||
}
|
||||
Taro.showModal({
|
||||
title: '确定提交?',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const res = await saleOrderFetchData(submitOrderData)
|
||||
if(res.success) {
|
||||
goLink('/pages/order/index',{id: res.data.id})
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
<View className={styles.order_title}>
|
||||
<Text>收货方式</Text>
|
||||
{shipmentMode.current.map(item => {
|
||||
return <View className={classnames(styles.order_status, (submitOrder?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
|
||||
return <View className={classnames(styles.order_status, (submitOrderData?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
|
||||
})}
|
||||
</View>
|
||||
<AddressInfo onSelect={(e) => getAddress(e)}/>
|
||||
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
|
||||
<KindList value={formatPreViewOrderMemo}/>
|
||||
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
|
||||
<View className={styles.order_desc_con}>订单备注</View>
|
||||
<View className={styles.order_desc_text}>点击填写</View>
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
|
||||
{
|
||||
submitOrderData?.remark&&<View className={styles.order_desc_text}>{submitOrderData?.remark}</View>||
|
||||
<View className={styles.order_desc_text_hint}>填写备注</View>
|
||||
}
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
|
||||
</View>
|
||||
<View className={styles.submit_order}>
|
||||
<View className={styles.submit_order_number}>
|
||||
<EstimatedAmount style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
|
||||
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料,${formatPreViewOrder?.colo_count}种颜色,共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
|
||||
</View>
|
||||
<View className={classnames(styles.order_btn)}>提交订单{btnStatus?'true':'false'}</View>
|
||||
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
|
||||
</View>
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
||||
<Remark onSave={(e) => getRemark(e)}/>
|
||||
|
||||
@@ -5,25 +5,39 @@ import classnames from "classnames";
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
|
||||
export type AddressInfoParam = {
|
||||
province_name: string,
|
||||
city_name: string,
|
||||
district_name: string,
|
||||
address_detail: string,
|
||||
id: number,
|
||||
name: string,
|
||||
phone: string
|
||||
}
|
||||
type Param = {
|
||||
onSelect?: (val:any) => void
|
||||
onSelect?: (val:any) => void,
|
||||
defaultValue?: AddressInfoParam|null
|
||||
}
|
||||
|
||||
export default memo(({onSelect}: Param) => {
|
||||
export default memo(({onSelect, defaultValue = null}: Param) => {
|
||||
const [showAddressList, setShowAddressList] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setUserInfo(() => defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
//选择地址
|
||||
const [userInfo, setUserInfo] = useState<any>()
|
||||
const getAddress = useCallback((val) => {
|
||||
setShowAddressList(false)
|
||||
setUserInfo(val)
|
||||
setShowAddressList(() => false)
|
||||
setUserInfo(() => val)
|
||||
onSelect?.(val)
|
||||
}, [])
|
||||
|
||||
//地址格式
|
||||
const formatAddress = useMemo(() => {
|
||||
if(userInfo) {
|
||||
console.log('userInfo::',userInfo)
|
||||
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
|
||||
}
|
||||
}, [userInfo])
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
|
||||
.orders_list_title{
|
||||
padding: 20px 20px 10px 20px;
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
.orders_list_con{
|
||||
margin-top: 20px;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
@@ -90,7 +96,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order_estimated_amount{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
|
||||
import { View } from "@tarojs/components"
|
||||
import { memo, useCallback } from "react"
|
||||
import { memo, useCallback, useMemo } from "react"
|
||||
import EstimatedAmount from "../estimatedAmount"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
@@ -10,21 +10,30 @@ type OrderParam = {
|
||||
list: any[],
|
||||
sale_mode: number,
|
||||
sale_mode_name: string
|
||||
unit: string
|
||||
unit: string,
|
||||
colo_count: number,
|
||||
num_count: number
|
||||
}
|
||||
|
||||
|
||||
export default memo(({value}:{value:OrderParam}) => {
|
||||
export default memo(({value}:{value:OrderParam|null}) => {
|
||||
//对应数量
|
||||
const formatCount = useCallback((item) => {
|
||||
return value.sale_mode == 0? item.roll : Number(item.length / 100)
|
||||
return value?.sale_mode == 0? item.roll : Number(item.length / 100)
|
||||
}, [value])
|
||||
//对应单价
|
||||
const standardPrice = useCallback(item => {
|
||||
return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value.sale_mode == 1?'m':'kg')
|
||||
return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
|
||||
}, [value])
|
||||
|
||||
//数量格式
|
||||
const numText = useMemo(() => {
|
||||
if(value)
|
||||
return `${value?.list.length}种面料,${value?.colo_count}种颜色,共${value?.num_count }${value?.unit}`
|
||||
}, [value])
|
||||
return (
|
||||
<>
|
||||
<View className={styles.orders_list_title}>{numText}</View>
|
||||
<View className={styles.orders_list_con}>
|
||||
{
|
||||
value?.list.map(item => {
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
.order_flow_state{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
height: 116px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
.order_flow_state_text{
|
||||
color: $color_main;
|
||||
font-size:$font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_flow_state_desc{
|
||||
color: $color_font_three;
|
||||
font-size: $font_size_medium;
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export default ({
|
||||
state = '',
|
||||
desc = ''
|
||||
}) => {
|
||||
return (
|
||||
<View className={styles.order_flow_state}>
|
||||
<View className={styles.order_flow_state_text}>{state}</View>
|
||||
<View className={styles.order_flow_state_desc}>{desc}</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,18 +1,90 @@
|
||||
.order_flow_state{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
height: 116px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
.order_flow_state_text{
|
||||
color: $color_main;
|
||||
font-size:$font_size;
|
||||
font-weight: 700;
|
||||
padding: 20px;
|
||||
box-sizing:border-box;
|
||||
.order_status_list{
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.order_flow_state_desc{
|
||||
color: $color_font_three;
|
||||
font-size: $font_size_medium;
|
||||
margin-left: 50px;
|
||||
.order_status_list_show {
|
||||
max-height: 1000px !important;
|
||||
}
|
||||
.order_status_item{
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
min-height: 120px;
|
||||
.order_status_tail_end, .order_status_tail{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $color_main;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position:absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
.order_status_tail_end{
|
||||
background-color: $color_main;
|
||||
}
|
||||
.order_status_line{
|
||||
border-left: 4px solid $color_main;
|
||||
height: 100%;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.order_status_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.order_status_title{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_big;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_status_time{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.order_status_tag{
|
||||
font-size: $font_size_min;
|
||||
background: #F0F0F0;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
.order_status_select{
|
||||
color: $color_main;
|
||||
}
|
||||
.order_status_tag_select{
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
.order_status_des{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
.order_status_des_select{
|
||||
color: $color_font_one;
|
||||
}
|
||||
}
|
||||
.more{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_one;
|
||||
padding-top: 20px;
|
||||
.miconfonts{
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
transform:rotate(90deg);
|
||||
}
|
||||
.open_miconfonts{
|
||||
transform:rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,42 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { memo, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
|
||||
export default ({
|
||||
state = '',
|
||||
desc = ''
|
||||
}) => {
|
||||
type Param = {
|
||||
title: string,
|
||||
time: string,
|
||||
tag: string,
|
||||
desc: string
|
||||
}
|
||||
export default memo(({list = []}:{list?:Param[]}) => {
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const changeMore = () => {
|
||||
setShowMore(() => !showMore)
|
||||
}
|
||||
list = [
|
||||
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
|
||||
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
|
||||
{title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''},
|
||||
]
|
||||
return (
|
||||
<View className={styles.order_flow_state}>
|
||||
<View className={styles.order_flow_state_text}>{state}</View>
|
||||
<View className={styles.order_flow_state_desc}>{desc}</View>
|
||||
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
|
||||
{list.map((item, index) => <View className={styles.order_status_item}>
|
||||
{(list.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
|
||||
{(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
|
||||
<View className={styles.order_status_content}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.title}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
|
||||
<View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View>
|
||||
</View>
|
||||
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
|
||||
</View>)}
|
||||
</View>
|
||||
{(list.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
|
||||
<Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
|
||||
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
|
||||
</View>}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
})
|
||||
+67
-57
@@ -1,5 +1,5 @@
|
||||
import { SaleOrderPreViewApi } from "@/api/order";
|
||||
import { formatPriceDiv } from "@/common/fotmat";
|
||||
import { GetSaleOrderDetailApi } from "@/api/order";
|
||||
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
|
||||
import Popup from "@/components/popup";
|
||||
import SearchInput from "@/components/searchInput";
|
||||
import { Text, Textarea, View } from "@tarojs/components"
|
||||
@@ -16,72 +16,62 @@ import styles from './index.module.scss'
|
||||
export default () => {
|
||||
const [showDesc, setShowDesc] = useState(false)
|
||||
|
||||
//获取购物车传过来的id
|
||||
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
|
||||
const router = useRouter()
|
||||
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
|
||||
useEffect(() => {
|
||||
idsAndSaleModel.current.sale_mode = Number(router.params.sale_mode)
|
||||
router.params.ids?.split('-')?.map(item => {
|
||||
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
|
||||
shopping_cart_product_color_id: Number(item)
|
||||
})
|
||||
})
|
||||
getSaleOrderPreView()
|
||||
}, [])
|
||||
|
||||
//获取销售预览订单
|
||||
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string}
|
||||
const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
|
||||
const {fetchData} = SaleOrderPreViewApi()
|
||||
//获取订单详情
|
||||
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
|
||||
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
|
||||
const getSaleOrderPreView = async () => {
|
||||
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
|
||||
let res = await fetchData(idsAndSaleModel.current)
|
||||
setPreViewOrder(res.data)
|
||||
if(router.params.id) {
|
||||
let res = await getOrderFetchData({id: router.params.id})
|
||||
setOrderDetail(res.data)
|
||||
}
|
||||
}
|
||||
|
||||
//监听获取到的数据
|
||||
useEffect(() => {
|
||||
if(preViewOrder)
|
||||
if(orderDetail)
|
||||
formatData()
|
||||
}, [preViewOrder])
|
||||
}, [orderDetail])
|
||||
|
||||
//格式化数据格式
|
||||
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
|
||||
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
|
||||
const formatData = () => {
|
||||
if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
|
||||
if(orderDetail?.color_list&&orderDetail?.color_list.length > 0) {
|
||||
let dataList = {}
|
||||
let num_count = 0 //总数量
|
||||
preViewOrder?.product_color_list.map(item => {
|
||||
orderDetail?.color_list.map(item => {
|
||||
dataList[item.product_code] = dataList[item.product_code]||{}
|
||||
dataList[item.product_code].product_code = item.product_code
|
||||
dataList[item.product_code].product_name = item.product_name
|
||||
dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name
|
||||
dataList[item.product_code].sale_mode_name = orderDetail.sale_mode_name
|
||||
dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[]
|
||||
dataList[item.product_code].color_list.push(item)
|
||||
//大货
|
||||
if (preViewOrder.sale_mode == 0) num_count += item.roll
|
||||
if (orderDetail.sale_mode == 0) num_count += item.roll
|
||||
//剪板或散件
|
||||
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length
|
||||
if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count += item.length
|
||||
})
|
||||
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100);
|
||||
setFormatPreViewOrder({
|
||||
estimate_amount: preViewOrder.estimate_amount, //预估金额
|
||||
estimate_weight: preViewOrder.estimate_weight,
|
||||
sale_mode: preViewOrder.sale_mode,
|
||||
sale_mode_name: preViewOrder.sale_mode_name,
|
||||
colo_count: preViewOrder.product_color_list.length, //颜色数量
|
||||
if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count = Number(num_count / 100);
|
||||
setFormatDetailOrder({
|
||||
estimate_amount: orderDetail.estimate_amount, //预估金额
|
||||
estimate_weight: orderDetail.estimate_weight,
|
||||
sale_mode: orderDetail.sale_mode,
|
||||
sale_mode_name: orderDetail.sale_mode_name,
|
||||
colo_count: orderDetail.color_list.length, //颜色数量
|
||||
num_count: num_count, //总数量
|
||||
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
|
||||
unit: orderDetail.sale_mode == 0?'条':'m', //单位
|
||||
list: Object.values(dataList)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const formatPreViewOrderMemo = useMemo(() => {
|
||||
return formatPreViewOrder
|
||||
}, [formatPreViewOrder])
|
||||
return formatDetailOrder
|
||||
}, [formatDetailOrder])
|
||||
|
||||
//复制功能
|
||||
const clipboardData = () => {
|
||||
@@ -96,42 +86,62 @@ import styles from './index.module.scss'
|
||||
})
|
||||
}
|
||||
|
||||
//格式化初始地址
|
||||
const defaultAddress = useMemo(() => {
|
||||
const address = orderDetail?.default_address
|
||||
if(address) {
|
||||
return {
|
||||
province_name: address.province_name,
|
||||
city_name: address.city_name,
|
||||
district_name: address.district_name,
|
||||
address_detail: address.address_detail,
|
||||
id: address.id,
|
||||
name: address.name,
|
||||
phone: address.phone
|
||||
}
|
||||
}
|
||||
return null
|
||||
}, [orderDetail])
|
||||
|
||||
//订单备注
|
||||
const [orderRemark, setOrderRemark] = useState('')
|
||||
const getRemark = useCallback((e) => {
|
||||
setOrderRemark(() => e)
|
||||
setShowDesc(() => false)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
<OrderState state="预约中" desc="客服已接单,等待仓库配布出单..."/>
|
||||
<View className={styles.order_title}>
|
||||
<Text>收货方式</Text>
|
||||
<View className={styles.order_status}>物流</View>
|
||||
<View className={styles.order_status}>上门自提</View>
|
||||
</View>
|
||||
<AddressInfo/>
|
||||
<OrderState />
|
||||
<AddressInfo defaultValue={defaultAddress}/>
|
||||
<KindList value={formatPreViewOrderMemo}/>
|
||||
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
|
||||
<View className={styles.order_desc_con}>订单备注</View>
|
||||
<View className={styles.order_desc_text}>点击填写</View>
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
|
||||
</View>
|
||||
|
||||
<View className={styles.order_info} >
|
||||
<View className={styles.order_info_title}>订单备注</View>
|
||||
<View className={styles.order_info_title}>订单信息</View>
|
||||
<SearchInput showBorder={false} title='单号'>
|
||||
<View className={styles.order_num}>
|
||||
<Text>13535359535</Text>
|
||||
<Text>{orderDetail?.order_no}</Text>
|
||||
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
|
||||
</View>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='下单时间'>
|
||||
<Text>2022-4-5 10:11:55</Text>
|
||||
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
|
||||
</SearchInput>
|
||||
</View>
|
||||
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
|
||||
<View className={styles.order_desc_con}>订单备注</View>
|
||||
{
|
||||
orderRemark&&<View className={styles.order_desc_text}>{orderRemark}</View>||
|
||||
<View className={styles.order_desc_text_hint}>填写备注</View>
|
||||
}
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
|
||||
</View>
|
||||
<View className={styles.submit_order}>
|
||||
<View className={styles.submit_order_number}>
|
||||
<EstimatedAmount style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
|
||||
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料,${formatPreViewOrder?.colo_count}种颜色,共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
|
||||
</View>
|
||||
<View className={styles.order_btn}>提交订单</View>
|
||||
|
||||
<View className={styles.order_btn}>取消订单</View>
|
||||
</View>
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
||||
<Remark onSave={(e) => console.log(e)}/>
|
||||
<Remark onSave={(e) => getRemark(e)}/>
|
||||
</Popup>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user