✨ feat:初始化
This commit is contained in:
Haiyi
@@ -1,4 +0,0 @@
|
||||
export default {
|
||||
navigationBarTitleText: '确认订单',
|
||||
enableShareAppMessage: true,
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
.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: 20px;
|
||||
min-height: 116px;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
box-sizing: border-box;
|
||||
.order_desc_con {
|
||||
width: 150px;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_desc_text,
|
||||
.order_desc_text_hint {
|
||||
font-size: $font_size_medium;
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.order_desc_text_hint {
|
||||
text-align: right;
|
||||
color: $color_font_two;
|
||||
}
|
||||
.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);
|
||||
.submit_order_number {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.ok_order_btn {
|
||||
opacity: 1;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
import { SaleOrderPreViewApi, SaleOrderApi } from '@/api/order'
|
||||
import { formatPriceDiv } from '@/common/fotmat'
|
||||
import Popup from '@/components/popup'
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
|
||||
import classnames from 'classnames'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import KindList from './components/kindList'
|
||||
import Remark from './components/remark'
|
||||
import styles from './comfirm.module.scss'
|
||||
import { getParam } from '@/common/system'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import SubmitOrderBtn from './components/submitOrderBtn'
|
||||
import AddressInfoDetail from './components/addressInfoDetail'
|
||||
import { SubscriptionMessageApi } from '@/api/user'
|
||||
import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
|
||||
import { UseSubscriptionMessage } from '@/use/useCommon'
|
||||
import { throttle } from '@/common/util'
|
||||
|
||||
export default () => {
|
||||
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 () => {
|
||||
idsAndSaleModel.current = { shopping_cart_product_color_list: [], sale_mode: 0 } //初始化
|
||||
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 }))
|
||||
})
|
||||
|
||||
//获取销售预览订单
|
||||
const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
|
||||
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()
|
||||
getDataList()
|
||||
setSubmitOrderData((val) => ({
|
||||
...val,
|
||||
address_id: preViewOrder.default_address.id,
|
||||
shipment_mode: preViewOrder.shipment_mode || 2,
|
||||
}))
|
||||
}
|
||||
}, [preViewOrder])
|
||||
|
||||
//格式化数据格式
|
||||
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
|
||||
const formatData = () => {
|
||||
setFormatPreViewOrder({
|
||||
estimate_amount: preViewOrder.estimate_amount, //预估金额
|
||||
sale_mode: preViewOrder.sale_mode,
|
||||
sale_mode_name: preViewOrder.sale_mode_name,
|
||||
total_colors: preViewOrder.total_colors, //总颜色数量
|
||||
total_number: preViewOrder.total_number, //总数量
|
||||
total_fabrics: preViewOrder.total_fabrics, //面料数量
|
||||
unit: preViewOrder.sale_mode == 0 ? '条' : 'm', //单位
|
||||
list: preViewOrder.product_list,
|
||||
total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额
|
||||
total_sale_price: preViewOrder.total_sale_price, //合计金额
|
||||
})
|
||||
}
|
||||
const formatPreViewOrderMemo = useMemo(() => {
|
||||
return formatPreViewOrder
|
||||
}, [formatPreViewOrder])
|
||||
|
||||
//格式化初始地址
|
||||
const defaultAddress = useMemo(() => {
|
||||
const address = preViewOrder?.default_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,
|
||||
target_user_name: address?.name,
|
||||
target_user_phone: address?.phone,
|
||||
shipment_mode: address?.shipment_mode,
|
||||
take_goods_address: preViewOrder?.take_goods_address,
|
||||
take_goods_phone: preViewOrder?.take_goods_phone,
|
||||
}
|
||||
}, [preViewOrder])
|
||||
|
||||
//获取提交格式数据列表
|
||||
const getDataList = () => {
|
||||
let list: { shopping_cart_product_color_id: number }[] = []
|
||||
preViewOrder.product_list?.map((item) => {
|
||||
item.product_colors?.map((colorItem) => {
|
||||
list.push({ shopping_cart_product_color_id: colorItem.id })
|
||||
})
|
||||
})
|
||||
setSubmitOrderData((val) => ({ ...val, list }))
|
||||
}
|
||||
|
||||
//获取地址
|
||||
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(() => {
|
||||
return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id)
|
||||
}, [submitOrderData])
|
||||
|
||||
//数量格式
|
||||
const numText = useMemo(() => {
|
||||
if (formatPreViewOrder) {
|
||||
let total_number = formatPreViewOrder?.sale_mode == 0 ? formatPreViewOrder?.total_number : formatPreViewOrder?.total_number / 100
|
||||
return `${formatPreViewOrder?.total_fabrics} 种面料，${formatPreViewOrder?.total_colors} 种颜色，共 ${total_number} ${formatPreViewOrder?.unit}`
|
||||
}
|
||||
}, [formatPreViewOrder])
|
||||
|
||||
//订阅消息
|
||||
const { SubmitOrder } = SUBSCRIPTION_MESSAGE_SCENE
|
||||
const { openSubscriptionMessage } = UseSubscriptionMessage()
|
||||
|
||||
//提交订单
|
||||
const { fetchData: saleOrderFetchData } = SaleOrderApi()
|
||||
const submitOrderEven = throttle(async () => {
|
||||
if (!submitOrderData?.shipment_mode) {
|
||||
alert.error('请选择收货方式')
|
||||
return false
|
||||
}
|
||||
if (!submitOrderData?.address_id && submitOrderData?.shipment_mode == 2) {
|
||||
alert.error('请选择地址')
|
||||
return false
|
||||
}
|
||||
let showModalRes = await Taro.showModal({
|
||||
title: '确定提交订单?',
|
||||
content: `发货方式为${submitOrderData?.shipment_mode == 1 ? '自提' : '物流'}`,
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
})
|
||||
if (showModalRes.confirm) {
|
||||
await openSubscriptionMessage({ scenes: SubmitOrder.value })
|
||||
const res = await saleOrderFetchData(submitOrderData)
|
||||
if (res.success) {
|
||||
goLink('/pages/order/index', { id: res.data.id }, 'redirectTo')
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}
|
||||
}, 800)
|
||||
|
||||
//页面下拉刷新
|
||||
usePullDownRefresh(() => {
|
||||
getSaleOrderPreView()
|
||||
})
|
||||
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
<AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1} />
|
||||
<KindList order={formatPreViewOrderMemo} comfirm={true} />
|
||||
<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={(preViewOrder?.sale_mode == 1 ? formatPreViewOrder?.total_should_collect_money : formatPreViewOrder?.estimate_amount) / 100}
|
||||
priceTitle={preViewOrder?.sale_mode == 1 ? '合计金额' : '预估金额'}
|
||||
/>
|
||||
<View className={styles.order_number_desc}>{numText}</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 defaultValue={submitOrderData?.remark} onSave={(e) => getRemark(e)} />
|
||||
</Popup>
|
||||
<View className='common_safe_area_y'></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
.order_address{
|
||||
height: 178px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
.order_address_icon{
|
||||
font-size: 76px;
|
||||
color: $color_main;
|
||||
}
|
||||
.order_address_text_con{
|
||||
flex:1;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
.order_address_text_title{
|
||||
font-size: $font_size_medium;
|
||||
margin-top: 10px;
|
||||
@include common_ellipsis;
|
||||
}
|
||||
.order_address_text_name{
|
||||
|
||||
align-items: center;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: $color_font_one;
|
||||
margin-right: 40px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: $color_font_one;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.updateBtn{
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_three;
|
||||
width: 96px;
|
||||
height: 52px;
|
||||
border: 2px solid #dddddd;
|
||||
border-radius: 28px;
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
}
|
||||
.order_address_text_no{
|
||||
flex: 1;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.order_address_more_icon{
|
||||
color: $color_font_three;
|
||||
font-size: $font_size;
|
||||
}
|
||||
|
||||
}
|
||||
.order_address_list {
|
||||
height: 900px;
|
||||
.order_address_title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 0 30px 0;
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import AddressList from "@/components/AddressList";
|
||||
import Popup from "@/components/popup";
|
||||
import { Text, View } from "@tarojs/components"
|
||||
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, //选择
|
||||
defaultValue?: AddressInfoParam|null //默认值
|
||||
disabled?: false|true //true禁用后只用于展示
|
||||
}
|
||||
|
||||
export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => {
|
||||
const [showAddressList, setShowAddressList] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setUserInfo(() => defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
//选择地址
|
||||
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])
|
||||
|
||||
const changeShow = () => {
|
||||
if(!disabled)
|
||||
setShowAddressList(() => true)
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
|
||||
{!userInfo&&
|
||||
<>
|
||||
<View className={styles.order_address_text_no}>请选择收货地址及信息</View>
|
||||
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
|
||||
</>
|
||||
||<>
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>{userInfo?.name}</Text>
|
||||
<Text>{userInfo?.phone}</Text>
|
||||
</View>
|
||||
<View className={styles.order_address_text_title}>{formatAddress}</View>
|
||||
</View>
|
||||
<View className={styles.updateBtn}>修改</View>
|
||||
</>}
|
||||
</View>
|
||||
{!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||
<View className={styles.order_address_list}>
|
||||
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||
<AddressList onSelect={(item) => getAddress(item)}/>
|
||||
</View>
|
||||
</Popup>}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,139 +0,0 @@
|
||||
.order_address{
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
.order_address_icon{
|
||||
font-size: 50px;
|
||||
color: $color_main;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 20px;
|
||||
}
|
||||
.order_address_text_con{
|
||||
flex:1;
|
||||
padding-left: 50px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.order_address_text_title{
|
||||
font-size: $font_size_medium;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.moreIconfont{
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.address_text{
|
||||
word-break:break-all;
|
||||
|
||||
}
|
||||
.address_text_no{
|
||||
font-weight: 700;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.order_address_text_name{
|
||||
margin-top: 30px;
|
||||
align-items: center;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: $color_font_one;
|
||||
margin-right: 40px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: $color_font_one;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.updateBtn{
|
||||
width:200px;
|
||||
font-size: $font_size_min;
|
||||
background-color: #F0F0F0;
|
||||
height: 64px;
|
||||
border-radius: 24px;
|
||||
color: $color_font_two;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
.updateBtn_list{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
.updateBtn_item_select{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.updateBtn_item{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
}
|
||||
.updateBtn_select{
|
||||
color: #fff;
|
||||
background-color: $color_main;
|
||||
border-radius: 24px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 61px;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
.logisticsBtn{
|
||||
width: 152px;
|
||||
height: 72px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #007AFF;
|
||||
border-radius: 38px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
font-size: 28px;
|
||||
color: #007AFF;
|
||||
text-align: center;
|
||||
line-height: 72px;
|
||||
|
||||
}
|
||||
.order_address_text_no{
|
||||
flex: 1;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.order_address_more_icon{
|
||||
color: $color_font_three;
|
||||
font-size: $font_size;
|
||||
}
|
||||
|
||||
}
|
||||
.order_address_list {
|
||||
height:80vh;
|
||||
.order_address_title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 0 30px 0;
|
||||
height: 100px;
|
||||
}
|
||||
.addressList_con{
|
||||
padding-bottom: 20px;
|
||||
height: calc(100% - 160px);
|
||||
}
|
||||
}
|
||||
@@ -1,219 +0,0 @@
|
||||
import { GetAddressListApi } from '@/api/addressList'
|
||||
import { addressListApi } from '@/api/addressManager'
|
||||
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from '@/api/order'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { ORDER_STATUS } from '@/common/enum'
|
||||
import { debounce, throttle } from '@/common/util'
|
||||
import AddressList from '@/components/AddressList'
|
||||
import Popup from '@/components/popup'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Param = {
|
||||
onSelect?: (val: any) => void //选择地址
|
||||
disabled?: false | true //true禁用后只用于展示
|
||||
onChangeShipmentMode?: (val: number) => void //返回收货方式
|
||||
onLogistics?: () => void //查看物流
|
||||
status?: 1 | 2 //1确认订单时使用， 2订单流程
|
||||
orderInfo?: {
|
||||
id?: number //订单id
|
||||
shipment_mode?: 1 | 2 //1自提 2物流
|
||||
status?: number //订单状态
|
||||
province_name: string
|
||||
city_name: string
|
||||
district_name: string
|
||||
address_detail: string
|
||||
take_goods_address: string
|
||||
take_goods_phone: string
|
||||
target_user_name: string
|
||||
target_user_phone: string
|
||||
}
|
||||
}
|
||||
|
||||
//订单状态
|
||||
const {
|
||||
SaleorderstatusWaitingPrePayment,
|
||||
SaleOrderStatusBooking,
|
||||
SaleOrderStatusArranging,
|
||||
SaleOrderStatusArranged,
|
||||
SaleOrderStatusWaitingPayment,
|
||||
SaleOrderStatusWaitingReceipt,
|
||||
SaleOrderStatusAlreadyReceipt,
|
||||
SaleOrderStatusComplete,
|
||||
SaleOrderStatusRefund,
|
||||
SaleOrderStatusCancel,
|
||||
} = ORDER_STATUS
|
||||
|
||||
export default memo(
|
||||
forwardRef(({ onSelect, onChangeShipmentMode, orderInfo, status = 2, disabled = false, onLogistics }: Param, ref) => {
|
||||
const [addressInfo, setAddressInfo] = useState<any>()
|
||||
useEffect(() => {
|
||||
if (orderInfo) {
|
||||
setReceivingStatus(() => orderInfo.shipment_mode || 2)
|
||||
setAddressInfo(() => orderInfo)
|
||||
}
|
||||
}, [orderInfo])
|
||||
|
||||
//打开地址列表
|
||||
const [showAddressList, setShowAddressList] = useState(false)
|
||||
const changeShow = () => {
|
||||
if (receivingStatus == 2 && !logisticsShow && limitEdit()) setShowAddressList(() => true)
|
||||
}
|
||||
|
||||
//把内部方法提供给外部
|
||||
useImperativeHandle(ref, () => ({
|
||||
changeShow,
|
||||
}))
|
||||
|
||||
//收货方法,1:自提，2物流
|
||||
const [receivingStatus, setReceivingStatus] = useState(2)
|
||||
const { fetchData: shipmentModeFetchData } = EditSaleOrderShipmentModeApi()
|
||||
const onReceivingStatus = async (value, e) => {
|
||||
e.stopPropagation()
|
||||
if (limitEdit()) changeReceivingStatus(value)
|
||||
}
|
||||
|
||||
//当没有地址时获取地址列表中的第一个数据
|
||||
const { fetchData: addressListFetchData } = addressListApi()
|
||||
const getAddressListOne = async () => {
|
||||
if (orderInfo?.address_detail) return true
|
||||
let res = await addressListFetchData()
|
||||
if (res.data.list && res.data.list?.length > 0) {
|
||||
let info = res.data.list[0]
|
||||
await addressFetchData({ id: orderInfo?.id, address_id: info.id })
|
||||
setAddressInfo((e) => ({ ...e, ...info, target_user_name: info.name, target_user_phone: info.phone }))
|
||||
return true
|
||||
} else {
|
||||
Taro.showModal({
|
||||
content: '您还没有地址，请前去新增地址',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
goLink('/pages/addressManager/index')
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const changeReceivingStatus = debounce(async (value) => {
|
||||
if (!orderInfo || value == receivingStatus) return false
|
||||
if (status == 1) {
|
||||
onChangeShipmentMode?.(value)
|
||||
setReceivingStatus(value)
|
||||
return false
|
||||
}
|
||||
if (value == 2) {
|
||||
let res = await getAddressListOne()
|
||||
if (!res) return false
|
||||
}
|
||||
alert.loading('正在修改')
|
||||
const res = await shipmentModeFetchData({ id: orderInfo.id, shipment_mode: value })
|
||||
if (res.success) {
|
||||
alert.success('收货方式修改成功')
|
||||
onChangeShipmentMode?.(value)
|
||||
setReceivingStatus(() => value)
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}, 300)
|
||||
|
||||
//修改地址
|
||||
const [addressId, setAddressId] = useState(0)
|
||||
const { fetchData: addressFetchData } = EditSaleOrderAddressApi()
|
||||
const getAddress = async (value) => {
|
||||
if (!orderInfo) return false
|
||||
if (status == 1) {
|
||||
setShowAddressList(() => false)
|
||||
setAddressId(value.id)
|
||||
setAddressInfo((e) => ({ ...e, ...value, target_user_name: value.name, target_user_phone: value.phone }))
|
||||
onSelect?.(value)
|
||||
return false
|
||||
}
|
||||
alert.loading('正在修改')
|
||||
const res = await addressFetchData({ id: orderInfo.id, address_id: value.id })
|
||||
if (res.success) {
|
||||
alert.success('地址修改成功')
|
||||
onSelect?.(value)
|
||||
setShowAddressList(() => false)
|
||||
setAddressId(value.id)
|
||||
setAddressInfo((e) => ({ ...e, ...value, target_user_name: value.name, target_user_phone: value.phone }))
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}
|
||||
|
||||
//根据订单状态判断是否可修改
|
||||
const limitEdit = () => {
|
||||
let res = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value].includes(
|
||||
orderInfo?.status as number,
|
||||
)
|
||||
if (!res && status != 1) alert.none('该订单状态不能修改地址！')
|
||||
return status == 1 ? true : res
|
||||
}
|
||||
|
||||
//根据订单状态判断是否显示物流
|
||||
const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value]
|
||||
const logisticsShow = useMemo(() => {
|
||||
return logisticsShowList.includes(orderInfo?.status as number)
|
||||
}, [orderInfo])
|
||||
|
||||
//地址格式
|
||||
const formatAddress = useMemo(() => {
|
||||
if (receivingStatus == 2) {
|
||||
return addressInfo?.address_detail ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : ''
|
||||
} else {
|
||||
return addressInfo?.take_goods_address
|
||||
}
|
||||
}, [receivingStatus, addressInfo])
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2 ? 'icon-daohang' : 'icon-fahuo')}></View>
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_title}>
|
||||
<Text className={classnames(styles.address_text, styles.address_text_no)}>{formatAddress || '请选择收货地址及信息'}</Text>
|
||||
{receivingStatus == 2 && !logisticsShow && <Text className={classnames(styles.moreIconfont, 'iconfont icon-a-moreback')}></Text>}
|
||||
</View>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>{receivingStatus == 1 ? '谭先生' : addressInfo?.target_user_name}</Text>
|
||||
<Text>{receivingStatus == 1 ? addressInfo?.take_goods_phone : addressInfo?.target_user_phone}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{(!logisticsShow && (
|
||||
<View className={styles.updateBtn}>
|
||||
<View className={styles.updateBtn_list}>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus == 1 && styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1, e)}>
|
||||
自提
|
||||
</View>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus == 2 && styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2, e)}>
|
||||
物流
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ transform: receivingStatus == 1 ? 'translateX(0)' : 'translateX(100%)' }} className={classnames(styles.updateBtn_select)}></View>
|
||||
</View>
|
||||
)) ||
|
||||
(orderInfo?.status != SaleOrderStatusRefund.value && (
|
||||
<View className={styles.logisticsBtn} onClick={onLogistics}>
|
||||
查看物流
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||
<View className={styles.order_address_list}>
|
||||
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||
<View className={styles.addressList_con}>
|
||||
<AddressList onSelect={getAddress} id={addressId} />
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}),
|
||||
)
|
||||
@@ -1,64 +0,0 @@
|
||||
|
||||
.advance_main{
|
||||
width:100%;
|
||||
height: 238px;
|
||||
background-color: #007AFF;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: #dddddd;
|
||||
position: relative;
|
||||
.time_con{
|
||||
padding-left: 30px;
|
||||
.times{
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text{
|
||||
margin-right: 15px;
|
||||
}
|
||||
.num{
|
||||
width: 46px;
|
||||
height: 50px;
|
||||
background: #0063ce;
|
||||
border-radius: 10px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.separate{
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.cardIcon{
|
||||
width: 238px;
|
||||
height: 178px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.image{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.refresh{
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
color: #dddddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mconfont{
|
||||
font-size: 36px;
|
||||
}
|
||||
.refresh_text{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import { formatImgUrl } from "@/common/fotmat";
|
||||
import { Image, Text, View } from "@tarojs/components";
|
||||
import { memo, useEffect, useMemo, useRef, useState } from "react";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import dayjs from "dayjs";
|
||||
import { useTimeCountDown } from "@/use/useCommon";
|
||||
import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum";
|
||||
|
||||
type List = {
|
||||
status: string,
|
||||
time: string,
|
||||
tag: string,
|
||||
desc: string,
|
||||
expire_time: string
|
||||
}
|
||||
|
||||
type Param = {
|
||||
onRefresh?: () => void,
|
||||
orderInfo?: {
|
||||
logistics_details:List[], //订单状态列表
|
||||
payment_method: number, //支付方式
|
||||
status: number, //订单状态
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default memo(({orderInfo, onRefresh}:Param) => {
|
||||
|
||||
const {showTime, onStart, timeStatus} = useTimeCountDown()
|
||||
|
||||
//订单状态枚举
|
||||
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
|
||||
|
||||
//获取预付款最后时间
|
||||
const endTime = useMemo(() => {
|
||||
if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
|
||||
return orderInfo.logistics_details[0].expire_time
|
||||
}
|
||||
return ''
|
||||
}, [orderInfo])
|
||||
|
||||
useEffect(() => {
|
||||
if(endTime) onStart(endTime)
|
||||
}, [endTime])
|
||||
|
||||
useEffect(() => {
|
||||
if(timeStatus == 2) onRefresh?.()
|
||||
}, [timeStatus])
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.advance_main}>
|
||||
<View className={styles.time_con}>
|
||||
<View className={styles.times}>
|
||||
<Text className={styles.text}>剩</Text>
|
||||
<Text className={styles.num}>{showTime.HH}</Text>
|
||||
<Text className={styles.separate}>:</Text>
|
||||
<Text className={styles.num}>{showTime.MM}</Text>
|
||||
<Text className={styles.separate}>:</Text>
|
||||
<Text className={styles.num}>{showTime.SS}</Text>
|
||||
</View>
|
||||
<Text>支付关闭，订单自动取消</Text>
|
||||
</View>
|
||||
<View className={styles.cardIcon}>
|
||||
<Image className={styles.image} src={formatImgUrl("/mall/my_cart.png")}/>
|
||||
</View>
|
||||
<View className={styles.refresh} onClick={() => onRefresh?.()}>
|
||||
<Text className={classnames(styles.mconfont, 'iconfont icon-shuaxin')}></Text>
|
||||
<Text className={classnames(styles.refresh_text)}>刷新</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,35 +0,0 @@
|
||||
.order_price_num{
|
||||
color: $color_main;
|
||||
font-weight: 700;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: $font_size;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis_num{
|
||||
.price_text{
|
||||
&:nth-child(2) {
|
||||
font-size: $font_size_big;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis_num_big{
|
||||
.price_text{
|
||||
&:nth-child(1) {
|
||||
font-size: $font_size_big;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: 60px;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
font-size: $font_size_big;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { Text, View } from "@tarojs/components";
|
||||
import { memo, useCallback } from "react";
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
|
||||
type Param = {
|
||||
number: number, //数字
|
||||
status: 0|1|2 //0 小型，1中型，2大
|
||||
}
|
||||
export default memo(({number = 0, status = 1}:Param) => {
|
||||
const priceDom = useCallback(() => {
|
||||
let res = number.toFixed(2).split('.')
|
||||
let int_num = parseInt(res[0]) + ''
|
||||
let decimals_num = res[1]
|
||||
return (
|
||||
<>
|
||||
<Text className={styles.price_text}>¥</Text>
|
||||
<Text className={styles.price_text}>{Number(int_num).toLocaleString()}</Text>
|
||||
<Text className={styles.price_text}>.{decimals_num}</Text>
|
||||
</>
|
||||
)
|
||||
}, [number])
|
||||
return (
|
||||
<View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
|
||||
{priceDom()}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,67 +0,0 @@
|
||||
.apply_after_sales_con {
|
||||
padding: 20px;
|
||||
.returnSaleInput_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 50px;
|
||||
flex-wrap: wrap;
|
||||
.title {
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
width: 119px;
|
||||
}
|
||||
.select {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
border: 2px solid #e6e6e6;
|
||||
border-radius: 10px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
font-size: 26px;
|
||||
color: $color_font_two;
|
||||
.miconfont {
|
||||
font-size: 30px;
|
||||
}
|
||||
.selected {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.upload_image {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.btns_con {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
margin-top: 50px;
|
||||
.btns_two {
|
||||
display: flex;
|
||||
height: 82px;
|
||||
// border: 1PX solid #007aff;
|
||||
font-size: $font_size_big;
|
||||
border-radius: 40px;
|
||||
margin-bottom: 20px;
|
||||
.rest_btn {
|
||||
flex: 1;
|
||||
border: 1px solid #007aff;
|
||||
border-radius: 40px 0 0 40px;
|
||||
text-align: center;
|
||||
line-height: 82px;
|
||||
color: $color_main;
|
||||
background-color: #fff;
|
||||
}
|
||||
.verify_btn {
|
||||
flex: 1;
|
||||
border-radius: 0 40px 40px 0;
|
||||
background: #007aff;
|
||||
text-align: center;
|
||||
line-height: 82px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import Popup from '@/components/popup'
|
||||
import TextareaEnhance from '@/components/textareaEnhance'
|
||||
import { ScrollView, Text, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import ReasonPopup from '../reasonPopup'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { ApplyRefundApi, RefundExplainApi } from '@/api/salesAfterOrder'
|
||||
import { alert } from '@/common/common'
|
||||
|
||||
type Param = {
|
||||
show?: true | false
|
||||
onClose?: () => void
|
||||
orderId?: number
|
||||
onSuccess?: () => void
|
||||
}
|
||||
export default memo(({ show, onClose, orderId, onSuccess }: Param) => {
|
||||
//提交的数据
|
||||
const submitData = useRef({
|
||||
return_explain: 0,
|
||||
sale_order_id: 0,
|
||||
reason_describe: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (show && orderId) {
|
||||
submitData.current.sale_order_id = orderId
|
||||
refundExplain()
|
||||
}
|
||||
}, [orderId, show])
|
||||
|
||||
//申请退款
|
||||
const { fetchData } = ApplyRefundApi()
|
||||
const getApplyRefund = async () => {
|
||||
if (!submitData.current.return_explain) return alert.error('请选择说明原因')
|
||||
let res = await fetchData(submitData.current)
|
||||
if (res.success) {
|
||||
alert.success('申请成功')
|
||||
onSuccess?.()
|
||||
} else {
|
||||
alert.error('申请失败')
|
||||
}
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
//获取说明数据
|
||||
const [list, setList] = useState<any[]>([])
|
||||
const { fetchData: refundExplainFetchdata } = RefundExplainApi()
|
||||
const refundExplain = async () => {
|
||||
let res = await refundExplainFetchdata()
|
||||
setList(() => res.data.list)
|
||||
}
|
||||
const [reason, setReason] = useState({ id: 0, name: '' })
|
||||
const reasonSelect = useCallback((e) => {
|
||||
setReason({ ...reason, name: e.name, id: e.id })
|
||||
submitData.current.return_explain = e.id
|
||||
closeReason()
|
||||
}, [])
|
||||
|
||||
//备注
|
||||
const getOtherReason = useCallback((val) => {
|
||||
submitData.current.reason_describe = val
|
||||
}, [])
|
||||
|
||||
//显示说明
|
||||
const [showReason, setShowReason] = useState(false)
|
||||
const closeReason = useCallback(() => {
|
||||
setShowReason(false)
|
||||
}, [])
|
||||
|
||||
//提交
|
||||
const onSubmit = (val) => {
|
||||
if (val == 2) {
|
||||
getApplyRefund()
|
||||
} else {
|
||||
onClose?.()
|
||||
submitData.current = {
|
||||
return_explain: 0,
|
||||
sale_order_id: 0,
|
||||
reason_describe: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup show={show} title='申请退款' onClose={onClose}>
|
||||
<View className={styles.apply_after_sales_con}>
|
||||
<View className={styles.returnSaleInput_item}>
|
||||
<View className={styles.title}>退款说明</View>
|
||||
<View className={styles.select} onClick={() => setShowReason(true)}>
|
||||
<Text className={reason.name ? styles.selected : ''}>{reason.name || '请选择'}</Text>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
|
||||
</View>
|
||||
</View>
|
||||
<TextareaEnhance onChange={getOtherReason} title='备注' placeholder='请输入退款备注' />
|
||||
<View className={styles.btns_con}>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.rest_btn} onClick={() => onSubmit(1)}>
|
||||
取消
|
||||
</View>
|
||||
<View className={styles.verify_btn} onClick={() => onSubmit(2)}>
|
||||
确认
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
<ReasonPopup defaultValue={reason.id} show={showReason} onClose={closeReason} list={list} title='退款说明' onSelect={reasonSelect} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,85 +0,0 @@
|
||||
.order_price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.close{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
&:nth-last-child(n+2) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.order_price_text{
|
||||
font-size: $font_size_medium;
|
||||
// margin-right: 10px;
|
||||
display: flex;
|
||||
.iconfont_msg{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.miconfont{
|
||||
font-size: 26px;
|
||||
font-weight: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.message{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: rgba(168, 179, 189, 0.8);
|
||||
z-index: 9;
|
||||
min-height: 0;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
word-break: break-all;
|
||||
color: #fff;
|
||||
// transition: top 0.2s ease-in-out;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0;
|
||||
&::after{
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: " ";
|
||||
left: 10px;
|
||||
bottom: -28px;
|
||||
border: 15px solid transparent;
|
||||
border-top-color: rgba(168, 179, 189, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis{
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_price_num{
|
||||
color: $color_main;
|
||||
font-weight: 700;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: 26px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis_num{
|
||||
text{
|
||||
&:nth-child(2) {
|
||||
font-size: $font_size_big;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react"
|
||||
import {formatKbPrice} from '@/common/common'
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import AmountShow from "../amountShow";
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
type Param = {
|
||||
style?: Object,
|
||||
number?: number,
|
||||
title?: string,
|
||||
titleStatus?: true|false, //true 标题加大加深
|
||||
numberStatus?: 0|1|2, //数字尺寸
|
||||
messageTitle?: string,
|
||||
messageHeight?: number,
|
||||
messageWidth?: number,
|
||||
messageShow?: true|false,
|
||||
}
|
||||
export default memo(({number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1, messageHeight = 70, messageWidth = 430, messageShow = false}:Param) => {
|
||||
const [show, setShow] = useState(messageShow)
|
||||
const onClose = () => {
|
||||
setShow(false)
|
||||
}
|
||||
const openShow = () => [
|
||||
setShow(true)
|
||||
]
|
||||
|
||||
const [style, setStyle] = useState<{top: string}>()
|
||||
|
||||
useEffect(() => {
|
||||
if(show) {
|
||||
getDomDes('#message')
|
||||
} else {
|
||||
setStyle(() => ({top: '0'}))
|
||||
}
|
||||
}, [show])
|
||||
//设置弹出层高度
|
||||
const getDomDes = (id) => {
|
||||
setTimeout(() => {
|
||||
let query = Taro.createSelectorQuery();
|
||||
query.select(id).boundingClientRect(rect=>{
|
||||
let height = rect.height * 2 + 15;
|
||||
setStyle((e) => ({...e, top: `-${height}rpx`, opacity: 1}))
|
||||
}).exec();
|
||||
}, 0)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.order_price}>
|
||||
<View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)} onClick={() => openShow()}>
|
||||
<Text>{title}</Text>
|
||||
<View className={styles.iconfont_msg}>
|
||||
{show&&<View style={{...style, width: `${messageWidth}rpx`}} id='message' className={classnames(styles.message)}>{messageTitle}</View>}
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
|
||||
</View>
|
||||
</View>
|
||||
<AmountShow status={numberStatus} number={number}/>
|
||||
{show&&<View className={styles.close} catchMove onClick={onClose}></View>}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,208 +0,0 @@
|
||||
import { ORDER_STATUS } from "@/common/enum"
|
||||
import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat"
|
||||
import EstimatedAmount from "@/components/estimatedAmount"
|
||||
import LabAndImg from "@/components/LabAndImg"
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { memo, useCallback, useMemo, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type OrderParam = {
|
||||
estimate_amount: number, //预估金额
|
||||
list: any[],
|
||||
sale_mode: number,
|
||||
sale_mode_name: string,
|
||||
unit: string,
|
||||
total_colors: number,
|
||||
total_fabrics: number,
|
||||
total_number: number,
|
||||
status: number, //订单状态
|
||||
total_sale_price: number, //合计金额
|
||||
total_weight_error_discount: number, //空差优惠
|
||||
the_previous_status: number, //取消订单时的订单状态
|
||||
actual_amount: number, //实付金额
|
||||
wait_pay_amount: number //待付金额
|
||||
}
|
||||
|
||||
type Param = {
|
||||
order: OrderParam,
|
||||
comfirm?: boolean //是否是确认订单页面使用
|
||||
}
|
||||
|
||||
export default memo(({order, comfirm = false}:Param) => {
|
||||
|
||||
const {
|
||||
SaleOrderStatusBooking, // 待接单
|
||||
SaleOrderStatusArranging, // 配布中
|
||||
SaleOrderStatusArranged, // 已配布
|
||||
SaleOrderStatusWaitingPayment, // 待付款
|
||||
SaleOrderStatusWaitingDelivery, // 待发货
|
||||
SaleOrderStatusWaitingReceipt, // 待收货
|
||||
SaleOrderStatusAlreadyReceipt, // 已收货
|
||||
SaleOrderStatusComplete, // 已完成
|
||||
SaleOrderStatusRefund, // 已退款
|
||||
SaleOrderStatusCancel, // 已取消
|
||||
SaleorderstatusWaitingPrePayment, // 预付款
|
||||
SaleOrderStatusTaking //提货
|
||||
} = ORDER_STATUS
|
||||
|
||||
//注册金额
|
||||
type orderPriceListParams = {id: number, label: string, field: string, message: string, validatarFunc: (val: typeof order) => any}
|
||||
const priceList:orderPriceListParams[] = [
|
||||
{
|
||||
id:1,
|
||||
label:'预估金额',
|
||||
field: 'estimate_amount',
|
||||
message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！',
|
||||
validatarFunc: (order) => {
|
||||
return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
label:'合计金额',
|
||||
field: 'total_sale_price',
|
||||
message: '包含空差的货款金额',
|
||||
validatarFunc: (order) => {
|
||||
return order['total_sale_price'] > 0
|
||||
}
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
label:'空差优惠',
|
||||
field: 'total_weight_error_discount',
|
||||
message: '扣除空差金额',
|
||||
validatarFunc: (order) => {
|
||||
return order['total_weight_error_discount'] > 0
|
||||
}
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
label:'实付金额',
|
||||
field: 'actual_amount',
|
||||
message: '本单实付总金额',
|
||||
validatarFunc: (order) => {
|
||||
let value = [SaleOrderStatusWaitingPayment.value, SaleOrderStatusTaking.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value]
|
||||
return value.includes(order.status)
|
||||
}
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
label:'待付金额',
|
||||
field: 'wait_pay_amount',
|
||||
message: '扣除空差后的货款金额',
|
||||
validatarFunc: (order) => {
|
||||
let value = [SaleOrderStatusWaitingPayment.value, SaleOrderStatusTaking.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value]
|
||||
return value.includes(order.status)
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
//订单流程金额展示
|
||||
const priceConDom = useMemo(() => {
|
||||
if(!order) return
|
||||
return (
|
||||
<>
|
||||
{
|
||||
priceList.map(item => {
|
||||
return <>{item.validatarFunc(order)&&<EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message} />}</>
|
||||
})
|
||||
}
|
||||
</>
|
||||
)
|
||||
}, [order])
|
||||
|
||||
//对应数量
|
||||
const formatCount = useCallback((item) => {
|
||||
return order?.sale_mode == 0? item.roll : Number(item.length / 100)
|
||||
}, [order])
|
||||
//对应单价
|
||||
const standardPrice = useCallback(price => {
|
||||
return formatPriceDiv(price, 100, true) + '/' + (order?.sale_mode == 1?'m':'kg')
|
||||
}, [order])
|
||||
|
||||
//数量格式
|
||||
const numText = useMemo(() => {
|
||||
if(order) {
|
||||
let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100)
|
||||
return `${order?.total_fabrics} 种面料，${order?.total_colors} 种颜色，共 ${total_number} ${order?.unit}`
|
||||
}
|
||||
}, [order])
|
||||
|
||||
//确认订单金额展示
|
||||
const comfirmPriceConDom = useMemo(() => {
|
||||
if(!order) return
|
||||
let item = order.sale_mode == 1?priceList[1]:priceList[0]
|
||||
return<EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message}/>
|
||||
}, [order])
|
||||
|
||||
//确认金额展示
|
||||
const showPriceConDom = useMemo(() => {
|
||||
return comfirm?comfirmPriceConDom:priceConDom
|
||||
}, [order])
|
||||
|
||||
//颜色金额小计
|
||||
const colorPrice = useCallback((item) => {
|
||||
let res = item.total_sale_price||item.estimate_amount
|
||||
return formatPriceDiv(res, 100, true)
|
||||
},[order])
|
||||
|
||||
|
||||
//散剪大约重量
|
||||
const aboutWeight = useCallback((weight) => {
|
||||
if(order.sale_mode == 2 ) {
|
||||
let showWeight = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value].includes(order.status)
|
||||
return showWeight?<View className={styles.order_list_item_price_dg}>; <Text>≈{formatWeightDiv(weight)}kg</Text></View>:<></>
|
||||
}
|
||||
return <></>
|
||||
}, [order])
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.orders_list_title}>{numText}</View>
|
||||
<View className={styles.orders_list_con}>
|
||||
{
|
||||
order?.list?.map(item => {
|
||||
return <View key={item.product_code} className={styles.order_list}>
|
||||
<View className={styles.order_list_title}>
|
||||
<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>
|
||||
<View className={styles.order_list_scroll}>
|
||||
{item?.product_colors?.map(colorItem => {
|
||||
return <View key={colorItem.id} className={styles.order_list_item}>
|
||||
<View className={styles.order_list_item_img}>
|
||||
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||
</View>
|
||||
<View className={styles.order_list_item_con}>
|
||||
<View className={styles.order_list_item_des}>
|
||||
<View className={styles.order_list_item_title}>
|
||||
{colorItem.code + ' ' + colorItem.name}
|
||||
{(colorItem?.return_roll > 0)&&<Text>{`已退${colorItem?.return_roll}条`}</Text>}
|
||||
{(colorItem?.apply_return_roll > 0)&&<Text>{`待退${colorItem?.apply_return_roll}条`}</Text>}
|
||||
</View>
|
||||
<View className={styles.order_list_item_price}>
|
||||
¥{standardPrice(colorItem.sale_price)}
|
||||
{aboutWeight(colorItem.estimate_weight)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.order_list_item_count}>
|
||||
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
|
||||
<View className={styles.count_price}><text>¥</text>{colorPrice(colorItem)}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
})
|
||||
}
|
||||
<View className={styles.order_estimated_amount}>
|
||||
{showPriceConDom}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,123 +0,0 @@
|
||||
|
||||
.orders_list_title{
|
||||
padding: 20px 20px 10px 20px;
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
.orders_list_con{
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
.order_list{
|
||||
&:nth-child(n+2) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.order_list_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tag{
|
||||
font-size: $font_size_min;
|
||||
background-color: #CDE5FF;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
color: $color_main;
|
||||
}
|
||||
.title{
|
||||
font-weight: 700;
|
||||
font-size: $font_size;
|
||||
margin-left: 20px;
|
||||
flex:1;
|
||||
}
|
||||
.num{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_list_scroll{
|
||||
margin-top: 30px;
|
||||
|
||||
.order_list_item {
|
||||
display: flex;
|
||||
&:nth-child(n + 2) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.order_list_item_img{
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.order_list_item_con{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex:1;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: 150px;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.order_list_item_des{
|
||||
flex:1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 30px;
|
||||
.order_list_item_title{
|
||||
font-weight: 700;
|
||||
font-size: $font_size;
|
||||
margin-bottom: 15px;
|
||||
text{
|
||||
height: 30px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
color: #ABABAB;
|
||||
font-size: 24px;
|
||||
padding: 0 10px;
|
||||
margin-left: 20px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.order_list_item_price, .order_list_item_price_dg{
|
||||
font-size: 26px;
|
||||
color: $color_font_three;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
Text{
|
||||
padding-left: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_list_item_count{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
.count_num{
|
||||
color: $color_main;
|
||||
font-size: $font_size;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 400;
|
||||
text{
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
}
|
||||
.count_price {
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
text{
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_estimated_amount{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
padding: 30px 0;
|
||||
.order_price_des{
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,240 +0,0 @@
|
||||
import { ORDER_STATUS } from '@/common/enum'
|
||||
import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
|
||||
import EstimatedAmount from '@/components/estimatedAmount'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type OrderParam = {
|
||||
estimate_amount: number //预估金额
|
||||
list: any[]
|
||||
sale_mode: number
|
||||
sale_mode_name: string
|
||||
unit: string
|
||||
total_colors: number
|
||||
total_fabrics: number
|
||||
total_number: number
|
||||
status: number //订单状态
|
||||
total_sale_price: number //合计金额
|
||||
total_weight_error_discount: number //空差优惠
|
||||
the_previous_status: number //取消订单时的订单状态
|
||||
actual_amount: number //实付金额
|
||||
wait_pay_amount: number //待付金额
|
||||
refund_amount: number //退款金额
|
||||
}
|
||||
|
||||
type Param = {
|
||||
order: OrderParam
|
||||
comfirm?: boolean //是否是确认订单页面使用
|
||||
}
|
||||
|
||||
export default memo(({ order, comfirm = false }: Param) => {
|
||||
const {
|
||||
SaleOrderStatusBooking, // 待接单
|
||||
SaleOrderStatusArranging, // 配布中
|
||||
SaleOrderStatusArranged, // 已配布
|
||||
SaleOrderStatusWaitingPayment, // 待付款
|
||||
SaleOrderStatusWaitingDelivery, // 待发货
|
||||
SaleOrderStatusWaitingReceipt, // 待收货
|
||||
SaleOrderStatusAlreadyReceipt, // 已收货
|
||||
SaleOrderStatusComplete, // 已完成
|
||||
SaleOrderStatusRefund, // 已退款
|
||||
SaleOrderStatusCancel, // 已取消
|
||||
SaleorderstatusWaitingPrePayment, // 预付款
|
||||
SaleOrderStatusTaking, //提货
|
||||
} = ORDER_STATUS
|
||||
|
||||
//注册金额
|
||||
type orderPriceListParams = {
|
||||
id: number
|
||||
label: string
|
||||
field: string
|
||||
message: string
|
||||
validatarFunc: (val: typeof order) => any
|
||||
}
|
||||
const priceList: orderPriceListParams[] = [
|
||||
{
|
||||
id: 1,
|
||||
label: '预估金额',
|
||||
field: 'estimate_amount',
|
||||
message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！',
|
||||
validatarFunc: (order) => {
|
||||
return order['estimate_amount'] > 0 && order['total_sale_price'] <= 0
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '合计金额',
|
||||
field: 'total_sale_price',
|
||||
message: '包含空差的货款金额',
|
||||
validatarFunc: (order) => {
|
||||
return order['total_sale_price'] > 0
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '空差优惠',
|
||||
field: 'total_weight_error_discount',
|
||||
message: '扣除空差金额',
|
||||
validatarFunc: (order) => {
|
||||
return order['total_weight_error_discount'] > 0
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: '实付金额',
|
||||
field: 'actual_amount',
|
||||
message: '本单实付总金额',
|
||||
validatarFunc: (order) => {
|
||||
return order['actual_amount'] > 0
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '待付金额',
|
||||
field: 'wait_pay_amount',
|
||||
message: '扣除空差后的货款金额',
|
||||
validatarFunc: (order) => {
|
||||
return order['wait_pay_amount'] > 0
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: '退款金额',
|
||||
field: 'refund_amount',
|
||||
message: '已退款金额',
|
||||
validatarFunc: (order) => {
|
||||
return order['refund_amount'] > 0
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
//订单流程金额展示
|
||||
const priceConDom = useMemo(() => {
|
||||
if (!order) return
|
||||
return (
|
||||
<>
|
||||
{priceList.map((item) => {
|
||||
return <>{item.validatarFunc(order) && <EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message} />}</>
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}, [order])
|
||||
|
||||
//对应数量
|
||||
const formatCount = useCallback(
|
||||
(item) => {
|
||||
return order?.sale_mode == 0 ? item.roll : Number(item.length / 100)
|
||||
},
|
||||
[order],
|
||||
)
|
||||
//对应单价
|
||||
const standardPrice = useCallback(
|
||||
(price) => {
|
||||
return formatPriceDiv(price) + '/' + (order?.sale_mode == 1 ? 'm' : 'kg')
|
||||
},
|
||||
[order],
|
||||
)
|
||||
|
||||
//数量格式
|
||||
const numText = useMemo(() => {
|
||||
if (order) {
|
||||
let total_number = order?.sale_mode == 0 ? order?.total_number : order?.total_number / 100
|
||||
return `${order?.total_fabrics} 种面料，${order?.total_colors} 种颜色，共 ${total_number} ${order?.unit}`
|
||||
}
|
||||
}, [order])
|
||||
|
||||
//确认订单金额展示
|
||||
const comfirmPriceConDom = useMemo(() => {
|
||||
if (!order) return
|
||||
let item = order.sale_mode == 1 ? priceList[1] : priceList[0]
|
||||
return <EstimatedAmount key={item.id} number={order[item.field]} title={item.label} messageTitle={item.message} />
|
||||
}, [order])
|
||||
|
||||
//确认金额展示
|
||||
const showPriceConDom = useMemo(() => {
|
||||
return comfirm ? comfirmPriceConDom : priceConDom
|
||||
}, [order])
|
||||
|
||||
//颜色金额小计
|
||||
const colorPrice = useCallback(
|
||||
(item) => {
|
||||
let res = item.total_sale_price || item.estimate_amount
|
||||
return formatPriceDiv(res, 100, true)
|
||||
},
|
||||
[order],
|
||||
)
|
||||
|
||||
//散剪大约重量
|
||||
const aboutWeight = useCallback(
|
||||
(weight) => {
|
||||
if (order.sale_mode == 2) {
|
||||
let showWeight = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value].includes(order.status)
|
||||
return showWeight ? (
|
||||
<View className={styles.order_list_item_price_dg}>
|
||||
; <Text>≈{formatWeightDiv(weight)}kg</Text>
|
||||
</View>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
return <></>
|
||||
},
|
||||
[order],
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.orders_list_title}>{numText}</View>
|
||||
<View className={styles.orders_list_con}>
|
||||
{order?.list?.map((item) => {
|
||||
return (
|
||||
<View key={item.product_code} className={styles.order_list}>
|
||||
<View className={styles.order_list_title}>
|
||||
<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>
|
||||
<View className={styles.order_list_scroll}>
|
||||
{item?.product_colors?.map((colorItem) => {
|
||||
return (
|
||||
<View key={colorItem.id} className={styles.order_list_item}>
|
||||
<View className={styles.order_list_item_img}>
|
||||
<LabAndImg value={{ lab: colorItem.lab, rgb: colorItem.rgb, texture_url: colorItem.texture_url }} showStatus={false} />
|
||||
</View>
|
||||
<View className={styles.order_list_item_con}>
|
||||
<View className={styles.order_list_item_des}>
|
||||
<View className={styles.order_list_item_title}>
|
||||
{colorItem.code + ' ' + colorItem.name}
|
||||
{colorItem?.return_roll > 0 && <Text>{`已退${colorItem?.return_roll}条`}</Text>}
|
||||
{colorItem?.apply_return_roll > 0 && <Text>{`待退${colorItem?.apply_return_roll}条`}</Text>}
|
||||
</View>
|
||||
<View className={styles.order_list_item_price}>
|
||||
¥{standardPrice(colorItem.sale_price)}
|
||||
{aboutWeight(colorItem.estimate_weight)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.order_list_item_count}>
|
||||
<View className={styles.count_num}>
|
||||
×{formatCount(colorItem)}
|
||||
<text>{order.unit}</text>
|
||||
</View>
|
||||
<View className={styles.count_price}>
|
||||
<text>¥</text>
|
||||
{colorPrice(colorItem)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
<View className={styles.order_estimated_amount}>{showPriceConDom}</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,46 +0,0 @@
|
||||
$top:170px;
|
||||
.offlinePay_main{
|
||||
.offlinePay_con{
|
||||
padding: 20px;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 20px;
|
||||
.miconfont_title{
|
||||
transform: rotate(-180deg);
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 27px;
|
||||
font-size: 37px;
|
||||
color: $color_font_three;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: $font_size_big;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.offlinePay_list{
|
||||
border-radius: 10px;
|
||||
padding: 60px 0;
|
||||
.offlinePay_con_text{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { Text, View } from "@tarojs/components";
|
||||
import { memo } from "react";
|
||||
import AmountShow from "../amountShow";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import MCheckbox from "@/components/checkbox";
|
||||
import Popup from "@/components/popup";
|
||||
import SearchInput from "@/components/searchInput";
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
type Param = {
|
||||
show?: true|false,
|
||||
onClose?: () => void,
|
||||
offlineInfo?: {
|
||||
account_name: string,
|
||||
bank_of_deposit: string,
|
||||
transfer_remittance_account: string
|
||||
}
|
||||
}
|
||||
export default memo(({show = true, onClose, offlineInfo}:Param) => {
|
||||
//复制功能
|
||||
const clipboardData = () => {
|
||||
Taro.setClipboardData({
|
||||
data: `开户名称：${offlineInfo?.account_name};\n\r 开户银行：${offlineInfo?.bank_of_deposit};\n\r 转账汇款账号：${offlineInfo?.transfer_remittance_account};`,
|
||||
success: function (res) {
|
||||
Taro.showToast({
|
||||
icon: 'none',
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
return (
|
||||
<View className={styles.offlinePay_main}>
|
||||
<Popup show={show} showTitle={false} onClose={onClose} >
|
||||
<View className={styles.offlinePay_con}>
|
||||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
|
||||
<View className={styles.title}>线下汇款</View>
|
||||
<View className={styles.offlinePay_list}>
|
||||
<SearchInput showBorder={false} title='开户名称' titleStyle={{fontSize:'23rpx'}}>
|
||||
<Text className={styles.offlinePay_con_text}>{offlineInfo?.account_name}</Text>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='开户银行' titleStyle={{fontSize:'23rpx'}}>
|
||||
<Text className={styles.offlinePay_con_text}>{offlineInfo?.bank_of_deposit}</Text>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='转账汇款账号' titleStyle={{fontSize:'23rpx'}}>
|
||||
<Text className={styles.offlinePay_con_text}>{offlineInfo?.transfer_remittance_account}</Text>
|
||||
</SearchInput>
|
||||
</View>
|
||||
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
|
||||
)
|
||||
})
|
||||
@@ -1,155 +0,0 @@
|
||||
.order_flow_state{
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing:border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.order_status_list{
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.order_status_list_show {
|
||||
max-height: 1000px !important;
|
||||
}
|
||||
.order_status_item{
|
||||
position: relative;
|
||||
&:nth-last-child(n+2) {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.order_status_tail_end, .order_status_tail{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
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: 2px solid $color_main;
|
||||
height: 100%;
|
||||
top: 10px;
|
||||
left: 9px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.order_status_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
.order_status_title{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size;
|
||||
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;
|
||||
}
|
||||
.pay_time{
|
||||
height: 56px;
|
||||
background: #f6f6f6;
|
||||
border-radius: 20px;
|
||||
color: #3C3C3C;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
margin-top: 20px;
|
||||
text{
|
||||
font-size: 28px;
|
||||
color: $color_main;
|
||||
padding: 0 10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
.image_tag{
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
.image{
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
}
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
.refresh{
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
color: #707070;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mconfont{
|
||||
font-size: 30px;
|
||||
}
|
||||
.refresh_text{
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay_title_tag{
|
||||
margin-top: 10px;
|
||||
font-size: 24px;
|
||||
color: #EE7500;
|
||||
background: rgba(255,230,206,0.36);
|
||||
border-radius: 10px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
.miconfont {
|
||||
font-size: 30px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { Image, Text, View } from "@tarojs/components"
|
||||
import { memo, useEffect, useMemo, useRef, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
|
||||
import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum";
|
||||
import * as dayjs from 'dayjs'
|
||||
|
||||
type List = {
|
||||
status: string,
|
||||
time: string,
|
||||
tag: string,
|
||||
desc: string,
|
||||
expire_time: string
|
||||
}
|
||||
|
||||
type Param = {
|
||||
onRefresh?: () => void,
|
||||
orderInfo?: {
|
||||
logistics_details:List[], //订单状态列表
|
||||
payment_method: number, //支付方式
|
||||
status: number, //订单状态
|
||||
account_period?: number, //账期
|
||||
account_period_time?: string //还款日期
|
||||
}
|
||||
}
|
||||
|
||||
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
|
||||
useEffect(() => {
|
||||
console.log('orderInfo33::',orderInfo)
|
||||
}, [orderInfo])
|
||||
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const changeMore = () => {
|
||||
setShowMore(() => !showMore)
|
||||
}
|
||||
const dataList = useMemo(() => {
|
||||
return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[]
|
||||
}, [orderInfo.logistics_details])
|
||||
|
||||
//订单状态枚举
|
||||
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
|
||||
|
||||
//支付方式枚举
|
||||
const {
|
||||
PaymentMethodAccountPeriod,
|
||||
PaymentMethodCashOnDelivery,
|
||||
} = PAYMENT_METHOD
|
||||
|
||||
return (
|
||||
<>
|
||||
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
|
||||
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
|
||||
{dataList.map((item, index) => <View className={styles.order_status_item}>
|
||||
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
|
||||
{(dataList.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.status}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
|
||||
</View>
|
||||
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
|
||||
</View>)}
|
||||
</View>
|
||||
{(dataList.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 className={styles.image_tag}>
|
||||
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
|
||||
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_day.png')} className={styles.image}/>}
|
||||
</View>
|
||||
</View>}
|
||||
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<View className={styles.pay_title_tag}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
|
||||
您使用了{orderInfo.account_period}天账期支付，还款日期为{formatDateTime(orderInfo.account_period_time)}
|
||||
</View>}
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,21 +0,0 @@
|
||||
.tag{
|
||||
font-size: $font_size_min;
|
||||
padding: 5px 15px;
|
||||
background-color: $color_main;
|
||||
color: #fff;
|
||||
border-radius: 0px 20px 0px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.miconfont{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
.saleReturn_tag{
|
||||
background-color: #E4E4FF;
|
||||
color: #1818B4;
|
||||
}
|
||||
.refund_tag {
|
||||
background-color: #FFE6CE;
|
||||
color: #EE7500;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { memo } from "react"
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import { REFUND_STATUS_ORDER } from "@/common/enum";
|
||||
|
||||
|
||||
type Param = {
|
||||
status?: number
|
||||
}
|
||||
export default memo(({status = 0}:Param) => {
|
||||
const {
|
||||
ReturnApplyOrderTypeAdvanceReceiptRefund, // 预收退款
|
||||
ReturnApplyOrderTypeReturnForRefund, // 退货退款
|
||||
ReturnApplyOrderTypeSalesRefund // 销售退款
|
||||
} = REFUND_STATUS_ORDER
|
||||
return (
|
||||
<>
|
||||
{(status !== 0)&&<View className={classnames(styles.tag, status != ReturnApplyOrderTypeReturnForRefund.value?styles.refund_tag :styles.saleReturn_tag)}>
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-yucunkuan')}></View>
|
||||
<Text>{ status == ReturnApplyOrderTypeReturnForRefund.value?'退货':'退款'}</Text>
|
||||
</View>}
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,139 +0,0 @@
|
||||
$top:190px;
|
||||
.payment_main{
|
||||
.payment_con{
|
||||
padding: 20px;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 20px;
|
||||
.miconfont_title{
|
||||
transform: rotate(-180deg);
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 27px;
|
||||
font-size: 37px;
|
||||
color: $color_font_three;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
}
|
||||
.title{
|
||||
font-size: $font_size_big;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.amount{
|
||||
text-align: center;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.playMode{
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.payment_list{
|
||||
background-color: #fff;
|
||||
// box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16);
|
||||
min-height: 300px;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 100px;
|
||||
position: relative;
|
||||
// background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat ,
|
||||
// radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat;
|
||||
// filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16));
|
||||
position: relative;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 3px dashed #ccc;
|
||||
top: $top;
|
||||
width: calc(100% - 50px);
|
||||
left:0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.payment_list_top_border{
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
background: linear-gradient(215deg,#cde5ff 2%, #cde5ff 2%, #68b4ff 72%);
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
.payment_list_title{
|
||||
text-align: center;
|
||||
padding: 30px 0 50px 0;
|
||||
font-size: $font_size;
|
||||
color: $color_font_three;
|
||||
.payment_list_title_price_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 90px;
|
||||
&:nth-child(1) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
text{
|
||||
&:nth-child(2) {
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
}
|
||||
.payment_list_con{
|
||||
padding: 20px 30px 0 30px;
|
||||
.payment_list_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 123px;
|
||||
&:nth-last-child(n+2) {
|
||||
border-bottom: 2px solid #F3F3F3;
|
||||
}
|
||||
}
|
||||
.payment_list_item_left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font_size;
|
||||
.payment_list_item_left_name{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.miconfont{
|
||||
font-size: 30px;
|
||||
color: #007AFF;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.advance_payment{
|
||||
color: #FFC300;
|
||||
}
|
||||
.account_period{
|
||||
color: #07C160;
|
||||
}
|
||||
.payment_list_item_left_price{
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_two;
|
||||
padding-left: 35px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.miconfont_more{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
@@ -1,247 +0,0 @@
|
||||
import { Text, View } from "@tarojs/components";
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import AmountShow from "../amountShow";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import MCheckbox from "@/components/checkbox";
|
||||
import Popup from "@/components/popup";
|
||||
import OfflinePay from "../offlinePay";
|
||||
import ScanPay from "../scanPay";
|
||||
import { GetOrderPayApi, SubmitOrderPayApi, GetPrepayOrderPayApi, SubmitPrepayOrderPayApi } from "@/api/orderPay";
|
||||
import { formatPriceDiv } from "@/common/fotmat";
|
||||
import {alert} from "@/common/common"
|
||||
import { ORDER_STATUS, PAYMENT_METHOD, SUBSCRIPTION_MESSAGE_SCENE } from "@/common/enum";
|
||||
import { UseSubscriptionMessage } from "@/use/useCommon";
|
||||
import { throttle } from "@/common/util";
|
||||
|
||||
type Param = {
|
||||
show?: true|false,
|
||||
onClose?: () => void,
|
||||
onSubmitSuccess?: () => void, //支付成功
|
||||
orderInfo?: OrderInfo,
|
||||
}
|
||||
|
||||
type OrderInfo = {
|
||||
id?: number, //销售单id
|
||||
should_collect_order_id?: number, //应付单id
|
||||
pre_collect_order_id?: number, //预付单id
|
||||
status?: number, //订单状态
|
||||
payment_method?: number, //支付方式
|
||||
sale_mode?: number, //订单类型 0：大货 1剪板 2散剪
|
||||
actual_weight?: number, //实际重量
|
||||
estimate_weight?: number, //预估重量
|
||||
[val: string]: any
|
||||
}
|
||||
|
||||
type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款
|
||||
export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => {
|
||||
|
||||
//支付方式枚举
|
||||
const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod, PaymentMethodCashOnDelivery} = PAYMENT_METHOD
|
||||
//订单状态枚举
|
||||
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
|
||||
|
||||
//提交参数
|
||||
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
|
||||
id:0,
|
||||
payment_method: null
|
||||
})
|
||||
|
||||
//线下付款
|
||||
const [offlinePayShow, setofflinePayShow] = useState(false)
|
||||
const onShowOfflinePay = () => {
|
||||
setofflinePayShow(true)
|
||||
// onClose?.()
|
||||
}
|
||||
|
||||
//扫码支付
|
||||
const [scanPayShow, setScanPayShow] = useState(false)
|
||||
const onShowScanPay = () => {
|
||||
setScanPayShow(true)
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
//获取支付方式数据
|
||||
const [payInfo, setPayInfo] = useState<any>()
|
||||
const {fetchData: orderFetchData} = GetOrderPayApi()
|
||||
const {fetchData: prepayOrderFetchData} = GetPrepayOrderPayApi()
|
||||
const getOrderPay = async () => {
|
||||
if(orderInfo&&orderInfo.should_collect_order_id) {
|
||||
//有应收单id时用应收单获取数据
|
||||
let {data} = await orderFetchData({id: orderInfo?.should_collect_order_id})
|
||||
setPayInfo(() => data)
|
||||
} else {
|
||||
//用预付单id获取支付信息
|
||||
let {data} = await prepayOrderFetchData({id: orderInfo?.pre_collect_order_id})
|
||||
setPayInfo(() => data)
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if(show&&orderInfo&&(orderInfo?.should_collect_order_id||orderInfo?.pre_collect_order_id)) {
|
||||
let id = orderInfo.should_collect_order_id||orderInfo.pre_collect_order_id
|
||||
setSubmitData((val) => ({...val, id:id as number}))
|
||||
getOrderPay()
|
||||
}
|
||||
}, [show, orderInfo])
|
||||
|
||||
//预存款选择
|
||||
const advanceRef = useRef<any>(null)
|
||||
const advanceSelectData = useCallback((val) => {
|
||||
setSubmitData((e) => ({...e, payment_method:val}))
|
||||
}, [])
|
||||
const changeSelect = () => {
|
||||
advanceRef.current.onSelectEven()
|
||||
}
|
||||
|
||||
//账期选择
|
||||
const accountPeriodRef = useRef<any>(null)
|
||||
const periodSelectData = (val) => {
|
||||
setSubmitData((e) => ({...e, payment_method:val}))
|
||||
}
|
||||
const accountPeriodSelect = () => {
|
||||
accountPeriodRef.current.onSelectEven()
|
||||
}
|
||||
|
||||
//订阅消息
|
||||
const {ToPay} = SUBSCRIPTION_MESSAGE_SCENE
|
||||
const {openSubscriptionMessage} = UseSubscriptionMessage()
|
||||
|
||||
//提交支付
|
||||
const {fetchData: submitFetchData} = SubmitOrderPayApi() //应收单提交
|
||||
const {fetchData: submitPrepayOrderFetchData} = SubmitPrepayOrderPayApi() //预付单提交
|
||||
const submitPay = throttle(async () => {
|
||||
if(submitData.payment_method === null) {
|
||||
alert.error('请选择支付方式')
|
||||
return false
|
||||
}
|
||||
//账期支付，或预付款并且不是剪板才会订阅
|
||||
if((submitData.payment_method == PaymentMethodAccountPeriod.value || orderInfo?.status == SaleorderstatusWaitingPrePayment.value)&& orderInfo?.sale_mode != 1) {
|
||||
await openSubscriptionMessage({orderId: orderInfo?.id, scenes: ToPay.value})
|
||||
}
|
||||
alert.showLoading('正在支付')
|
||||
let res:any = null
|
||||
if(orderInfo?.should_collect_order_id) {
|
||||
res = await submitFetchData(submitData)
|
||||
} else {
|
||||
res = await submitPrepayOrderFetchData(submitData)
|
||||
}
|
||||
if(res.success) {
|
||||
alert.success('支付成功')
|
||||
onSubmitSuccess?.()
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
alert.hideLoading()
|
||||
}, 800)
|
||||
|
||||
//预付款
|
||||
const advance_payment = useMemo(() => {
|
||||
const price = payInfo?.should_collect_money - payInfo?.amount_paid
|
||||
return (
|
||||
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}</View>
|
||||
)
|
||||
}, [payInfo])
|
||||
|
||||
//是否显示七天账期
|
||||
const show_account_payment = useMemo(() => {
|
||||
//剪板和散剪不显示
|
||||
if(orderInfo?.sale_mode != 0) return false
|
||||
//支付方式是账期支付,不显示
|
||||
if(orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false
|
||||
//支付方式是货到付款,不显示
|
||||
if(orderInfo?.payment_method == PaymentMethodCashOnDelivery.value) return false
|
||||
//订单状态是预付款,不显示
|
||||
if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value) return false
|
||||
return true
|
||||
}, [orderInfo])
|
||||
|
||||
//账期
|
||||
const account_peyment = useMemo(() => {
|
||||
const price = payInfo?.should_collect_money - payInfo?.amount_paid
|
||||
return (
|
||||
<View className={styles.payment_list_item_left_price}>{(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View>
|
||||
)
|
||||
}, [payInfo])
|
||||
|
||||
//在线支付所需数据
|
||||
const onlinePayData = useMemo(() => {
|
||||
return {...orderInfo, offline_remittance_information: payInfo?.offline_remittance_information}
|
||||
|
||||
}, [orderInfo, payInfo])
|
||||
|
||||
return (
|
||||
<View className={styles.payment_main}>
|
||||
<Popup show={show} showTitle={false} onClose={onClose} >
|
||||
<View className={styles.payment_con}>
|
||||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
|
||||
<View className={styles.title}>待支付款项</View>
|
||||
<View className={styles.amount}>
|
||||
<AmountShow status={2} number={formatPriceDiv(payInfo?.amount_to_be_paid) as number}/>
|
||||
</View>
|
||||
{(payInfo?.delivery_payment_name)&&<View className={styles.playMode}>已使用{payInfo?.delivery_payment_name}方式付款</View>}
|
||||
<View className={styles.payment_list}>
|
||||
<View className={styles.payment_list_top_border}></View>
|
||||
<View className={styles.payment_list_title}>
|
||||
{/* <Text>向商家发起支付</Text> */}
|
||||
<View className={styles.payment_list_title_price}>
|
||||
<View className={styles.payment_list_title_price_item}>
|
||||
<Text>订单金额</Text>
|
||||
<Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
|
||||
</View>
|
||||
<View className={styles.payment_list_title_price_item}>
|
||||
<Text>已付金额</Text>
|
||||
<Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.payment_list_con}>
|
||||
<View className={styles.payment_list_item} onClick={changeSelect}>
|
||||
<View className={styles.payment_list_item_left}>
|
||||
<View className={styles.payment_list_item_left_name}>
|
||||
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont, styles.advance_payment)}></View>
|
||||
<View className={styles.payment_list_item_left_text}>预存款</View>
|
||||
</View>
|
||||
{advance_payment}
|
||||
</View>
|
||||
<MCheckbox ref={advanceRef} status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
|
||||
</View>
|
||||
{show_account_payment&&<View className={styles.payment_list_item} onClick={accountPeriodSelect}>
|
||||
<View className={styles.payment_list_item_left}>
|
||||
<View className={styles.payment_list_item_left_name}>
|
||||
<View className={classnames('iconfont icon-xtianzhangqi', styles.miconfont, styles.account_period)}></View>
|
||||
<View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
|
||||
</View>
|
||||
{account_peyment}
|
||||
</View>
|
||||
<MCheckbox ref={accountPeriodRef} 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}>
|
||||
<View className={styles.payment_list_item_left_name}>
|
||||
<View className={classnames('iconfont icon-xianxiahuikuan', styles.miconfont)}></View>
|
||||
<View className={styles.payment_list_item_left_text}>线下汇款</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
|
||||
</View>
|
||||
<View className={styles.payment_list_item} onClick={onShowScanPay}>
|
||||
<View className={styles.payment_list_item_left}>
|
||||
<View className={styles.payment_list_item_left_name}>
|
||||
<View className={classnames('iconfont icon-saomazhifu', styles.miconfont)}></View>
|
||||
<View className={styles.payment_list_item_left_text}>扫码支付</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.btns} onClick={submitPay}>确认交易</View>
|
||||
</View>
|
||||
</Popup>
|
||||
<OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)} offlineInfo={payInfo?.offline_remittance_information}/>
|
||||
<ScanPay orderInfo={onlinePayData} show={scanPayShow} onClose={() => setScanPayShow(false)} />
|
||||
</View>
|
||||
|
||||
)
|
||||
})
|
||||
@@ -1,30 +0,0 @@
|
||||
.reason_return_con{
|
||||
height: 50vh;
|
||||
.reason_title{
|
||||
padding: 10px 20px 0 20px;
|
||||
height: 60px;
|
||||
border-bottom: 1PX solid #F3F3F3;
|
||||
box-sizing: border-box;
|
||||
Text{
|
||||
font-size: 26px;
|
||||
border-bottom: 3px solid #000;
|
||||
padding: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
}
|
||||
.reason_scroll{
|
||||
height: calc(100% - 70px);
|
||||
.reason_list{
|
||||
font-size: 26px;
|
||||
padding: 30px 20px 0 20px;
|
||||
color: #707070;
|
||||
.reason_item{
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.select_item {
|
||||
color: #007AFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import Popup from "@/components/popup";
|
||||
import { ScrollView, Text, View } from "@tarojs/components";
|
||||
import { memo, useMemo } from "react";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
//原因选择
|
||||
type ReasonInfoParam = {
|
||||
show?: boolean, //显示
|
||||
onClose?: () => void, //关闭
|
||||
title?: string, //标题
|
||||
list?: {id:number, name:string, typle?:number}[], //数据列表
|
||||
onSelect?: (val: object) => void, //选择
|
||||
defaultValue?: number, //默认选中
|
||||
}
|
||||
export default memo(({show = false, onClose, title = '', list= [], onSelect, defaultValue}: ReasonInfoParam) => {
|
||||
|
||||
return (
|
||||
<Popup showIconButton={false} show={show} title={title} onClose={onClose} >
|
||||
<View className={styles.reason_return_con}>
|
||||
<View className={styles.reason_title}><Text>{title}</Text></View>
|
||||
<ScrollView scrollY className={styles.reason_scroll}>
|
||||
<View className={styles.reason_list}>
|
||||
{list.map(item => <View onClick={() => onSelect?.(item)} key={item.id} className={classnames(styles.reason_item, item.id == defaultValue&&styles.select_item)}>{item.name}</View> )}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
@@ -1,48 +0,0 @@
|
||||
.order_popup{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
.order_popup_title{
|
||||
color: $font_size_big;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.order_popup_input{
|
||||
width: 100%;
|
||||
padding: 0 25px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 43px;
|
||||
position: relative;
|
||||
.descDataNum{
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
bottom: 10px;
|
||||
height: 39px;
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
}
|
||||
textarea{
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 313px;
|
||||
padding: 20px;
|
||||
padding-bottom: 50px;
|
||||
box-sizing: border-box;
|
||||
font-size: $font_size;
|
||||
border: 2px solid #e6e6e6;
|
||||
}
|
||||
}
|
||||
.order_save_address{
|
||||
height: 82px;
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
width: 668px;
|
||||
text-align: center;
|
||||
line-height: 82px;
|
||||
color: #fff;
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import Popup from "@/components/popup"
|
||||
import { Textarea, View } from "@tarojs/components"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Param = {
|
||||
onBlur?: (val:any) => void
|
||||
onSave?: (val: string) => void
|
||||
defaultValue?: string
|
||||
}
|
||||
export default ({onBlur, onSave, defaultValue = ''}:Param) => {
|
||||
const [descData, setDescData] = useState({
|
||||
number: 0,
|
||||
value: '',
|
||||
count: 200
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
getDesc(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const getDesc = (value) => {
|
||||
let res = value
|
||||
if(value.length > descData.count) {
|
||||
res = value.slice(0, descData.count)
|
||||
}
|
||||
setDescData({...descData, number:res.length, value: res})
|
||||
}
|
||||
|
||||
const setSave = () => {
|
||||
onSave?.(descData.value)
|
||||
}
|
||||
return (
|
||||
<View className={styles.order_popup}>
|
||||
<View className={styles.order_popup_title}>编辑备注</View>
|
||||
<View className={styles.order_popup_input}>
|
||||
<Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
|
||||
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
|
||||
</View>
|
||||
<View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
.returnRecord_main{
|
||||
height: 70vh;
|
||||
.returnRecord_con{
|
||||
padding: 20px;
|
||||
}
|
||||
.order_item{
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.16);
|
||||
margin-bottom: 20px;
|
||||
.header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
margin-left: 15px;
|
||||
font-size: $font_size;
|
||||
width: 100px;
|
||||
@include common_ellipsis();
|
||||
}
|
||||
image{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.order_con {
|
||||
padding-left: 15px;
|
||||
width: 100%;
|
||||
.name {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: $font_size;
|
||||
}
|
||||
.order_num {
|
||||
flex: 1;
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_one;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.order_num_con{
|
||||
flex:1;
|
||||
}
|
||||
.miconfont {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag{
|
||||
font-size: $font_size_min;
|
||||
padding: 5px 15px;
|
||||
background-color: $color_main;
|
||||
color: #fff;
|
||||
border-radius: 0px 20px 0px 20px;
|
||||
}
|
||||
}
|
||||
.product_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 35px 0;
|
||||
.product_tag{
|
||||
background-color: #CDE5FF;
|
||||
font-size: $font_size_min;
|
||||
padding: 5px 10px;
|
||||
color: $color_main;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.product_name{
|
||||
flex:1;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
padding: 0 20px;
|
||||
@include common_ellipsis()
|
||||
}
|
||||
.product_status{
|
||||
font-size: $font_size;
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
.product_list{
|
||||
display: flex;
|
||||
.image{
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
border-radius: 20px ;
|
||||
position: relative;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px ;
|
||||
}
|
||||
.color_num {
|
||||
background: rgba(0,0,0, 0.5);
|
||||
border-radius: 36px 0px 20px 0px;
|
||||
font-size: $font_size_min;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right:0;
|
||||
bottom:0;
|
||||
padding: 5px 10px 5px 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.color_list{
|
||||
flex:1;
|
||||
padding-left: 30px;
|
||||
.color_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_three;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.color_title{
|
||||
font-weight: 700;
|
||||
font-size: $font_size;
|
||||
color: #000;
|
||||
}
|
||||
.color_more{
|
||||
color: $color_font_three;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.color_count_num{
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_two;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 10px;
|
||||
padding: 10px 22px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.order_number{
|
||||
display: flex;
|
||||
background-color: #F6F6F6;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
align-items: center;
|
||||
font-size: $font_size_medium;
|
||||
border-radius: 10px;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
|
||||
font-weight: 700;
|
||||
color: $color_font_three;
|
||||
border-right: 2px solid #CCCCCC;
|
||||
padding-right: 20px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding-left: 20px;
|
||||
color: $color_font_one;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
import { GetSaleOrderListApi, ReturnRecordApi } from "@/api/salesAfterOrder";
|
||||
import { goLink } from "@/common/common";
|
||||
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
|
||||
import { dataLoadingStatus, getFilterData } from "@/common/util";
|
||||
import InfiniteScroll from "@/components/infiniteScroll";
|
||||
import LabAndImg from "@/components/LabAndImg";
|
||||
import Popup from "@/components/popup";
|
||||
import { useSelector } from "@/reducers/hooks";
|
||||
import { Image, Text, View } from "@tarojs/components";
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import { REFUND_STATUS_ORDER } from "@/common/enum";
|
||||
import OrderStatusTag from "../orderStatusTag";
|
||||
|
||||
type Param = {
|
||||
show?: true|false,
|
||||
onClose?: () => void,
|
||||
onSubmit?: () => void,
|
||||
id?: number
|
||||
}
|
||||
export default memo(({show, onClose, onSubmit, id}:Param) => {
|
||||
//搜索参数
|
||||
const searchField = useRef({
|
||||
page : 1,
|
||||
size : 10,
|
||||
sale_order_id: 0
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if(show && id) {
|
||||
searchField.current.sale_order_id = id
|
||||
getOrderList()
|
||||
}
|
||||
}, [show, id])
|
||||
|
||||
const userInfo = useSelector(state => state.userInfo)
|
||||
|
||||
//获取售后订单列表
|
||||
const {fetchData: listFetchData, state:orderState} = ReturnRecordApi()
|
||||
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
|
||||
const getOrderList = async () => {
|
||||
let res = await listFetchData(getFilterData(searchField.current))
|
||||
setOrderData({list: res.data.list, total: res.data.total})
|
||||
}
|
||||
|
||||
//整理颜色
|
||||
const labAndRgbAndUrl = useCallback((item) => {
|
||||
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
|
||||
}, [orderData])
|
||||
|
||||
const {
|
||||
ReturnApplyOrderTypeReturnForRefund, // 退货退款
|
||||
} = REFUND_STATUS_ORDER
|
||||
|
||||
//对应单价
|
||||
const standardPrice = useCallback((price, sale_mode) => {
|
||||
return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
|
||||
}, [orderData])
|
||||
|
||||
//对应数量
|
||||
const formatCount = useCallback((item, sale_mode) => {
|
||||
return sale_mode == 0? item.roll + '条' : Number(item.length / 100) + '米'
|
||||
}, [orderData])
|
||||
|
||||
//上拉加载数据
|
||||
const pageNum = useRef({size: searchField.current.size, page: searchField.current.page})
|
||||
const getScrolltolower = () => {
|
||||
if(orderData.list.length < orderData.total) {
|
||||
pageNum.current.page++
|
||||
const size = pageNum.current.size * pageNum.current.page
|
||||
searchField.current.size = size
|
||||
}
|
||||
}
|
||||
|
||||
const numText = useCallback((value) => {
|
||||
let total_number_new = value?.sale_mode == 0? value?.total_number:(value?.total_number/100)
|
||||
return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${total_number_new}${value?.sale_mode == 0? '条':'米'}`
|
||||
}, [orderData])
|
||||
|
||||
//监听滚动
|
||||
const [scrollStatus, setScrollStatus] = useState(false)
|
||||
const onscroll = useCallback((e) => {
|
||||
if(e.detail.scrollTop > 20) {
|
||||
setScrollStatus(true)
|
||||
} else {
|
||||
setScrollStatus(false)
|
||||
}
|
||||
},[])
|
||||
|
||||
//数据加载状态
|
||||
const statusMore = useMemo(() => {
|
||||
return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
|
||||
}, [orderData, orderState])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup show={show} title="售后记录" onClose={onClose}>
|
||||
<View className={styles.returnRecord_main}>
|
||||
<InfiniteScroll
|
||||
selfonScrollToLower={getScrolltolower}
|
||||
selfOnScroll={onscroll}
|
||||
statusMore={statusMore}
|
||||
>
|
||||
<View className={styles.returnRecord_con}>
|
||||
{orderData?.list?.map(item => <View key={item.id} className={styles.order_item}>
|
||||
<View className={styles.header} onClick={() => goLink('/pages/salesAfter/index', {id: item?.id})}>
|
||||
<View className={styles.user}>
|
||||
<Image src={`${userInfo?.adminUserInfo?.avatar_url}`}/>
|
||||
</View>
|
||||
<View className={styles.order_con}>
|
||||
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
|
||||
<View className={styles.order_num}>
|
||||
<View className={styles.order_num_con}>
|
||||
<Text className={styles.order_no}>售后单号：{item?.return_order_no}</Text>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
|
||||
</View>
|
||||
<OrderStatusTag status={item?.type}/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.product_con} onClick={() => goLink('/pages/salesAfter/index', {id: item?.id})}>
|
||||
<View className={styles.product_title}>
|
||||
<View className={styles.product_tag}>{item?.sale_mode_name}</View>
|
||||
<View className={styles.product_name}>{formatHashTag(item?.product_list?.[0].code, item?.product_list?.[0].name)}</View>
|
||||
<View className={styles.product_status}>{item?.stage_name}</View>
|
||||
</View>
|
||||
<View className={styles.product_list}>
|
||||
<View className={styles.image}>
|
||||
<LabAndImg value={labAndRgbAndUrl(item)}/>
|
||||
<View className={styles.color_num}>{item?.product_list?.[0].product_colors?.[0].code}</View>
|
||||
</View>
|
||||
<View className={styles.color_list}>
|
||||
{item?.product_list?.[0].product_colors?.map((itemColor, index) => {
|
||||
return (
|
||||
(index <= 1)&&<View key={itemColor.id} className={styles.color_item}>
|
||||
<View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
|
||||
<View className={styles.color_price}>{standardPrice(itemColor.sale_price, item.sale_mode)}</View>
|
||||
<View className={styles.color_num}>×{formatCount(itemColor, item.sale_mode)}</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
{(item?.product_list?.[0].product_colors.length > 2) && <View className={styles.color_item}>
|
||||
<View className={styles.color_more}>……</View>
|
||||
<View className={styles.color_more}>……</View>
|
||||
<View className={styles.color_more}>……</View>
|
||||
</View>}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.color_count_num}>{numText(item)}</View>
|
||||
<View className={styles.order_number}>
|
||||
<Text>{item?.type == ReturnApplyOrderTypeReturnForRefund?.value?'已申请退货':'已申请退款'}</Text>
|
||||
<Text>订单号：{item?.order_no}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>)}
|
||||
</View>
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
</Popup>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,54 +0,0 @@
|
||||
$top:170px;
|
||||
.scanPay_main{
|
||||
.scanPay_con{
|
||||
padding: 20px;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 20px;
|
||||
.miconfont_title{
|
||||
transform: rotate(-180deg);
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 27px;
|
||||
font-size: 37px;
|
||||
color: $color_font_three;
|
||||
z-index: 99;
|
||||
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: $font_size_big;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
}
|
||||
.desc{
|
||||
font-size: $font_size_min;
|
||||
color: $color_main;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
.miconfont{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.scanPay_list{
|
||||
border-radius: 10px;
|
||||
height: 900px;
|
||||
image{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
import { Image, ScrollView, Text, View } from '@tarojs/components'
|
||||
import { memo, useEffect, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import Popup from '@/components/popup'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { alert } from '@/common/common'
|
||||
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
|
||||
import useCheckAuthorize from '@/use/useCheckAuthorize'
|
||||
import { GetPayCode } from '@/api/onlinePay'
|
||||
import LoadingCard from '@/components/loadingCard'
|
||||
|
||||
type Param = {
|
||||
show?: true | false
|
||||
onClose?: () => void
|
||||
company?: string
|
||||
qrcode?: string
|
||||
orderInfo?: any
|
||||
}
|
||||
type ListParam = {
|
||||
product_code: string
|
||||
product_name: string
|
||||
product_color_code: string
|
||||
product_color_name: string
|
||||
num: string
|
||||
weight: string
|
||||
length: string
|
||||
sale_price: string
|
||||
total_price: string
|
||||
weight_error: string
|
||||
}
|
||||
export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
|
||||
const [detail, setDetail] = useState<any>()
|
||||
|
||||
useEffect(() => {
|
||||
if (orderInfo) {
|
||||
let lists: ListParam[] = []
|
||||
orderInfo.product_list?.map((pitem) => {
|
||||
pitem?.product_colors?.map((citem) => {
|
||||
lists.push({
|
||||
product_code: formatHashTag(pitem.code, '', 'name')!,
|
||||
product_name: pitem.name,
|
||||
product_color_code: formatHashTag(citem.code)!,
|
||||
product_color_name: citem.name,
|
||||
num: citem.roll.toString(),
|
||||
length: (citem.length / 100).toString(),
|
||||
weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(),
|
||||
sale_price: formatPriceDiv(citem.sale_price).toString(),
|
||||
total_price: formatPriceDiv(citem.total_sale_price || citem.estimate_amount).toString(), //小计
|
||||
weight_error: formatWeightDiv(citem.weight_error).toString(),
|
||||
})
|
||||
})
|
||||
})
|
||||
setDetail(() => ({
|
||||
title: '面料销售电子确认单',
|
||||
company: orderInfo.company_name, //后端公司
|
||||
order_type: orderInfo.sale_mode_name, //类型：大货
|
||||
sale_user: orderInfo.sale_user_name, //业务员
|
||||
order_created_time: formatDateTime(orderInfo.create_time),
|
||||
order_no: orderInfo.order_no,
|
||||
shipment_mode: orderInfo.shipment_mode_name, //发货方式
|
||||
target_user_name: userName(orderInfo), //收件人
|
||||
target_address: address(orderInfo), //收货地址
|
||||
target_description: orderInfo.remark, //发货备注
|
||||
pay_account: orderInfo.offline_remittance_information?.transfer_remittance_account, //专属收款账号
|
||||
bank_account_name: orderInfo.offline_remittance_information?.account_name, //账户名称
|
||||
bank_name: orderInfo.offline_remittance_information?.bank_of_deposit, //开户银行
|
||||
pay_type: '', //支付方式, 可不传
|
||||
client: orderInfo.purchaser_name, //客户名称
|
||||
phone: userPhone(orderInfo), //收货手机号码
|
||||
order_total_length: (orderInfo.total_number / 100).toString(), //订单布匹长度
|
||||
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
|
||||
order_total_num: orderInfo.total_number + '',
|
||||
qrcode: '', //跳转链接
|
||||
order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量
|
||||
list: lists,
|
||||
show_qrcode: true, //是否显示码单
|
||||
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
|
||||
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
|
||||
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
|
||||
show_total_sale_price: orderInfo.total_sale_price > 0,
|
||||
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
|
||||
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
|
||||
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
|
||||
show_actual_amount: orderInfo.actual_amount > 0,
|
||||
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
|
||||
show_wait_pay_amount: orderInfo.wait_pay_amount > 0,
|
||||
show_barcode: true,
|
||||
order_total_weight_error: formatWeightDiv(orderInfo.total_weight_error).toString(), //总空差重量
|
||||
}))
|
||||
}
|
||||
}, [orderInfo])
|
||||
|
||||
//收货地址
|
||||
const address = (addressInfo) => {
|
||||
if (addressInfo?.shipment_mode == 2) {
|
||||
return addressInfo?.province_name ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : ''
|
||||
} else {
|
||||
return addressInfo?.take_goods_address
|
||||
}
|
||||
}
|
||||
|
||||
//收件人
|
||||
const userName = (addressInfo) => {
|
||||
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_name : ''
|
||||
}
|
||||
|
||||
//手机号
|
||||
const userPhone = (addressInfo) => {
|
||||
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_phone : orderInfo.take_goods_phone
|
||||
}
|
||||
|
||||
//获取支付二维码
|
||||
const [payCodeImage, setPayCodeImage] = useState<string>('')
|
||||
const fileData = useRef({
|
||||
filePath: '',
|
||||
base64: '',
|
||||
})
|
||||
const { fetchData, state } = GetPayCode()
|
||||
const getCore = async () => {
|
||||
let res = await fetchData(detail)
|
||||
const base64 = res.data.base64
|
||||
setPayCodeImage(() => base64)
|
||||
const time = new Date().valueOf()
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []
|
||||
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
|
||||
fileData.current.filePath = filePath
|
||||
fileData.current.base64 = bodyData
|
||||
const save = Taro.getFileSystemManager()
|
||||
save.writeFile({
|
||||
filePath: fileData.current.filePath,
|
||||
data: fileData.current.base64,
|
||||
encoding: 'base64',
|
||||
})
|
||||
}
|
||||
useEffect(() => {
|
||||
if (show) getCore()
|
||||
}, [show])
|
||||
|
||||
//检查是否开启保存图片权限
|
||||
const { check } = useCheckAuthorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
msg: '您没授权，无法保存图片',
|
||||
})
|
||||
const saveImageCheck = async () => {
|
||||
const res = await check()
|
||||
res && saveImage()
|
||||
}
|
||||
|
||||
//保存图片
|
||||
const saveImage = () => {
|
||||
alert.loading('正在保存图片')
|
||||
Taro.saveImageToPhotosAlbum({
|
||||
filePath: fileData.current.filePath,
|
||||
success: function (res) {
|
||||
alert.success('图片保存成功')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('err::', err)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//预览图片
|
||||
const showImage = () => {
|
||||
console.log('fileData.current.filePath::', fileData.current.filePath)
|
||||
Taro.previewImage({
|
||||
current: fileData.current.filePath, // 当前显示
|
||||
urls: [fileData.current.filePath], // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
|
||||
//复制功能
|
||||
return (
|
||||
<View className={styles.scanPay_main}>
|
||||
<Popup show={show} showTitle={false} onClose={onClose}>
|
||||
<View className={styles.scanPay_con}>
|
||||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
|
||||
<View className={styles.title}>扫码支付</View>
|
||||
<View className={styles.desc}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
|
||||
扫码支付成功后，自动更新状态
|
||||
</View>
|
||||
<View className={styles.scanPay_list}>
|
||||
{(state.loading && <LoadingCard />) || (
|
||||
<ScrollView scrollY className={styles.scanPay_list}>
|
||||
<Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
<View className={styles.btns} onClick={saveImageCheck}>
|
||||
保存电子确认单
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,55 +0,0 @@
|
||||
$top:170px;
|
||||
.scanPay_main{
|
||||
.scanPay_con{
|
||||
padding: 20px;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 20px;
|
||||
.miconfont_title{
|
||||
transform: rotate(-180deg);
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 27px;
|
||||
font-size: 37px;
|
||||
color: $color_font_three;
|
||||
z-index: 99;
|
||||
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: $font_size_big;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.desc{
|
||||
font-size: $font_size_min;
|
||||
color: $color_main;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
.miconfont{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.scanPay_list{
|
||||
border-radius: 10px;
|
||||
height: 900px;
|
||||
image{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
import { Image, ScrollView, Text, View } from '@tarojs/components'
|
||||
import { memo, useEffect, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import Popup from '@/components/popup'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { alert } from '@/common/common'
|
||||
import { formatDateTime, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
|
||||
import useCheckAuthorize from '@/use/useCheckAuthorize'
|
||||
import { GetPayCode } from '@/api/onlinePay'
|
||||
import LoadingCard from '@/components/loadingCard'
|
||||
|
||||
type Param = {
|
||||
show?: true | false
|
||||
onClose?: () => void
|
||||
company?: string
|
||||
qrcode?: string
|
||||
orderInfo?: any
|
||||
}
|
||||
type ListParam = {
|
||||
product_code: string
|
||||
product_name: string
|
||||
product_color_code: string
|
||||
product_color_name: string
|
||||
num: string
|
||||
weight: string
|
||||
length: string
|
||||
sale_price: string
|
||||
total_price: string
|
||||
weight_error: string
|
||||
}
|
||||
export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
|
||||
const [detail, setDetail] = useState<any>()
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
getCore()
|
||||
}
|
||||
}, [show])
|
||||
|
||||
useEffect(() => {
|
||||
if (orderInfo) {
|
||||
let lists: ListParam[] = []
|
||||
orderInfo.product_list?.map((pitem) => {
|
||||
pitem?.product_colors?.map((citem) => {
|
||||
lists.push({
|
||||
product_code: formatRemoveHashTag(pitem.code),
|
||||
product_name: pitem.name,
|
||||
product_color_code: formatRemoveHashTag(citem.code),
|
||||
product_color_name: citem.name,
|
||||
num: citem.roll.toString(),
|
||||
length: (citem.length / 100).toString(),
|
||||
weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(),
|
||||
sale_price: formatPriceDiv(citem.sale_price).toString(),
|
||||
total_price: formatPriceDiv(citem.total_sale_price || citem.estimate_amount).toString(), //小计
|
||||
weight_error: formatWeightDiv(citem.weight_error).toString(),
|
||||
})
|
||||
})
|
||||
})
|
||||
setDetail(() => ({
|
||||
title: '面料销售电子确认单',
|
||||
company: orderInfo.company_name, //后端公司
|
||||
order_type: orderInfo.sale_mode_name, //类型：大货
|
||||
sale_user: orderInfo.sale_user_name, //业务员
|
||||
order_created_time: formatDateTime(orderInfo.create_time),
|
||||
order_no: orderInfo.order_no,
|
||||
shipment_mode: orderInfo.shipment_mode_name, //发货方式
|
||||
target_user_name: userName(orderInfo), //收件人
|
||||
target_address: address(orderInfo), //收货地址
|
||||
target_description: orderInfo.remark, //发货备注
|
||||
pay_account: orderInfo.account, //专属收款账号
|
||||
bank_account_name: orderInfo.account_name, //账户名称
|
||||
bank_name: orderInfo.bank_of_deposit, //开户银行
|
||||
pay_type: '', //支付方式, 可不传
|
||||
client: orderInfo.purchaser_name, //客户名称
|
||||
phone: userPhone(orderInfo), //收货手机号码
|
||||
order_total_length: (orderInfo.total_number / 100).toString(), //订单布匹长度
|
||||
order_total_price: formatPriceDiv(orderInfo.bill_total_sale_price).toString(), //订单价格
|
||||
order_total_num: orderInfo.total_number.toString(),
|
||||
qrcode: '', //跳转链接
|
||||
order_total_weight: formatWeightDiv(orderInfo.total_weight || orderInfo.total_estimate_weight).toString(), //订单布匹重量
|
||||
list: lists,
|
||||
|
||||
estimate_amount: formatPriceDiv(orderInfo.estimate_amount).toString(),
|
||||
show_estimate_amount: orderInfo.estimate_amount > 0 && orderInfo.total_sale_price <= 0,
|
||||
total_sale_price: formatPriceDiv(orderInfo.total_sale_price).toString(),
|
||||
show_total_sale_price: orderInfo.total_sale_price > 0,
|
||||
total_weight_error_discount: formatPriceDiv(orderInfo.total_weight_error_discount).toString(),
|
||||
show_total_weight_error_discount: orderInfo.total_weight_error_discount > 0,
|
||||
actual_amount: formatPriceDiv(orderInfo.actual_amount).toString(),
|
||||
show_actual_amount: orderInfo.actual_amount > 0,
|
||||
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
|
||||
show_wait_pay_amount: orderInfo.wait_pay_amount > 0,
|
||||
show_barcode: true,
|
||||
order_total_weight_error: formatWeightDiv(orderInfo.total_weight_error).toString(), //总空差重量
|
||||
}))
|
||||
}
|
||||
}, [orderInfo])
|
||||
|
||||
//收货地址
|
||||
const address = (addressInfo) => {
|
||||
if (addressInfo?.shipment_mode == 2) {
|
||||
return addressInfo?.province_name ? addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail : ''
|
||||
} else {
|
||||
return addressInfo?.take_goods_address
|
||||
}
|
||||
}
|
||||
|
||||
//收件人
|
||||
const userName = (addressInfo) => {
|
||||
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_name : ''
|
||||
}
|
||||
|
||||
//手机号
|
||||
const userPhone = (addressInfo) => {
|
||||
return addressInfo?.shipment_mode == 2 ? orderInfo.target_user_phone : orderInfo.take_goods_phone
|
||||
}
|
||||
|
||||
//获取支付二维码
|
||||
const [payCodeImage, setPayCodeImage] = useState<string>('')
|
||||
const fileData = useRef({
|
||||
filePath: '',
|
||||
base64: '',
|
||||
})
|
||||
const { fetchData, state } = GetPayCode()
|
||||
const getCore = async () => {
|
||||
let res = await fetchData(detail)
|
||||
const base64 = res.data.base64
|
||||
setPayCodeImage(() => base64)
|
||||
const time = new Date().valueOf()
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []
|
||||
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
|
||||
fileData.current.filePath = filePath
|
||||
fileData.current.base64 = bodyData
|
||||
const save = Taro.getFileSystemManager()
|
||||
save.writeFile({
|
||||
filePath: fileData.current.filePath,
|
||||
data: fileData.current.base64,
|
||||
encoding: 'base64',
|
||||
})
|
||||
}
|
||||
|
||||
//检查是否开启保存图片权限
|
||||
const { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' })
|
||||
const saveImageCheck = async () => {
|
||||
const res = await check()
|
||||
res && saveImage()
|
||||
}
|
||||
|
||||
//保存图片
|
||||
const saveImage = () => {
|
||||
alert.loading('正在保存图片')
|
||||
Taro.saveImageToPhotosAlbum({
|
||||
filePath: fileData.current.filePath,
|
||||
success: function () {
|
||||
alert.success('图片保存成功')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('err::', err)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//预览图片
|
||||
const showImage = () => {
|
||||
console.log('fileData.current.filePath::', fileData.current.filePath)
|
||||
Taro.previewImage({
|
||||
current: fileData.current.filePath, // 当前显示
|
||||
urls: [fileData.current.filePath], // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
|
||||
//复制功能
|
||||
return (
|
||||
<View className={styles.scanPay_main}>
|
||||
<Popup show={show} showTitle={false} onClose={onClose}>
|
||||
<View className={styles.scanPay_con}>
|
||||
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
|
||||
<View className={styles.title}>查看销售码单</View>
|
||||
<View className={styles.scanPay_list}>
|
||||
{(state.loading && <LoadingCard />) || (
|
||||
<ScrollView scrollY className={styles.scanPay_list}>
|
||||
<Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
<View className={styles.btns} onClick={saveImageCheck}>
|
||||
保存电子确认单
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,33 +0,0 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { memo, useRef, useState } from "react";
|
||||
|
||||
type Param = {
|
||||
onSelect?:(val:number) => void
|
||||
}
|
||||
export default memo(({onSelect}: Param) => {
|
||||
//收货方法 1:自提，2：物流
|
||||
const shipmentMode = useRef([
|
||||
{value:1, label:'上门自提', selected:false},
|
||||
{value:2, label:'物流', selected:false}
|
||||
])
|
||||
const [selectValue, setSelectValue] = useState()
|
||||
const selectShipmentMode = (value) => {
|
||||
setSelectValue(() => value)
|
||||
onSelect?.(value)
|
||||
}
|
||||
return (
|
||||
<View className={styles.order_title}>
|
||||
<Text>收货方式</Text>
|
||||
{shipmentMode.current.map(item => {
|
||||
return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,67 +0,0 @@
|
||||
.order_price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.order_price_text{
|
||||
font-size: $font_size_medium;
|
||||
// margin-right: 10px;
|
||||
display: flex;
|
||||
.iconfont_msg{
|
||||
position: relative;
|
||||
}
|
||||
.miconfont{
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.message{
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
background: #A8B3BD;
|
||||
z-index: 9;
|
||||
min-height: 50px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
&::before{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
content: " ";
|
||||
transform: rotate(45deg);
|
||||
background: #A8B3BD;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis{
|
||||
// font-weight: 700;
|
||||
}
|
||||
.order_price_num{
|
||||
color: $color_main;
|
||||
font-weight: 700;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: 44px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis_num{
|
||||
text{
|
||||
&:nth-child(2) {
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { memo, useCallback, useEffect, useMemo } from "react"
|
||||
import {formatKbPrice} from '@/common/common'
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
type Param = {
|
||||
style?: Object,
|
||||
number?: number, //数量
|
||||
priceTitle: string //描述
|
||||
|
||||
}
|
||||
export default memo(({style, number = 0, priceTitle = ''}:Param) => {
|
||||
const priceDom = useCallback(() => {
|
||||
let res = number.toFixed(2).split('.')
|
||||
let int_num = parseInt(res[0]) + ''
|
||||
let decimals_num = res[1]
|
||||
return (
|
||||
<>
|
||||
<Text>¥</Text>
|
||||
<Text>{Number(int_num).toLocaleString()}</Text>
|
||||
<Text>.{decimals_num}</Text>
|
||||
</>
|
||||
)
|
||||
}, [number])
|
||||
return (
|
||||
<>
|
||||
<View className={styles.order_price}>
|
||||
<View className={classnames(styles.order_price_text, styles.emphasis)}>
|
||||
<Text>{priceTitle}：</Text>
|
||||
</View>
|
||||
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
|
||||
{priceDom()}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -1,39 +0,0 @@
|
||||
|
||||
.weight_memo{
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 0 20px;
|
||||
.weight_memo_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 130px;
|
||||
&:nth-child(1) {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
.title, .desc{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.desc{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
.miconfont_check, .miconfont_custom{
|
||||
font-size: 37px;
|
||||
color: $color_main;
|
||||
font-weight: normal;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.miconfont_custom{
|
||||
color:#FFC300;
|
||||
}
|
||||
.miconfont_more{
|
||||
font-size: 30px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import Popup from "@/components/popup"
|
||||
import { Text, Textarea, View } from "@tarojs/components"
|
||||
import { memo, useCallback, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
|
||||
type Param = {
|
||||
onCheck?: () => void
|
||||
onCustom?: () => void
|
||||
}
|
||||
export default memo(({onCheck, onCustom}:Param) => {
|
||||
return (
|
||||
<View className={styles.weight_memo}>
|
||||
<View className={styles.weight_memo_item} onClick={() => onCheck?.()}>
|
||||
<View className={styles.title}>
|
||||
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_check)}></Text>
|
||||
<Text>陆盈纺织</Text>
|
||||
</View>
|
||||
<View className={styles.desc}>
|
||||
<Text>查看原码单</Text>
|
||||
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.weight_memo_item} onClick={() => onCustom?.()}>
|
||||
<View className={styles.title}>
|
||||
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_custom)}></Text>
|
||||
<Text>我的码单</Text>
|
||||
</View>
|
||||
<View className={styles.desc}>
|
||||
<Text>自定义</Text>
|
||||
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '订单',
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
navigationBarTitleText: '订单详情',
|
||||
enablePullDownRefresh: true,
|
||||
backgroundTextStyle: 'dark',
|
||||
enableShareAppMessage: true,
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
.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_desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
min-height: 116px;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
box-sizing: border-box;
|
||||
.order_desc_con {
|
||||
width: 150px;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_desc_text,
|
||||
.order_desc_text_hint {
|
||||
font-size: $font_size_medium;
|
||||
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
.order_desc_text_hint {
|
||||
text-align: right;
|
||||
color: $color_font_two;
|
||||
}
|
||||
.miconfont {
|
||||
font-size: 20px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
}
|
||||
.submit_order_con {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
|
||||
padding: 20px 20px;
|
||||
box-sizing: border-box;
|
||||
.order_btn {
|
||||
width: 152px;
|
||||
height: 72px;
|
||||
border: 2px solid #dddddd;
|
||||
border-radius: 46px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $color_font_three;
|
||||
&:nth-child(n + 2) {
|
||||
margin-left: 34px;
|
||||
}
|
||||
}
|
||||
.order_btn_select {
|
||||
color: $color_main;
|
||||
border: 2px solid $color_main;
|
||||
}
|
||||
.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;
|
||||
width: 100%;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.weight_memo_con {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,343 +0,0 @@
|
||||
import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from '@/api/order'
|
||||
import { AddShoppingCartApi } from '@/api/shopCart'
|
||||
import { SubscriptionMessageApi } from '@/api/user'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { ORDER_STATUS } from '@/common/enum'
|
||||
import { formatDateTime, formatImgUrl } from '@/common/fotmat'
|
||||
import OrderBtns from '@/components/orderBtns'
|
||||
import Popup from '@/components/popup'
|
||||
import SearchInput from '@/components/searchInput'
|
||||
import ShopCart from '@/components/shopCart'
|
||||
import useLogin from '@/use/useLogin'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
||||
import classnames from 'classnames'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import AddressInfoDetail from './components/addressInfoDetail'
|
||||
import AdvanceOrderState from './components/advanceOrderState'
|
||||
import ApplyRefund from './components/applyRefund'
|
||||
import KindList from './components/kindList'
|
||||
import OrderState from './components/orderState'
|
||||
import Payment from './components/payment'
|
||||
import Remark from './components/remark'
|
||||
import ReturnRecord from './components/returnRecord'
|
||||
import ScanPayCheck from './components/scanPayCheck'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export default () => {
|
||||
useLogin()
|
||||
const [showDesc, setShowDesc] = useState(false)
|
||||
const router = useRouter()
|
||||
const orderId = useRef<number>(Number(router.params.id))
|
||||
useDidShow(() => {
|
||||
getSaleOrderPreView()
|
||||
})
|
||||
|
||||
//订单状态枚举
|
||||
const {
|
||||
SaleOrderStatusTaking,
|
||||
SaleOrderStatusWaitingDelivery,
|
||||
SaleOrderStatusWaitingReceipt, // 待收货
|
||||
SaleOrderStatusAlreadyReceipt, // 已收货
|
||||
SaleOrderStatusComplete, // 已完成
|
||||
SaleOrderStatusRefund, // 已退款
|
||||
SaleOrderStatusCancel, // 已取消
|
||||
SaleorderstatusWaitingPrePayment, // 预付款
|
||||
} = ORDER_STATUS
|
||||
|
||||
//获取订单详情
|
||||
const firstOpen = useRef(true)
|
||||
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
|
||||
const { fetchData: getOrderFetchData } = GetSaleOrderDetailApi()
|
||||
const getSaleOrderPreView = async () => {
|
||||
if (orderId.current) {
|
||||
let res = await getOrderFetchData({ id: orderId.current })
|
||||
setOrderDetail(res.data)
|
||||
setOrderRemark(res.data.remark)
|
||||
//预付款自动打开支付
|
||||
if (firstOpen.current && SaleorderstatusWaitingPrePayment.value == res.data.status) {
|
||||
firstOpen.current = false
|
||||
toPay()
|
||||
}
|
||||
}
|
||||
Taro.stopPullDownRefresh()
|
||||
// Taro.hideToast()
|
||||
}
|
||||
|
||||
//监听获取到的数据
|
||||
useEffect(() => {
|
||||
if (orderDetail) formatData()
|
||||
}, [orderDetail])
|
||||
|
||||
//格式化数据格式
|
||||
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
|
||||
const formatData = () => {
|
||||
setFormatDetailOrder({
|
||||
...orderDetail,
|
||||
unit: orderDetail.sale_mode == 0 ? '条' : 'm', //单位
|
||||
list: orderDetail.product_list,
|
||||
})
|
||||
}
|
||||
const formatPreViewOrderMemo = useMemo(() => {
|
||||
return formatDetailOrder
|
||||
}, [formatDetailOrder])
|
||||
|
||||
//复制功能
|
||||
const clipboardData = () => {
|
||||
Taro.setClipboardData({
|
||||
data: orderDetail?.order_no || '',
|
||||
success: function (res) {
|
||||
Taro.showToast({
|
||||
icon: 'none',
|
||||
title: '复制成功',
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//初始地址数据
|
||||
const defaultAddress = useMemo(() => {
|
||||
return {
|
||||
province_name: orderDetail?.province_name,
|
||||
city_name: orderDetail?.city_name,
|
||||
district_name: orderDetail?.district_name,
|
||||
address_detail: orderDetail?.address_detail,
|
||||
target_user_name: orderDetail?.target_user_name,
|
||||
target_user_phone: orderDetail?.target_user_phone,
|
||||
shipment_mode: orderDetail?.shipment_mode,
|
||||
id: orderDetail?.id,
|
||||
sale_mode: orderDetail?.sale_mode,
|
||||
status: orderDetail?.status,
|
||||
take_goods_address: orderDetail?.take_goods_address,
|
||||
take_goods_phone: orderDetail?.take_goods_phone,
|
||||
}
|
||||
}, [orderDetail])
|
||||
|
||||
//订单备注
|
||||
const { fetchData: remarkFetchData } = EditSaleOrderRemarkApi()
|
||||
const [orderRemark, setOrderRemark] = useState('')
|
||||
const getRemark = useCallback(async (e) => {
|
||||
setOrderRemark(() => e)
|
||||
let res = await remarkFetchData({ remark: e, id: orderId.current })
|
||||
if (res.success) {
|
||||
getSaleOrderPreView()
|
||||
alert.success('提交成功')
|
||||
} else {
|
||||
alert.error(res.msg)
|
||||
}
|
||||
setShowDesc(() => false)
|
||||
}, [])
|
||||
const noCanOpenDescList = useRef([
|
||||
SaleOrderStatusTaking.value, //提货中
|
||||
SaleOrderStatusWaitingDelivery.value, //待发货
|
||||
SaleOrderStatusWaitingReceipt.value, // 待收货
|
||||
SaleOrderStatusAlreadyReceipt.value, // 已收货
|
||||
SaleOrderStatusComplete.value, // 已完成
|
||||
SaleOrderStatusRefund.value, // 已退款
|
||||
SaleOrderStatusCancel.value, // 已取消
|
||||
])
|
||||
const descOpen = () => {
|
||||
if (noCanOpenDescList.current.includes(orderDetail?.status)) return alert.none('该订单状态不能修改备注')
|
||||
setShowDesc(() => true)
|
||||
}
|
||||
|
||||
//去付款
|
||||
const [payMentShow, setPayMentShow] = useState(false)
|
||||
const toPay = () => {
|
||||
setPayMentShow(true)
|
||||
}
|
||||
|
||||
//打开地址修改
|
||||
const addressRef = useRef<any>(null)
|
||||
|
||||
//修改收货方式
|
||||
const getShipmentMode = useCallback(() => {
|
||||
getSaleOrderPreView()
|
||||
}, [orderDetail])
|
||||
|
||||
//修改地址
|
||||
const getAddress = useCallback(() => {
|
||||
getSaleOrderPreView()
|
||||
}, [orderDetail])
|
||||
|
||||
//获取底部按钮点击, 获取按钮状态
|
||||
const orderStateClick = useCallback(
|
||||
(val) => {
|
||||
if (val == 1 || val == 6 || val == 8) {
|
||||
getSaleOrderPreView()
|
||||
} else if (val == 2) {
|
||||
//待付款
|
||||
toPay()
|
||||
} else if (val == 3) {
|
||||
//申请退款
|
||||
if (!orderDetail?.av_return_roll) return alert.none('该订单已申请过退款')
|
||||
setRefundShow(true)
|
||||
} else if (val == 7) {
|
||||
//再购
|
||||
addShopCart()
|
||||
} else if (val == 9) {
|
||||
//售后记录
|
||||
onReturnRecordShow()
|
||||
} else if (val == 10) {
|
||||
setShowScanPayCheck(true)
|
||||
}
|
||||
},
|
||||
[orderDetail],
|
||||
)
|
||||
|
||||
//页面下拉刷新
|
||||
usePullDownRefresh(() => {
|
||||
getSaleOrderPreView()
|
||||
})
|
||||
|
||||
//支付成功
|
||||
const onPaySuccess = useCallback(() => {
|
||||
alert.success('支付成功')
|
||||
getSaleOrderPreView()
|
||||
closePayShow()
|
||||
}, [orderDetail])
|
||||
|
||||
//关闭支付弹窗
|
||||
const closePayShow = useCallback(() => {
|
||||
setPayMentShow(() => false)
|
||||
}, [orderDetail])
|
||||
|
||||
//按钮所需数据
|
||||
const orderInfo = useMemo(() => {
|
||||
return {
|
||||
orderId: orderDetail?.id,
|
||||
...orderDetail,
|
||||
}
|
||||
}, [orderDetail])
|
||||
|
||||
//刷新页面
|
||||
const refresh = useCallback(() => {
|
||||
alert.loading('刷新中')
|
||||
getSaleOrderPreView()
|
||||
}, [orderDetail])
|
||||
|
||||
//退款申请
|
||||
const [refundShow, setRefundShow] = useState(false)
|
||||
const applyRefundClose = useCallback(() => {
|
||||
setRefundShow(false)
|
||||
}, [])
|
||||
const applyRefundSuccess = useCallback(() => {
|
||||
getSaleOrderPreView()
|
||||
}, [])
|
||||
|
||||
//查看物流
|
||||
const getLogistics = useCallback(() => {
|
||||
if (orderDetail?.delivery_appendix_url) {
|
||||
const list = orderDetail?.delivery_appendix_url?.map((item) => {
|
||||
return formatImgUrl(item, '!w800')
|
||||
})
|
||||
if (list?.length <= 0) return alert.error('暂无图片')
|
||||
Taro.previewImage({
|
||||
current: list[0], // 当前显示
|
||||
urls: list, // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
}, [orderDetail])
|
||||
|
||||
//添加购物车
|
||||
const [showCart, setShowCart] = useState(false)
|
||||
const { fetchData: addFetchData } = AddShoppingCartApi()
|
||||
const addShopCart = async () => {
|
||||
let color_list: { product_color_id: number; roll?: number; length?: number }[] = []
|
||||
orderDetail?.product_list.map((pitem) => {
|
||||
pitem?.product_colors.map((citem) => {
|
||||
if (orderDetail?.sale_mode == 0) {
|
||||
return color_list.push({ product_color_id: citem.id, roll: citem.roll })
|
||||
} else {
|
||||
return color_list.push({ product_color_id: citem.id, length: citem.length })
|
||||
}
|
||||
})
|
||||
})
|
||||
const state = await addFetchData({
|
||||
sale_mode: orderDetail?.sale_mode,
|
||||
color_list,
|
||||
})
|
||||
if (state.success) {
|
||||
Taro.showToast({
|
||||
title: '已加入购物车',
|
||||
})
|
||||
setShowCart(true)
|
||||
} else {
|
||||
Taro.showToast({
|
||||
icon: 'none',
|
||||
title: state.msg,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//显示售后记录
|
||||
const [returnRecordShow, setReturnRecordShow] = useState(false)
|
||||
const onReturnRecordShow = useCallback(() => {
|
||||
setReturnRecordShow(true)
|
||||
}, [])
|
||||
const closeReturnRecord = useCallback(() => {
|
||||
setReturnRecordShow(false)
|
||||
}, [])
|
||||
|
||||
//显示
|
||||
const [showScanPayCheck, setShowScanPayCheck] = useState(false)
|
||||
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
|
||||
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />
|
||||
)}
|
||||
<View>
|
||||
<AddressInfoDetail
|
||||
orderInfo={defaultAddress}
|
||||
onLogistics={getLogistics}
|
||||
onSelect={getAddress}
|
||||
onChangeShipmentMode={getShipmentMode}
|
||||
ref={addressRef}
|
||||
/>
|
||||
</View>
|
||||
<KindList order={formatPreViewOrderMemo} />
|
||||
<View className={styles.order_info}>
|
||||
<View className={styles.order_info_title}>订单信息</View>
|
||||
<SearchInput showBorder={false} title='单号' height='50rpx'>
|
||||
<View className={styles.order_num}>
|
||||
<Text>{orderDetail?.order_no}</Text>
|
||||
<View className={styles.order_num_btn} onClick={() => clipboardData()}>
|
||||
复制
|
||||
</View>
|
||||
</View>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='下单时间' height='50rpx'>
|
||||
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
|
||||
</SearchInput>
|
||||
{orderDetail?.payment_time && (
|
||||
<SearchInput showBorder={false} title='付款时间' height='50rpx'>
|
||||
<Text>{formatDateTime(orderDetail?.payment_time)}</Text>
|
||||
</SearchInput>
|
||||
)}
|
||||
</View>
|
||||
<View className={styles.order_desc} onClick={descOpen}>
|
||||
<View className={styles.order_desc_con}>订单备注</View>
|
||||
{(orderRemark && <View className={styles.order_desc_text}>{orderDetail?.remark}</View>) || (
|
||||
<View className={styles.order_desc_text_hint}>填写备注</View>
|
||||
)}
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
|
||||
</View>
|
||||
{orderDetail?.status != SaleOrderStatusCancel.value && (
|
||||
<View className={styles.submit_order_con}>
|
||||
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick} />
|
||||
<View className='common_safe_area_y'></View>
|
||||
</View>
|
||||
)}
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
|
||||
<Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark} />
|
||||
</Popup>
|
||||
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
|
||||
<ScanPayCheck show={showScanPayCheck} onClose={() => setShowScanPayCheck(false)} orderInfo={orderDetail} />
|
||||
<ApplyRefund show={refundShow} onSuccess={applyRefundSuccess} onClose={applyRefundClose} orderId={orderDetail?.id} />
|
||||
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} />
|
||||
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id} />
|
||||
<View className='common_safe_area_y'></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
.order_item{
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
.header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.order_con {
|
||||
padding-left: 15px;
|
||||
width: 100%;
|
||||
.name {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: $font_size;
|
||||
}
|
||||
.order_num {
|
||||
font-size: $font_size_medium;
|
||||
padding-right: 30px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.order_num_con{
|
||||
flex:1;
|
||||
}
|
||||
.miconfont {
|
||||
font-size: 20px;
|
||||
}
|
||||
.order_no{
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.product_status{
|
||||
font-size: $font_size;
|
||||
color: $color_main;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
}
|
||||
.product_con{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.product_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 35px 0;
|
||||
.product_tag{
|
||||
background-color: #CDE5FF;
|
||||
font-size: $font_size_min;
|
||||
padding: 5px 10px;
|
||||
color: $color_main;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.product_name{
|
||||
flex:1;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
padding: 0 20px;
|
||||
@include common_ellipsis()
|
||||
}
|
||||
|
||||
.tag{
|
||||
font-size: $font_size_min;
|
||||
padding: 5px 15px;
|
||||
background-color: $color_main;
|
||||
color: #fff;
|
||||
border-radius: 0px 20px 0px 20px;
|
||||
position:relative;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.product_list{
|
||||
display: flex;
|
||||
.image{
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
}
|
||||
.color_num {
|
||||
background: rgba(0,0,0, 0.5);
|
||||
border-radius: 50px 0px 20px 0px;
|
||||
font-size: $font_size_min;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right:0;
|
||||
bottom:0;
|
||||
padding: 5px 10px 5px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.color_list{
|
||||
flex:1;
|
||||
padding-left: 30px;
|
||||
.color_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_three;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.color_title{
|
||||
font-weight: 700;
|
||||
font-size: $font_size;
|
||||
color: #000;
|
||||
}
|
||||
.color_more{
|
||||
color: $color_font_three;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.color_count_num{
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_two;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 10px;
|
||||
padding: 10px 22px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.price{
|
||||
font-size: 30px;
|
||||
color: #007AFF;
|
||||
text{
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
import { goLink } from '@/common/common'
|
||||
import { ORDER_STATUS } from '@/common/enum'
|
||||
import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
import OrderBtns from '@/components/orderBtns'
|
||||
import Payment from '@/pages/order/components/payment'
|
||||
import { useSelector } from '@/reducers/hooks'
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import { useRouter } from '@tarojs/taro'
|
||||
import classnames from 'classnames'
|
||||
import { memo, useCallback, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Param = {
|
||||
value: {
|
||||
order_no: string
|
||||
sale_mode: number
|
||||
sale_mode_name: string
|
||||
status_name: string
|
||||
shipment_mode: number
|
||||
shipment_mode_name: string
|
||||
product_list: any[]
|
||||
total_fabrics: number
|
||||
total_colors: number
|
||||
total_number: number
|
||||
status: 0
|
||||
id: number
|
||||
lab: any
|
||||
rgb: any
|
||||
texture_url: string
|
||||
payment_method: number //支付方式
|
||||
actual_amount: number //实付金额
|
||||
wait_pay_amount: number //待付金额
|
||||
should_collect_order_id: number //应付单id
|
||||
av_return_roll: number
|
||||
total_sale_price: number
|
||||
estimate_amount: number
|
||||
is_return: true | false
|
||||
}
|
||||
onClickBtn?: (val: { status: number; orderInfo: Param['value'] }) => void
|
||||
}
|
||||
export default memo(({ value, onClickBtn }: Param) => {
|
||||
const userInfo = useSelector((state) => state.userInfo)
|
||||
//对应数量
|
||||
const formatCount = useCallback(
|
||||
(item, sale_mode) => {
|
||||
return sale_mode == 0 ? item.roll : Number(item.length / 100)
|
||||
},
|
||||
[value],
|
||||
)
|
||||
//对应单价
|
||||
const standardPrice = useCallback(
|
||||
(price, sale_mode) => {
|
||||
return '¥' + formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1 ? 'm' : 'kg')
|
||||
},
|
||||
[value],
|
||||
)
|
||||
|
||||
//点击订单按钮
|
||||
const orderBtnsClick = useCallback(
|
||||
(status) => {
|
||||
onClickBtn?.({ status, orderInfo: value })
|
||||
},
|
||||
[value],
|
||||
)
|
||||
|
||||
let { SaleOrderStatusTaking, SaleOrderStatusWaitingReceipt } = ORDER_STATUS
|
||||
|
||||
//订单状态
|
||||
// const orderStatus = useCallback((item) => {
|
||||
// return item.status == SaleOrderStatusTaking.value?'装车中':item.status_name
|
||||
// }, [value])
|
||||
|
||||
//按钮所需数据
|
||||
const orderInfo = useMemo(() => {
|
||||
return {
|
||||
orderId: value?.id,
|
||||
...value,
|
||||
}
|
||||
}, [value])
|
||||
|
||||
//总条数
|
||||
const numText = useMemo(() => {
|
||||
let total_number_new = value?.sale_mode == 0 ? value?.total_number : value?.total_number / 100
|
||||
return `${value?.total_fabrics} 种面料，${value?.total_colors} 种颜色，共 ${total_number_new}${value?.sale_mode == 0 ? ' 条' : ' 米'}`
|
||||
}, [value])
|
||||
|
||||
//订单状态
|
||||
const orderStatus = useMemo(() => {
|
||||
if (value.status == SaleOrderStatusWaitingReceipt.value && value.shipment_mode == 1) {
|
||||
return '待提货'
|
||||
} else {
|
||||
return value?.status_name
|
||||
}
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<View className={styles.order_item}>
|
||||
<View className={styles.header} onClick={() => goLink('/pages/order/index', { id: value?.id })}>
|
||||
<View className={styles.user}>
|
||||
<Image src={`${userInfo?.adminUserInfo?.avatar_url}`} />
|
||||
</View>
|
||||
<View className={styles.order_con}>
|
||||
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
|
||||
<View className={styles.order_num}>
|
||||
<View className={styles.order_num_con}>
|
||||
<Text className={styles.order_no}>订单号：{value?.order_no}</Text>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
|
||||
</View>
|
||||
<View className={styles.product_status}>{orderStatus}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.product_con} onClick={() => goLink('/pages/order/index', { id: value?.id })}>
|
||||
<View className={styles.product_title}>
|
||||
<View className={styles.product_tag}>{value?.sale_mode_name}</View>
|
||||
<View className={styles.product_name}>{formatHashTag(value?.product_list?.[0].code, value?.product_list?.[0].name)}</View>
|
||||
<View className={styles.tag}>{value?.shipment_mode_name}</View>
|
||||
</View>
|
||||
<View className={styles.product_list}>
|
||||
<View className={styles.image}>
|
||||
<LabAndImg
|
||||
value={{
|
||||
lab: value?.product_list?.[0].product_colors?.[0].lab,
|
||||
rgb: value?.product_list?.[0].product_colors?.[0].rgb,
|
||||
texture_url: value?.product_list?.[0].product_colors?.[0].texture_url,
|
||||
}}
|
||||
/>
|
||||
<View className={styles.color_num}>{value?.product_list?.[0].product_colors?.[0].code}</View>
|
||||
</View>
|
||||
<View className={styles.color_list}>
|
||||
{value?.product_list?.[0].product_colors.map((itemColor, index) => {
|
||||
return (
|
||||
index <= 1 && (
|
||||
<View className={styles.color_item}>
|
||||
<View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
|
||||
<View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
|
||||
<View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode) + (value.sale_mode == 0 ? ' 条' : ' 米')}</View>
|
||||
</View>
|
||||
)
|
||||
)
|
||||
})}
|
||||
{value?.product_list?.[0].length > 2 && (
|
||||
<View className={styles.color_item}>
|
||||
<View className={styles.color_more}>……</View>
|
||||
<View className={styles.color_more}>……</View>
|
||||
<View className={styles.color_more}>……</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.color_count_num}>
|
||||
<Text>{numText}</Text>
|
||||
<Text className={styles.price}>
|
||||
<Text>¥</Text>
|
||||
{value.total_sale_price ? formatPriceDiv(value.total_sale_price, 100, true) : formatPriceDiv(value.estimate_amount, 100, true)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick} showStatus='list' />
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,18 +0,0 @@
|
||||
.order_status_list{
|
||||
font-size: $font_size;
|
||||
color: #9E9E9E;
|
||||
margin-top: 20px;
|
||||
.order_status_item{
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.selected{
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
border-bottom: 4px solid #707070;
|
||||
}
|
||||
.order_list_scroll{
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
|
||||
type Param = {
|
||||
list: { id: number; name: string }[]
|
||||
defaultId?: number | null
|
||||
onSelect?: (val: number) => void
|
||||
}
|
||||
export default memo(({ list = [], defaultId = null, onSelect }: Param) => {
|
||||
const [selectInfo, setSelectInfo] = useState({
|
||||
selected: -1, //当前选中的id
|
||||
tabId: '', //需要滚动到的id
|
||||
})
|
||||
useEffect(() => {
|
||||
if (defaultId) {
|
||||
console.log('defaultId:::', defaultId)
|
||||
const index = list?.findIndex((item) => {
|
||||
return item.id == defaultId
|
||||
})
|
||||
if (index !== -1) {
|
||||
const num = index > 0 ? index - 1 : 0
|
||||
setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
|
||||
}
|
||||
}
|
||||
setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
|
||||
}, [defaultId])
|
||||
const clickEvent = ({ item, index }: { item: any; index: number }) => {
|
||||
const num = index > 0 ? index - 1 : 0
|
||||
setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
|
||||
onSelect?.(item.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.order_status_list}>
|
||||
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
|
||||
<View className={styles.order_list_scroll}>
|
||||
{list.map((item, index) => {
|
||||
return (
|
||||
<View
|
||||
key={item.id}
|
||||
id={`tabs_${item.id}`}
|
||||
onClick={() => clickEvent({ item, index })}
|
||||
className={classnames(styles.order_status_item, selectInfo.selected == item.id && styles.selected)}>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
navigationBarTitleText: '订单列表',
|
||||
enableShareAppMessage: true,
|
||||
enablePullDownRefresh: true,
|
||||
backgroundTextStyle: 'dark',
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
.order_list_main {
|
||||
height: 100vh;
|
||||
background-color: $color_bg_one;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
padding: 0 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
|
||||
border-bottom: 2px solid #e2e2e2;
|
||||
height: 160px;
|
||||
.order_status_list {
|
||||
font-size: $font_size;
|
||||
color: #9e9e9e;
|
||||
margin-top: 20px;
|
||||
.order_status_item {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.selected {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
border-bottom: 4px solid #707070;
|
||||
}
|
||||
.order_list_scroll {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_list {
|
||||
height: calc(100vh - 160px);
|
||||
.order_item_con {
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,228 +0,0 @@
|
||||
import Search from '@/components/search'
|
||||
import useLogin from '@/use/useLogin'
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Order from './components/order'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { GetOrderListApi, OrderStatusListApi } from '@/api/order'
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
import OrderStatusList from './components/orderStatusList'
|
||||
import { AddShoppingCartApi } from '@/api/shopCart'
|
||||
import ShopCart from '@/components/shopCart'
|
||||
import { alert } from '@/common/common'
|
||||
import { useRouter } from '@tarojs/runtime'
|
||||
import Payment from '../components/payment'
|
||||
import ApplyRefund from '../components/applyRefund'
|
||||
import ReturnRecord from '../components/returnRecord'
|
||||
|
||||
export default () => {
|
||||
const { checkLogin } = useLogin()
|
||||
useDidShow(async () => {
|
||||
await checkLogin()
|
||||
})
|
||||
|
||||
//传递过来的参数
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
if (router?.params.status != undefined && router?.params.status !== '') {
|
||||
setSearchField((e) => ({ ...e, status: router?.params.status as number }))
|
||||
} else {
|
||||
setSearchField((e) => ({ ...e, status: -1 }))
|
||||
}
|
||||
}, [router])
|
||||
|
||||
//搜索参数
|
||||
const [searchField, setSearchField] = useState<{ status: number | null; page: number; size: number; name: string }>({
|
||||
status: null,
|
||||
page: 1,
|
||||
size: 10,
|
||||
name: '',
|
||||
})
|
||||
|
||||
//获取订单状态
|
||||
const { fetchData: orderStatusListFetchData } = OrderStatusListApi()
|
||||
const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
|
||||
const getOrderStatusList = async () => {
|
||||
let res = await orderStatusListFetchData()
|
||||
setStatusList((e) => [...e, ...res.data.list])
|
||||
}
|
||||
useEffect(() => {
|
||||
getOrderStatusList()
|
||||
}, [])
|
||||
|
||||
//获取订单列表
|
||||
const { fetchData: listFetchData, state: orderState } = GetOrderListApi()
|
||||
const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
|
||||
const getOrderList = async () => {
|
||||
let res = await listFetchData(getFilterData(searchField))
|
||||
setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
|
||||
setRefresherTriggeredStatus(() => false)
|
||||
}
|
||||
|
||||
//监听筛选条件变化
|
||||
useEffect(() => {
|
||||
if (searchField.status != null) getOrderList()
|
||||
}, [searchField])
|
||||
|
||||
//上拉加载数据
|
||||
const pageNum = useRef({ size: searchField.size, page: searchField.page })
|
||||
const getScrolltolower = useCallback(() => {
|
||||
if (orderData.list.length < orderData.total) {
|
||||
pageNum.current.page++
|
||||
const size = pageNum.current.size * pageNum.current.page
|
||||
setSearchField({ ...searchField, size })
|
||||
}
|
||||
}, [orderData])
|
||||
|
||||
//状态改变
|
||||
const changeStatus = useCallback((e) => {
|
||||
pageNum.current.page = 1
|
||||
setSearchField((value) => ({ ...value, status: e, size: 10 }))
|
||||
setOrderData(() => ({ list: [], total: 0 }))
|
||||
}, [])
|
||||
|
||||
//数据加载状态
|
||||
const statusMore = useMemo(() => {
|
||||
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
|
||||
}, [orderData, orderState])
|
||||
|
||||
//输入了搜索关键字
|
||||
const getSearchData = useCallback((e) => {
|
||||
pageNum.current.page = 1
|
||||
setOrderData(() => ({ list: [], total: 0 }))
|
||||
setSearchField((val) => ({ ...val, name: e, size: 10 }))
|
||||
}, [])
|
||||
|
||||
//列表下拉刷新
|
||||
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
||||
const getRefresherRefresh = async () => {
|
||||
pageNum.current.size = 1
|
||||
setRefresherTriggeredStatus(true)
|
||||
setSearchField((val) => ({ ...val, size: 10 }))
|
||||
}
|
||||
|
||||
//监听点击的按钮
|
||||
const clickOrderBtn = useCallback(
|
||||
({ status, orderInfo }) => {
|
||||
setCallBackPayOrderInfo(() => orderInfo)
|
||||
if (status == 1 || status == 6 || status == 8) {
|
||||
getOrderList()
|
||||
} else if (status == 2) {
|
||||
//去支付
|
||||
toPay()
|
||||
} else if (status == 3) {
|
||||
//申请退款
|
||||
if (!orderInfo?.av_return_roll) return alert.none('该订单已申请过退款')
|
||||
setRefundShow(true)
|
||||
} else if (status == 7) {
|
||||
//购买
|
||||
addShopCart(orderInfo)
|
||||
} else if (status == 9) {
|
||||
onReturnRecordShow()
|
||||
} else if (status == 10) {
|
||||
setShowScanPayCheck(true)
|
||||
}
|
||||
},
|
||||
[orderData],
|
||||
)
|
||||
|
||||
const [callBackOrderInfo, setCallBackPayOrderInfo] = useState<any>()
|
||||
|
||||
//去付款
|
||||
const [payMentShow, setPayMentShow] = useState(false)
|
||||
const toPay = () => {
|
||||
setPayMentShow(true)
|
||||
}
|
||||
//关闭支付弹窗
|
||||
const closePayShow = useCallback(() => {
|
||||
setPayMentShow(() => false)
|
||||
}, [])
|
||||
//支付成功
|
||||
const onPaySuccess = useCallback(() => {
|
||||
getOrderList()
|
||||
closePayShow()
|
||||
}, [])
|
||||
|
||||
//添加购物车
|
||||
const [showCart, setShowCart] = useState(false)
|
||||
const { fetchData: addFetchData } = AddShoppingCartApi()
|
||||
const addShopCart = async (item) => {
|
||||
let color_list: { product_color_id: number; roll?: number; length?: number }[] = []
|
||||
item?.product_list.map((pitem) => {
|
||||
pitem?.product_colors.map((citem) => {
|
||||
if (item?.sale_mode == 0) {
|
||||
return color_list.push({ product_color_id: citem.id, roll: citem.roll })
|
||||
} else {
|
||||
return color_list.push({ product_color_id: citem.id, length: citem.length })
|
||||
}
|
||||
})
|
||||
})
|
||||
const state = await addFetchData({
|
||||
sale_mode: item?.sale_mode,
|
||||
color_list,
|
||||
})
|
||||
if (state.success) {
|
||||
Taro.showToast({
|
||||
title: '已加入购物车',
|
||||
})
|
||||
setShowCart(true)
|
||||
} else {
|
||||
Taro.showToast({
|
||||
icon: 'none',
|
||||
title: state.msg,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//申请退款
|
||||
const [refundShow, setRefundShow] = useState(false)
|
||||
const applyRefundClose = useCallback(() => {
|
||||
setRefundShow(false)
|
||||
}, [])
|
||||
const applyRefundSuccess = useCallback(() => {
|
||||
getOrderList()
|
||||
}, [])
|
||||
|
||||
//显示售后记录
|
||||
const [returnRecordShow, setReturnRecordShow] = useState(false)
|
||||
const onReturnRecordShow = useCallback(() => {
|
||||
setReturnRecordShow(true)
|
||||
}, [])
|
||||
const closeReturnRecord = useCallback(() => {
|
||||
setReturnRecordShow(false)
|
||||
}, [])
|
||||
|
||||
//显示
|
||||
const [showScanPayCheck, setShowScanPayCheck] = useState(false)
|
||||
|
||||
return (
|
||||
<View className={styles.order_list_main}>
|
||||
<View className={styles.title}>
|
||||
<Search placeIcon='out' placeholder='搜索商品/名称/颜色/订单号' showBtn={true} changeOnSearch={getSearchData} debounceTime={300} />
|
||||
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={router?.params.status as number} />
|
||||
</View>
|
||||
<View className={styles.order_list}>
|
||||
<InfiniteScroll
|
||||
statusMore={statusMore}
|
||||
selfonScrollToLower={getScrolltolower}
|
||||
refresherEnabled={true}
|
||||
refresherTriggered={refresherTriggeredStatus}
|
||||
selfOnRefresherRefresh={getRefresherRefresh}>
|
||||
{orderData?.list?.map((item) => {
|
||||
return (
|
||||
<View key={item.id} className={styles.order_item_con}>
|
||||
<Order value={item} onClickBtn={clickOrderBtn} />
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
<ApplyRefund show={refundShow} onClose={applyRefundClose} onSuccess={applyRefundSuccess} orderId={callBackOrderInfo?.id} />
|
||||
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} default_sale_mode={callBackOrderInfo?.sale_mode} />
|
||||
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id} />
|
||||
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user