uniapp上拉抵触

44 篇文章 1 订阅
27 篇文章 0 订阅
<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呱嗨喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值