佰川加油
This commit is contained in:
caolc
353
pages/tabbar/order/orderList/orderList.vue
Normal file
353
pages/tabbar/order/orderList/orderList.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<view class="page-content my-bg">
|
||||
<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
|
||||
<!-- <block slot="backText">返回</block> -->
|
||||
<block slot="content">加油记录</block>
|
||||
</cu-custom>
|
||||
<view class="fixed">
|
||||
|
||||
<view class="cu-bar search bg-white">
|
||||
<view class="search-form round">
|
||||
<text class="cuIcon-search"></text>
|
||||
<input :adjust-position="false" type="text" placeholder="搜索 油站名称/订单编号/油品" @input="onChangeSearch"
|
||||
confirm-type="search" @confirm="onSearch" v-model="search" />
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="my-bg 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.title}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="hidden-2">
|
||||
<view class="cu-bar search bg-white">
|
||||
<view class="search-form round">
|
||||
<text class="cuIcon-search"></text>
|
||||
<input @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索 油站名称/订单编号/油品"
|
||||
confirm-type="search" @confirm="onSearch" v-model="search" />
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class=" 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.title}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="margin " v-if="TabCur==0">
|
||||
<view class="" v-if="list.length>0">
|
||||
<order-item @refresh="onRequest" @makePay="makePay" class="" :item="item" v-for="item in list"
|
||||
:key="item.id" />
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<my-empty></my-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin " v-if="TabCur==1">
|
||||
<view class="" v-if="list0.length>0">
|
||||
<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itemx" v-for="itemx in list0"
|
||||
:key="itemx.id" />
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<my-empty></my-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin " v-if="TabCur==2">
|
||||
<view class="" v-if="list1.length>0">
|
||||
<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itemy" v-for="itemy in list1"
|
||||
:key="itemy.id" />
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<my-empty></my-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin " v-if="TabCur==3">
|
||||
<view class=" " v-if="list2.length>0">
|
||||
<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itema" v-for="itema in list2"
|
||||
:key="itema.id" />
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<my-empty></my-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin " v-if="TabCur==4">
|
||||
<view class="" v-if=" list3.length>0">
|
||||
<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itemc" v-for="itemc in list3"
|
||||
:key="itemc.id" />
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<my-empty></my-empty>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more status="more"></uni-load-more>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderApi from '@/api/oil-order.js'
|
||||
import OrderItem from '@/components/order-item'
|
||||
export default {
|
||||
components: {
|
||||
OrderItem
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
TabCur: 0,
|
||||
search: '',
|
||||
status: {
|
||||
loadOrderStatus: 'load',
|
||||
loadOrderStatus0: 'load',
|
||||
loadOrderStatus1: 'load',
|
||||
loadOrderStatus2: 'load',
|
||||
loadOrderStatus3: 'load',
|
||||
},
|
||||
|
||||
tabList: [{
|
||||
title: '全部'
|
||||
}, {
|
||||
title: '待支付'
|
||||
}, {
|
||||
title: '已完成'
|
||||
}, {
|
||||
title: '已取消'
|
||||
}, {
|
||||
title: '已退款'
|
||||
}],
|
||||
|
||||
scrollLeft: 0,
|
||||
list: [],
|
||||
list0: [],
|
||||
list1: [],
|
||||
list2: [],
|
||||
list3: [],
|
||||
currentPage: {
|
||||
currentPage: 1,
|
||||
currentPage0: 1,
|
||||
currentPage1: 1,
|
||||
currentPage2: 1,
|
||||
currentPage3: 1,
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.initList()
|
||||
},
|
||||
onLoad() {
|
||||
this.initList()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.onRequest()
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh()
|
||||
}, 1000);
|
||||
},
|
||||
onReachBottom() {
|
||||
this.nextPage()
|
||||
},
|
||||
methods: {
|
||||
makePay(id) {
|
||||
orderApi.getOrderPayInfo(id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
uni.setStorageSync('orderMade', res.data)
|
||||
uni.setStorageSync('oilItem', res.data)
|
||||
uni.navigateTo({
|
||||
url: '/BagStation/pages/makeOrder/orderPaying'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onChangeSearch() {
|
||||
setTimeout(() => {
|
||||
this.onSearch()
|
||||
}, 500)
|
||||
},
|
||||
initList() {
|
||||
if (this.TabCur == 0 && this.list.length == 0) {
|
||||
this.getOrder('全部', this.currentPage.currentPage,'initList')
|
||||
} else if (this.TabCur == 1 && this.list0.length == 0) {
|
||||
this.getOrder('0', this.currentPage.currentPage0,'initList')
|
||||
} else if (this.TabCur == 2 && this.list1.length == 0) {
|
||||
this.getOrder('1', this.currentPage.currentPage1,'initList')
|
||||
} else if (this.TabCur == 3 && this.list2.length == 0) {
|
||||
this.getOrder('2', this.currentPage.currentPage2,'initList')
|
||||
} else if (this.TabCur == 4 && this.list3.length == 0) {
|
||||
this.getOrder('3', this.currentPage.currentPage3,'initList')
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
this.onRequest()
|
||||
},
|
||||
tabSelect(e) {
|
||||
// this.$emit('onChangeCur', e.currentTarget.dataset.id)
|
||||
this.TabCur = e.currentTarget.dataset.id
|
||||
this.nextPage('tabSelect')
|
||||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||||
// this.initList()
|
||||
},
|
||||
nextPage(val) {
|
||||
if (this.TabCur == 0) {
|
||||
if (this.status.loadOrderStatus == 'load') {
|
||||
this.getOrder('全部', this.currentPage.currentPage,val?val:'nextPage')
|
||||
}
|
||||
} else if (this.TabCur == 1) {
|
||||
if (this.status.loadOrderStatus0 == 'load') {
|
||||
this.getOrder('0', this.currentPage.currentPage0,val?val:'nextPage')
|
||||
}
|
||||
} else if (this.TabCur == 2) {
|
||||
if (this.status.loadOrderStatus1 == 'load') {
|
||||
this.getOrder('1', this.currentPage.currentPage1,val?val:'nextPage')
|
||||
}
|
||||
} else if (this.TabCur == 3) {
|
||||
if (this.status.loadOrderStatus2 == 'load') {
|
||||
this.getOrder('2', this.currentPage.currentPage2,val?val:'nextPage')
|
||||
}
|
||||
} else if (this.TabCur == 4) {
|
||||
if (this.status.loadOrderStatus3 == 'load') {
|
||||
this.getOrder('3', this.currentPage.currentPage3,val?val:'nextPage')
|
||||
}
|
||||
}
|
||||
},
|
||||
onRequest() {
|
||||
if (this.TabCur == 0) {
|
||||
this.currentPage.currentPage = 1
|
||||
this.list = []
|
||||
this.getOrder('全部', this.currentPage.currentPage,'onRequest')
|
||||
} else if (this.TabCur == 1) {
|
||||
this.currentPage.currentPage0 = 1
|
||||
this.list0 = []
|
||||
this.getOrder('0', this.currentPage.currentPage0,'onRequest')
|
||||
} else if (this.TabCur == 2) {
|
||||
this.currentPage.currentPage1 = 1
|
||||
this.list1 = []
|
||||
this.getOrder('1', this.currentPage.currentPage1,'onRequest')
|
||||
} else if (this.TabCur == 3) {
|
||||
this.currentPage.currentPage2 = 1
|
||||
this.list2 = []
|
||||
this.getOrder('2', this.currentPage.currentPage2,'onRequest')
|
||||
} else if (this.TabCur == 4) {
|
||||
this.currentPage.currentPage3 = 1
|
||||
this.list3 = []
|
||||
this.getOrder('3', this.currentPage.currentPage3,'onRequest')
|
||||
}
|
||||
},
|
||||
getOrder(id, page, tip) {
|
||||
let postData = {
|
||||
currentPage: page, //类型：Number 必有字段 备注：无
|
||||
pageSize: 10, //类型：Number 必有字段 备注：无
|
||||
index: (page - 1) * 10,
|
||||
params: { //类型：Object 必有字段 备注：无
|
||||
orderStatus: id == '全部' ? '' : (id +''), //类型：String 必有字段 备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
|
||||
search: this.search //类型：String 必有字段 备注：搜索 ( 油站名称/ 订单编号/ 油品)
|
||||
},
|
||||
}
|
||||
console.log('tip',id,tip)
|
||||
orderApi.getOrderInfoByPage(postData).then(res => {
|
||||
if (res.code == 20000) {
|
||||
// console.log('订单列表厂房发', page, res.data.list.length)
|
||||
// 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
|
||||
if (id == '0') {
|
||||
// 0：待支付 list0
|
||||
this.list0 = this.list0.concat(res.data.list)
|
||||
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.status.loadOrderStatus0 = 'nomore'
|
||||
uni.showToast({
|
||||
title: '就这么多啦',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
this.currentPage.currentPage0++
|
||||
this.status.loadOrderStatus0 = 'load'
|
||||
}
|
||||
} else if (id == '1') {
|
||||
// 1：已支付 list1
|
||||
this.list1 = this.list1.concat(res.data.list)
|
||||
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.status.loadOrderStatus1 = 'nomore'
|
||||
uni.showToast({
|
||||
title: '就这么多啦',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
this.currentPage.currentPage1++
|
||||
this.status.loadOrderStatus1 = 'load'
|
||||
this.$emit('changeOrderLoadStatus', id, 'load', false)
|
||||
|
||||
|
||||
}
|
||||
} else if (id == '2') {
|
||||
//2：已取消 list2
|
||||
this.list2 = this.list2.concat(res.data.list)
|
||||
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.status.loadOrderStatus2 = 'nomore'
|
||||
uni.showToast({
|
||||
title: '就这么多啦',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
this.currentPage.currentPage2++
|
||||
this.status.loadOrderStatus2 = 'load'
|
||||
this.$emit('changeOrderLoadStatus', id, 'load', false)
|
||||
|
||||
}
|
||||
} else if (id == '3') {
|
||||
// 3：已退款 list3
|
||||
this.list3 = this.list3.concat(res.data.list)
|
||||
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.status.loadOrderStatus3 = 'nomore'
|
||||
uni.showToast({
|
||||
title: '就这么多啦',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
this.currentPage.currentPage3++
|
||||
this.status.loadOrderStatus3 = 'load'
|
||||
|
||||
}
|
||||
} else if (id == '全部') {
|
||||
// 全部 list
|
||||
this.list = this.list.concat(res.data.list)
|
||||
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||||
this.status.loadOrderStatus = 'nomore'
|
||||
uni.showToast({
|
||||
title: '就这么多啦',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
this.currentPage.currentPage++
|
||||
this.status.loadOrderStatus = 'load'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
min-height: 100%;
|
||||
/* margin-bottom: 4rem; */
|
||||
}
|
||||
|
||||
.placeholder-hidden {
|
||||
min-height: 3rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hidden-2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
width: 750upx;
|
||||
z-index: 4;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user