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

✨ feat:售后模块100%

Browse Source
This commit is contained in:
Haiyi 2022-09-22 15:11:16 +08:00
parent ed77fdda0b
commit d2a1441810
15 changed files with 585 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -113,6 +113,13 @@
"query": "orderId=28114",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/applyMoney/index",
"query": "orderId=28411",
"launchMode": "default",
"scene": null
}
]
}

8
src/api/order.ts
View File

@ -172,4 +172,10 @@ export const mpreturnApplyOrder = () => {
method: "put",
})
}
//退款说明
export const mpenumrefundExplainone = () => {
return useRequest({
url: `/v1/mp/enum/refundExplain`,
method: "get",
})
}

6
src/app.config.ts
View File

@ -99,6 +99,12 @@ export default defineAppConfig({
pages: [
"index"
]
},
{
root: "pages/applyMoney",
pages: [
"index"
]
}
],
})

6
src/components/timePicker/index.tsx
View File

@ -21,11 +21,17 @@ export default memo((props: Props) => {
const handTime = (e) => {
const { start, end } = e.value
// 如果选的是同一天的日期, end 自动加一天
if (!end) {
//判断如果没选下一天的时候
e.value.end = `${dayjs(new Date(start)).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
}
if (start === end) {
e.value.end = `${dayjs(new Date(start)).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
}
setTime(e)
}
return (
<Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
<View className='time-box'>

4
src/pages/applyMoney/index.config.ts Normal file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '申请退款',
enableShareAppMessage: true,
}

284
src/pages/applyMoney/index.module.scss Normal file
View File

@ -0,0 +1,284 @@
.main {}
.resonBig {
overflow: hidden;
margin: 24px;
background: #FFFFFF;
border-radius: 16px;
.reasonItem {
display: flex;
align-items: center;
margin: 32px;
padding-bottom: 32px;
justify-content: space-between;
.reasonLeft {
display: flex;
align-items: center;
.reasonFont {
font-size: 28px;
font-weight: 500;
color: #000000;
}
.xing {
font-size: 28px;
font-weight: 500;
color: #E42945;
}
.selectFont {
font-size: 28px;
font-weight: 400;
color: #000000;
margin-left: 40px;
}
}
.chakanquanbukehu {
font-size: 50px;
}
}
}
.descBox {
margin: 32px;
background: #FFFFFF;
border-radius: 16px 16px 0px 0px;
overflow: hidden;
.title {
font-size: 28px;
font-weight: 500;
color: #000000;
margin-top: 24px;
margin-left: 32px;
}
.textBox {
padding-top: 15px;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
margin-right: 32px;
margin-top: 24px;
margin-left: 32px;
height: 210px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-weight: 400;
color: #000000;
margin-bottom: 32px;
}
}
.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;
}
}
.safeBox {
height: 160px;
width: 100%;
}
.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;
}
.timeBox2 {
margin-top: 24px;
background-color: #f6f6f6;
height: 68px;
background: #E9E9E9;
border-radius: 8px;
margin-right: 48px;
text-align: center;
line-height: 68px;
position: relative;
font-size: 28px;
font-weight: 400;
color: #000000;
.more {
position: absolute;
right: 30px;
top: 5px;
font-size: 40px;
}
}
.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;
}
}
}
.bottomBox1 {
width: 750px;
height: 160px;
background: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
padding-top: 16px;
justify-content: space-between;
.resetBox1 {
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;
}
.button1 {
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;
}
.activeButton1 {
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%;
// }
}

206
src/pages/applyMoney/index.tsx Normal file
View File

@ -0,0 +1,206 @@
import { View, Input, Button, Image, Text, Textarea } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, ReactNode, memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { faceVerifyForPay, useDidShow, useRouter } from '@tarojs/taro'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
import {
mpreturnApplyOrder,
mpenumrefundExplainone,
} from "@/api/order"
import Popup from '@/components/popup'
export default () => {
useEffect(() => {
getEnum()
}, [])
const Router = useRouter()
//获取枚举
const [List, setList] = useState<any[]>([])
const { fetchData: explanFetch } = mpenumrefundExplainone()
const getEnum = async () => {
const res = await explanFetch()
if (res.data) {
setList(res.data.list)
}
}
//选择退货原因
const handReasonOne = (item) => {
List.map(it => {
if (it.id === item.id) {
it.default = true
} else {
it.default = false
}
return it
})
setList([...List])
setQuery((val) => ({ ...val, reasonId: item.id }))
queryRef.current.reasonName = item.name
}
//筛选内容展示
const [showPopup, setshowPopup] = useState(false)
const queryRef = useRef({
reasonName: '请选择'
})
const [Query, setQuery] = useState<any>({
reasonId: '',
reasonName: '请选择'
})
//备注信息
const [TextareaValue, setTextareaValue] = useState('')
const getDesc = (e) => {
setTextareaValue(e)
}
//取消返回
const handCancl = () => {
Taro.navigateBack({
delta: 1
})
}
//确认选择
const handSlect = () => {
setQuery((val) => ({ ...val, reasonName: queryRef.current.reasonName }))
setshowPopup(false)
}
//重置
const handReset = () => {
setQuery(({ reasonId: '', reasonName: '请选择' }))
queryRef.current.reasonName = '请选择'
const arrOne = resetArr(List)
setList([...arrOne])
}
//判断是否允许提交
const isDisabled = useMemo(() => {
if (Query.reasonId !== '') {
return false
} else {
return true
}
}, [Query])
//数组重置
const resetArr = (arr) => {
arr.map(it => {
it.default = false
return it
})
return arr
}
//确认退款
const { fetchData: sureFetch } = mpreturnApplyOrder()
const handSure = () => {
const query = {
reason_describe: TextareaValue,
fabric_piece_accessory_url: [],
goods_status: 100,
return_explain: Query.reasonId,
roll: 0,
roll_list: [],
sale_order_id: Number(Router.params.orderId),
};
Taro.showModal({
content: "确认退款吗？",
confirmText: "确认",
cancelText: "取消",
success: async function (res) {
if (res.confirm) {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await sureFetch(query)
if (res?.msg === 'success') {
Taro.showToast({
title: '成功'
})
Taro.hideLoading()
handCancl()
} else {
Taro.hideLoading()
Taro.showToast({
title: res?.msg,
icon: 'error'
})
}
}
}
})
}
return (
<View className={styles.main}>
<View className={styles.resonBig}>
<View className={styles.reasonItem} onClick={() => { setshowPopup(true) }}>
<View className={styles.reasonLeft}>
<View className={styles.reasonFont}>退货原因</View>
<Text className={styles.xing}>*</Text>
{
Query.reasonName === '请选择' && <View className={styles.selectFont}>请选择</View>
}
{
Query.reasonName !== '请选择' && <View className={styles.selectFont}>{Query.reasonName}</View>
}
</View>
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
</View>
</View>
<View className={styles.descBox}>
<View className={styles.title}>其他说明</View>
<View className={styles.textBox}>
<Textarea
onInput={(e) => getDesc(e.detail.value)}
value={TextareaValue}
// style='background:#f6f6f6;height:210px;padding:15rpx 24rpx 24rpx 24rpx;border-radius: 8rpx;'
placeholderStyle='font-size: 28rpx;font-weight: 400;'
autoFocus
placeholder={'选填/退货说明中选择时（其他问题）必填'}
></Textarea>
</View>
</View>
<View className={styles.safeBox}>
<View className={styles.bottomBox}>
<Button className={styles.resetBox} onClick={() => { handCancl() }}> 取消</Button >
<Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认退款</Button >
</View>
</View>
<Popup title={'筛选情况'} show={showPopup} onClose={() => { setshowPopup?.(false) }}>
<View className={styles.popupBox}>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>退款原因</View>
<View className={styles.flexModebox}>
{
List.map((item, index) => {
return (
<View onClick={() => { handReasonOne(item) }} className={classnames(item.default ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
)
})
}
</View>
</View>
<View style={{ height: '100rpx' }}></View>
<View className={styles.bottomBox1}>
<Button className={styles.resetBox1} onClick={() => { handReset() }}> 重置</Button >
<Button className={classnames(isDisabled ? styles.button1 : styles.activeButton1)} disabled={isDisabled} onClick={() => handSlect()}> 确认</Button >
</View>
</View>
</Popup>
</View>
)
}

14
src/pages/order/index.tsx
View File

@ -219,6 +219,20 @@ export default () => {
sale_mode: undefined,
shipment_mode: undefined
})
const arrOne = resetArr(modeList)
setModeList([...arrOne])
const arrTwo = resetArr(deliveryList)
setdeliveryList([...arrTwo])
}
//数组重置
const resetArr = (arr) => {
arr.map(it => {
it.checked = false
return it
})
return arr
}
//确认筛选
const handSure = async () => {

10
src/pages/orderDetails/index.tsx
View File

@ -519,10 +519,18 @@ export default () => {
}
}
//申请退款
const handApplyMoney = () => {
Taro.navigateTo({
url: '/pages/applyMoney/index?orderId=' + infoObj.id
})
setShowMore(false)
}
//确认收货
const { fetchData: receveFetch } = mpsaleOrderreceive()
const handSureGoods = async () => {
Taro.showModal({
content: "确认收货吗？",
confirmText: "确认",

3
src/pages/refundDetail/index.module.scss
View File

@ -49,7 +49,8 @@
width: 134px;
height: 134px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 20px;
border-radius: 8px;
}
.noPic {

8
src/pages/refundMoneyDetail/index.module.scss
View File

@ -80,8 +80,8 @@
.cancleBtn {
margin-right: 20px;
width: 224px;
height: 64px;
width: 160px;
height: 72px;
border-radius: 40px;
opacity: 0.6;
border: 1px solid #000000;
@ -94,12 +94,12 @@
}
.totalBox {
margin-top: 10px;
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
// margin-bottom: 10px;
.totalLeft {
font-size: 28px;

11
src/pages/refundMoneyDetail/index.tsx
View File

@ -211,8 +211,9 @@ export default () => {
</View>
{
DeatailObj.stage == 0 && <View className={styles.totalBox}>
<View className={styles.totalLeft}>合计金额</View>
<View className={styles.totalRight}>{
<View className={styles.totalRight} style={{ color: '#F64861' }}>{
formatPriceDiv(DeatailObj.total_refund_amount)
}</View>
</View>
@ -220,7 +221,7 @@ export default () => {
{
(DeatailObj.stage == 5 || DeatailObj.stage == 6) && <View className={styles.totalBox}>
<View className={styles.totalLeft}>退款金额</View>
<View className={styles.totalRight}>{
<View className={styles.totalRight} style={{ color: '#F64861' }}>{
formatPriceDiv(DeatailObj.refund_amount)
}</View>
</View>
@ -228,7 +229,7 @@ export default () => {
{
(DeatailObj.stage == 5 || DeatailObj.stage == 6) && <View className={styles.totalBox}>
<View className={styles.totalLeft}>其他扣除金额</View>
<View className={styles.totalRight}>{
<View className={styles.totalRight} style={{ color: '#F64861' }}>{
formatPriceDiv(DeatailObj.other_deduction_amount)
}</View>
</View>
@ -236,7 +237,7 @@ export default () => {
{
(DeatailObj.stage == 5 || DeatailObj.stage == 6) && <View className={styles.totalBox}>
<View className={styles.totalLeft}>退款去向</View>
<View className={styles.totalRight}>{
<View className={styles.totalRight} style={{ color: '#F64861' }}>{
formatPriceDiv(DeatailObj.refund_flow_name)
}</View>
</View>
@ -279,7 +280,7 @@ export default () => {
<View className={styles.safeBox}></View>
{
(DeatailObj.stage === 0 || DeatailObj.stage === 1) && <View className={styles.bottomMuck}>
<View className={styles.cancleBtn} onClick={() => handCancle()}>取消退货</View>
<View className={styles.cancleBtn} onClick={() => handCancle()}>取消售后</View>
</View>
}
</View>

4
src/pages/refundPage/components/itemList/index.module.scss
View File

@ -1,8 +1,8 @@
.itemBox {
margin-top: 38px;
overflow: hidden;
width: 702px;
height: 560px;
margin: 24px;
height: 416px;
background: #FFFFFF;
border-radius: 16px;
margin-left: 24px;

17
src/pages/refundPage/components/itemList/index.tsx
View File

@ -30,7 +30,7 @@ export default memo((props: propsObj) => {
return (
<View className={styles.itemBox} onClick={(e) => navTo(e)}>
<View className={styles.itemBox} onClick={() => navTo(props.obj)}>
<View className={styles.topItem}>
<View className={styles.orderNo}>单号：{props?.obj?.order_no}</View>
<View className={styles.status}>{props?.obj?.stage_name}</View>
@ -94,12 +94,15 @@ export default memo((props: propsObj) => {
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>
{
(props?.obj.stage == 5 || props?.obj.stage == 6 || props?.obj.stage == 3) && <View className={styles.bottomMsg}>
<View className={styles.msgLeft}>退款金额：</View>
<View className={styles.msgRightOne}>¥{formatPriceDiv(props?.obj?.refundable_amount)}</View>
</View>
}
{/* <View className={styles.bottomBox}>
<BottomBtns
obj={props?.obj}

24
src/pages/refundPage/index.tsx
View File

@ -16,6 +16,7 @@ import {
} from "@/api/refound"
import Tabs from "./components/tabs"
import TimePicker from "@/components/timePicker"
import dayjs from 'dayjs'
export default () => {
@ -256,16 +257,24 @@ export default () => {
setShowTime(false)
}
let myDate = new Date();
const [start, setStart] = useState(myDate.toLocaleDateString())
const [end, setEnd] = useState('')
const [start, setStart] = useState<any>(myDate.toLocaleDateString())
const [end, setEnd] = useState<any>('')
//选择时间
const handTime = (eq) => {
console.log(eq?.value?.start, 'eq?.value?.start')
setSearchField((val) => ({ ...val, saleStartTime: eq?.value?.start, saleEndTime: eq?.value?.start }))
//直接进来点确定的时候做处理
if (Object.keys(eq).length === 0) {
let obj = {
start: '',
end: ''
}
obj.start = myDate?.toLocaleDateString() + ' ' + '00:00:00'
obj.end = `${dayjs(new Date(obj?.start)).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
eq.value = obj
}
setSearchField((val) => ({ ...val, saleStartTime: eq?.value?.start, saleEndTime: eq?.value?.end }))
setStart(eq?.value?.start)
setEnd(eq?.value?.end)
setShowTime(false)
console.log(searchField, 8888)
}
const timeArea = useMemo(() => {
@ -278,6 +287,7 @@ export default () => {
useEffect(() => {
setSearchField(searchField)
console.log(searchField, 9999)
}, [searchField])
return (
@ -352,7 +362,9 @@ export default () => {
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>售后时间</View>
<View className={styles.timeBox2} onClick={() => { setShowTime(true) }}>{timeArea}
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.more)}></View>
{
timeArea != '自定义起始时间' && <View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.more)}></View>
}
</View>
</View>
<View style={{ height: '100rpx' }}></View>