✨ feat(售后模块):退货页面开发完毕，剩余退款页面
This commit is contained in:
Haiyi
parent
fcce5d265d
commit
adc7c36193
@ -99,6 +99,13 @@
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
"pathName": "pages/refundDetail/index",
|
||||
"query": "id=607",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
12
src/api/cdn.ts
Normal file
12
src/api/cdn.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { useRequest } from '@/use/useHttp'
|
||||
|
||||
/**
|
||||
* 获取cdn 签名/密钥
|
||||
* @returns
|
||||
*/
|
||||
export const GetSignApi = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mp/cdn/token`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
@ -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",
|
||||
})
|
||||
}
|
||||
@ -77,6 +77,12 @@ export default defineAppConfig({
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
},
|
||||
{
|
||||
root: "pages/refundDetail",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
}
|
||||
],
|
||||
})
|
||||
|
||||
@ -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;
|
||||
}
|
||||
.uploadText{
|
||||
font-size: 26px;
|
||||
color: $color_font_three;
|
||||
|
||||
.miconfont {
|
||||
color: #d8d8d8;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
// .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;
|
||||
|
||||
@ -55,13 +55,13 @@ const PictureItem: FC<ImageParam> = memo(({ onChange, defaultList, onlyRead = fa
|
||||
{imageList?.map((item, index) => (
|
||||
<View className={styles.ImgItem}>
|
||||
<Image mode='aspectFill' src={formatImgUrl(item)} onClick={showImage}></Image>
|
||||
{!onlyRead && <View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>}
|
||||
{!onlyRead && <View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-guanbi')}></View>}
|
||||
</View>
|
||||
))}
|
||||
{!onlyRead && (
|
||||
<View className={styles.uploadImg} onClick={uploadImage}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-shangchuanzhaopian')}></Text>
|
||||
<Text className={styles.uploadText}>上传照片</Text>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-xinzeng')}></Text>
|
||||
{/* <Text className={styles.uploadText}>上传照片</Text> */}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@ -315,7 +315,7 @@ export default () => {
|
||||
const [payList, setPayList] = useState<any[]>([
|
||||
{
|
||||
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: "线下汇款",
|
||||
},
|
||||
{
|
||||
|
||||
@ -235,7 +235,7 @@ export default () => {
|
||||
const [payList, setPayList] = useState<any[]>([
|
||||
{
|
||||
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: "线下汇款",
|
||||
},
|
||||
{
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
49
src/pages/refundDetail/components/addressDetailBox/index.tsx
Normal file
49
src/pages/refundDetail/components/addressDetailBox/index.tsx
Normal file
@ -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 (
|
||||
<View className={styles.addressBox}>
|
||||
<View className={styles.topFont}>请按以下退货地址寄回货物并提供退货物流信息</View>
|
||||
<View className={styles.topBox}>
|
||||
<View className={styles.cirle}>
|
||||
<View className={classnames('iconfont', 'icon-dingwei', styles.dingwei)}></View>
|
||||
</View>
|
||||
<View className={styles.address}>{'广东省佛山市禅城区陆盈纺织仓库'}</View>
|
||||
</View>
|
||||
<View className={styles.line}></View>
|
||||
<View className={styles.bottom}>
|
||||
<View className={styles.name}>{'谭先生'}</View>
|
||||
<View className={styles.phone}>{13242128982}</View>
|
||||
|
||||
<View className={styles.btn} onClick={() => handUp?.(obj)}>{seeFont}</View>
|
||||
|
||||
{/* {
|
||||
obj.stage !== 1 && <View className={styles.nobtn}></View>
|
||||
} */}
|
||||
</View>
|
||||
</View >
|
||||
)
|
||||
})
|
||||
187
src/pages/refundDetail/components/orderState/index.module.scss
Normal file
187
src/pages/refundDetail/components/orderState/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
66
src/pages/refundDetail/components/orderState/index.tsx
Normal file
66
src/pages/refundDetail/components/orderState/index.tsx
Normal file
@ -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) && <View className={styles.order_flow_state}>
|
||||
<View className={classnames(styles.order_status_list, showMore && styles.order_status_list_show)}>
|
||||
{dataList.map((item, index) => <View className={styles.order_status_item}>
|
||||
{(dataList.length > 1) && <View className={classnames(styles.order_status_tail, (index == 0) && styles.order_status_tail_end)}></View>}
|
||||
{(dataList.length != (index + 1)) && <View className={styles.order_status_line}></View>}
|
||||
<View className={styles.order_status_content}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0) && styles.order_status_select)}>{item.status}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0) && styles.order_status_select)}>{formatDateTime(item.time)}</View>
|
||||
</View>
|
||||
<Text className={classnames(styles.order_status_des, (index == 0) && styles.order_status_des_select)}>{item.desc}</Text>
|
||||
</View>)}
|
||||
</View>
|
||||
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
|
||||
<Text>{showMore && '收起详情' || '点击查看详情'}</Text>
|
||||
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore && styles.open_miconfonts)}></Text>
|
||||
</View>}
|
||||
</View>}
|
||||
</>
|
||||
)
|
||||
})
|
||||
5
src/pages/refundDetail/index.config.ts
Normal file
5
src/pages/refundDetail/index.config.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
navigationBarTitleText: '售后详情',
|
||||
enablePullDownRefresh: true,
|
||||
"backgroundTextStyle": "dark"
|
||||
}
|
||||
317
src/pages/refundDetail/index.module.scss
Normal file
317
src/pages/refundDetail/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
377
src/pages/refundDetail/index.tsx
Normal file
377
src/pages/refundDetail/index.tsx
Normal file
@ -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<any>({})
|
||||
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<any[]>([
|
||||
{
|
||||
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<any[]>([])
|
||||
|
||||
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 (
|
||||
<View className={styles.main}>
|
||||
<OrderState orderInfo={DeatailObj} />
|
||||
<AddressDetailBox
|
||||
obj={DeatailObj}
|
||||
handUp={() => handUp(DeatailObj)}
|
||||
></AddressDetailBox>
|
||||
<DefaultBox
|
||||
showMode={true}
|
||||
title={'客户信息'}
|
||||
modeName={DeatailObj.sale_mode_name}
|
||||
>
|
||||
<View className={styles.pussBox}>
|
||||
<View className={styles.pussName}>{DeatailObj.purchaser_name}</View>
|
||||
<View className={styles.pussPhone}>{DeatailObj.purchaser_phone}</View>
|
||||
</View>
|
||||
</DefaultBox>
|
||||
<DefaultBox title={'退款信息'}>
|
||||
<GoodsItem list={productList} obj={DeatailObj}></GoodsItem>
|
||||
<View className={styles.totalBox}>
|
||||
<View className={styles.totalLeft}>总计</View>
|
||||
<View className={styles.totalRight}>{DeatailObj.total_fabrics} 种面料，{DeatailObj?.total_colors} 种颜色，共 {
|
||||
DeatailObj?.sale_mode == 0 ? DeatailObj?.return_roll : DeatailObj?.total_number / 100
|
||||
} {DeatailObj?.sale_mode == 0 ? "条" : "米"}</View>
|
||||
</View>
|
||||
</DefaultBox>
|
||||
<DefaultBox title={'订单信息'}>
|
||||
{
|
||||
orderMsg.map((item, index) => {
|
||||
return (
|
||||
<View className={styles.detailBox} key={index}>
|
||||
<View className={styles.detailFont}>
|
||||
{item.leftTitle}
|
||||
</View>
|
||||
<View className={styles.detailRightFlex}>
|
||||
<View className={styles.detailRight}>{item.rightTitle}</View>
|
||||
{item.showBtn && <View className={styles.detailBtn} onClick={() => clipboardData(item.rightTitle)}>复制</View>}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</DefaultBox>
|
||||
<DefaultBox title={'售后图片'}>
|
||||
<View className={styles.picBox}>
|
||||
{
|
||||
DeatailObj?.fabric_piece_accessory_url?.length > 0 && DeatailObj?.fabric_piece_accessory_url.map((item, index) => {
|
||||
return (
|
||||
<Image className={styles.pic} lazyLoad key={index}
|
||||
mode="aspectFill" src={IMG_CND_Prefix + item}></Image>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
DeatailObj?.fabric_piece_accessory_url?.length === 0 && <View className={styles.noPic}>暂无图片</View>
|
||||
}
|
||||
</View>
|
||||
</DefaultBox>
|
||||
<View className={styles.safeBox}></View>
|
||||
{
|
||||
(DeatailObj.stage === 0 || DeatailObj.stage === 1) && <View className={styles.bottomMuck}>
|
||||
<View className={styles.cancleBtn} onClick={() => handCancle()}>取消退货</View>
|
||||
</View>
|
||||
}
|
||||
<Popup title={'查看/修改物流回单'} show={ShowPic} onClose={() => setShowPic(false)}>
|
||||
<UploadImage onChange={getImageList} defaultList={PicList} onlyRead={onlyRead} />
|
||||
{
|
||||
|
||||
!onlyRead && <View className={styles.picBtn} onClick={() => handSure()}>确认修改</View>
|
||||
}
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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 (
|
||||
<View className={styles.defaltBox}>
|
||||
<View className={styles.titleBox}>
|
||||
<View className={styles.title}>{title}</View>
|
||||
{
|
||||
showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.modeLine}></View>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
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 (
|
||||
<View className={styles.goodsBox} key={index}>
|
||||
<View className={styles.goodsProduct}>{item.code}# {item.name}</View>
|
||||
{
|
||||
item.product_colors.map((it, inx) => {
|
||||
return (
|
||||
<View className={styles.itemGoods}>
|
||||
<View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View>
|
||||
<View className={styles.clear}> </View>
|
||||
<View className={styles.itemRight}>
|
||||
<View className={styles.item_right_top}>
|
||||
<View className={styles.itemName}>{it.code}# {it.name}</View>
|
||||
{/* <View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View> */}
|
||||
{
|
||||
obj.sale_mode == 0 && <View className={styles.itemNums}>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'}</View>
|
||||
}
|
||||
{
|
||||
obj.sale_mode != 0 && <View className={styles.itemNums}>x{it.length / 100}m</View>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.item_right_Bottom}>
|
||||
<View className={styles.itemMoney}>¥{it.sale_price / 100}/{obj?.sale_mode == 0 ? 'kg' : 'm'}</View>
|
||||
{/* <View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View> */}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</>
|
||||
|
||||
)
|
||||
})
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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}> </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>
|
||||
)
|
||||
})
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 >
|
||||
)
|
||||
})
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -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 = () => {
|
||||
<View className={styles.layoutTitle}>功能特色</View>
|
||||
<View className={styles['grid-container']}>
|
||||
{feature.map((item) => {
|
||||
return <IconCard iconName={item.iconName} title={item.name}></IconCard>
|
||||
return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
|
||||
})}
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user