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

✨ feat:售后模块

Browse Source
This commit is contained in:
Haiyi 2022-09-19 18:01:27 +08:00
parent 784510b8cd
commit 96a64f4892
14 changed files with 1164 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -85,6 +85,13 @@
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/refundPage/index",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

23
src/api/refound.ts Normal file
View File

@ -0,0 +1,23 @@
import { useRequest } from "@/use/useHttp"
//售后订单列表
export const mpreturnApplyOrderlist = () => {
return useRequest({
url: `/v1/mp/returnApplyOrder/list`,
method: "get",
})
}
//售后状态枚举
export const mpenumreturnStage = () => {
return useRequest({
url: `/v1/mp/enum/returnStage`,
method: "get",
})
}
//退款类型枚举
export const mpenumreturnType = () => {
return useRequest({
url: `/v1/mp/enum/returnType`,
method: "get",
})
}

6
src/app.config.ts
View File

@ -94,5 +94,11 @@ export default defineAppConfig({
"index"
]
},
{
root: "pages/refundPage",
pages: [
"index"
]
}
],
})

4
src/pages/index/index.tsx
View File

@ -13,6 +13,7 @@ import { mpproductcolorlist, mpshoppingCartproductColorlist } from "@/api/order"
import { dataLoadingStatus } from '@/common/util'
import Taro, { useDidShow } from '@tarojs/taro'
import { getFilterData } from '@/common/util'
import userInfo from '@/reducers/userInfo'
export default () => {
useEffect(() => {
categoryList()
@ -75,11 +76,12 @@ export default () => {
setRefresherTriggeredStatus(true)
}
const onj = JSON.parse(Taro.getStorageSync('userInfo'))
const [search, setSearchObj] = useState({
modeId: 0,
goodsId: null,
code_or_name: '',
physical_warehouse: 1
physical_warehouse: onj.physical_warehouse
})
//选择的类型

219
src/pages/refundPage/components/itemList/index.module.scss Normal file
View File

@ -0,0 +1,219 @@
.itemBox {
margin-top: 38px;
overflow: hidden;
width: 702px;
height: 560px;
background: #FFFFFF;
border-radius: 16px;
margin-left: 24px;
.topItem {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
.orderNo {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-left: 32px;
}
.status {
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #0D7CFF;
}
}
.pussName {
margin-left: 32px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.line {
margin-left: 32px;
width: 638px;
height: 1px;
background: #000000;
opacity: 0.1;
margin-top: 16px;
margin-bottom: 24px;
}
.contBox {
width: 638px;
margin-left: 32px;
display: flex;
justify-content: space-between;
.leftCont {
width: 134px;
height: 134px;
// background: #000000;
border-radius: 8px;
position: relative;
.leftContNums {
width: 134px;
height: 39px;
background: #000000;
border-radius: 0px 0px 8px 8px;
opacity: 0.5;
position: absolute;
bottom: 0;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 39px;
}
}
.rightCont {
margin-left: 24px;
.rightTop {
display: flex;
align-items: center;
justify-content: space-between;
width: 480px;
margin-bottom: 32px;
.productBox {
display: flex;
align-items: center;
.productName {
width: 285px;
height: 34px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.productMode {
width: 60px;
height: 28px;
background: #337FFF;
border-radius: 8px;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 28px;
}
}
.shipMode {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.colorsBox {
display: flex;
align-items: center;
width: 480px;
margin-bottom: 8px;
.colorNameOne {
flex: 1;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
width: 133px;
height: 30px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.colorName {
flex: 1;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
}
.colorNameTwo {
flex: 1;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
text-align: right;
}
}
}
}
.lineOne {
width: 638px;
height: 1px;
background: #000000;
opacity: 0.1;
margin-left: 32px;
margin-top: 24px;
}
.bottomMsg {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
.msgLeft {
margin-left: 32px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.msgRight {
margin-right: 32px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.msgRightOne {
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F64861;
}
}
.bottomBox {
margin-top: 40px;
}
}

104
src/pages/refundPage/components/itemList/index.tsx Normal file
View File

@ -0,0 +1,104 @@
import { ScrollView, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
// import BottomBtns from '@/components/BottomBtns'
import { formatPriceDiv } from '@/common/format'
import Taro from '@tarojs/taro'
interface propsObj {
obj: any,
cancle?: (arg: any, obj: any) => void,
nextBuy?: (arg: any, obj: any) => void,
toPay?: (arg: any, obj: any) => void
}
export default memo((props: propsObj) => {
const navTo = (e) => {
Taro.navigateTo({
url: '/pages/orderDetails/index?id=' + props?.obj?.id
})
}
return (
<View className={styles.itemBox} onClick={(e) => navTo(e)}>
<View className={styles.topItem}>
<View className={styles.orderNo}>单号：{props?.obj?.order_no}</View>
<View className={styles.status}>{props?.obj?.stage_name}</View>
</View>
<View className={styles.pussName}>{props?.obj?.purchaser_name}</View>
<View className={styles.line}></View>
<View className={styles.contBox}>
<View className={styles.leftCont} style={{ backgroundColor: `rgb(${props?.obj?.product_list[0]?.product_colors[0]?.rgb?.r} ${props?.obj?.product_list[0]?.product_colors[0]?.rgb?.g} ${props?.obj?.product_list[0]?.product_colors[0]?.rgb?.b})` }}>
<View className={styles.leftContNums}>颜色 ({props?.obj?.total_colors})</View>
</View>
<View className={styles.rightCont}>
<View className={styles.rightTop}>
<View className={styles.productBox}>
<View className={styles.productName}>{props?.obj?.product_list[0]?.code} {props?.obj?.product_list[0]?.name}</View>
<View className={styles.productMode}>{props?.obj?.sale_mode === 0 ? '大货' : props?.obj?.sale_mode === 1 ? '剪版' : '散剪'}</View>
</View>
<View className={styles.shipMode}>{props?.obj?.shipment_mode_name}</View>
</View>
<View className={styles.colorsBox}>
<View className={styles.colorNameOne}>{props?.obj?.product_list[0]?.product_colors[0]?.code} {props?.obj?.product_list[0]?.product_colors[0]?.name}</View>
<View className={styles.colorName}>x{
props?.obj?.product_list && props?.obj.sale_mode === 0
? (props?.obj?.product_list && props?.obj.stage == 0) ||
props?.obj.stage == 1 ||
props?.obj.stage == 2
? props?.obj?.product_list[0]?.product_colors[0]?.roll
: props?.obj.stage == 5 || props?.obj.stage == 6 || props?.obj.stage == 3
? props?.obj?.product_list[0]?.product_colors[0]?.return_roll
: props?.obj?.product_list[0]?.product_colors[0]?.roll
: props?.obj?.product_list &&
props?.obj?.product_list[0]?.product_colors[0]?.length / 100
} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
<View className={styles.colorNameTwo}>¥ {props?.obj?.product_list[0]?.product_colors[0]?.sale_price / 100}/kg</View>
</View>
{
props?.obj?.product_list[0]?.product_colors?.length > 1 && <>
<View className={styles.colorsBox}>
<View className={styles.colorNameOne}>{props?.obj?.product_list[0]?.product_colors[1]?.code} {props?.obj?.product_list[0]?.product_colors[1]?.name}</View>
<View className={styles.colorName}>x{
props?.obj?.product_list && props?.obj.sale_mode === 0
? (props?.obj?.product_list && props?.obj.stage == 0) ||
props?.obj.stage == 1 ||
props?.obj.stage == 2
? props?.obj?.product_list[0]?.product_colors[1]?.roll
: props?.obj.stage == 5 || props?.obj.stage == 6 || props?.obj.stage == 3
? props?.obj?.product_list[0]?.product_colors[1]?.return_roll
: props?.obj?.product_list[0]?.product_colors[1]?.roll
: props?.obj?.product_list &&
props?.obj?.product_list[0]?.product_colors[1]?.length / 100
} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
<View className={styles.colorNameTwo}>¥ {props?.obj?.product_list[0]?.product_colors[1]?.sale_price / 100}/kg</View>
</View>
</>
}
</View>
</View>
<View className={styles.lineOne}></View>
<View className={styles.bottomMsg}>
<View className={styles.msgLeft}>布料信息：</View>
<View className={styles.msgRight}>{props?.obj?.total_fabrics} 种面料，{props?.obj?.total_colors} 种颜色，共 {props?.obj?.sale_mode === 0 ? props?.obj?.total_number : props?.obj?.total_number / 100} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
</View>
<View className={styles.bottomMsg}>
<View className={styles.msgLeft}>退款金额：</View>
{
(props?.obj.stage == 5 || props?.obj.stage == 6 || props?.obj.stage == 3) && <View className={styles.msgRightOne}>¥{formatPriceDiv(props?.obj?.refundable_amount)}</View>
}
</View>
{/* <View className={styles.bottomBox}>
<BottomBtns
obj={props?.obj}
cancle={(e) => props?.cancle?.(e, props?.obj)}
nextBuy={(e) => props?.nextBuy?.(e, props?.obj)}
toPay={(e) => props?.toPay?.(e, props?.obj)}
></BottomBtns>
</View> */}
</View>
)
})

42
src/pages/refundPage/components/tabs/index.module.scss Normal file
View File

@ -0,0 +1,42 @@
.flexBox {
width: 100%;
height: 102px;
background: #ffffff;
display: flex;
position: sticky;
top: 80px;
.itemBox {
position: relative;
flex: 1;
min-width: 138px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 102px;
.itemFont {
font-size: 28px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
color: #000000;
}
.activeItems {
font-size: 28px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
color: #337FFF;
}
.borderBox {
position: absolute;
bottom: 0;
width: 138px;
height: 6px;
background: #337FFF;
border-radius: 4px;
}
}
}

32
src/pages/refundPage/components/tabs/index.tsx Normal file
View File

@ -0,0 +1,32 @@
import { View, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
interface Props {
list: any[],
handChose?: (any) => void
}
export default memo((props: Props) => {
const { list = [], handChose } = props
return (
<View className={styles.flexBox}>
{
list.map((item, index) => {
return (
<View className={styles.itemBox} key={index} onClick={() => handChose?.(item)}>
<View
className={classnames(item.showBorder ? styles.activeItems : styles.itemFont)}
>{item?.name}</View >
{
item.showBorder && <View className={styles.borderBox} ></View>
}
</View >
)
})
}
</View >
)
})

64
src/pages/refundPage/components/timePicker/index.scss Normal file
View File

@ -0,0 +1,64 @@
.loins-calendar {
background-color: #ffffff;
&-tabbar {
padding: 43px 100px 30px 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
&-title {
font-size: 36px;
font-family: Helvetica;
color: #333333;
line-height: 48px;
}
.title-c {
display: inline-block;
width: calc(100% / 7);
text-align: center;
font-size: 30px;
font-weight: 400;
color: #606060;
line-height: 40px;
margin-bottom: 25px;
}
width: 662rpx;
margin-left: 44rpx;
.day-content {
text-align: center;
.day-c {
display: inline-block;
width: calc(100% / 7);
text-align: center;
margin-bottom: 30px;
.day {
width: 80px;
height: 80px;
// background: #337FFF;
// border-radius: 16px;
line-height: 80px;
font-size: 32px;
font-weight: 500;
color: #000;
text-align: center;
}
.desc {
height: 28px;
font-size: 20px;
font-weight: 400;
color: #202020;
text-align: center;
}
}
}
}

146
src/pages/refundPage/components/timePicker/index.tsx Normal file
View File

@ -0,0 +1,146 @@
import Popup from '@/components/popup'
import React, { useState, memo, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
// import { AtIcon } from 'taro-ui'
import './index.scss'
interface Props {
showTime: true | false,
closePopup?: () => void
}
export default memo((props: Props) => {
const {
showTime = false,
closePopup
} = props
//每月多少天
let MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六'];
const LINES = [1, 2, 3, 4, 5, 6];
const [year, setLoinsYear] = useState(0);
let nowTime = new Date(Date.parse(new Date().toString()));
const [month, seLoinstMonth] = useState(nowTime.getMonth());
const [currentDate, setcurrentDate] = useState(new Date());
const [tag, setTag] = useState(false);
//获取当前月份
const getMonth = (date: Date): number => {
return date.getMonth();
}
//获取当前年份
const getFullYear = (date: Date): number => {
// console.log(date.getFullYear())
return date.getFullYear();
}
const getCurrentMonthDays = (month: number, year: number): number => {
let _year = year + currentDate.getFullYear();
if (_year % 100 != 0 && _year % 4 == 0 || _year % 400 == 0) {
MONTH_DAYS = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}
return MONTH_DAYS[month]
}
//当前月第一天是周几
const getDateByYearMonth = (year: number, month: number, day: number = 1): Date => {
var date = new Date()
date.setFullYear(year)
date.setMonth(month, day)
return date
}
const getWeeksByFirstDay = (year: number, month: number): number => {
var date = getDateByYearMonth(year, month)
return date.getDay()
}
const getDayText = (line: number, weekIndex: number, weekDay: number, monthDays: number): any => {
var number = line * 7 + weekIndex - weekDay + 1
if (number <= 0 || number > monthDays) {
return <View className="day-c" key={weekIndex}>&nbsp;</View>
}
return <View className="day-c" key={weekIndex}>
<View className="day" onClick={() => clickItem(line)}>{number}</View>
</View>
}
const setCurrentYearMonth = (date) => {
var month = getMonth(date)
var year = getFullYear(date)
setLoinsYear(year);
seLoinstMonth(month)
setTag(false)
}
const monthChange = (monthChanged: number) => {
if (tag) {
return;
} else {
setTag(true)
}
var monthAfter = month + monthChanged
var date = getDateByYearMonth(year, monthAfter)
setCurrentYearMonth(date)
}
const formatNumber = (num: number): string => {
var _num = num + 1
return _num < 10 ? `0${_num}` : `${_num}`
}
// let monthDays = getCurrentMonthDays(month);
let weekDay = getWeeksByFirstDay(year, month);
let _startX = 0;
const clickItem = (item) => {
console.log(item, 666)
}
return (
<Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
<View className="loins-calendar"
onTouchEnd={(val) => {
if (_startX > val.changedTouches[0]['clientX'] + 30) {
monthChange(1);
}
if (_startX < val.changedTouches[0]['clientX'] - 30) {
monthChange(-1);
}
}} onTouchStart={(val) => {
_startX = val.changedTouches[0]['clientX']
}}
>
<View className="loins-calendar-tabbar">
<View>
{/* <AtIcon value='chevron-left' size='30' color='#297AF8' onClick={() => {
monthChange(-1);
}}>
</AtIcon> */}
</View>
<View className="loins-calendar-title">{year + currentDate.getFullYear()} 年 {formatNumber(month)}月</View>
<View>
{/* <AtIcon value='chevron-right' size='30' color='#297AF8' onClick={() => {
monthChange(1);
}}></AtIcon> */}
</View>
</View>
{
WEEK_NAMES.map((week, key) => {
return <View className="title-c" key={key}>{week}</View>
})
}
{
LINES.map((l, key) => {
return <View key={key} className="day-content" >
{
WEEK_NAMES.map((week, index) => {
return getDayText(key, index, weekDay, getCurrentMonthDays(month, year))
})
}
</View>
})
}
</View>
</Popup>
)
})

5
src/pages/refundPage/index.config.ts Normal file
View File

@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '退款/售后',
// enablePullDownRefresh: true,
// "backgroundTextStyle": "dark"
}

168
src/pages/refundPage/index.module.scss Normal file
View File

@ -0,0 +1,168 @@
.flexBox {
display: flex;
width: 200px;
align-items: center;
justify-content: flex-end;
}
.icon_shaixuan {
color: #0D7CFF;
font-size: 35px;
margin-right: 10px;
}
.activeshaixuan {
color: #000;
font-size: 35px;
margin-right: 10px;
}
.shaixuan {
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.activeshai {
color: #0D7CFF;
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.order_list {
height: calc(100vh - 300px);
background: #f7f7f7;
.bigBpx {
height: 200px;
}
.kongboxTwo {
height: 100px;
}
}
.popupBox {
padding-bottom: env(safe-area-inset-bottom);
.thirdBox {
margin-top: 20px;
padding-left: 48px;
.thirdTopfont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.flexModebox {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
.activemodeBox {
margin-bottom: 16px;
margin-right: 16px;
// width: 152px;
// height: 68px;
padding: 17px 34px 17px 34px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
// line-height: 68px;
border: 1px solid #337FFF;
box-sizing: border-box;
}
.modeBox {
margin-bottom: 16px;
margin-right: 16px;
padding: 17px 34px 17px 34px;
// width: 152px;
// height: 68px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
border: 1px solid #f6f6f6;
text-align: center;
// line-height: 68px;
box-sizing: border-box;
// opacity: 0.4;
}
}
}
.bottomBox {
width: 750px;
height: 160px;
background: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
padding-top: 16px;
justify-content: space-between;
.resetBox {
margin-left: 48px;
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087EFF;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
text-align: center;
line-height: 80px;
}
.button {
margin-right: 32px;
width: 311px;
height: 80px;
background: #68b4ff;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
.activeButton {
margin-right: 32px;
width: 311px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
}
// .areaBox {
// height: calc($customTabBarHeight + env(safe-area-inset-bottom));
// width: 100%;
// }
}

343
src/pages/refundPage/index.tsx Normal file
View File

@ -0,0 +1,343 @@
import { View, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
import Search from '@/components/search'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import styles from "./index.module.scss"
import classnames from "classnames";
import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import Taro, { faceVerifyForPay, useDidShow } from '@tarojs/taro'
import ItemList from './components/itemList'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
import {
mpreturnApplyOrderlist,
mpenumreturnStage,
mpenumreturnType
} from "@/api/refound"
import Tabs from "./components/tabs"
import TimePicker from "./components/timePicker"
export default () => {
//获取订单列表
const { fetchData: listFetchData, state: orderState } = mpreturnApplyOrderlist()
const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const getOrderList = async () => {
let res = await listFetchData({
...searchField
// ...getFilterData(searchField),
// ...getFilterData(searchObj)
})
setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
// setshowPopup(false)
setRefresherTriggeredStatus(() => false)
}
//页码和页数
const [searchField, setSearchField] = useState<
{
status: number | unknown;
page: number;
size: number;
name: string;
sale_mode: number | string;
stage: number | string;
return_type: number | string;
saleStartTime: number | string;
saleEndTime: number | string;
}>({
status: 1,
page: 1,
size: 10,
name: '',
sale_mode: '',
stage: '',
return_type: '',
saleStartTime: '',
saleEndTime: ''
})
const pageNum = useRef({ size: searchField.size, page: searchField.page })
//监听筛选条件变化
useEffect(() => {
getOrderList()
}, [searchField])
//输入了搜索关键字
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 statusMore = useMemo(() => {
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
}, [orderData, orderState])
//上拉加载数据
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 [TarBarList, setTarBarList] = useState<any[]>([{ id: 1, name: '售后申请', showBorder: true }, { id: 2, name: '申请记录', showBorder: false }])
const handChose = (item) => {
if (item.id === searchField.status) return
TarBarList.map(it => {
if (it.id === item.id) {
it.showBorder = true
} else {
it.showBorder = false
}
setTarBarList([...TarBarList])
pageNum.current.page = 1
setOrderData(() => ({ list: [], total: 0 }))
setSearchField((val) => ({ ...val, size: 10, status: item.id }))
})
}
//筛选内容展示
const [showPopup, setshowPopup] = useState(false)
const showSelctPopup = () => {
setshowPopup(true)
}
//关闭筛选内容展示
const closePopup = () => {
setshowPopup(false)
}
//订单类型
const [modeList, setModeList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }])
//选择订单类型
const handCheckMode = (item) => {
modeList.map(it => {
if (it.id === item.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setModeList([...modeList])
setSearchField((e) => ({ ...e, sale_mode: item.id }))
}
useEffect(() => {
getStagelist()
getTypeList()
}, [])
//售后状态
const [stageList, setStageList] = useState<any[]>([])
const { fetchData: stageFetch } = mpenumreturnStage()
const getStagelist = async () => {
const res = await stageFetch()
if (res.data) {
res.data.list.unshift({ id: '', name: '不限', checked: false })
res.data.list.map(it => {
it.checked = false
return it
})
setStageList([...res.data.list])
}
}
//选择售后状态
const handCheckStange = (item) => {
stageList.map(it => {
if (it.id === item.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setStageList([...stageList])
setSearchField((val) => ({ ...val, size: 10, stage: item.id }))
}
//退款类型
const [typeList, setTypeList] = useState<any[]>([])
const { fetchData: typeFetch } = mpenumreturnType()
const getTypeList = async () => {
const res = await typeFetch()
if (res.data) {
res.data.list.unshift({ id: '', name: '不限', checked: false })
res.data.list.map(it => {
it.checked = false
return it
})
setTypeList([...res.data.list])
}
}
//选择售后类型
const handType = (item) => {
typeList.map(it => {
if (it.id === item.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setTypeList([...typeList])
setSearchField((val) => ({ ...val, size: 10, return_type: item.id }))
}
//是否不允许确认筛选
const isDisabled = useMemo(() => {
if (searchField.stage !== '' ||
searchField.sale_mode !== '' ||
searchField.return_type !== '' ||
searchField.sale_mode !== '' ||
searchField.saleStartTime !== '' ||
searchField.saleEndTime !== ''
) {
return false
} else {
return true
}
}, [searchField])
//重置
const handReset = () => {
const arrOne = resetArr(modeList)
setModeList([...arrOne])
const arrTwo = resetArr(typeList)
setTypeList([...arrTwo])
const arrThree = resetArr(stageList)
setStageList([...arrThree])
setSearchField((e) => ({
...e,
sale_mode: '',
stage: '',
return_type: '',
saleStartTime: '',
saleEndTime: ''
}))
}
//数组重置
const resetArr = (arr) => {
arr.map(it => {
it.checked = false
return it
})
return arr
}
//关闭时间筛选
const handClose = () => {
}
return (
<>
<View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
<Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
<View className={styles.flexBox} onClick={() => showSelctPopup()}>
<View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View>
<View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
</View>
</Search>
</View>
<Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
<View className={styles.order_list}>
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrolltolower}
refresherEnabled={true}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list?.map((item, index) => {
return (
<View key={item.id} className={styles.order_item_con}>
<ItemList
obj={item}
key={index}
></ItemList>
</View>
)
})}
</InfiniteScroll>
<View className={styles.kongboxTwo}></View>
</View>
<Popup title={'筛选订单'} show={showPopup} onClose={() => closePopup()}>
<View className={styles.popupBox}>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>售后状态</View>
<View className={styles.flexModebox}>
{
stageList.map((item, index) => {
return (
<View onClick={() => { handCheckStange(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
)
})
}
</View>
</View>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>订单类型</View>
<View className={styles.flexModebox}>
{
modeList.map((item, index) => {
return (
<View onClick={() => { handCheckMode(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
)
})
}
</View>
</View>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>退款类型</View>
<View className={styles.flexModebox}>
{
typeList.map((item, index) => {
return (
<View onClick={() => { handType(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
)
})
}
</View>
</View>
<View>{isDisabled}</View>
<View style={{ height: '160rpx' }}></View>
<View className={styles.bottomBox}>
<Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
<Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => { setshowPopup?.(false) }}> 确认</Button >
</View>
{/* <View className={styles.areaBox}></View> */}
</View>
</Popup>
<TimePicker
showTime={true}
closePopup={handClose}
></TimePicker>
</>
)
}

3
src/pages/searchPage/index.tsx
View File

@ -41,11 +41,12 @@ export default memo(() => {
//选择的类型
const [typeList, setTypeList] = useState<any[]>([{ id: 0, name: '大货', checked: true }, { id: 1, name: '剪版', checked: false }, { id: 2, name: '散剪', checked: false }])
const [goodList, setGoodlist] = useState<any[]>([])
const onj = JSON.parse(Taro.getStorageSync('userInfo'))
const [search, setSearchObj] = useState({
modeId: 0,
goodsId: null,
code_or_name: '',
physical_warehouse: 1
physical_warehouse: onj.physical_warehouse
})
const [showShopCart, setShowShopCart] = useState(false)