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

订单列表对接

Browse Source
This commit is contained in:
cheng
2022-06-01 20:33:36 +08:00
parent d05ad47b8d
commit b921bcaa07
21 changed files with 183 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/components/swiper/index.tsx
+5 -6
View File
@@ -4,12 +4,11 @@ import { useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
}
export default ({list = []}: params) => {
const [pageIndex, setPageIndex] = useState(1)
const pageRef = useRef<any>(null)
@@ -26,13 +25,13 @@ export default ({list = []}: params) => {
<Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
{list.map((item) => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} >
<Image mode="aspectFill" src={formatImgUrl(item)}></Image>
</View>
<View className={styles.image_item} >
<Image mode="aspectFill" src={formatImgUrl(item)}></Image>
</View>
</SwiperItem>
})}
</Swiper>
<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>
{(list.length > 0)&&<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>}
</View>
)
}
src/pages/details/index.config.ts
+2 -1
View File
@@ -1,5 +1,6 @@
export default {
navigationBarTitleText: '详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
backgroundTextStyle: 'dark',
enableShareAppMessage: true
}
src/pages/details/index.tsx
+19 -17
View File
@@ -1,5 +1,5 @@
import { Button, CustomWrapper, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import { Button, CustomWrapper, Image, RichText, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter, useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
@@ -7,13 +7,11 @@ import OrderCount from './components/orderCount';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import {formatHashTag, formatImgUrl} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
import {GetProductDetailApi} from '@/api/material'
import useLogin from '@/use/useLogin';
import { useSelector } from '@/reducers/hooks';
type item = {title:string, img:string, url:string, id:number}
@@ -49,14 +47,12 @@ export default (props:params) => {
},[productInfo])
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(false)
const html = `
<img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
`
//弹窗提示
const [colorInfo, setColorInfo] = useState<colorItem>()
const [showPreview, setShowPreview] = useState(false)
const getColorItem = (item) => {
@@ -67,6 +63,7 @@ export default (props:params) => {
setShowPreview(true)
}
//收藏功能
const [collectStatus, setCollectStatus] = useState(false)
const changeCollect = () => {
setCollectStatus(!collectStatus)
@@ -77,18 +74,26 @@ export default (props:params) => {
})
}
//转发分享
const userObj = useSelector(state => state.userInfo)
useShareAppMessage(res => {
let path = ''
let title = ''
let imageUrl = ''
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
path = `/pages/details/index?id=${userObj.sort_code.shareShortDetail}`
title = productName as string
// imageUrl =
} else {
path = `/pages/details/index?id=${userObj.sort_code.shareShortPage}`
title = '陆盈电子商城'
}
return {
title: '自定义转发标题',
path: '/pages/details/index?id=10',
imageUrl: ''
title,
path,
imageUrl,
}
})
//开始下单
const placeOrder = async (e:any) => {
@@ -108,7 +113,6 @@ export default (props:params) => {
//页面下拉刷新
usePullDownRefresh(() => {
getProductDetail()
})
@@ -123,13 +127,11 @@ export default (props:params) => {
<View className={styles.share}>
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
<View className={styles.text}>分享</View>
<Button open-type="share" className={styles.shareBtn}></Button>
</View>
<View className={styles.collect}>
<View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
<View className={styles.text}>收藏</View>
</View>
</View>
<View className={styles.des_data}>
src/pages/index/index.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ export default () => {
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:productData.list, total: productData.total, status: productState.loading})
}, [productData])
}, [productData, productState.loading])
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
src/pages/order/comfirm.tsx
+1 -1
View File
@@ -163,7 +163,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
<View className={styles.order_main}>
<ShipmentMode onSelect={selectShipmentMode}/>
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
<KindList value={formatPreViewOrderMemo}/>
<KindList order={formatPreViewOrderMemo} comfirm={true}/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
src/pages/order/components/kindList/index.tsx
+50 -34
View File
@@ -22,21 +22,26 @@ type OrderParam = {
actual_amount: number //实付金额
}
export default memo(({value}:{value:OrderParam}) => {
type Param = {
order: OrderParam,
comfirm?: boolean //是否是确认订单页面使用
}
export default memo(({order, comfirm = false}:Param) => {
//对应数量
const formatCount = useCallback((item) => {
return value?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [value])
return order?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [order])
//对应单价
const standardPrice = useCallback(price => {
return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
}, [value])
return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg')
}, [order])
//数量格式
const numText = useMemo(() => {
if(value)
return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}${value?.unit}`
}, [value])
if(order)
return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}`
}, [order])
const {
SaleOrderStatusBooking, // 待接单
@@ -56,68 +61,79 @@ export default memo(({value}:{value:OrderParam}) => {
{
id:1,
value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
label:'预估金额'
label:'预估金额',
field: 'estimate_amount'
},
{
id:2,
value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'合计金额'
label:'合计金额',
field: 'total_sale_price'
},
{
id:3,
value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'空差优惠'
value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'空差优惠',
field: 'total_weight_error_discount'
},
{
id:4,
value:[ SaleOrderStatusWaitingPayment.value],
label:'应付金额'
label:'应付金额',
field: 'total_should_collect_money'
},
{
id:5,
value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'实付金额'
label:'实付金额',
field: 'actual_amount'
}
]
//是否显示价格
const showPrice = useCallback((priceInfo, status) => {
return priceInfo.value.includes(status)
}, [order])
const priceConDom = useMemo(() => {
if(!value) return
console.log('value:::', value)
if(!order) return
//确认订单
if(comfirm == true) {
return <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
}
//订单为取消订单状态
if(value?.status == 9) {
if(order?.status == SaleOrderStatusCancel.value) {
return (
<>
{(priceList[1].value.includes(value?.the_previous_status))&&<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />}
{(priceList[2].value.includes(value?.the_previous_status))&&<EstimatedAmount number={formatPriceDiv(value?.total_sale_price)} titleStatus={false} numberStatus={0} title="合计金额" />}
{(priceList[3].value.includes(value?.the_previous_status))&&<EstimatedAmount number={formatPriceDiv(value?.total_weight_error_discount)} titleStatus={false} numberStatus={0} title="空差优惠" />}
{(priceList[4].value.includes(value?.the_previous_status))&&<EstimatedAmount number={formatPriceDiv(value?.total_should_collect_money)} title="应付金额" />}
{/* {(priceList[5].value.includes(value?.the_previous_status))&&<EstimatedAmount number={formatPriceDiv(value?.actual_amount)} title="实付金额" />} */}
{
priceList.map(item => {
return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
} else {
return (
<>
{(priceList[1].value.includes(value?.status))&&<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />}
{(priceList[2].value.includes(value?.status))&&<EstimatedAmount number={formatPriceDiv(value?.total_sale_price)} titleStatus={false} numberStatus={0} title="合计金额" />}
{(priceList[3].value.includes(value?.status))&&<EstimatedAmount number={formatPriceDiv(value?.total_weight_error_discount)} titleStatus={false} numberStatus={0} title="空差优惠" />}
{(priceList[4].value.includes(value?.status))&&<EstimatedAmount number={formatPriceDiv(value?.total_should_collect_money)} title="应付金额" />}
{/* {(priceList[5].value.includes(value?.status))&&<EstimatedAmount number={formatPriceDiv(value?.actual_amount)} title="实付金额" />} */}
{
priceList.map(item => {
return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}
}, [value])
}
}, [order])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
{
value?.list?.map(item => {
order?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{value.sale_mode_name}</View>
<View className={styles.tag}>{order.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
@@ -131,7 +147,7 @@ export default memo(({value}:{value:OrderParam}) => {
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</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_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
</View>
</View>
src/pages/order/components/payment/index.tsx
+10 -5
View File
@@ -1,5 +1,5 @@
import { Text, View } from "@tarojs/components";
import { memo, useEffect, useMemo, useState } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import AmountShow from "../amountShow";
import classnames from "classnames";
import styles from './index.module.scss'
@@ -11,6 +11,7 @@ import ScanPay from "../scanPay";
import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay";
import { formatPriceDiv } from "@/common/fotmat";
import {alert} from "@/common/common"
import { PAYMENT_METHOD } from "@/common/enum";
type Param = {
show?: true|false,
@@ -61,9 +62,10 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
}, [show, orderId])
//预存款选择
const advanceSelectData = (val) => {
const advanceSelectData = useCallback((val) => {
setSubmitData((e) => ({...e, payment_method:val}))
}
}, [])
//账期选择
const periodSelectData = (val) => {
setSubmitData((e) => ({...e, payment_method:val}))
@@ -93,6 +95,9 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
)
}, [payInfo])
//支付方式枚举
const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD
return (
<View className={styles.payment_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
@@ -126,7 +131,7 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
</View>
{advance_payment}
</View>
<MCheckbox status={submitData.payment_method == 1} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
<MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
</View>
<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
@@ -136,7 +141,7 @@ export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param
</View>
<View className={styles.payment_list_item_left_price}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
</View>
<MCheckbox status={submitData.payment_method == 2} onSelect={() => periodSelectData(1)} onClose={() => periodSelectData(null)}/>
<MCheckbox status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
</View>
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
<View className={styles.payment_list_item_left}>
src/pages/order/index.tsx
+8 -6
View File
@@ -5,6 +5,7 @@ import {
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
@@ -23,10 +24,8 @@ import styles from './index.module.scss'
export default () => {
const [showDesc, setShowDesc] = useState(false)
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
})
@@ -169,22 +168,25 @@ import styles from './index.module.scss'
return {
status: orderDetail?.status, //订单状态
orderId: orderDetail?.id,
settle_mode: orderDetail?.settle_mode, //支付方式 -1 还没支付 0：全额现结，1：定期付款，2：货到付款
settle_mode: orderDetail?.settle_mode,
actual_amount: orderDetail?.actual_amount, //实付金额
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
}
}, [orderDetail])
//订单状态枚举
const {SaleOrderStatusCancel} = ORDER_STATUS
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<OrderState list={orderDetail?.logistics_details}/>
<OrderState list={orderDetail?.logistics_details} settle_mode={orderDetail?.settle_mode}/>
<View >
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View>
<KindList value={formatPreViewOrderMemo}/>
<KindList order={formatPreViewOrderMemo}/>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height={50}>
@@ -208,7 +210,7 @@ import styles from './index.module.scss'
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{(orderDetail?.status)&&<View className={styles.submit_order}>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
</View> }
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
src/pages/searchList/searchList.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default () => {
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
}, [materialList])
}, [materialList, materialState])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
src/pages/user/index.tsx
+2 -2
View File
@@ -2,6 +2,7 @@ import { View, Image, Text, Navigator } from "@tarojs/components"
import { memo } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { goLink } from "@/common/common";
export default () => {
@@ -12,7 +13,6 @@ export default () => {
</View>
)
}
// 头部 | 订单
const Header = memo(() => {
let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" },
@@ -45,7 +45,7 @@ const Header = memo(() => {
<View className={styles['card-main']}>
<View className={styles['card-main-title']}>
<View>订单</View>
<Text>全部</Text>
<Text onClick={() => goLink('/pages/orderList/index')}>全部</Text>
</View>
<View className={styles['card-main-title-content']}>
{