<template>
<div class="integralRecord">
<scroller
v-model="scrollerStatus"
lock-x
scrollbar-y
:pullup-config="upobj"
@on-scroll-bottom="onScrollBottom"
ref="scrollerBottom"
:scroll-bottom-offst="200"
:use-pullup="showUp"
@on-pullup-loading="selPullUp"
:bounce="isbounce"
v-if="listData.length>0"
>
<div>
<div class="list" v-for="(item,key) in listData" :key="key">
<div>
<p style="font-weight:bold; ">{{item.pointRemark}}</p>
<p style="color:#7F7F7FFF;">积分余额: </p>
</div>
<div>
<p style="font-weight:bold;color:#FF483AFF;font-size:15px;">+{{item.points}}积分</p>
<p style="color:#7F7F7FFF;">{{item.createTime}}</p>
</div>
</div>
</div>
</scroller>
</div>
</template>
<script>
import { Scroller } from "vux";
export default {
components: {
Scroller
},
data() {
return {
// height: "-56",
//是否使用上拉组件
showUp: true,
//是否使用边缘回弹效果
isbounce: true,
//上拉组件配置
upobj: {
content: "上拉加载更多",
pullUpHeight: 60,
autoRefresh: true,
downContent: `<spn class="iconfont icon-more" style="font-size:12px"></span>释放后加载`, //
upContent: "",
loadingContent: `<spn class="iconfont icon-more" style="font-size:12px"></span>加载中...`, //
clsPrefix: "xs-plugin-pullup-",
color: "#fff"
},
scrollerStatus: {
pullupStatus: "default"
},
isMounted: false,
token: "1",
id: "",
listData: [],
pageNum: 1,
pageSize: 10
};
},
methods: {
//监听下拉,暂时无使用
onScrollBottom() {},
//上拉加载数据
selPullUp() {
this.pageIndex++;
this.getData();
},
//获取积分列表数据
getData() {
const postData = {
"user-token": this.token,
pageNum: this.pageNum,
pageSize: this.pageSize
};
this.$http.post("/loginapi/user/pointsdetail/all", postData).then(res => {
console.log(res.result.data);
res.result.data.forEach(item => {
this.listData.push(item);
});
if (res.result.data.length < this.pageSize) {
this.isbounce = false;
this.showUp = false;
if (!this.isMounted) {
this.isMounted = true;
} else {
this.$refs.scrollerBottom.disablePullup();
}
} else {
if (!this.isMounted) {
this.isMounted = true;
} else {
this.$refs.scrollerBottom.donePullup();
}
}
});
}
},
mounted() {
this.getData();
}
};
</script>
<style lang="less">
.integralRecord {
.list {
margin-top: 1px;
height: 65px;
box-sizing: border-box;
padding: 12px 18px;
display: flex;
justify-content: space-between;
background-color: #ffffffff;
> div {
flex: 1;
}
& > div:nth-child(2) {
text-align: right;
}
}
}
</style>