<template>
<view>
<page-loading v-if="showLoading"></page-loading>
<view class="container u-rela">
<view class="bg-style u-abso"></view>
<view class="content u-rela">
<view class="user-info u-flex">
<u-avatar :size="100" :src="customerInfo.avatar"></u-avatar>
<view style="min-width: 0;" class="u-flex-1 u-p-l-20 u-p-r-20 text-white">
<view class="u-font-36 u-line-1">{{customerInfo.name}}</view>
<view class="u-m-t-6 u-font-26">
当前积分:<text class="u-font-40 text-bold">{{customerInfo.customer_score}}</text>
</view>
</view>
</view>
<view class="list-box" v-if="list.length">
<view class="list-item u-flex " v-for="(item, index) in list" :key="index">
<view class="list-item-left">
<view class="top text-overflow">{{item.title}}</view>
<view class="font-12 text-999 u-m-t-10">{{item.createtime | date('yyyy-mm-dd hh:MM:ss')}}</view>
</view>
<view class="list-item-right text-bold font-15 u-text-right">
{{item.mode===1?'+':'-'}}{{item.score}}
</view>
</view>
</view>
<!-- 数据为空 -->
<empty
class="speedEmpty"
:show="nodata"
marginTop="200"
text="暂无数据"
src="https://oss.qijingke.com/h5/default_order.png"
/>
<!-- 加载更多 -->
<u-loadmore v-if="!nodata" :status="loadStatus" class="u-p-30 "></u-loadmore>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
showLoading: false,
page: 1,
pageSize: 20,
total: 0,
list: [],
nodata: false,
loadStatus: 'loadmore',
date: '2021-09',
customerInfo: {},
}
},
onLoad(options){
this.options =options
this.customerInfo = JSON.parse(decodeURIComponent(this.options.customerInfo))
this.getList(true)
},
onReachBottom() {
if (this.loadStatus != 'nomore') {
this.getList()
}
},
methods:{
getList (isOnce) {
this.loadStatus = 'loading'
if (isOnce) {
this.page = 1
this.nodata = false
this.showLoading = true
this.list = []
}
this.$api.scoreMallScoreLog({
// q: this.options.q,
page: this.page,
page_size: this.pageSize,
date: this.date
}).then(res => {
this.showLoading = false
const {list, total} = res.data
this.total = Number(total)
this.list = [...this.list, ...list]
this.loadStatus = this.list.length == this.total ? 'nomore' : 'loading'
this.page++
this.nodata = this.list.length == 0
}).finally(res=>{
this.nodata = this.list.length == 0
})
}
},
}
</script>
<style lang="scss" scoped>
.container{
min-height: 100vh;
.bg-style{
top: 0;
left: 0;
width: 100%;
height: 300rpx;
border-bottom-left-radius: 50% 40rpx;
border-bottom-right-radius: 50% 40rpx;
background: linear-gradient(321deg, #FE3C39 0%, #FD663B 100%);
}
.content{
padding: 56rpx 24rpx 24rpx;
z-index: 12;
.list{
&-box{
min-height: 144rpx;
margin-top: 60rpx;
background-color: #fff;
border-radius: 12rpx;
}
&-item{
padding: 30rpx 24rpx;
&:not(:last-child) {
border-bottom: 1px solid #e8e8e8;
}
&-left{
width: 80%;
}
&-right{
width: 20%;
color: #FE4039;
}
}
}
}
}
</style>
uniapp上拉抵触
最新推荐文章于 2023-10-11 17:03:01 发布