3
0
Fork 0
web-store-retail-h5/pages/mine/directPush/index.vue

119 lines
2.7 KiB
Vue

<template>
<view class="container">
<view class="list">
<view class="list-item" v-for="item in list" :key="item.memberCode">
<view class="item-row">
<text class="label">会员编号</text>
<text class="value">{{ item.memberCode }}</text>
</view>
<view class="item-row">
<text class="label">会员手机号</text>
<text class="value">{{ item.phone }}</text>
</view>
<view class="item-row">
<text class="label">结算等级</text>
<text class="value">{{ item.settleGradeVal }}</text>
</view>
<view class="item-row">
<text class="label">会员昵称</text>
<text class="value">{{ item.nickName }}</text>
</view>
<view class="item-row">
<text class="label">创建时间</text>
<text class="value">{{ item.creationTime }}</text>
</view>
</view>
</view>
<view class="load-more">
<text v-if="status === 'loading'">加载中...</text>
<text v-if="status === 'nomore'">没有更多数据了</text>
</view>
</view>
</template>
<script>
import { getDirectPushList } from '@/config/mine'
export default {
name: 'DirectPush',
data() {
return {
list: [],
pageNum: 1,
pageSize: 10,
total: 0,
status: 'loading', // loading, loadmore, nomore
}
},
onLoad() {
uni.setNavigationBarTitle({
title: '服务列表',
})
this.getDirectPushList()
},
onReachBottom() {
if (this.status === 'nomore' || this.status === 'loading') {
return
}
this.pageNum++
this.getDirectPushList()
},
methods: {
getDirectPushList() {
this.status = 'loading'
getDirectPushList({
pageNum: this.pageNum,
pageSize: this.pageSize,
})
.then(res => {
this.list = this.list.concat(res.rows)
this.total = res.total
if (this.list.length >= this.total) {
this.status = 'nomore'
} else {
this.status = 'loadmore'
}
})
.catch(() => {
if (this.pageNum > 1) {
this.pageNum--
}
this.status = 'loadmore'
})
},
},
}
</script>
<style lang="scss" scoped>
.container {
background-color: #f0f2f5;
min-height: 100vh;
padding-top: 1rpx;
}
.list-item {
background-color: #ffffff;
margin: 16rpx 24rpx;
padding: 16rpx 24rpx;
border-radius: 8rpx;
}
.item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12rpx 0;
font-size: 28rpx;
.label {
color: #8c8c8c;
}
.value {
color: #303133;
}
}
.load-more {
text-align: center;
color: #999;
padding: 20rpx 0;
font-size: 24rpx;
}
</style>