|
|
<template> |
|
|
<view class="content my-bg"> |
|
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
|
|
<block slot="backText">返回</block> |
|
|
<block slot="content">加油记录</block> |
|
|
</cu-custom> |
|
|
<scroll-view scroll-x class="bg-white nav"> |
|
|
<view class="flex text-center"> |
|
|
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabList" :key="index" |
|
|
@tap="tabSelect" :data-id="index">{{item}}</view> |
|
|
</view> |
|
|
</scroll-view> |
|
|
<view class="padding padding-bottom-0"> |
|
|
<view v-show="TabCur==0" class="order-list"> |
|
|
<view v-for="item in allOrder" v-if="allOrder.length" :key="item.orderID"> |
|
|
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" /> |
|
|
</view> |
|
|
<view v-if="allOrder.length<1"> |
|
|
<Empty /> |
|
|
</view> |
|
|
<view v-show="load.isLoadMore1"> |
|
|
<uni-load-more :status="load.loadStatus1"></uni-load-more> |
|
|
</view> |
|
|
</view> |
|
|
<view v-show="TabCur==1" class="order-list"> |
|
|
<view v-for="item in payingOrder" v-if="payingOrder.length" :key="item.orderID"> |
|
|
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" /> |
|
|
</view> |
|
|
<view v-if="payingOrder.length<1"> |
|
|
<Empty /> |
|
|
</view> |
|
|
<view v-show="load.isLoadMore2"> |
|
|
<uni-load-more :status="load.loadStatus2"></uni-load-more> |
|
|
</view> |
|
|
</view> |
|
|
<view v-show="TabCur==2" class="order-list"> |
|
|
<view v-for="item in finishedOrder" v-if="finishedOrder.length" :key="item.orderID"> |
|
|
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" /> |
|
|
</view> |
|
|
<view v-if="finishedOrder.length<1"> |
|
|
<Empty /> |
|
|
</view> |
|
|
<view v-show="load.isLoadMore3"> |
|
|
<uni-load-more :status="load.loadStatus3"></uni-load-more> |
|
|
</view> |
|
|
</view> |
|
|
<view v-show="TabCur==3" class="order-list"> |
|
|
<view v-for="item in refundOrder" v-if="refundOrder.length" :key="item.orderID"> |
|
|
<OrderItem class="cu-list order-item menu-avatar comment" :item="item" /> |
|
|
</view> |
|
|
<view v-if="refundOrder.length<1"> |
|
|
<Empty /> |
|
|
</view> |
|
|
<view v-show="load.isLoadMore4"> |
|
|
<uni-load-more :status="load.loadStatus4"></uni-load-more> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import cloudSiteApi from '@/api/cloud-site.js' |
|
|
import OrderItem from '@/components/order-item' |
|
|
import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue' |
|
|
|
|
|
export default { |
|
|
components: { |
|
|
OrderItem, |
|
|
|
|
|
UniLoadMore |
|
|
}, |
|
|
data() { |
|
|
return { |
|
|
tabList: [ |
|
|
'全部', '待支付', '已支付', '退款' |
|
|
], |
|
|
TabCur: 0, |
|
|
pageNumber: 1, |
|
|
istate: -3, |
|
|
scrollLeft: 0, |
|
|
order: { |
|
|
istate: 0, |
|
|
vol: 3, |
|
|
oilName: '0#', |
|
|
orderID: '15979997825872', |
|
|
oilCode: '12396989', |
|
|
oilSiteName: '疯疯疯加油站', |
|
|
carNo: '皖A12354', |
|
|
sourceType: 3, |
|
|
realamount: 4.66, |
|
|
credateDatetime: '2020-10-12 12:30:10' |
|
|
}, |
|
|
allOrder: [], |
|
|
finishedOrder: [], |
|
|
refundOrder: [], |
|
|
payingOrder: [], |
|
|
loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式 |
|
|
isLoadMore: false, //是否加载中 |
|
|
pageNumber1: 1, |
|
|
pageNumber2: 1, |
|
|
pageNumber3: 1, |
|
|
pageNumber4: 1, |
|
|
load: { |
|
|
isLoadMore1: false, |
|
|
loadStatus1: 'loading', |
|
|
isLoadMore2: false, |
|
|
loadStatus2: 'loading', |
|
|
isLoadMore3: false, |
|
|
loadStatus3: 'loading', |
|
|
isLoadMore4: false, |
|
|
loadStatus4: 'loading', |
|
|
} |
|
|
} |
|
|
}, |
|
|
created() { |
|
|
this.loadList(-3, this.pageNumber1) |
|
|
this.loadList(0, this.pageNumber2) |
|
|
this.loadList(1, this.pageNumber3) |
|
|
this.loadList(-2, this.pageNumber4) |
|
|
}, |
|
|
|
|
|
onReachBottom() { //上拉触底函数 |
|
|
if (this.TabCur === 0) { |
|
|
if (!this.load.isLoadMore1) { //此处判断，上锁，防止重复请求 |
|
|
this.load.isLoadMore1 = true |
|
|
this.calcIstate(this.TabCur) |
|
|
} |
|
|
} |
|
|
if (this.TabCur === 1) { |
|
|
if (!this.load.isLoadMore2) { //此处判断，上锁，防止重复请求 |
|
|
this.load.isLoadMore2 = true |
|
|
this.calcIstate(this.TabCur) |
|
|
} |
|
|
} |
|
|
if (this.TabCur === 2) { |
|
|
if (!this.load.isLoadMore3) { //此处判断，上锁，防止重复请求 |
|
|
this.load.isLoadMore3 = true |
|
|
this.calcIstate(this.TabCur) |
|
|
} |
|
|
} |
|
|
if (this.TabCur === 3) { |
|
|
if (!this.load.isLoadMore4) { //此处判断，上锁，防止重复请求 |
|
|
this.load.isLoadMore4 = true |
|
|
this.calcIstate(this.TabCur) |
|
|
} |
|
|
} |
|
|
}, |
|
|
methods: { |
|
|
tabSelect(e) { |
|
|
this.TabCur = e.currentTarget.dataset.id; |
|
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60 |
|
|
}, |
|
|
|
|
|
calcIstate(id) { |
|
|
switch (id) { |
|
|
case 0: |
|
|
this.istate = -3 |
|
|
this.loadList(this.istate, this.pageNumber1) |
|
|
break |
|
|
case 1: |
|
|
this.istate = 0 |
|
|
this.loadList(this.istate, this.pageNumber2) |
|
|
break |
|
|
case 2: |
|
|
this.istate = 1 |
|
|
this.loadList(this.istate, this.pageNumber3) |
|
|
case 3: |
|
|
this.istate = 1 |
|
|
this.loadList(this.istate, this.pageNumber4) |
|
|
break |
|
|
} |
|
|
}, |
|
|
loadList(istate, pageNumber) { |
|
|
const data2 = { |
|
|
istate: istate, //类型：Number 必有字段 备注：订单状态 0待支付 1支付成功 -3 查所有 |
|
|
pageIndex: pageNumber //类型：Number 必有字段 备注：查询第几页,默认一页10条 |
|
|
} |
|
|
cloudSiteApi.getAllSiteOrder(data2).then(res => { |
|
|
console.log(data2.istate, data2.pageIndex) |
|
|
if (res.code === 20000) { |
|
|
switch (istate) { |
|
|
case -3: |
|
|
this.allOrder = this.allOrder.concat(res.data) |
|
|
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页 |
|
|
this.load.isLoadMore1 = true |
|
|
this.load.loadStatus1 = 'nomore' |
|
|
} else { |
|
|
this.pageNumber1++ |
|
|
this.load.isLoadMore1 = false |
|
|
} |
|
|
break |
|
|
case -2: |
|
|
this.refundOrder = this.refundOrder.concat(res.data) |
|
|
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页 |
|
|
this.load.isLoadMore4 = true |
|
|
this.load.loadStatus4 = 'nomore' |
|
|
} else { |
|
|
this.pageNumber4++ |
|
|
this.load.isLoadMore4 = false |
|
|
} |
|
|
break |
|
|
case 0: |
|
|
this.payingOrder = this.payingOrder.concat(res.data) |
|
|
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页 |
|
|
this.load.isLoadMore2 = true |
|
|
this.load.loadStatus2 = 'nomore' |
|
|
} else { |
|
|
this.pageNumber2++ |
|
|
this.load.isLoadMore2 = false |
|
|
} |
|
|
break |
|
|
case 1: |
|
|
this.finishedOrder = this.finishedOrder.concat(res.data) |
|
|
if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页 |
|
|
this.load.isLoadMore3 = true |
|
|
this.load.loadStatus3 = 'nomore' |
|
|
} else { |
|
|
this.pageNumber3++ |
|
|
this.load.isLoadMore3 = false |
|
|
} |
|
|
break |
|
|
|
|
|
} |
|
|
} |
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style scoped> |
|
|
.content { |
|
|
min-height: 100%; |
|
|
} |
|
|
|
|
|
.order-list .order-item:last-of-type { |
|
|
margin-bottom: 0; |
|
|
} |
|
|
</style>
|
|
|
|
