筛选完成

This commit is contained in:
2022-05-17 20:31:53 +08:00
parent 754b3330a9
commit d639f2b23b
22 changed files with 458 additions and 182 deletions
+9 -2
View File
@@ -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
View File
@@ -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;
+14 -5
View File
@@ -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
View File
@@ -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>