diff --git a/project.private.config.json b/project.private.config.json index 9c58944..d783659 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -99,6 +99,13 @@ "query": "", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/refundDetail/index", + "query": "id=607", + "launchMode": "default", + "scene": null } ] } diff --git a/src/api/cdn.ts b/src/api/cdn.ts new file mode 100644 index 0000000..8a153b3 --- /dev/null +++ b/src/api/cdn.ts @@ -0,0 +1,12 @@ +import { useRequest } from '@/use/useHttp' + +/** + * 获取cdn 签名/密钥 + * @returns + */ +export const GetSignApi = () => { + return useRequest({ + url: `/v1/mp/cdn/token`, + method: 'get', + }) +} diff --git a/src/api/refound.ts b/src/api/refound.ts index e0823eb..9076bc4 100644 --- a/src/api/refound.ts +++ b/src/api/refound.ts @@ -21,3 +21,24 @@ export const mpenumreturnType = () => { method: "get", }) } +//售后详情 +export const mpreturnApplyOrder = () => { + return useRequest({ + url: `/v1/mp/returnApplyOrder`, + method: "get", + }) +} +//取消退货 +export const returnApplyOrdercancel = () => { + return useRequest({ + url: `/v1/mp/returnApplyOrder/cancel`, + method: "post", + }) +} +//售后确认上传附件 +export const returnApplyOrderuploadAccessory = () => { + return useRequest({ + url: `/v1/mp/returnApplyOrder/uploadAccessory`, + method: "put", + }) +} \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index a2a793b..c0c9908 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -77,6 +77,12 @@ export default defineAppConfig({ pages: [ "index" ] + }, + { + root: "pages/refundDetail", + pages: [ + "index" + ] } ], }) diff --git a/src/components/uploadImage/index.module.scss b/src/components/uploadImage/index.module.scss index c977074..9718ef4 100644 --- a/src/components/uploadImage/index.module.scss +++ b/src/components/uploadImage/index.module.scss @@ -1,13 +1,18 @@ -.image_main{ +.image_main { display: flex; align-items: center; flex-wrap: wrap; - .uploadImg{ - width: 202px; - height: 150px; - background: #f0f0f0; - border: 2px dashed #cccccc; - border-radius: 10px; + + .uploadImg { + // width: 202px; + // height: 150px; + // background: #f0f0f0; + // border: 2px dashed #cccccc; + // border-radius: 10px; + width: 143px; + height: 143px; + background: #F3F3F3; + border-radius: 8px; display: flex; flex-direction: column; justify-content: center; @@ -15,30 +20,37 @@ position: relative; margin: 0 0 20px 20px; position: relative; - .miconfont{ - font-size: 50px; + + .miconfont { + color: #d8d8d8; + font-size: 100px; } - .uploadText{ - font-size: 26px; - color: $color_font_three; - } - + + // .uploadText { + // font-size: 26px; + // color: $color_font_three; + // } + } - .ImgItem{ - width: 202px; - height: 150px; - background: #f0f0f0; + + .ImgItem { + width: 143px; + height: 143px; + background: #F3F3F3; + border-radius: 8px; margin-left: 20px; margin-bottom: 20px; position: relative; border-radius: 10px; - image{ + + image { width: 100%; height: 100%; border-radius: 10px; } - .miconfont_close{ + + .miconfont_close { width: 43px; height: 43px; background-color: #ccc; diff --git a/src/components/uploadImage/index.tsx b/src/components/uploadImage/index.tsx index aaf6964..a26ab86 100644 --- a/src/components/uploadImage/index.tsx +++ b/src/components/uploadImage/index.tsx @@ -55,13 +55,13 @@ const PictureItem: FC = memo(({ onChange, defaultList, onlyRead = fa {imageList?.map((item, index) => ( - {!onlyRead && delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}>} + {!onlyRead && delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-guanbi')}>} ))} {!onlyRead && ( - - 上传照片 + + {/* 上传照片 */} )} diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 05c4373..4d885ff 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -315,7 +315,7 @@ export default () => { const [payList, setPayList] = useState([ { id: 2, - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yufukuan1", name: "预存款", fonts: "可用额度 ", money: "", @@ -338,7 +338,7 @@ export default () => { isCheck: false, }, { - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yue", name: "线下汇款", }, { @@ -390,7 +390,7 @@ export default () => { arr.push( { id: 2, - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yufukuan1", name: "预存款", fonts: `可用额度${formatPriceDiv( res.data.advance_deposit_balance @@ -399,7 +399,7 @@ export default () => { isCheck: false, }, { - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yue", name: "线下汇款", }, { diff --git a/src/pages/orderDetails/index.tsx b/src/pages/orderDetails/index.tsx index f1a58f6..a9dd56c 100644 --- a/src/pages/orderDetails/index.tsx +++ b/src/pages/orderDetails/index.tsx @@ -235,7 +235,7 @@ export default () => { const [payList, setPayList] = useState([ { id: 2, - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yufukuan1", name: "预存款", fonts: "可用额度 ", money: "", @@ -258,7 +258,7 @@ export default () => { isCheck: false, }, { - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yue", name: "线下汇款", }, { @@ -309,7 +309,7 @@ export default () => { arr.push( { id: 2, - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yufukuan1", name: "预存款", fonts: `可用额度${formatPriceDiv( res.data.advance_deposit_balance @@ -318,7 +318,7 @@ export default () => { isCheck: false, }, { - iconfont: "icon-xianxiahuizong", + iconfont: "icon-yue", name: "线下汇款", }, { diff --git a/src/pages/refundDetail/components/addressDetailBox/index.module.scss b/src/pages/refundDetail/components/addressDetailBox/index.module.scss new file mode 100644 index 0000000..71ddd2c --- /dev/null +++ b/src/pages/refundDetail/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/refundDetail/components/addressDetailBox/index.tsx b/src/pages/refundDetail/components/addressDetailBox/index.tsx new file mode 100644 index 0000000..196395a --- /dev/null +++ b/src/pages/refundDetail/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/refundDetail/components/orderState/index.module.scss b/src/pages/refundDetail/components/orderState/index.module.scss new file mode 100644 index 0000000..e9fc208 --- /dev/null +++ b/src/pages/refundDetail/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/refundDetail/components/orderState/index.tsx b/src/pages/refundDetail/components/orderState/index.tsx new file mode 100644 index 0000000..97121a2 --- /dev/null +++ b/src/pages/refundDetail/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/refundDetail/index.config.ts b/src/pages/refundDetail/index.config.ts new file mode 100644 index 0000000..f2ae6e9 --- /dev/null +++ b/src/pages/refundDetail/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '售后详情', + enablePullDownRefresh: true, + "backgroundTextStyle": "dark" +} diff --git a/src/pages/refundDetail/index.module.scss b/src/pages/refundDetail/index.module.scss new file mode 100644 index 0000000..37c70a3 --- /dev/null +++ b/src/pages/refundDetail/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/refundDetail/index.tsx b/src/pages/refundDetail/index.tsx new file mode 100644 index 0000000..b388bc6 --- /dev/null +++ b/src/pages/refundDetail/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/itemList/index.tsx b/src/pages/refundPage/components/itemList/index.tsx index 2d29df6..347357e 100644 --- a/src/pages/refundPage/components/itemList/index.tsx +++ b/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) => { 布料信息： - {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'} + {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'} 退款金额： diff --git a/src/pages/refundPage/components/pickerTime/index.scss b/src/pages/refundPage/components/pickerTime/index.scss deleted file mode 100644 index 4637656..0000000 --- a/src/pages/refundPage/components/pickerTime/index.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/pages/refundPage/components/pickerTime/index.tsx b/src/pages/refundPage/components/pickerTime/index.tsx deleted file mode 100644 index b8ff636..0000000 --- a/src/pages/refundPage/components/pickerTime/index.tsx +++ /dev/null @@ -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   - } - return - clickItem(line)}>{number} - - } - - 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 ( - closePopup?.()}> - { - 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'] - - }} - > - - - {/* { - monthChange(-1); - }}> - */} - - {year + currentDate.getFullYear()} 年 {formatNumber(month)}月 - - {/* { - monthChange(1); - }}> */} - - - { - WEEK_NAMES.map((week, key) => { - return {week} - }) - } - { - LINES.map((l, key) => { - return - { - WEEK_NAMES.map((week, index) => { - return getDayText(key, index, weekDay, getCurrentMonthDays(month, year)) - }) - } - - }) - } - - - ) -}) \ 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 2610515..dc1d6a5 100644 --- a/src/pages/refundPage/components/timePicker/index.scss +++ b/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; } } -} +} \ No newline at end of file diff --git a/src/pages/refundPage/components/timePicker/index.tsx b/src/pages/refundPage/components/timePicker/index.tsx index d32e280..7f4eede 100644 --- a/src/pages/refundPage/components/timePicker/index.tsx +++ b/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({}) - + const handTime = (e) => { + setTime(e) + } return ( closePopup?.()}> - + + handTime?.(e)} + /> + + onSelectDate?.(time)}>确认 ) -}) \ No newline at end of file +}) diff --git a/src/pages/refundPage/index.module.scss b/src/pages/refundPage/index.module.scss index ff17f2c..61f630d 100644 --- a/src/pages/refundPage/index.module.scss +++ b/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; diff --git a/src/pages/refundPage/index.tsx b/src/pages/refundPage/index.tsx index 90cf728..52d8837 100644 --- a/src/pages/refundPage/index.tsx +++ b/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 () => { } - {isDisabled} - + + 售后时间 + { setShowTime(true) }}>{timeArea} + + + + + {/* */} handTime(e)} > ) diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 7579c96..37db169 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -47,7 +47,7 @@ const feature: IconCardType[] = [ { iconName: 'icon-shouhouzhongxin', name: '退货退款', - path: '', + path: '/pages/refundPage/index', }, { iconName: 'icon-shoukuanliebiao', @@ -153,7 +153,7 @@ const UserInfo: FC = () => { 功能特色 {feature.map((item) => { - return + return handleClickIconCard(item)}> })} diff --git a/src/styles/variables/default.scss b/src/styles/variables/default.scss index 091bbe8..8ef0cb5 100644 --- a/src/styles/variables/default.scss +++ b/src/styles/variables/default.scss @@ -7,7 +7,7 @@ $hd: 2 !default; // 基本单位 /* The Color of O2Team Brand */ -$color-brand: #6190E8 !default; +$color-brand: #337fff !default; $color-brand-light: #78A4F4 !default; $color-brand-dark: #346FC2 !default;