114 lines
5.2 KiB
JavaScript
114 lines
5.2 KiB
JavaScript
import { Image, Input, Text, View } from "@tarojs/components"
|
||
|
||
import empty from '@/images/empty.png'
|
||
import './index.scss'
|
||
import { Button } from "@nutui/nutui-react-taro"
|
||
import { useState } from "react"
|
||
import Taro from "@tarojs/taro"
|
||
import backNav from '@/images/backNav.png'
|
||
import { Picker } from "@nutui/nutui-react-taro"
|
||
import { Infiniteloading } from "@nutui/nutui-react-taro"
|
||
import { useEffect } from "react"
|
||
import { orderList } from "../../utils/api"
|
||
import { navigateTo, orderState } from "../../utils/utils"
|
||
|
||
|
||
|
||
const Login = () => {
|
||
const limit = 20
|
||
const [tabKey, setTabKey] = useState('0')
|
||
const [chanel] = useState('all')
|
||
const [page, setPage] = useState(1)
|
||
const [list, setList] = useState([])
|
||
const [total, setTotal] = useState(0)
|
||
|
||
// 返回页面
|
||
const backFn = () => {
|
||
Taro.getCurrentPages().length > 0 && Taro.navigateBack()
|
||
}
|
||
|
||
useEffect(() => {
|
||
const offset = (page - 1) * limit
|
||
let state = tabKey
|
||
if (tabKey == '0') {
|
||
state = ''
|
||
}
|
||
orderList(chanel, { state, offset, limit }).then(re => {
|
||
setList(re.items)
|
||
setTotal(re.total)
|
||
})
|
||
}, [tabKey, page])
|
||
|
||
|
||
return <View className="order-frame bg-slate-50 h-screen text-base">
|
||
<View className='addr-detail-title'>
|
||
<Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
|
||
我的订单
|
||
|
||
</View>
|
||
<View className="order-container relative">
|
||
|
||
<View className="order-tabs flex-around">
|
||
<View className={'order-tab-pane ' + (tabKey == '0' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('0')}>全部</View>
|
||
<View className={'order-tab-pane ' + (tabKey == 'paid' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('paid')}>待发货</View>
|
||
<View className={'order-tab-pane ' + (tabKey == 'sent' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('sent')}>已发货</View>
|
||
<View className={'order-tab-pane ' + (tabKey == 'received' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('received')}>已收货</View>
|
||
</View>
|
||
<View className="orderScroll" id="orderScroll">
|
||
{
|
||
list.length > 0 && <Infiniteloading
|
||
containerId="orderScroll"
|
||
useWindow={false}
|
||
loadTxt="loading"
|
||
loadMoreTxt={<View></View>}
|
||
loadIcon='loading'
|
||
hasMore={total > list.length}
|
||
onLoadMore={(x) => {
|
||
setPage(p => p + 1)
|
||
x()
|
||
}}
|
||
>
|
||
{
|
||
list.map(item => {
|
||
return <View className="order-item-container mt20 flex-col" key={item.id}>
|
||
<View className="flex-between">
|
||
<Text>订单号：{item.id}</Text>
|
||
<Text className="text-gold">{orderState.get(item.state)}</Text>
|
||
</View>
|
||
<View className="order-goods flex-between" onClick={() => Taro.navigateTo({ url: `/pages/order-detail/index?id=${item.id}` })}>
|
||
<View className="order-goods-left flex-start">
|
||
<Image src={item.product.cover_image} className="order-goods-img" />
|
||
<View className="flex-col ml17">
|
||
<Text>{item.product.name}</Text>
|
||
<Text>¥{item.amount}</Text>
|
||
</View>
|
||
</View>
|
||
<View className="order-goods-num">X1</View>
|
||
</View>
|
||
<View className="order-goods-action flex-between">
|
||
<View className="order-goods-settle">
|
||
<Text>已付金额:</Text>
|
||
<Text className="text-gold">¥{item.amount}</Text>
|
||
</View>
|
||
<Button className="order-goods-btn flex-center order-btn-algin" onClick={() => {
|
||
navigateTo(`/pages/settle/index?id=${item.product_id}`)
|
||
}}>再次购买</Button>
|
||
{/* <Button className="order-goods-btn flex-center order-btn-pay">立即付款</Button> */}
|
||
</View>
|
||
</View>
|
||
})
|
||
}
|
||
|
||
</Infiniteloading>
|
||
}
|
||
{
|
||
!list.length && <Image src={empty} className="order-empty" />
|
||
}
|
||
</View>
|
||
|
||
</View>
|
||
</View>
|
||
}
|
||
|
||
|
||
export default Login |