700 lines
27 KiB
JavaScript
Executable File
700 lines
27 KiB
JavaScript
Executable File
import React, { useEffect, useRef } from "react"
|
||
import { useSelector } from "react-redux"
|
||
import { useImmer } from "use-immer"
|
||
import Taro, { getCurrentInstance } from "@tarojs/taro"
|
||
import api from "@/api"
|
||
import doc from "@/doc"
|
||
import { AtButton, AtInput, AtCurtain, AtCountdown } from 'taro-ui'
|
||
import { SpPage, SpTabs, SpCell, SpCheckbox, SpImage, SpInputNumber, SpFloatLayout, SpUpload, SpPrice, SpHtml, SpOrderItem } from '@/components'
|
||
import { View, Text, Picker, Input, ScrollView } from "@tarojs/components"
|
||
import { AFTER_SALE_TYPE, REFUND_FEE_TYPE, LOGISTICS_CODE } from '@/consts'
|
||
import { pickBy, showToast, classNames, VERSION_STANDARD, VERSION_PLATFORM, JumpGoodDetail, copyText } from '@/utils'
|
||
import "./after-sale.scss"
|
||
|
||
const initialState = {
|
||
info: null,
|
||
curTabIdx: 1,
|
||
tabList: AFTER_SALE_TYPE,
|
||
reasonIndex: '',
|
||
reasons: [],
|
||
refundFee: 0,
|
||
refundPoint: 0,
|
||
refundType: 'offline',
|
||
description: '',
|
||
pic: '',
|
||
// 用于云店后台交易设置-到店退货关闭时判断
|
||
offlineAftersalesIsOpen: false,
|
||
offlineAftersales: false,
|
||
refundTypeList: REFUND_FEE_TYPE,
|
||
refundStore: '', // 退货门店
|
||
contact: '', // 联系人
|
||
mobile: '', // 联系电话
|
||
openRefundType: false,
|
||
selectRefundValue: 'offline',
|
||
afterSaleDesc: {
|
||
intro: '',
|
||
is_open: false
|
||
},
|
||
afterSaleChecked: {},
|
||
afterSaleTotalNum: 0,
|
||
allClicked: false,
|
||
afterSaleTotalprice: 0,
|
||
loading: true,
|
||
isOpened: false,
|
||
isAddrOpened: false,
|
||
aftersales: null,
|
||
expressList: [],
|
||
corpIndex: null,
|
||
logi_no: ''
|
||
}
|
||
|
||
function TradeAfterSale (props) {
|
||
const $instance = getCurrentInstance()
|
||
const { aftersales_bn: afterSaleTid } = $instance.router.params
|
||
const [state, setState] = useImmer(initialState)
|
||
const pageRef = useRef()
|
||
const { info, curTabIdx, tabList, reasonIndex, reasons, refundFee, refundPoint, refundType, refundTypeList, description, pic, openRefundType, selectRefundValue,
|
||
refundStore, contact, mobile, afterSaleDesc, offlineAftersalesIsOpen, offlineAftersales, afterSaleTotalNum, allClicked, afterSaleTotalprice, loading, isOpened, isAddrOpened, aftersales, expressList, corpIndex, logi_no } = state
|
||
|
||
useEffect(() => {
|
||
fetch()
|
||
Taro.eventCenter.on('onEventPickerStore', (item) => {
|
||
console.log('onEventPickerStore:', item)
|
||
setState(draft => {
|
||
draft.refundStore = item
|
||
})
|
||
})
|
||
const _expressList = Object.keys(LOGISTICS_CODE).map(key => {
|
||
return {
|
||
name: LOGISTICS_CODE[key],
|
||
code: key
|
||
}
|
||
})
|
||
setState(draft => {
|
||
draft.expressList = _expressList
|
||
})
|
||
|
||
return () => {
|
||
Taro.eventCenter.off('onEventPickerStore')
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (openRefundType) {
|
||
pageRef.current.pageLock()
|
||
} else {
|
||
pageRef.current.pageUnLock()
|
||
}
|
||
}, [openRefundType])
|
||
|
||
const onCancel = () => {
|
||
Taro.navigateBack()
|
||
}
|
||
|
||
const onSubmitExp = async () => {
|
||
const { item_id, orderId: order_id, afterSalesBn: aftersales_bn } = aftersales
|
||
const corp_code = expressList[corpIndex]?.code
|
||
if (!corp_code) {
|
||
showToast('请填写物流公司')
|
||
return
|
||
}
|
||
if (!logi_no) {
|
||
showToast('请填写物流单号')
|
||
return
|
||
}
|
||
await api.aftersales.sendback({
|
||
item_id,
|
||
order_id,
|
||
aftersales_bn,
|
||
logi_no,
|
||
corp_code
|
||
})
|
||
showToast('操作成功')
|
||
setTimeout(() => {
|
||
// Taro.navigateBack()
|
||
fetch()
|
||
}, 300)
|
||
}
|
||
|
||
const onChangeExpress = (e) => {
|
||
const { value } = e.detail
|
||
setState(draft => {
|
||
draft.corpIndex = value
|
||
})
|
||
}
|
||
|
||
const getLogisticName = () => {
|
||
const { name } = expressList[corpIndex] || {}
|
||
return name
|
||
}
|
||
|
||
const fetch = async () => {
|
||
const { id, aftersales_bn } = $instance.router.params
|
||
if (aftersales_bn) {
|
||
const resInfo = await api.aftersales.info({
|
||
aftersales_bn,
|
||
// item_id,
|
||
// order_id
|
||
})
|
||
const _aftersales = pickBy(resInfo, doc.trade.TRADE_AFTER_SALES_ITEM)
|
||
console.log("🚀 ~ _aftersales:", _aftersales)
|
||
if (_aftersales.sendbackData) {
|
||
const { corp_code } = _aftersales.sendbackData
|
||
_aftersales.sendbackData.name = LOGISTICS_CODE[corp_code]
|
||
}
|
||
setState(draft => {
|
||
draft.aftersales = _aftersales
|
||
draft.afterSaleTotalNum = _aftersales.items.reduce((sum, { num }) => sum + num, 0)
|
||
draft.afterSaleTotalprice = _aftersales.items.reduce((sum, { price }) => sum + price, 0)
|
||
})
|
||
}
|
||
const { orderInfo, offline_aftersales_is_open, distributor } = await api.trade.detail(id)
|
||
const reasons = await api.aftersales.reasonList()
|
||
const { intro, is_open } = await api.aftersales.remindDetail()
|
||
const { offline_aftersales } = distributor
|
||
const _info = pickBy(orderInfo, doc.trade.TRADE_ITEM)
|
||
setState(draft => {
|
||
draft.info = _info
|
||
draft.reasons = reasons
|
||
draft.offlineAftersalesIsOpen = offline_aftersales_is_open
|
||
draft.offlineAftersales = offline_aftersales == 1
|
||
draft.afterSaleDesc = {
|
||
intro,
|
||
is_open
|
||
}
|
||
if ((VERSION_STANDARD && !offline_aftersales_is_open) || (VERSION_PLATFORM && offline_aftersales == 0)) {
|
||
draft.refundTypeList = REFUND_FEE_TYPE.filter(item => item.value != 'offline')
|
||
draft.refundType = 'logistics'
|
||
}
|
||
draft.loading = false
|
||
})
|
||
}
|
||
|
||
const onChangeItemCheck = (item, index, type) => {
|
||
// const _info = info
|
||
// _info.items[index].checked = e
|
||
setState(draft => {
|
||
if (type === 'all') {
|
||
draft.allClicked = !allClicked
|
||
draft.info.items.map((_item) => {
|
||
_item.checked = !allClicked
|
||
})
|
||
} else {
|
||
draft.info.items[index].checked = !item.checked
|
||
}
|
||
draft.allClicked = draft.info.items.every((item) => item.checked)
|
||
draft.afterSaleTotalNum = draft.info.items.filter((_item) => _item.checked).reduce((sum, { num }) => sum + num, 0)
|
||
draft.afterSaleTotalprice = draft.info.items.filter((_item) => _item.checked).reduce((sum, { price }) => sum + price, 0)
|
||
})
|
||
}
|
||
|
||
const onChangeItemNum = (e, index) => {
|
||
setState(draft => {
|
||
draft.info.items[index].refundNum = e
|
||
})
|
||
}
|
||
|
||
const getRealRefundFee = () => {
|
||
let rFee = 0
|
||
if (info) {
|
||
const { items } = info
|
||
rFee = items
|
||
.filter((item) => item.checked)
|
||
.reduce((sum, { price, num, refundNum }) => sum + price / num * refundNum, 0)
|
||
}
|
||
return rFee.toFixed(2)
|
||
}
|
||
|
||
const getRealRefundPoint = () => {
|
||
let rPoint = 0
|
||
if (info) {
|
||
const { items } = info
|
||
rPoint = items
|
||
.filter((item) => item.checked)
|
||
.reduce((sum, { point, num, refundNum }) => sum + point / num * refundNum, 0)
|
||
}
|
||
return rPoint.toFixed(2)
|
||
}
|
||
|
||
const onChangeRefundType = ({ value }) => {
|
||
setState(draft => {
|
||
draft.selectRefundValue = value
|
||
})
|
||
}
|
||
|
||
const getRefundTypeName = () => {
|
||
const { title } = refundTypeList.find(item => item.value == refundType) || {}
|
||
return title
|
||
}
|
||
|
||
const onSubmit = async () => {
|
||
const { id } = $instance.router.params
|
||
const checkedItems = info?.items.filter(item => !!item.checked)
|
||
if (checkedItems.length == 0) {
|
||
return showToast('请选择需要售后的商品')
|
||
}
|
||
|
||
if (!reasons?.[reasonIndex]) {
|
||
return showToast('请选择退货原因')
|
||
}
|
||
const aftersales_type = tabList[curTabIdx].type
|
||
const reason = reasons?.[reasonIndex]
|
||
let params = {
|
||
detail: checkedItems.map(({ id: _id, refundNum, num }) => {
|
||
return {
|
||
id: _id,
|
||
num: num || refundNum
|
||
}
|
||
}),
|
||
order_id: id,
|
||
aftersales_type,
|
||
reason,
|
||
description,
|
||
evidence_pic: pic
|
||
}
|
||
// 退货退款
|
||
if (aftersales_type == 'REFUND_GOODS') {
|
||
params = {
|
||
...params,
|
||
return_type: refundType
|
||
}
|
||
// 到店退货
|
||
if (refundType == 'offline') {
|
||
if (!refundStore) {
|
||
return showToast('请选择退货门店')
|
||
}
|
||
if (!contact) {
|
||
return showToast('请输入联系人姓名')
|
||
}
|
||
if (!mobile) {
|
||
return showToast('请输入联系人电话')
|
||
}
|
||
params = {
|
||
...params,
|
||
return_type: refundType,
|
||
aftersales_address_id: refundStore.address_id,
|
||
contact,
|
||
mobile
|
||
}
|
||
}
|
||
}
|
||
await api.aftersales.apply(params)
|
||
showToast('提交成功')
|
||
setTimeout(() => {
|
||
// Taro.redirectTo({
|
||
// url: `/subpage/pages/trade/detail?id=${id}`
|
||
// })
|
||
// fetch()
|
||
Taro.navigateBack()
|
||
}, 500)
|
||
}
|
||
|
||
const handleClickCopy = (val) => {
|
||
copyText(val)
|
||
Taro.showToast({
|
||
title: '复制成功',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
return <SpPage ref={pageRef} loading={loading} className='page-trade-after-sale has-navbar' isBlack showNavSearchIcon renderFooter={
|
||
!loading && !afterSaleTid ? <View className='btn-wrap'>
|
||
<AtButton type='primary' onClick={onSubmit}>提交售后申请</AtButton>
|
||
</View> : null
|
||
}
|
||
>
|
||
{!afterSaleTid ? <View className="after-item">
|
||
<View className="after-item-label">请选择售后类型:</View>
|
||
<Picker
|
||
mode='selector'
|
||
range={tabList.map(item => item.title)}
|
||
onChange={(e) => {
|
||
setState(draft => {
|
||
draft.curTabIdx = +e.detail.value
|
||
})
|
||
}}
|
||
>
|
||
<View className="after-item-input">
|
||
<View className="input-txt">{tabList[curTabIdx] ? tabList[curTabIdx].title : '请选择售后类型'}</View>
|
||
<View className="iconfont icon-arrowRight" style={{ color: tabList[curTabIdx] > -1 ? '#000' : '#a5a5a5' }}></View>
|
||
</View>
|
||
</Picker>
|
||
</View> : aftersales?.progress && aftersales.progress != 12 ? <View className="after-item">
|
||
<View className="after-item-label">售后单号：{afterSaleTid}</View>
|
||
<View className="after-item-label" style={{ fontSize: '30rpx', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', opacity: '80', margin: '36rpx 0 50rpx 0', lineHeight: '0.8' }}>
|
||
<Text style={{ marginRight: '20rpx', fontWeight: 'bold' }}>{['', '售后审核通过，请您发货并填写物流单号', '等待商家确认收货', '已驳回', '已完成', '退款驳回', '退款完成', '已关闭', '商家确认收货,等待审核退款', '退款处理中'][aftersales?.progress || 0]}</Text>
|
||
<View style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
|
||
{/* <View style={{ fontSize: '20rpx', textAlign: 'end' }}>还剩<AtCountdown
|
||
format={{ day: '天', hours: '时', minutes: '分', seconds: '' }}
|
||
isShowDay
|
||
day={1}
|
||
hours={23}
|
||
minutes={59}
|
||
seconds={0}
|
||
/></View> */}
|
||
<Text onClick={() => setState(draft => { draft.isOpened = true })} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', padding: '0 0 4rpx' }}>全部流程</Text>
|
||
</View>
|
||
</View>
|
||
</View> : null}
|
||
|
||
{aftersales?.progress >= 1 && aftersales?.progress != 3 && <>
|
||
<View className="after-item" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: '30rpx' }}>
|
||
<Text style={{ fontSize: '24rpx', marginTop: '-10rpx' }}>退货单号填写</Text>
|
||
{aftersales?.hasAftersalesAddress && <Text onClick={() => setState(draft => { draft.isAddrOpened = true })} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', padding: '0 0 4rpx', marginTop: '-10rpx', lineHeight: 0.8 }}>查看退货地址</Text>}
|
||
</View>
|
||
<View className="after-item mt-40" style={{ marginBottom: '50rpx' }}>
|
||
{!aftersales?.hasSendbackData ? <Picker
|
||
mode='selector'
|
||
rangeKey='name'
|
||
range={expressList}
|
||
onChange={onChangeExpress}
|
||
>
|
||
<View className="after-item-input">
|
||
<View className={`input-txt`}>{`${getLogisticName() || '请选择快递公司'}`}</View>
|
||
<View className="iconfont icon-arrowRight" style={{ color: getLogisticName() ? '#000' : '#a5a5a5' }}></View>
|
||
</View>
|
||
</Picker> : <View className="after-item-input">
|
||
<View className={`input-txt color-hui`}>{`${aftersales?.sendbackData?.name || ''}`}</View>
|
||
</View>}
|
||
</View>
|
||
<View className="after-item mt-40" style={{ marginBottom: '50rpx' }}>
|
||
<View className="after-item-input">
|
||
{!aftersales?.hasSendbackData ? <Input className="desc-ipt" value={logi_no} placeholder='物流单号' onInput={(e) => {
|
||
setState(draft => {
|
||
draft.logi_no = e.detail.value
|
||
})
|
||
}}></Input>
|
||
:
|
||
<View className={`input-txt color-hui`}>{`${aftersales?.sendbackData?.logi_no || ''}`}</View>}
|
||
</View>
|
||
</View>
|
||
<View style={{ margin: '0 auto', marginBottom: '70rpx', textAlign: 'center' }}>
|
||
{/* <AtButton type='primary' onClick={onSubmitExp}>确认上传</AtButton> */}
|
||
<Text onClick={() => handleClickCopy(aftersales?.sendbackData?.logi_no || '')} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', lineHeight: 0.8 }}>复制物流单号</Text>
|
||
</View>
|
||
</>}
|
||
|
||
{/* <SpTabs current={curTabIdx} tablist={tabList} onChange={(e) => {
|
||
setState(draft => {
|
||
draft.curTabIdx = e
|
||
})
|
||
}} /> */}
|
||
{!afterSaleTid ? <>
|
||
<View className="choose-item">请选择您要退货的商品</View>
|
||
<View className="choose-all">
|
||
<SpCheckbox label='全选' checked={allClicked} onChange={onChangeItemCheck.bind(this, null, null, 'all')} />
|
||
</View>
|
||
</> : <Text className="choose-item" style={{ fontSize: '30rpx', fontWeight: 'bold' }}>已选择的退货商品</Text>}
|
||
<View className='refund-items'>
|
||
<View className='items-container'>
|
||
{
|
||
(aftersales?.items || info?.items || []).map((item, index) => (
|
||
<View className="item-box" onClick={onChangeItemCheck.bind(this, item, index)}>
|
||
<View className='item-wrap' key={`item-wrap__${index}`}>
|
||
{!afterSaleTid && <View className='item-hd'>
|
||
<SpCheckbox checked={item.checked} onChange={onChangeItemCheck.bind(this, item, index)} />
|
||
</View>}
|
||
<View className='item-bd'>
|
||
{/* <SpOrderItem
|
||
key={`item__${index}`}
|
||
info={item}
|
||
isShowNational
|
||
isPointitemGood={false}
|
||
onClick={() => {
|
||
if (info.order_class == 'pointsmall') {
|
||
Taro.navigateTo({
|
||
url: `/subpages/pointshop/espier-detail?id=${item.good_id}`
|
||
})
|
||
} else {
|
||
JumpGoodDetail(item.good_id, item.distributor_id)
|
||
}
|
||
}}
|
||
/> */}
|
||
<SpImage src={item.pic} width={150} height={150} mode='aspectFill' radius={4} circle={4} />
|
||
<View className='goods-info'>
|
||
<View className='goods-info-hd'>
|
||
<Text className='goods-title'>{item.itemName}</Text>
|
||
</View>
|
||
<View className='goods-info-bd'>
|
||
<View>{item.itemSpecDesc && <Text className='sku-info'>{`${item.descInfo}`}</Text>}</View>
|
||
{/* <View><SpPrice size={28} value={item.price / item.num} /> x <Text className='num'>{item.num}</Text></View> */}
|
||
</View>
|
||
<View className='goods-info-ft'>
|
||
<Text>数量：{item.num}</Text>
|
||
<SpPrice size={20} value={item.price / item.num} showSeparator noDecimal={false} />
|
||
{/* <SpInputNumber
|
||
disabled={!item.leftAftersalesNum}
|
||
value={item.refundNum}
|
||
max={item.leftAftersalesNum}
|
||
min={1}
|
||
onChange={(e) => onChangeItemNum(e, index)}
|
||
/> */}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<SpPrice value={item.price} showSeparator noDecimal={false} />
|
||
</View>
|
||
))
|
||
}
|
||
</View>
|
||
</View>
|
||
|
||
<View className="after-item mt-40" style={{ marginTop: '60rpx' }}>
|
||
<View className="after-item-label color-hui">退货原因</View>
|
||
{!afterSaleTid ? <Picker
|
||
mode='selector'
|
||
range={reasons}
|
||
onChange={(e) => {
|
||
setState(draft => {
|
||
draft.reasonIndex = e.detail.value
|
||
})
|
||
}}
|
||
>
|
||
<View className="after-item-input">
|
||
<View className={`input-txt`}>{`${reasons?.[reasonIndex] || '请选择退货原因'}`}</View>
|
||
<View className="iconfont icon-arrowRight" style={{ color: reasons?.[reasonIndex] ? '#000' : '#a5a5a5' }}></View>
|
||
</View>
|
||
</Picker> : <View className="after-item-input">
|
||
<View className={`input-txt color-hui`}>{`${aftersales?.reason || reasons?.[reasonIndex] || '请选择退货原因'}`}</View>
|
||
</View>}
|
||
</View>
|
||
|
||
<View className="after-item mt-40">
|
||
<View className="after-item-label color-hui">退货数量*</View>
|
||
<View className="after-item-input">
|
||
<View className="input-txt color-hui">{`${afterSaleTotalNum || '请选择退货数量'}`}</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* <View className='picker-reason'>
|
||
<Picker
|
||
mode='selector'
|
||
range={reasons}
|
||
onChange={(e) => {
|
||
setState(draft => {
|
||
draft.reasonIndex = e.detail.value
|
||
})
|
||
}}
|
||
>
|
||
<SpCell title='退款原因' isLink value={<Text>{`${reasons?.[reasonIndex] || '请选择取消原因'}`}</Text>}></SpCell>
|
||
</Picker>
|
||
</View> */}
|
||
<View className='refund-desc-container'>
|
||
|
||
</View>
|
||
{false && <View className='refund-detail'>
|
||
<View className='refund-amount'>
|
||
<SpCell title='退款金额' value={getRealRefundFee()} />
|
||
</View>
|
||
|
||
<View className='refund-point'>
|
||
{/* <SpCell title='退积分' value={info?.point} /> */}
|
||
<SpCell title='退积分' value={getRealRefundPoint()} />
|
||
</View>
|
||
</View>}
|
||
|
||
{/* {curTabIdx == 1 && <View className='return-goods-type'>
|
||
<SpCell border title='退货方式' value={getRefundTypeName()} isLink onClick={() => {
|
||
setState(draft => {
|
||
draft.openRefundType = true
|
||
draft.selectRefundValue = refundType
|
||
})
|
||
}}></SpCell>
|
||
{
|
||
refundType == 'offline' && ((offlineAftersalesIsOpen && VERSION_STANDARD) || (VERSION_PLATFORM && offlineAftersales)) && <>
|
||
<SpCell border title='退货门店' isLink value={<Text className={classNames({
|
||
'placeholder': !refundStore
|
||
})}>{refundStore ? refundStore.name : '请选择退货门店'}</Text>} onClick={() => {
|
||
Taro.navigateTo({
|
||
url: `/subpages/trade/store-picker?distributor_id=${info.distributorId}&refund_store=${refundStore?.address_id}`
|
||
})
|
||
}} />
|
||
<SpCell border title='联系人' value={<AtInput
|
||
name='contact'
|
||
value={contact}
|
||
placeholder='请填写联系人姓名'
|
||
onChange={(e) => {
|
||
setState(draft => {
|
||
draft.contact = e
|
||
})
|
||
}}
|
||
/>}>
|
||
</SpCell>
|
||
<SpCell title='联系电话' value={<AtInput
|
||
name='mobile'
|
||
value={mobile}
|
||
placeholder='请填写联系人电话'
|
||
onChange={(e) => {
|
||
setState(draft => {
|
||
draft.mobile = e
|
||
})
|
||
}}
|
||
/>}></SpCell>
|
||
</>
|
||
}
|
||
</View>} */}
|
||
|
||
<View className='desc-container'>
|
||
<View className='title'>
|
||
<Text>退货商品{afterSaleTotalNum}件</Text>
|
||
<Text>退款金额：<SpPrice size={30} value={afterSaleTotalprice} showSeparator noDecimal={false} /></Text>
|
||
</View>
|
||
{!afterSaleTid ? <View className='desc-content'>
|
||
{/* <Text className='iconfont icon-bianji1'></Text> */}
|
||
{/* <AtTextarea type='textarea' name='description' value={description} placeholder='在此填写备注要求' maxLength={200} onChange={(e) => {
|
||
setState(draft => {
|
||
draft.description = e
|
||
})
|
||
}} /> */}
|
||
<Input className="desc-ipt" value={description} placeholder='在此填写备注要求' onInput={(e) => {
|
||
setState(draft => {
|
||
draft.description = e.detail.value
|
||
})
|
||
}}></Input>
|
||
</View>
|
||
: <View style={{ opacity: '0.8', fontSize: '24rpx' }}>备注：{aftersales?.description || description}</View>}
|
||
{/* <SpUpload
|
||
value={pic}
|
||
max={3}
|
||
onChange={(val) => {
|
||
setState((draft) => {
|
||
draft.pic = val
|
||
})
|
||
}}
|
||
/> */}
|
||
</View>
|
||
|
||
{
|
||
afterSaleDesc.is_open && <View className='after-sale-desc'>
|
||
<View className='desc-title'><Text className='iconfont icon-xinxi'></Text>售后提醒</View>
|
||
<SpHtml content={afterSaleDesc.intro} />
|
||
</View>
|
||
}
|
||
|
||
<SpFloatLayout
|
||
title='选择退货方式'
|
||
className='refund-type'
|
||
open={openRefundType}
|
||
onClose={() => {
|
||
setState((draft) => {
|
||
draft.openRefundType = false
|
||
})
|
||
}}
|
||
renderFooter={
|
||
<AtButton circle type='primary' onClick={() => {
|
||
setState(draft => {
|
||
draft.refundType = selectRefundValue
|
||
draft.openRefundType = false
|
||
})
|
||
}}>
|
||
确定
|
||
</AtButton>
|
||
}
|
||
>
|
||
{refundTypeList.map((item, index) => (
|
||
<View className='refund-type-item' key={`refund-type-item__${index}`}>
|
||
<SpCheckbox
|
||
checked={item.value == selectRefundValue}
|
||
onChange={onChangeRefundType.bind(this, item)}
|
||
>
|
||
<View className='refund-item-wrap'>
|
||
<View className='title'>{item.title}</View>
|
||
<View className='desc'>{item.desc}</View>
|
||
</View>
|
||
</SpCheckbox>
|
||
</View>
|
||
))}
|
||
</SpFloatLayout>
|
||
|
||
<AtCurtain
|
||
className='curtain'
|
||
isOpened={isOpened}
|
||
onClose={() => {
|
||
setState((draft) => {
|
||
draft.isOpened = false
|
||
})
|
||
}}
|
||
>
|
||
<View className="curtain_content">
|
||
<View className="curtain_content_title">
|
||
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
|
||
<Text style={{ marginLeft: '6px' }}>退货流程</Text>
|
||
</View>
|
||
<View className={`receiver_name ${false && 'active'}`}>提交申请</View>
|
||
<View className={`receiver_name ${aftersales?.progress == 0 && 'active'}`} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
||
<Text style={{ marginRight: '36px' }}>商家处理</Text>
|
||
{/* <View style={{ color: '#000', fontSize: '20rpx' }}>还剩<AtCountdown
|
||
format={{ day: '天', hours: '时', minutes: '分', seconds: '' }}
|
||
isShowDay
|
||
day={1}
|
||
hours={23}
|
||
minutes={59}
|
||
seconds={0}
|
||
/></View> */}
|
||
</View>
|
||
<View className="receiver_name op">商家同意后，请按照给出的退货地址退货，并请记录退货运单</View>
|
||
<View className="receiver_name op">如商家拒绝，您可以修改申请后再次发起，商家会重新处理</View>
|
||
<View className="receiver_name op" style={{ marginBottom: '50rpx' }}>如商家超时未处理，退货申请将达成，请按系统给出的退货地址退货</View>
|
||
<View className={`receiver_name ${[2].includes(aftersales?.progress) && 'active'}`}>寄回商品</View>
|
||
<View className={`receiver_name ${aftersales?.progress == 4 && aftersales?.aftersalesStatus != 2 && 'active'}`}>商家退款</View>
|
||
<View className={`receiver_name ${aftersales?.progress == 4 && aftersales?.aftersalesStatus == 2 && 'active'}`}>退款成功</View>
|
||
<View className="line"></View>
|
||
<View className="curtain_content_text">
|
||
<View className="curtain_content_text_title">温馨提示</View>
|
||
<View class="receiver_item">
|
||
BIRKENSTOCK支持七天(从收到商品之日起开始计算)无理由退换货如需退换货，退回货品需不影响二次销售原装鞋盒务必完好(如鞋盒有遗失需补偿20元)。试穿时需将鞋盒内的包装纸垫于脚下，过程中不刻意踩踏后跟如鞋面或鞋底出现脏污、磨损、破损，鞋跟出现折痕等，都将影响商品的二次销售。我们将无法为您提供七天无理由退换货服务，敬请谅解。如果您还有其他问题或需要更多帮助，可及时联系客服，我们将竭诚为您服务(特别提示:仓库不接受到付、平邮、邮政小包。)
|
||
</View>
|
||
</View>
|
||
<AtButton type='primary' onClick={() => setState((draft) => { draft.isOpened = false })}>我知道了</AtButton>
|
||
</View>
|
||
</AtCurtain>
|
||
<AtCurtain
|
||
className='curtain'
|
||
isOpened={isAddrOpened}
|
||
onClose={() => {
|
||
setState((draft) => {
|
||
draft.isAddrOpened = false
|
||
})
|
||
}}
|
||
>
|
||
<View className="curtain_content">
|
||
<View className="curtain_content_title">
|
||
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
|
||
<Text style={{ marginLeft: '6px' }}>退货地址</Text>
|
||
</View>
|
||
<View className={`addr_item`}>
|
||
<View className="addr_item_left">收件人</View>
|
||
<View className="addr_item_right">{aftersales?.afterSalesContact}</View>
|
||
</View>
|
||
<View className={`addr_item`}>
|
||
<View className="addr_item_left">联系电话</View>
|
||
<View className="addr_item_right">{aftersales?.afterSalesMobile}</View>
|
||
</View>
|
||
<View className={`addr_item`}>
|
||
<View className="addr_item_left">收件地址</View>
|
||
<View className="addr_item_right">{aftersales?.afterSalesAddress}</View>
|
||
</View>
|
||
<View className={`addr_item`}>
|
||
<View className="addr_item_left">邮编</View>
|
||
<View className="addr_item_right">{aftersales?.afterSalesZip}</View>
|
||
</View>
|
||
<View className="fuzhi">复制地址</View>
|
||
<View className="line" style={{ margin: '130rpx 0 110rpx 0' }}></View>
|
||
<View className="curtain_content_text">
|
||
<View className="curtain_content_text_title">温馨提示</View>
|
||
<View class="receiver_item">
|
||
BIRKENSTOCK支持七天(从收到商品之日起开始计算)无理由退换货如需退换货，退回货品需不影响二次销售原装鞋盒务必完好(如鞋盒有遗失需补偿20元)。试穿时需将鞋盒内的包装纸垫于脚下，过程中不刻意踩踏后跟如鞋面或鞋底出现脏污、磨损、破损，鞋跟出现折痕等，都将影响商品的二次销售。我们将无法为您提供七天无理由退换货服务，敬请谅解。如果您还有其他问题或需要更多帮助，可及时联系客服，我们将竭诚为您服务(特别提示:仓库不接受到付、平邮、邮政小包。)
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</AtCurtain>
|
||
</SpPage>
|
||
}
|
||
|
||
TradeAfterSale.options = {
|
||
addGlobalClass: true
|
||
}
|
||
|
||
export default TradeAfterSale
|