484 lines
14 KiB
JavaScript
Executable File
484 lines
14 KiB
JavaScript
Executable File
import React, { Component } from 'react'
|
||
import Taro, { getCurrentInstance } from '@tarojs/taro'
|
||
import { View, ScrollView, Text } from '@tarojs/components'
|
||
import { connect } from 'react-redux'
|
||
import { AtTabs, AtTabsPane, AtCurtain } from 'taro-ui'
|
||
import _mapKeys from 'lodash/mapKeys'
|
||
import { Loading, SpNote, SpNavBar, SpPage, SpImage } from '@/components'
|
||
import api from '@/api'
|
||
import { withPager } from '@/hocs'
|
||
import {
|
||
log,
|
||
pickBy,
|
||
resolveOrderStatus,
|
||
getCurrentRoute,
|
||
classNames,
|
||
isNavbar,
|
||
getBrowserEnv,
|
||
VERSION_PLATFORM,
|
||
formatDateTime
|
||
} from '@/utils'
|
||
import { Tracker } from '@/service'
|
||
import TradeItem from './comps/new-item'
|
||
|
||
import './list.scss'
|
||
|
||
@connect(({ colors }) => ({
|
||
colors: colors.current
|
||
}))
|
||
@withPager
|
||
export default class TradeList extends Component {
|
||
$instance = getCurrentInstance()
|
||
constructor(props) {
|
||
super(props)
|
||
|
||
this.state = {
|
||
...this.state,
|
||
curTabIdx: 0,
|
||
tabList: [
|
||
{ title: '全部', status: '0' },
|
||
{ title: '待付款', status: '5' },
|
||
{ title: '待发货', status: '6' },
|
||
{ title: '待收货', status: '1' }
|
||
],
|
||
// 是否显示待评价
|
||
evaluate: 1,
|
||
list: [],
|
||
rate_status: false,
|
||
curItemActionsId: null,
|
||
showDeliveryModal: false,
|
||
deliveryList: [],
|
||
deliveryName: '',
|
||
deliveryCode: ''
|
||
}
|
||
}
|
||
|
||
componentDidMount () {
|
||
const { status = 0, evaluate = 1 } = this.$instance.router.params
|
||
const _tabList = JSON.parse(JSON.stringify(this.state.tabList))
|
||
if (evaluate == 1) {
|
||
_tabList.push({ title: '待评价', status: '7', is_rate: 0 })
|
||
_tabList.push({ title: '已完成', status: '3', is_rate: 0 })
|
||
_tabList.push({ title: '售后', status: '---', is_rate: 0 })
|
||
}
|
||
const tabIdx = _tabList.findIndex((tab) => tab.status === status)
|
||
if (tabIdx >= 0) {
|
||
this.setState(
|
||
{
|
||
curTabIdx: tabIdx,
|
||
list: [],
|
||
evaluate,
|
||
tabList: _tabList
|
||
}
|
||
)
|
||
}
|
||
}
|
||
|
||
componentDidShow () {
|
||
this.resetPage()
|
||
this.setState({
|
||
list: []
|
||
})
|
||
setTimeout(() => {
|
||
this.nextPage()
|
||
}, 500)
|
||
}
|
||
|
||
onPullDownRefresh = () => {
|
||
Tracker.dispatch('PAGE_PULL_DOWN_REFRESH')
|
||
this.refresh()
|
||
}
|
||
|
||
refresh = () => {
|
||
Taro.showLoading({
|
||
title: '加载中',
|
||
icon: 'none'
|
||
})
|
||
this.resetPage(() => {
|
||
this.nextPage()
|
||
this.setState({
|
||
list: []
|
||
})
|
||
Taro.hideLoading()
|
||
})
|
||
}
|
||
|
||
componentWillUnmount () {
|
||
this.hideLayer()
|
||
}
|
||
|
||
calcTimer (totalSec) {
|
||
let remainingSec = totalSec
|
||
const dd = Math.floor(totalSec / 24 / 3600)
|
||
remainingSec -= dd * 3600 * 24
|
||
const hh = Math.floor(remainingSec / 3600)
|
||
remainingSec -= hh * 3600
|
||
const mm = Math.floor(remainingSec / 60)
|
||
remainingSec -= mm * 60
|
||
const ss = Math.floor(remainingSec)
|
||
|
||
return {
|
||
dd,
|
||
hh,
|
||
mm,
|
||
ss
|
||
}
|
||
}
|
||
|
||
async fetch (params) {
|
||
const { tabList, curTabIdx } = this.state
|
||
|
||
params = _mapKeys(
|
||
{
|
||
...params,
|
||
order_type: 'normal',
|
||
status: tabList[curTabIdx].status,
|
||
is_rate: tabList[curTabIdx].is_rate
|
||
},
|
||
function (val, key) {
|
||
if (key === 'page_no') return 'page'
|
||
if (key === 'page_size') return 'pageSize'
|
||
|
||
return key
|
||
}
|
||
)
|
||
|
||
let list = [],
|
||
total = 0,
|
||
rate_status = false
|
||
if (params.status === '---') {
|
||
// params.aftersales_status = 0
|
||
const { list: _list, total_count: _total } = await api.aftersales.list(params)
|
||
list = _list
|
||
total = _total
|
||
rate_status = true
|
||
} else {
|
||
const {
|
||
list: _list,
|
||
pager: { count: _total },
|
||
rate_status: _rate_status
|
||
} = await api.trade.list(params)
|
||
list = _list
|
||
total = _total
|
||
rate_status = _rate_status
|
||
}
|
||
let nList = pickBy(list, {
|
||
tid: 'order_id',
|
||
status_desc: 'order_status_msg',
|
||
order_status_des: 'order_status_des',
|
||
aftersales_bn: ({ aftersales_bn, aftersales }) => {
|
||
return aftersales_bn || aftersales?.aftersales_bn
|
||
},
|
||
aftersales_type: ({ aftersales }) => {
|
||
return aftersales?.aftersales_type
|
||
},
|
||
status: ({ order_status }) => resolveOrderStatus(order_status),
|
||
totalItems: ({ items }) => items?.reduce((acc, item) => +item.num + acc, 0),
|
||
// payment: ({ item_fee_new }) => (item_fee_new / 100).toFixed(2),
|
||
payment: ({ total_fee, refund_fee }) => ((+total_fee || refund_fee) / 100).toFixed(2),
|
||
total_fee: 'total_fee',
|
||
pay_type: 'pay_type',
|
||
point: 'point',
|
||
order_class: 'order_class',
|
||
freight_fee: 'freight_fee',
|
||
freight_type: 'freight_type',
|
||
type: 'type',
|
||
is_rate: 'is_rate',
|
||
dada: 'dada',
|
||
create_date: ({ create_date, create_time }) => {
|
||
return create_date || formatDateTime(create_time * 1000)
|
||
},
|
||
is_all_delivery: 'is_all_delivery',
|
||
is_logistics: 'is_split',
|
||
receipt_type: 'receipt_type',
|
||
delivery_type: 'delivery_type',
|
||
pay_status: 'pay_status',
|
||
delivery_status: 'delivery_status',
|
||
delivery_code: 'delivery_code',
|
||
delivery_corp: 'delivery_corp',
|
||
delivery_corp_name: 'delivery_corp_name',
|
||
delivery_id: 'delivery_id',
|
||
distributor_info: 'distributor_info',
|
||
orders_delivery_id: 'orders_delivery_id',
|
||
order_type: 'order_type',
|
||
can_apply_cancel: 'can_apply_cancel',
|
||
order: ({ items, detail }) =>
|
||
pickBy(items || detail, {
|
||
order_id: 'order_id',
|
||
item_id: 'item_id',
|
||
pic_path: 'pic',
|
||
title: ({ item_name, item_name_2 }) => item_name_2 || item_name,
|
||
origincountry_name: 'origincountry_name',
|
||
origincountry_img_url: 'origincountry_img_url',
|
||
type: 'type',
|
||
item_spec_desc: 'item_spec_desc',
|
||
// price: ({ item_fee_new }) => (item_fee_new / 100).toFixed(2),
|
||
price: ({ total_fee }) => (+total_fee / 100).toFixed(2),
|
||
item_fee: 'item_fee',
|
||
point: 'item_point',
|
||
num: 'num',
|
||
order_item_type: 'order_item_type'
|
||
}),
|
||
timer: ({ auto_cancel_time, create_time }) => auto_cancel_time > parseInt(new Date().getTime() / 1000) ? this.calcTimer(auto_cancel_time - parseInt(new Date().getTime() / 1000)) : null
|
||
})
|
||
|
||
log.debug('[trade list] list fetched and processed: ', nList)
|
||
|
||
this.setState({
|
||
list: [...this.state.list, ...nList],
|
||
rateStatus: rate_status
|
||
})
|
||
|
||
Taro.stopPullDownRefresh()
|
||
|
||
return { total }
|
||
}
|
||
|
||
handleClickTab = (idx) => {
|
||
this.hideLayer()
|
||
if (this.state.page.isLoading) return
|
||
|
||
if (idx !== this.state.curTabIdx) {
|
||
this.resetPage()
|
||
this.setState({
|
||
list: []
|
||
})
|
||
}
|
||
|
||
this.setState(
|
||
{
|
||
curTabIdx: idx
|
||
},
|
||
() => {
|
||
this.nextPage()
|
||
}
|
||
)
|
||
}
|
||
|
||
handleClickItem = (trade) => {
|
||
const { tid, aftersales_bn } = trade
|
||
let url = `/subpage/pages/trade/detail?id=${tid}`
|
||
if (aftersales_bn) {
|
||
url = `/subpages/trade/after-sale?aftersales_bn=${aftersales_bn}&id=${tid}`
|
||
}
|
||
|
||
if (trade.order_class === 'pointsmall') {
|
||
url += `&type=pointitem`
|
||
}
|
||
|
||
Taro.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
|
||
handleClickItemBtn = async (trade, type) => {
|
||
console.log(trade)
|
||
const { tid, aftersales_bn } = trade
|
||
|
||
let detailUrl = `/subpage/pages/trade/detail?id=${tid}`
|
||
|
||
if (trade.order_class === 'pointsmall') {
|
||
detailUrl += `&type=pointitem`
|
||
}
|
||
|
||
if (type === 'confirm') {
|
||
await api.trade.confirm(tid)
|
||
const { fullPath } = getCurrentRoute(this.$instance.router)
|
||
Taro.redirectTo({
|
||
url: fullPath
|
||
})
|
||
return
|
||
}
|
||
|
||
switch (type) {
|
||
case 'cancel':
|
||
Taro.navigateTo({
|
||
url: `/subpage/pages/trade/cancel?order_id=${tid}`
|
||
})
|
||
break
|
||
case 'rate':
|
||
Taro.navigateTo({
|
||
url: `/marketing/pages/item/rate?id=${tid}`
|
||
})
|
||
break
|
||
case 'aftersales':
|
||
Taro.navigateTo({
|
||
url: `/subpages/trade/after-sale?id=${tid}&aftersales_bn=${aftersales_bn || ''}`
|
||
})
|
||
break
|
||
case 'delivery':
|
||
{
|
||
let {
|
||
delivery_code,
|
||
delivery_corp,
|
||
delivery_corp_name,
|
||
orders_delivery_id,
|
||
delivery_type,
|
||
is_all_delivery,
|
||
tid,
|
||
order_type
|
||
} = trade
|
||
this.handleClickDelivery(true, trade)
|
||
// if (is_all_delivery || delivery_type === 'old') {
|
||
// Taro.navigateTo({
|
||
// url: `/subpage/pages/trade/delivery-info?delivery_id=${orders_delivery_id}&delivery_code=${delivery_code}&delivery_corp=${delivery_corp}&delivery_name=${delivery_corp_name || delivery_corp
|
||
// }&delivery_type=${delivery_type}&order_type=${order_type}&order_id=${tid}`
|
||
// })
|
||
// } else {
|
||
// Taro.navigateTo({
|
||
// url: `/subpage/pages/trade/split-bagpack?order_type=${order_type}&order_id=${tid}`
|
||
// })
|
||
// }
|
||
}
|
||
break
|
||
default:
|
||
Taro.navigateTo({
|
||
url: detailUrl
|
||
})
|
||
}
|
||
}
|
||
|
||
handleClickDelivery = async (flag, trade) => {
|
||
if (flag) {
|
||
Taro.showLoading({ title: '' })
|
||
let { delivery_type, delivery_id, order_type, tid: order_id } = trade
|
||
let list = []
|
||
if (delivery_type !== 'new') {
|
||
list = await api.trade.deliveryInfoNew({ delivery_id })
|
||
} else {
|
||
list = await api.trade.deliveryInfo(order_type, order_id)
|
||
}
|
||
const nList = pickBy(list, {
|
||
title: 'AcceptStation',
|
||
content: ({ AcceptTime }) => AcceptTime ? AcceptTime.substring(5, 16) : ''
|
||
})
|
||
this.setState({
|
||
deliveryList: nList,
|
||
deliveryName: trade.delivery_corp_name,
|
||
deliveryCode: trade.delivery_code
|
||
})
|
||
}
|
||
this.setState({ showDeliveryModal: flag })
|
||
Taro.hideLoading()
|
||
// Taro.navigateTo({
|
||
// url: `/subpage/pages/trade/delivery-info?order_type=${this.state.info.order_type}&order_id=${this.state.info.tid}&delivery_code=${this.state.info.delivery_code}&delivery_corp=${this.state.info.delivery_corp}&delivery_name=${this.state.info.delivery_name}`
|
||
// })
|
||
}
|
||
|
||
handleActionClick = (type, item) => {
|
||
this.hideLayer()
|
||
}
|
||
|
||
handleActionBtnClick = (item) => {
|
||
this.setState({
|
||
curItemActionsId: item.tid
|
||
})
|
||
}
|
||
|
||
hideLayer = () => {
|
||
this.setState({
|
||
curItemActionsId: null
|
||
})
|
||
}
|
||
|
||
render () {
|
||
const { colors } = this.props
|
||
const {
|
||
curTabIdx,
|
||
curItemActionsId,
|
||
tabList,
|
||
list = [],
|
||
page,
|
||
rateStatus,
|
||
evaluate,
|
||
showDeliveryModal,
|
||
deliveryList,
|
||
info = {},
|
||
deliveryName,
|
||
deliveryCode
|
||
} = this.state
|
||
|
||
return (
|
||
<SpPage
|
||
isBlack
|
||
className={classNames('page-trade-list', {
|
||
'has-navbar': true || isNavbar()
|
||
})}
|
||
// showNavSearchIcon
|
||
>
|
||
<SpNavBar title='订单列表' leftIconType='chevron-left' fixed='true' />
|
||
<AtTabs
|
||
className={`trade-list__tabs ${colors.data[0].primary ? 'customTabsStyle' : ''}`}
|
||
current={curTabIdx}
|
||
tabList={tabList}
|
||
onClick={this.handleClickTab}
|
||
customStyle={{ color: colors.data[0].primary }}
|
||
>
|
||
{tabList.map((panes, pIdx) => (
|
||
<AtTabsPane current={curTabIdx} key={panes.status} index={pIdx}></AtTabsPane>
|
||
))}
|
||
</AtTabs>
|
||
<ScrollView
|
||
scrollY
|
||
className={`trade-list__scroll ${getBrowserEnv().weixin ? 'with-tabs-wx' : 'with-tabs'}`}
|
||
// onScrollToUpper={this.onPullDownRefresh.bind(this)}
|
||
onScrollToLower={this.nextPage}
|
||
>
|
||
{list.map((item) => {
|
||
return (
|
||
<TradeItem
|
||
payType={item.pay_type}
|
||
key={item.tid}
|
||
rateStatus={rateStatus}
|
||
info={item}
|
||
isShowDistributorInfo={VERSION_PLATFORM}
|
||
showActions={curItemActionsId === item.tid}
|
||
onClick={this.handleClickItem.bind(this, item)}
|
||
onClickBtn={this.handleClickItemBtn.bind(this, item)}
|
||
onActionBtnClick={this.handleActionBtnClick.bind(this, item)}
|
||
onActionClick={this.handleActionClick.bind(this, item)}
|
||
onTimeUp={this.refresh}
|
||
/>
|
||
)
|
||
})}
|
||
{page.isLoading && <Loading>正在加载...</Loading>}
|
||
{!page.isLoading && !page.hasNext && !list.length && (
|
||
<SpNote isUrl img={`${process.env.APP_IMAGE_CDN_NEW}/cart/logo-hui.png`} height={144} width={144}>
|
||
您的{curTabIdx != '0' ? tabList[curTabIdx].title : ''}订单为空
|
||
</SpNote>
|
||
)}
|
||
{!!curItemActionsId && <View className='layer' onClick={this.hideLayer} />}
|
||
</ScrollView>
|
||
<AtCurtain
|
||
className='curtain'
|
||
isOpened={showDeliveryModal}
|
||
onClose={() => {
|
||
this.setState({ showDeliveryModal: false })
|
||
}}
|
||
>
|
||
<View className="curtain_content">
|
||
<View className="curtain_content_title">
|
||
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
|
||
<Text className="" style={{ marginLeft: '6px' }}>物流信息</Text>
|
||
</View>
|
||
<View className="receiver_name">
|
||
{deliveryName}：{deliveryCode}
|
||
</View>
|
||
<ScrollView scrollY
|
||
scrollWithAnimation className="curtain_content_text" showScrollbar={false} enhanced>
|
||
{deliveryList.map((item, index) => <View class="receiver_item" key={`item_${index}`}>
|
||
<View className="receiver_item_left">
|
||
{item.content}
|
||
</View>
|
||
<View className="receiver_item_right">
|
||
{item.title}
|
||
</View>
|
||
</View>)}
|
||
</ScrollView>
|
||
</View>
|
||
</AtCurtain>
|
||
</SpPage>
|
||
)
|
||
}
|
||
}
|