forked from angelo/web-retail-h5
				
			
		
			
				
	
	
		
			119 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			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>
 |