199 lines
9.1 KiB
TypeScript
199 lines
9.1 KiB
TypeScript
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, { useDidShow, useRouter } from "@tarojs/taro";
|
|
import classnames from "classnames";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
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";
|
|
import ShipmentMode from "../editOrder/components/shipmentMode";
|
|
import SubmitOrderBtn from "./components/submitOrderBtn";
|
|
|
|
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 [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})
|
|
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({
|
|
shopping_cart_product_color_id: Number(item)
|
|
})
|
|
})
|
|
getSaleOrderPreView()
|
|
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, default_address:AddressInfoParam}
|
|
const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
|
|
const {fetchData} = SaleOrderPreViewApi()
|
|
const getSaleOrderPreView = async () => {
|
|
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
|
|
let res = await fetchData(idsAndSaleModel.current)
|
|
setPreViewOrder(res.data)
|
|
}
|
|
}
|
|
|
|
//监听获取到的数据
|
|
useEffect(() => {
|
|
if(preViewOrder) {
|
|
formatData()
|
|
//当有默认地址时设置默认地址id
|
|
preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
|
|
}
|
|
}, [preViewOrder])
|
|
|
|
//格式化数据格式
|
|
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
|
|
const formatData = () => {
|
|
if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
|
|
let dataList = {}
|
|
let num_count = 0 //总数量
|
|
let orderList:{shopping_cart_product_color_id:number}[] = [] //提交订单时的格式
|
|
preViewOrder?.product_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].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 (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length
|
|
orderList.push({shopping_cart_product_color_id:item.id})
|
|
})
|
|
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, //颜色数量
|
|
num_count: num_count, //总数量
|
|
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
|
|
list: Object.values(dataList)
|
|
})
|
|
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) => {
|
|
setSubmitOrderData((val) => ({...val, address_id:e.id}))
|
|
}
|
|
|
|
const selectShipmentMode = useCallback((value) => {
|
|
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
|
|
}, [])
|
|
|
|
//获取备注
|
|
const getRemark = useCallback((e) => {
|
|
setSubmitOrderData((val) => ({...val, remark:e}))
|
|
setShowDesc(() => false)
|
|
}, [])
|
|
|
|
//提交按钮是否可用
|
|
const btnStatus = useMemo(() => {
|
|
if( submitOrderData?.list?.length == 0 || !submitOrderData?.shipment_mode || (submitOrderData?.shipment_mode == 2 && !submitOrderData?.address_id)) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}, [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}>
|
|
<ShipmentMode onSelect={selectShipmentMode}/>
|
|
<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>
|
|
{
|
|
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}>
|
|
<SubmitOrderBtn 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&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
|
|
</View>
|
|
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
|
<Remark onSave={(e) => getRemark(e)}/>
|
|
</Popup>
|
|
<View className="common_safe_area_y"></View>
|
|
</View>
|
|
)
|
|
}
|