From 6757d91a03943f47b135c363a55fdf20069ad18e Mon Sep 17 00:00:00 2001 From: Haiyi <1021441632@qq.com> Date: Wed, 21 Sep 2022 10:17:33 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=88=20style:=E6=97=A5=E5=8E=86?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=A1=94=E6=8E=A5scss=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 6 + src/components/calendar/index.scss | 180 +++++++++ src/components/calendar/index.tsx | 2 +- .../addressDetailBox/index.module.scss | 123 ++++++ .../components/addressDetailBox/index.tsx | 49 +++ .../components/orderState/index.module.scss | 187 +++++++++ .../components/orderState/index.tsx | 66 +++ src/pages/refundMoneyDetail/index.config.ts | 5 + src/pages/refundMoneyDetail/index.module.scss | 317 +++++++++++++++ src/pages/refundMoneyDetail/index.tsx | 377 ++++++++++++++++++ .../components/timePicker/index.scss | 181 +-------- src/styles/mixins/libs/tint.scss | 12 +- 12 files changed, 1318 insertions(+), 187 deletions(-) create mode 100644 src/components/calendar/index.scss create mode 100644 src/pages/refundMoneyDetail/components/addressDetailBox/index.module.scss create mode 100644 src/pages/refundMoneyDetail/components/addressDetailBox/index.tsx create mode 100644 src/pages/refundMoneyDetail/components/orderState/index.module.scss create mode 100644 src/pages/refundMoneyDetail/components/orderState/index.tsx create mode 100644 src/pages/refundMoneyDetail/index.config.ts create mode 100644 src/pages/refundMoneyDetail/index.module.scss create mode 100644 src/pages/refundMoneyDetail/index.tsx diff --git a/src/app.config.ts b/src/app.config.ts index c0c9908..284cd11 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -83,6 +83,12 @@ export default defineAppConfig({ pages: [ "index" ] + }, + { + root: "pages/refundMoneyDetail", + pages: [ + "index" + ] } ], }) diff --git a/src/components/calendar/index.scss b/src/components/calendar/index.scss new file mode 100644 index 0000000..08a9c23 --- /dev/null +++ b/src/components/calendar/index.scss @@ -0,0 +1,180 @@ + +@import '../../styles/variables/default.scss'; +@import '../../styles/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: 1); + + &-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; + } + } + } \ No newline at end of file diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index 6411d81..182b2e0 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -12,7 +12,7 @@ import { } from '../../types/calendar' import AtCalendarBody from './body/index' import AtCalendarController from './controller/index' - +import './index.scss' const defaultProps: AtCalendarDefaultProps = { validDates: [], marks: [], diff --git a/src/pages/refundMoneyDetail/components/addressDetailBox/index.module.scss b/src/pages/refundMoneyDetail/components/addressDetailBox/index.module.scss new file mode 100644 index 0000000..71ddd2c --- /dev/null +++ b/src/pages/refundMoneyDetail/components/addressDetailBox/index.module.scss @@ -0,0 +1,123 @@ +.addressBox { + + margin-left: 24px; + margin-right: 24px; + background: #FFFFFF; + border-radius: 16px; + margin-top: 24px; + overflow: hidden; + padding-bottom: 20px; + + .topFont { + margin-top: 16px; + margin-left: 32px; + margin-right: 32px; + height: 54px; + background: #FEF9F4; + border-radius: 8px; + text-align: center; + line-height: 54px; + font-size: 24px; + font-weight: 500; + color: #F79B31; + } + + .topBox { + padding-top: 28px; + display: flex; + align-items: center; + + + .cirle { + border-radius: 50%; + margin-left: 32px; + width: 64px; + height: 64px; + background: #4A7FFF; + display: flex; + align-items: center; + justify-content: center; + + .dingwei { + color: #FFFFFF; + font-size: 26px; + } + } + + .address { + margin-left: 24px; + width: 461px; + height: 78px; + font-size: 28px; + font-weight: 500; + color: #000000; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + /*这里设置几行*/ + overflow: hidden; + margin-right: 41px; + display: flex; + align-items: center; + } + + .icon_more { + font-size: 50px; + } + } + + .line { + margin-top: 16px; + float: right; + margin-right: 32px; + width: 550px; + height: 1px; + background: #000000; + opacity: 0.1; + } + + .bottom { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 24px; + + .name { + width: 84px; + height: 34px; + @include common_ellipsis(); + font-size: 28px; + font-weight: 400; + color: #000000; + margin-right: 16px; + } + + .phone { + font-size: 28px; + font-weight: 400; + color: #000000; + margin-right: 70px; + } + + .btn { + width: 216px; + height: 64px; + border-radius: 40px; + opacity: 0.6; + border: 1px solid #000000; + font-size: 28px; + font-weight: 400; + color: #000000; + text-align: center; + line-height: 64px; + margin-right: 32px; + } + + .nobtn { + width: 216px; + height: 64px; + margin-right: 32px; + } + } +} + diff --git a/src/pages/refundMoneyDetail/components/addressDetailBox/index.tsx b/src/pages/refundMoneyDetail/components/addressDetailBox/index.tsx new file mode 100644 index 0000000..196395a --- /dev/null +++ b/src/pages/refundMoneyDetail/components/addressDetailBox/index.tsx @@ -0,0 +1,49 @@ +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' + +interface propsObj { + receivingStatus?: Number | null, + onReceivingStatus?: (any, Number) => void, + obj: any, + handUp?: (any) => void +} +export default memo((props: propsObj) => { + + const { + obj = {}, + handUp + } = props + + const seeFont = useMemo(() => { + if (obj.stage == 1) { + return '上传物流回单' + } else { + return '查看物流回单' + } + }, [obj]) + + return ( + + 请按以下退货地址寄回货物并提供退货物流信息 + + + + + {'广东省佛山市禅城区陆盈纺织仓库'} + + + + {'谭先生'} + {13242128982} + + handUp?.(obj)}>{seeFont} + + {/* { + obj.stage !== 1 && + } */} + + + ) +}) \ No newline at end of file diff --git a/src/pages/refundMoneyDetail/components/orderState/index.module.scss b/src/pages/refundMoneyDetail/components/orderState/index.module.scss new file mode 100644 index 0000000..e9fc208 --- /dev/null +++ b/src/pages/refundMoneyDetail/components/orderState/index.module.scss @@ -0,0 +1,187 @@ +.order_flow_state { + width: 702px; + margin-top: 24px; + margin-left: 24px; + border-radius: 16px; + 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; + } +} \ No newline at end of file diff --git a/src/pages/refundMoneyDetail/components/orderState/index.tsx b/src/pages/refundMoneyDetail/components/orderState/index.tsx new file mode 100644 index 0000000..97121a2 --- /dev/null +++ b/src/pages/refundMoneyDetail/components/orderState/index.tsx @@ -0,0 +1,66 @@ +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/format"; +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(() => { + console.log(orderInfo.logistics_details ? orderInfo?.logistics_details.reverse() : [],'5555') + return orderInfo.logistics_details ? orderInfo?.logistics_details.reverse() : [] + }, [orderInfo.logistics_details]) + + + + + return ( + <> + {(dataList?.length > 0) && + + {dataList.map((item, index) => + {(dataList.length > 1) && } + {(dataList.length != (index + 1)) && } + + {item.status} + {formatDateTime(item.time)} + + {item.desc} + )} + + {(dataList.length > 2) && changeMore()}> + {showMore && '收起详情' || '点击查看详情'} + + } + } + + ) +}) diff --git a/src/pages/refundMoneyDetail/index.config.ts b/src/pages/refundMoneyDetail/index.config.ts new file mode 100644 index 0000000..f2ae6e9 --- /dev/null +++ b/src/pages/refundMoneyDetail/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '售后详情', + enablePullDownRefresh: true, + "backgroundTextStyle": "dark" +} diff --git a/src/pages/refundMoneyDetail/index.module.scss b/src/pages/refundMoneyDetail/index.module.scss new file mode 100644 index 0000000..37c70a3 --- /dev/null +++ b/src/pages/refundMoneyDetail/index.module.scss @@ -0,0 +1,317 @@ +.main { + + .detailBox { + display: flex; + margin-top: 24px; + align-items: center; + justify-content: space-between; + + .detailRightFlex { + display: flex; + align-items: center; + + .detailRight { + + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .detailBtn { + margin-left: 16px; + width: 65px; + height: 32px; + border-radius: 8px; + border: 1PX solid #337FFF; + font-size: 24px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #337FFF; + text-align: center; + line-height: 32px; + } + } + + .detailFont { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + } + + .picBox { + display: flex; + flex-wrap: wrap; + + .pic { + width: 134px; + height: 134px; + margin-right: 10px; + margin-bottom: 10px; + } + + .noPic { + height: 182px; + width: 100%; + text-align: center; + line-height: 182px; + font-size: 28px; + font-weight: 500; + color: #000000; + } + } + + .safeBox { + width: 100%; + height: 160px; + } + + .bottomMuck { + height: 150px; + width: 100%; + display: flex; + padding-top: 15px; + position: fixed; + bottom: 0; + background: #FFFFFF; + justify-content: flex-end; + + .cancleBtn { + margin-right: 20px; + width: 224px; + height: 64px; + border-radius: 40px; + opacity: 0.6; + border: 1px solid #000000; + font-size: 28px; + font-weight: 400; + color: #000000; + text-align: center; + line-height: 64px; + } + } + + .totalBox { + width: 100%; + height: 100px; + display: flex; + align-items: center; + justify-content: space-between; + + .totalLeft { + font-size: 28px; + font-weight: 400; + color: #000000; + } + + .totalRight { + font-size: 28px; + font-weight: 400; + color: #000000; + } + } + + .picBtn { + margin-top: 20px; + margin-bottom: 20px; + margin-left: 24px; + margin-right: 24px; + height: 80px; + background: #337FFF; + border-radius: 44px; + font-size: 28px; + font-weight: 500; + color: #FFFFFF; + text-align: center; + line-height: 80px; + } +} + +.defaltBox { + margin: 24px; + padding: 24px 32px 24px 24px; + background: #FFFFFF; + border-radius: 16px; + + .titleBox { + width: 638px; + display: flex; + justify-content: space-between; + align-items: center; + + .title { + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + } + + .modeName { + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #337FFF; + } + } + + .modeLine { + margin-top: 24px; + width: 638px; + height: 1px; + background: #000000; + opacity: 0.1; + } + +} + + +.goodsBox { + margin-top: 24px; + overflow: hidden; + border-bottom: 1px solid #F7F7F7; + + .goodsProduct { + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + // margin-left: 32px; + } + + + .itemGoods { + margin-top: 24px; + display: flex; + + .itemPic { + // margin-left: 32px; + // margin-right: 42px; + width: 108px; + height: 108px; + background: #322F2F; + border-radius: 8px; + } + + .clear { + width: 42px; + } + + .itemRight { + padding-bottom: 24px; + width: 80%; + border-bottom: 1px solid #f7f7f7; + + .item_right_top { + margin-bottom: 41px; + display: flex; + align-items: center; + justify-content: space-between; + + .itemName { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .itemNums { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + } + + .item_right_Bottom { + display: flex; + align-items: center; + justify-content: space-between; + + .itemMoney { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .itemMoneyOne { + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + } + } + } + + + } + + .itemGoods:last-child { + margin-top: 24px; + display: flex; + + .itemPic { + // margin-right: 42px; + width: 108px; + height: 108px; + background: #322F2F; + border-radius: 8px; + } + + .clear { + width: 42px; + height: 108px; + } + + .itemRight { + padding-bottom: 24px; + width: 80%; + border-bottom: none; + + .item_right_top { + margin-bottom: 41px; + display: flex; + align-items: center; + justify-content: space-between; + + .itemName { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .itemNums { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + } + + .item_right_Bottom { + display: flex; + align-items: center; + justify-content: space-between; + + .itemMoney { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .itemMoneyOne { + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + } + } + } + + + } +} \ No newline at end of file diff --git a/src/pages/refundMoneyDetail/index.tsx b/src/pages/refundMoneyDetail/index.tsx new file mode 100644 index 0000000..b388bc6 --- /dev/null +++ b/src/pages/refundMoneyDetail/index.tsx @@ -0,0 +1,377 @@ +import { View, Input, Button, Image } 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 ItemList from './components/itemList' +import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format' +import { + mpreturnApplyOrder, + returnApplyOrdercancel, + returnApplyOrderuploadAccessory +} from "@/api/refound" +import OrderState from './components/orderState' +import AddressDetailBox from './components/addressDetailBox' +import { IMG_CND_Prefix } from "@/common/constant"; +import Popup from '@/components/popup'; +import UploadImage from '@/components/uploadImage' + +export default () => { + const router = useRouter() + useEffect(() => { + getDetail() + }, []) + //获取详情 + const { fetchData: detailFetch } = mpreturnApplyOrder() + const [DeatailObj, setDeatailObj] = useState({}) + const getDetail = async () => { + Taro.showLoading({ + title: '加载中...', + mask: true + }) + const res = await detailFetch({ id: Number(router.params.id) }) + if (res.data) { + setDeatailObj(res.data) + orderMsg.map(it => { + if (it.leftTitle === '售后编号：') { + it.rightTitle = res.data.return_order_no + } + if (it.leftTitle === '订单号：') { + it.rightTitle = res.data.order_no + } + if (it.leftTitle === '退货原因：') { + it.rightTitle = res.data.return_reason_name + } + if (it.leftTitle === '退货说明：') { + it.rightTitle = res.data.return_explain_name + } + if (it.leftTitle === '其他什么：') { + it.rightTitle = res.data.reason_describe + } + if (it.leftTitle === '货物状况：') { + it.rightTitle = res.data.goods_status_name + } + if (it.leftTitle === '申请时间：') { + it.rightTitle = formatDateTime(res.data.apply_time) + } + }) + setOrderMsg([...orderMsg]) + setPicList([...res.data?.accessory_url !== null ? res.data?.accessory_url : []]) + Taro.hideLoading() + } + } + + //分辨用质检中还是质检前的数组 + const productList = useMemo(() => { + if (DeatailObj.stage === 0 || + (DeatailObj.sale_mode == 1 && DeatailObj.type == 1) || DeatailObj.stage === 1 || DeatailObj.stage === 2) { + return DeatailObj.product_list + } else { + return DeatailObj.quality_check_pass_product + } + }, [DeatailObj]) + + + //订单信息文字数组 + const [orderMsg, setOrderMsg] = useState([ + { + leftTitle: '售后编号：', + rightTitle: '------', + showBtn: true + }, + { + leftTitle: '订单号：', + rightTitle: '------', + showBtn: true + }, + { + leftTitle: '退货原因：', + rightTitle: '------', + }, + { + leftTitle: '退货说明：', + rightTitle: '------', + }, + { + leftTitle: '其他什么：', + rightTitle: '------', + }, + { + leftTitle: '货物状况：', + rightTitle: '------', + }, + { + leftTitle: '申请时间：', + rightTitle: '------', + } + ]) + + //复制功能 + const clipboardData = (val) => { + Taro.setClipboardData({ + data: val || '', + success: function (res) { + Taro.showToast({ + icon: 'none', + title: '复制成功', + }) + }, + }) + } + + //取消退货 + const { fetchData: cancelFetch } = returnApplyOrdercancel() + const handCancle = async () => { + Taro.showModal({ + content: "确定要取消吗？", + confirmText: "确认", + cancelText: "取消", + success: async function (res) { + if (res.confirm) { + const res = await cancelFetch({ id: Number(DeatailObj.id) }) + Taro.showLoading({ + title: '请稍等...', + mask: true + }) + if (res.msg === 'success') { + Taro.showToast({ + title: '取消成功' + }) + Taro.hideLoading() + getDetail() + } else { + Taro.showToast({ + title: res.msg, + icon: 'error' + }) + } + } + } + }) + + + } + //查看图片 + const [ShowPic, setShowPic] = useState(false) + + + const [PicList, setPicList] = useState([]) + + const handUp = (value) => { + setShowPic(true) + } + + const onlyRead = useMemo(() => { + if (DeatailObj.stage == 1) { + return false + } else { + return true + } + }, [DeatailObj]) + + //获取图片列表 + const picUrl = useRef([]) + const getImageList = useCallback((list) => { + picUrl.current = list + }, []) + + //提交附件 + const { fetchData: sureFetch } = returnApplyOrderuploadAccessory() + const handSure = () => { + let arr: any = [] + arr = [...picUrl.current, ...PicList] + Taro.showModal({ + content: "确定要提交吗？", + confirmText: "确认", + cancelText: "取消", + success: async function (res) { + if (res.confirm) { + const res = await sureFetch({ id: Number(DeatailObj.id), accessory_url: arr, }) + Taro.showLoading({ + title: '请稍等...', + mask: true + }) + if (res.msg === 'success') { + Taro.showToast({ + title: '取消成功' + }) + Taro.hideLoading() + getDetail() + } else { + Taro.showToast({ + title: res.msg, + icon: 'error' + }) + } + } + } + }) + } + + return ( + + + handUp(DeatailObj)} + > + + + {DeatailObj.purchaser_name} + {DeatailObj.purchaser_phone} + + + + + + 总计 + {DeatailObj.total_fabrics} 种面料，{DeatailObj?.total_colors} 种颜色，共 { + DeatailObj?.sale_mode == 0 ? DeatailObj?.return_roll : DeatailObj?.total_number / 100 + } {DeatailObj?.sale_mode == 0 ? "条" : "米"} + + + + { + orderMsg.map((item, index) => { + return ( + + + {item.leftTitle} + + + {item.rightTitle} + {item.showBtn && clipboardData(item.rightTitle)}>复制} + + + + ) + }) + } + + + + + { + DeatailObj?.fabric_piece_accessory_url?.length > 0 && DeatailObj?.fabric_piece_accessory_url.map((item, index) => { + return ( + + ) + }) + } + { + DeatailObj?.fabric_piece_accessory_url?.length === 0 && 暂无图片 + } + + + + { + (DeatailObj.stage === 0 || DeatailObj.stage === 1) && + handCancle()}>取消退货 + + } + setShowPic(false)}> + + { + + !onlyRead && handSure()}>确认修改 + } + + + ) +} + + + + + +interface Obs { + title?: string, + modeName?: string, + showMode?: boolean, + children?: ReactNode, + clickNode?: () => void +} + +const DefaultBox = memo((props: Obs) => { + const { + title = '标题', + modeName = '大货', + showMode = false, + children, + clickNode + } = props + + return ( + + + {title} + { + showMode && clickNode?.()}>{modeName} + } + + + {children} + + ) +}) + + +interface PropGoods { + // item?: { + // code?: string | number + // } + list: any[], + obj: any +} +const GoodsItem = memo((porps: PropGoods) => { + const { list = [], obj = {} } = porps + return ( + <> + { + list.map((item, index) => { + return ( + + {item.code}# {item.name} + { + item.product_colors.map((it, inx) => { + return ( + + + + + + {it.code}# {it.name} + {/* x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'} */} + { + obj.sale_mode == 0 && x{obj.stage == 0 || obj.stage == 1 || obj.stage == 2 + ? it.roll + : obj.stage == 5 || obj.stage == 6 || obj.stage == 3 + ? it.return_roll + : it.roll}{obj?.sale_mode == 0 ? '条' : 'm'} + } + { + obj.sale_mode != 0 && x{it.length / 100}m + } + + + ¥{it.sale_price / 100}/{obj?.sale_mode == 0 ? 'kg' : 'm'} + {/* ¥{formatPriceDiv(it.total_sale_price)} */} + + + + ) + }) + } + + ) + }) + } + + + ) +}) \ No newline at end of file diff --git a/src/pages/refundPage/components/timePicker/index.scss b/src/pages/refundPage/components/timePicker/index.scss index dc1d6a5..b808aa6 100644 --- a/src/pages/refundPage/components/timePicker/index.scss +++ b/src/pages/refundPage/components/timePicker/index.scss @@ -1,5 +1,4 @@ -@import '../../../../styles/variables/default.scss'; -@import '../../../../styles/mixins/index.scss'; + .time-box { padding: 40px; @@ -18,181 +17,3 @@ text-align: center; line-height: 80px; } - -.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: 1); - - &-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; - } - } -} \ No newline at end of file diff --git a/src/styles/mixins/libs/tint.scss b/src/styles/mixins/libs/tint.scss index ca201ea..31d6970 100644 --- a/src/styles/mixins/libs/tint.scss +++ b/src/styles/mixins/libs/tint.scss @@ -15,9 +15,9 @@ * background-color: #a8dfc9; * } */ -@function tint( - $color, - $percent -) { - @return mix(#FFF, $color, $percent); -} +// @function tint( +// $color, +// $percent +// ) { +// @return mix(#FFF, $color, $percent); +// }