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> |