要搞直接登录
This commit is contained in:
xk_guohonglei
211
pages/orderList/dailyOrder/dailyOrder.vue
Normal file
211
pages/orderList/dailyOrder/dailyOrder.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user