212 lines
6.5 KiB
Vue
212 lines
6.5 KiB
Vue
<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="loadStatus3"></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'
|
||
import Empty from '@/components/Empty'
|
||
export default {
|
||
components: {
|
||
OrderItem,
|
||
Empty,
|
||
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: [],
|
||
payingOrder: [],
|
||
loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||
isLoadMore: false, //是否加载中
|
||
pageNumber1: 1,
|
||
pageNumber2: 1,
|
||
pageNumber3: 1,
|
||
load: {
|
||
isLoadMore1: false,
|
||
loadStatus1: 'loading',
|
||
isLoadMore2: false,
|
||
loadStatus2: 'loading',
|
||
isLoadMore3: false,
|
||
loadStatus3: 'loading',
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.loadList(-3, this.pageNumber1)
|
||
this.loadList(0, this.pageNumber2)
|
||
this.loadList(1, this.pageNumber3)
|
||
},
|
||
|
||
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)
|
||
}
|
||
}
|
||
},
|
||
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)
|
||
break
|
||
}
|
||
},
|
||
loadList(istate, pageNumber) {
|
||
const data2 = {
|
||
istate: istate, //类型：Number 必有字段 备注：订单状态 0待支付 1支付成功 -3 查所有
|
||
pageIndex: pageNumber //类型：Number 必有字段 备注：查询第几页,默认一页10条
|
||
}
|
||
cloudSiteApi.getSiteOrder(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 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>
|