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

对接确认订单

Browse Source
This commit is contained in:
cheng
2022-05-13 19:28:46 +08:00
parent 26555a9541
commit ab1118c5b4
32 changed files with 2233 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/comfirm.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '确认订单'
}
src/pages/order/comfirm.module.scss
+122
View File
@@ -0,0 +1,122 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
.order_status_selected{
color: $color_main;
border: 1px solid $color_main;
}
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 0 20px;
height: 116px;
border-radius: 20px;
margin-top: 20px;
.order_desc_con{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 50px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 250px;
height: 90px;
opacity: 0.6;
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
}
src/pages/order/comfirm.tsx
+146
View File
@@ -0,0 +1,146 @@
import { SaleOrderPreViewApi } 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 classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo 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";
export default () => {
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>()
//获取购物车传过来的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(() => {
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()
}, [])
//获取销售预览订单
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 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()
}, [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)
})
setSubmitOrder({...submitOrder, list: orderList})
}
}
const formatPreViewOrderMemo = useMemo(() => {
return formatPreViewOrder
}, [formatPreViewOrder])
//获取地址
const getAddress = (e) => {
console.log('address::', submitOrder)
setSubmitOrder({...submitOrder, address_id:e.id})
}
//收货方法 1:自提，2：物流
const shipmentMode = useRef([
{value:1, label:'上门自提', selected:false},
{value:2, label:'物流', selected:false}
])
const selectShipmentMode = (value) => {
setSubmitOrder({...submitOrder, shipment_mode:value})
}
//获取备注
const getRemark = useCallback((e) => {
setSubmitOrder({...submitOrder, remark:e})
}, [])
//提交按钮是否可用
const btnStatus = useMemo(() => {
console.log('submitOrder::',submitOrder)
return submitOrder?.address_id&& submitOrder.list?.length &&submitOrder.shipment_mode
}, [submitOrder])
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>
})}
</View>
<AddressInfo onSelect={(e) => getAddress(e)}/>
<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.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)}>提交订单2{btnStatus?'true':'false'}</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<View className="common_safe_area_y"></View>
</View>
)
}
src/pages/order/components/addressInfo/index.module.scss
+1
View File
@@ -9,6 +9,7 @@
margin-top: 20px;
.order_address_icon{
font-size: 60px;
color: $color_main;
}
.order_address_text_con{
flex:1;
src/pages/order/components/addressInfo/index.tsx
+32 -12
View File
@@ -2,31 +2,51 @@ import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { useState } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from './index.module.scss'
export default () => {
type Param = {
onSelect?: (val:any) => void
}
export default memo(({onSelect}: Param) => {
const [showAddressList, setShowAddressList] = useState(false)
//选择地址
const [userInfo, setUserInfo] = useState<any>()
const getAddress = useCallback((val) => {
setShowAddressList(false)
setUserInfo(val)
onSelect?.(val)
}, [])
//地址格式
const formatAddress = useMemo(() => {
if(userInfo) {
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}
}, [userInfo])
return (
<View>
<View className={styles.order_address} onClick={() => setShowAddressList(true)}>
<View className={classnames(styles.order_address_icon, 'iconfont icon-shaixuan')}></View>
{/* <View className={styles.order_address_text_no}>请选择收货地址及信息</View> */}
<View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
{!userInfo&&<View className={styles.order_address_text_no}>请选择收货地址及信息</View>||
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>**省**市**区**街道****仓库**省**市**区**街道****仓库</View>
<View className={styles.order_address_text_title}>{formatAddress}</View>
<View className={styles.order_address_text_name}>
<Text>陈先生</Text>
<Text>1818877790</Text>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
</View>
</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
</View>}
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>选择收货地址</View>
<AddressList onSelect={(item, index) => console.log(index, item)}/>
<View className={styles.order_address_title}>请选择收货地址</View>
<AddressList onSelect={(item) => getAddress(item)}/>
</View>
</Popup>
</View>
)
}
})
src/pages/order/components/estimatedAmount/index.tsx
+1 -4
View File
@@ -14,14 +14,11 @@ export default ({style, number = 0}:Param) => {
return (
<>
<Text>¥</Text>
<Text>{formatPrice(int_num)}</Text>
<Text>{Number(int_num).toLocaleString()}</Text>
<Text>.{decimals_num}</Text>
</>
)
}, [number])
const formatPrice = useCallback((number: string) => {
return formatKbPrice(number)
}, [])
return (
<View className={styles.order_price}>
<Text className={styles.order_price_text}>预估金额</Text>
src/pages/order/components/kindList/index.module.scss
+4
View File
@@ -67,6 +67,10 @@
}
}
.order_list_item_count{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
.count_num{
color: $color_main;
font-size: $font_size;
src/pages/order/components/kindList/index.tsx
+50 -74
View File
@@ -1,88 +1,64 @@
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import { View } from "@tarojs/components"
import { useState } from "react"
import { memo, useCallback } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
type OrderParam = {
estimate_amount: number,
estimate_weight: number,
list: any[],
sale_mode: number,
sale_mode_name: string
unit: string
}
export default memo(({value}:{value:OrderParam}) => {
//对应数量
const formatCount = useCallback((item) => {
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')
}, [value])
return (
<>
<View className={styles.orders_list_con}>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
{
value?.list.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{item.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.num}>共{item.color_list.length}种</View>
</View>
<View className={styles.order_list_scroll}>
{item.color_list?.map(colorItem => {
return <View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>{colorItem.product_color_code + ' ' + colorItem.product_color_name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem)}</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
</View>
</View>
</View>
})}
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
})
}
<View className={styles.order_estimated_amount}>
<EstimatedAmount number={price}/>
<View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)}/>
{/* <View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View> */}
</View>
</View>
</>
)
}
})
src/pages/order/index.tsx
+45 -23
View File
@@ -1,10 +1,11 @@
import { SaleOrderPreViewApi } 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 classnames from "classnames";
import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
@@ -13,21 +14,8 @@ import Remark from "./components/remark";
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
const [showDesc, setShowDesc] = useState(false)
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: '123123121321',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
//获取购物车传过来的id
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
const router = useRouter()
@@ -44,7 +32,7 @@ import styles from './index.module.scss'
//获取销售预览订单
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 [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
@@ -53,27 +41,61 @@ import styles from './index.module.scss'
}
}
//监听获取到的数据
useEffect(() => {
formatData()
if(preViewOrder)
formatData()
}, [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 //总数量
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 = item.sale_mode_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
})
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)
})
console.log('dataList::',Object.values(dataList))
return Object.values(dataList)
}
}
const formatPreViewOrderMemo = useMemo(() => {
return formatPreViewOrder
}, [formatPreViewOrder])
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: '123123121321',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
return (
<View className={styles.order_main}>
<OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
@@ -83,7 +105,7 @@ import styles from './index.module.scss'
<View className={styles.order_status}>上门自提</View>
</View>
<AddressInfo/>
<KindList/>
<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>
@@ -103,8 +125,8 @@ import styles from './index.module.scss'
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<EstimatedAmount style={{color:'#007AFF'}} number={price}/>
<View className={styles.order_number_desc}>2种面料，6种颜色，共6条</View>
<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>