✨ feat(售后模块):退货页面开发完毕，剩余退款页面

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

@@ -16,9 +16,16 @@ interface propsObj {
 
 export default memo((props: propsObj) => {
     const navTo = (e) => {
-        Taro.navigateTo({
-            url: '/pages/orderDetails/index?id=' + props?.obj?.id
-        })
+        if (e.type == 1) {
+            Taro.navigateTo({
+                url: '/pages/refundDetail/index?id=' + props?.obj?.id
+            })
+        } else {
+            Taro.navigateTo({
+                url: '/pages/refundMoneyDetail/index?id=' + props?.obj?.id
+            })
+        }
+
     }
 
 
@@ -83,7 +90,9 @@ export default memo((props: propsObj) => {
             <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 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>

src/pages/refundPage/components/pickerTime/index.scss

@@ -1,182 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-calendar {
-  overflow: hidden;
-
-  /* elements */
-  &__header {
-    .header__flex {
-      @include display-flex;
-      @include align-items(center);
-
-      height: 72px;
-      color: $at-calendar-header-color;
-      text-align: center;
-
-      &-item {
-        @include flex(0 0 calc(100% / 7));
-
-        font-size: 30px;
-      }
-    }
-  }
-
-  &__list {
-    &.flex {
-      @include display-flex;
-      @include align-items();
-      @include flex-wrap(wrap);
-
-      color: $at-calendar-day-color;
-
-      .flex__item {
-        @include flex(0 0 calc(100% / 7));
-
-        font-size: 30px;
-        text-align: center;
-        position: relative;
-        margin: 5px 0;
-
-        &-container {
-          @include align-items(center);
-          @include display-flex;
-
-          width: $at-calendar-day-size;
-          height: $at-calendar-day-size;
-          margin-left: auto;
-          margin-right: auto;
-          border-radius: 50%;
-
-          .container-text {
-            @include flex;
-          }
-        }
-
-        &-extra {
-          .extra-marks {
-            position: absolute;
-            bottom: 5px;
-            line-height: 0;
-            left: 50%;
-            transform: translateX(-50%);
-
-            .mark {
-              width: $at-calendar-mark-size;
-              height: $at-calendar-mark-size;
-              margin-right: 4px;
-              display: inline-block;
-              background-color: $at-calendar-main-color;
-              border-radius: 50%;
-              overflow: hidden;
-
-              &:last-child {
-                margin-right: 0;
-              }
-            }
-          }
-        }
-
-        &--today {
-          color: $at-calendar-main-color;
-          font-weight: bolder;
-        }
-
-        &--blur {
-          color: #e1e4e7;
-        }
-
-        &--selected {
-          color: white;
-          background-color: rgba($color: $at-calendar-main-color, $alpha: 0.7);
-
-          &-head {
-            border-top-left-radius: 40px;
-            border-bottom-left-radius: 40px;
-          }
-
-          &-tail {
-            border-top-right-radius: 40px;
-            border-bottom-right-radius: 40px;
-          }
-
-          /* stylelint-disable-next-line */
-          .extra-marks .mark {
-            background-color: white;
-          }
-
-          &-head.flex__item--selected-tail {
-            background-color: transparent;
-
-            .flex__item-container {
-              background-color: rgba(
-                $color: $at-calendar-main-color,
-                $alpha: 0.7
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &__controller {
-    @include display-flex;
-    @include align-items(center);
-    @include justify-content(center);
-
-    margin-bottom: 20px;
-
-    .controller__arrow {
-      @include flex(0 0 40px);
-
-      height: 40px;
-      border-radius: 12px;
-      display: inline-block;
-      background-size: 16px 24px;
-      background-position: center;
-      background-color: #f7f8fc;
-      background-repeat: no-repeat;
-      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAnFJREFUOBGVVF1rE0EUnXt3tzFtWmqjKYKfqIhVa1L8FQVRWtwnXwRhidXGDwQf81oCUQMioZRCHwNSgiD4lD9QSYVKsA8KbaW1jbamX8adnWsmMnESbYz7cs6ee8/ZnZm7y9h/Xk/Gs70TE9lOZQNFWsGx1IvDJoozxNDttNpmHOfyTssBj59PHxceP6keREDlYPvBGUMJzTD5LHuKhHtC70EEQe72atMAIoLu0MWzRPxInZnEdxZib2I37L2XEI/HsSvYd44AQrqZIW5b3J8fHR0sS/2ve5DJZIzFFexnSD262QAs+c1js45zyVU6KqIwnU5bS58x0mhGhusbaz153Sw9dW+QSr3yCdwJe4wCKlCigbAWiw7PAYDQdclrAclkxk8+iDBifr3JMq3lO86VQsVMuq549RQSU687mOcNANE+VfiFxuLd6NX3e5llD8qjskqb54E8n24mk5Yf3B6ab2auBsgGC8Q7QOJ1AS6ExrSZ12s6r57CyIi99cNgswywtkkIzDB2eSSdftmuGxp57RgfOfY38HlvRWVNqgmYsDb57sDkZK5hb1RHZQ9+U8bu37S/MtOc0zUg8G2U1yOV4WrTdcXrAqT4MDq0yokXVINEwb32pS9WOJfLmboueW0OGgtP05mj3IXTum6iuXHogDtr27an9D/eQBVijr2AiB/VvUQuePenNXZBfmhKrxEl6Hjv1vAHA2lJ1wRBcH9vf5+cH6k3DZANsei1eWCwIrm6uOf1Jsenq8v7Z4ActFJxrsBMo6gC0GAebPHq/Z6bqJoVyn/EQpGFK08MmF2B/Oj1wZKqtYzxeM5MJKY6dMNPQnnePR8FubkAAAAASUVORK5CYII=");
-
-      &--right {
-        transform: rotate(180deg);
-      }
-
-      &--disabled {
-        opacity: 0.5;
-      }
-    }
-
-    .controller__info {
-      @include flex(0 0 auto);
-
-      font-size: 30px;
-      margin-left: 40px;
-      margin-right: 40px;
-    }
-  }
-}
-
-.at-calendar-slider__main {
-  .main__body {
-    @include display-flex;
-
-    width: 100%;
-
-    &--animate {
-      transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
-    }
-
-    .body__slider {
-      @include flex(0 0 100%);
-    }
-  }
-
-  &--weapp,
-  &--swan {
-    .main__body {
-      height: 480px;
-    }
-  }
-}

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

@@ -1,146 +0,0 @@
-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>
-    )
-})

src/pages/refundPage/components/timePicker/index.scss

@@ -1,6 +1,24 @@
 @import '../../../../styles/variables/default.scss';
 @import '../../../../styles/mixins/index.scss';
 
+.time-box {
+  padding: 40px;
+}
+
+.sure-box {
+  // padding: 16px 102px 30px 102px;
+  margin-left: 102px;
+  margin-right: 102px;
+  height: 80px;
+  background: #337FFF;
+  border-radius: 44px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 80px;
+}
+
 .at-calendar {
   overflow: hidden;
 
@@ -88,7 +106,7 @@
 
         &--selected {
           color: white;
-          background-color: rgba($color: $at-calendar-main-color, $alpha: 0.7);
+          background-color: rgba($color: $at-calendar-main-color, $alpha: 1);
 
           &-head {
             border-top-left-radius: 40px;
@@ -109,10 +127,8 @@
             background-color: transparent;
 
             .flex__item-container {
-              background-color: rgba(
-                $color: $at-calendar-main-color,
-                $alpha: 0.7
-              );
+              background-color: rgba($color: $at-calendar-main-color,
+                  $alpha: 0.7);
             }
           }
         }
@@ -179,4 +195,4 @@
       height: 480px;
     }
   }
-}
+}

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

@@ -7,21 +7,41 @@ import './index.scss'
 import classnames from "classnames";
 import AtCalendar from "@/components/calendar/index"
 
-
+type DateArg = string | number | Date
 interface Props {
     showTime: true | false,
-    closePopup?: () => void
+    closePopup?: () => void,
+    end?: DateArg
+    start?: DateArg,
+    onSelectDate?: (any) => void
 }
+
 export default memo((props: Props) => {
     let {
         showTime = false,
-        closePopup
+        closePopup,
+        start = "",
+        end = "",
+        onSelectDate
     } = props
+    const [time, setTime] = useState<any>({})
 
-
+    const handTime = (e) => {
+        setTime(e)
+    }
     return (
         <Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
-            <AtCalendar />
+            <View className='time-box'>
+                <AtCalendar
+                    isMultiSelect
+                    currentDate={{
+                        start: start,
+                        end: end
+                    }}
+                    onSelectDate={(e) => handTime?.(e)}
+                />
+            </View>
+            <View className='sure-box' onClick={() => onSelectDate?.(time)}>确认</View>
         </Popup >
     )
-})
+})

src/pages/refundPage/index.module.scss

@@ -7,13 +7,13 @@
 
 .icon_shaixuan {
     color: #0D7CFF;
-    font-size: 35px;
+    font-size: 35px !important;
     margin-right: 10px;
 }
 
 .activeshaixuan {
     color: #000;
-    font-size: 35px;
+    font-size: 35px !important;
     margin-right: 10px;
 }
 
@@ -63,6 +63,28 @@
             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;

src/pages/refundPage/index.tsx

@@ -52,9 +52,9 @@ export default () => {
             page: 1,
             size: 10,
             name: '',
-            sale_mode: '',
-            stage: '',
-            return_type: '',
+            sale_mode: '不限',
+            stage: '不限',
+            return_type: '不限',
             saleStartTime: '',
             saleEndTime: ''
         })
@@ -207,10 +207,9 @@ export default () => {
 
     //是否不允许确认筛选
     const isDisabled = useMemo(() => {
-        if (searchField.stage !== '' ||
-            searchField.sale_mode !== '' ||
-            searchField.return_type !== '' ||
-            searchField.sale_mode !== '' ||
+        if (searchField.stage !== '不限' ||
+            searchField.sale_mode !== '不限' ||
+            searchField.return_type !== '不限' ||
             searchField.saleStartTime !== '' ||
             searchField.saleEndTime !== ''
         ) {
@@ -231,12 +230,14 @@ export default () => {
         setStageList([...arrThree])
         setSearchField((e) => ({
             ...e,
-            sale_mode: '',
-            stage: '',
-            return_type: '',
+            sale_mode: '不限',
+            stage: '不限',
+            return_type: '不限',
             saleStartTime: '',
-            saleEndTime: ''
+            saleEndTime: '',
         }))
+        setStart(myDate.toLocaleDateString())
+        setEnd('')
     }
 
     //数组重置
@@ -248,11 +249,36 @@ export default () => {
         return arr
     }
 
-
+    //展示时间筛选
+    const [showTime, setShowTime] = useState(false)
     //关闭时间筛选
     const handClose = () => {
-
+        setShowTime(false)
     }
+    let myDate = new Date();
+    const [start, setStart] = useState(myDate.toLocaleDateString())
+    const [end, setEnd] = useState('')
+    //选择时间
+    const handTime = (eq) => {
+        console.log(eq?.value?.start, 'eq?.value?.start')
+        setSearchField((val) => ({ ...val, saleStartTime: eq?.value?.start, saleEndTime: eq?.value?.start }))
+        setStart(eq?.value?.start)
+        setEnd(eq?.value?.end)
+        setShowTime(false)
+        console.log(searchField, 8888)
+    }
+
+    const timeArea = useMemo(() => {
+        if (end !== '') {
+            return start + '   ' + '-' + '  ' + end
+        } else {
+            return '自定义起始时间'
+        }
+    }, [end])
+
+    useEffect(() => {
+        setSearchField(searchField)
+    }, [searchField])
 
     return (
         <>
@@ -323,20 +349,29 @@ export default () => {
                             }
                         </View>
                     </View>
-                    <View>{isDisabled}</View>
-                    <View style={{ height: '160rpx' }}></View>
+                    <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>
+                        </View>
+                    </View>
+                    <View style={{ height: '100rpx' }}></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}
+                start={start}
+                end={end}
+                showTime={showTime}
                 closePopup={handClose}
+                onSelectDate={(e) => handTime(e)}
             ></TimePicker>
         </>
     )