✨ feat:售后模块100%

project.private.config.json

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

src/api/order.ts

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

src/app.config.ts

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

src/components/timePicker/index.tsx

@@ -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'>

src/pages/applyMoney/index.config.ts

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

src/pages/applyMoney/index.module.scss

@@ -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%;
+    // }
+}

src/pages/applyMoney/index.tsx

@@ -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>
+    )
+}

src/pages/order/index.tsx

@@ -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 () => {

src/pages/orderDetails/index.tsx

@@ -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: "确认",

src/pages/refundDetail/index.module.scss

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

src/pages/refundMoneyDetail/index.module.scss

@@ -80,8 +80,8 @@
 
         .cancleBtn {
             margin-right: 20px;
-            width: 224px;
+            width: 160px;
-            height: 64px;
+            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;

src/pages/refundMoneyDetail/index.tsx

@@ -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>

src/pages/refundPage/components/itemList/index.module.scss

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

src/pages/refundPage/components/itemList/index.tsx

@@ -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>
+                (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}

src/pages/refundPage/index.tsx

@@ -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 [start, setStart] = useState<any>(myDate.toLocaleDateString())
-    const [end, setEnd] = useState('')
+    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>