对接确认订单
This commit is contained in:
@@ -9,6 +9,7 @@
|
||||
margin-top: 20px;
|
||||
.order_address_icon{
|
||||
font-size: 60px;
|
||||
color: $color_main;
|
||||
}
|
||||
.order_address_text_con{
|
||||
flex:1;
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user