<!--
* @Description:
* @Author: 熊成强
* @Date: 2019-07-20 08:48:53
* @LastEditTime: 2019-07-27 16:11:38
* @LastEditors: 熊成强
-->
<template>
<div class="myOrder">
<van-tabs
title-active-color="#007AFF"
title-inactive-color="#333333"
color="#007AFF"
v-model="active"
animated
swipeable
sticky
:offset-top="46"
>
<van-tab v-for="i in styleList" :name="i.value" :title="i.label" :key="i.value">
<div class="bscroll" ref="bscroll">
<div>
<div class="pulldown-wrapper">
<div v-show="beforePullDown">
<div class="jiazhai">
<img
style="width:30px;height:30px;"
:class="{isshuaxin:isShuaxin}"
src="/static/icon/to.png"
alt
/>
<span>{{reshua}}</span>
</div>
</div>
<div v-show="!beforePullDown">
<div v-show="isPullingDown">
<vue-loading
type="bars"
color="#d9544e"
:size="{ width: '30px', height: '24px' }"
></vue-loading>
</div>
<div v-show="!isPullingDown">
<span>刷新成功</span>
</div>
</div>
</div>
<orderitems :list="list" class="order-item" @click="toDeatil(list)"></orderitems>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import orderitems from '@/components/OrderItems'
import BScroll from 'better-scroll'
import apis from '@/api/order'
export default {
components: {
orderitems,
},
mounted () {
let that = this
this.getOrderList()
//每次进来会自动进行一次数据请求
this.$nextTick(() => {
this._initScroll()
})
},
data () {
return {
isShuaxin: false,
reshua: '下拉刷新',
beforePullDown: true,
isPullingDown: false,
//88
options: {
bounce: true,
pullDownRefresh: {
threshold: 55, // 当下拉到超过顶部 50px 时,触发 pullingDown 事件
stop: 46 // 刷新数据的过程中,回弹停留在距离顶部还有 20px 的位置
},
pullUpLoad: {
threshold: -20 // 在上拉到超过底部 20px 时,触发 pullingUp 事件
},
// pullDownRefresh: false, //关闭下拉
// pullUpLoad: false, // 关闭上拉
click: true,
probeType: 3,
startY: 0,
scrollbar: false
},
dropDown: false,
styleList: [
{
value: '1024',
label: '全部'
},
{
value: '1001',
label: '已付款'
},
{
value: '301',
label: '待收货'
},
{
value: '1002',
label: '已完成'
}
],
active: this.$route.query.style || '1024',
list: [],
isLoading: false,
loading: false,
finished: false,
count: 0,
error: false,
param: {
pageSize: 5,
pageNum: 1
}
}
},
watch: {
active: {
handler (n, o) {
this.param = {
pageSize: 5,
pageNum: 1
}
},
deep: true
},
param: {
handler (n, o) {
this.getOrderList()
},
deep: true
}
},
methods: {
_initScroll () {
this.foodsScroll = new BScroll('.bscroll', this.options)
// 下拉
this.foodsScroll.on('pullingDown', () => {
this.beforePullDown = false
this.isPullingDown = true
// 刷新数据的过程中,回弹停留在距离顶部还有20px的位置
this.param = {
pageSize: 5,
pageNum: 1,
isLoading: true
}
})
// 上拉
this.foodsScroll.on('pullingUp', () => {
this.param.pageNum += 1
})
this.foodsScroll.on('scroll', this.scrollHandler)
},
scrollHandler (e) {
this.reshua = e.y > 55 ? '松下刷新' : "下拉刷新"
this.isShuaxin = e.y > 55
},
pullingDownUp () {
this.foodsScroll.finishPullDown()
this.foodsScroll.finishPullUp()
this.foodsScroll.refresh() //重新计算元素高度
},
//获取订单列表
async getOrderList (param = this.param) {
param.s_EQ_orderServiceStatus = this.active
let result = await apis.orderList(param)
this.isPullingDown = false
let timer = setInterval(() => {
this.beforePullDown = true
clearInterval(timer)
}, 1000)
console.log(result.data)
if (param.pageNum < 2) {
this.list = result.data.list
} else if (param.pageNum > 1) {
this.list = this.list.concat(result.data.list)
console.log('xcq', this.list)
}
this.$nextTick(() => {
let timer1 = setInterval(() => {
this.pullingDownUp()
clearInterval(timer1)
}, 500)
})
},
//加载更多
async onLoad () {
// let a = await this.getOrderList()
return
// 异步更新数据
// return
setTimeout(() => {
this.loading = false
this.param.pageNum = this.param.pageNum + 1
// this.finished = true
console.log(this.param.pageNum)
console.log('xcw')
// for (let i = 1; i < this.list.lenght; i++) {
// this.list.push(this.list.length + i);
// }
// if (this.param.pageNum >= 1) {
// this.getOrderList()
// // 加载状态结束
// this.loading = false
// }
// 数据全部加载完成
// if (this.list.length >= this.list.length + 1) {
// this.finished = true
// }
}, 500)
console.log('上拉刷新')
},
//上拉刷新
// onRefresh() {
// // setTimeout(() => {
// this.$toast('刷新成功')
// this.isLoading = false
// this.getOrderList()
// // this.list=[]
// // for (let i = 0; i < 3; i++) {
// // this.list.unhsift();
// // }
// // this.count++
// // }, 500)
// }
onRefresh () {
// 下拉刷新
let timer = setTimeout(() => {
this.param.pageNum = 1
this.isLoading = false
this.getOrderList()
this.$toast('刷新成功')
clearInterval(timer)
}, 1000)
}
}
}
</script>
<style>
.pulldown-wrapper {
position: absolute;
width: 100%;
padding: 20px;
box-sizing: border-box;
transform: translateY(-100%) translateZ(0);
text-align: center;
color: #999;
}
.van-tabs {
height: 100%;
}
.van-tabs__content--animated {
overflow: hidden;
height: 100%;
}
.van-tab__pane {
height: 100%;
}
.order-item {
/* height: 100%; */
}
</style>
<style lang="scss" scoped>
.bscroll {
display: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
.bscroll-container {
background: #ff0000;
}
.drop-down {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 0.8rem;
color: #ccc;
}
.myOrder {
width: 100%;
-webkit-overflow-scrolling: touch;
position: relative;
background: #f8f8f8;
overflow: hidden;
}
.jiazhai {
@extend .flex;
justify-content: center;
img {
transform: rotate(180deg);
transition: all 0.3s;
}
.isshuaxin {
transform: rotate(0deg);
}
}
</style>