jianbing/bundle/pages/points/points.vue

<template>
	<view class="index home-bg" :style="[navBackground]">
		<!-- #ifdef MP-WEIXIN -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
				<u-navbar
					:border-bottom="false"
					:is-fixed="false"
					custom-class="home-bg"
					:background="navBackground"
					:is-back="true"
					:backText="backText"
					:title="title"
					title-color="#fff"
					backIconColor="#fff"
				>
				</u-navbar>
			</u-sticky>
		<!-- #endif -->
		
		<view class="row-center balance u-relative" :style="{paddingTop: topSpace + 'px'}">
			<view class="u-text-center w-full">
				<view class="text-fff" style="font-size: 96rpx;">{{ userInfo.user_integral }}</view>
				<view class="text-fff nr">积分</view>
			</view>
			
			<view class="u-absolute right-0">
				<view class="excharge row-center text-default">
					<text class="xs">兑换商品</text>
					<u-icon name="arrow-right" size="22" :color="themeColor" class="u-m-l-10"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="u-p-b-40" style="margin-top: 132rpx;">
			<view class="list bg-white br16 u-p-32">
				<view class="lg">积分明细</view>
				<scroll-view scroll-y="true" style="height: 880rpx;" :refresher-enabled="true" 
					:refresher-triggered="isRefreshing"
					@refresherrefresh="refreshCallback"
					@scrolltolower="upCallback">
					<view class="u-m-t-16">
						<view class="u-m-b-16" v-for="(item, index) in lists" :key="index">
							<view class="nr row-between">
								<view>{{ item.source_type }}</view>
								<view class="deduct">{{ item.change_amount }}</view>
							</view>
							<view class="date xs u-m-t-16">{{ item.change_amount }}</view>
						</view>
					</view>
					<loading-footer :status="loadingStatus"></loading-footer>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getUser, getAccountLog } from '@/api/user'
	import {loadingFun} from "@/utils/tools"
	import { loadingType } from '@/utils/type'

	export default {
		data() {
			return {
				title: '积分',
				statusBarHeight: 0, // 状态栏高度
				bgImageHeight: 244 ,// 背景图高度，单位px，根据实际情况调整
				selectIndex: 0,
				backText: '',
				topSpace: 0,
				userInfo: {
					user_integral: 0,
				},
				lists: [],
				isRefreshing: false, // 控制刷新状态
      			loadingStatus: loadingType.LOADING,
      			page: 1
			}
		},

		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			
			// #ifdef MP-WEIXIN
			this.topSpace = (80 - this.statusBarHeight)
			// #endif
			
			
			// #ifndef MP-WEIXIN
			this.topSpace = (80 + 44)
			// #endif


        	this.getUserInfoFun()
			this.upCallback()
		},

		methods: {
			// 获取用户积分
			getUserInfoFun() {
				getUser().then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					}
				});
			},

			refreshCallback() {
				this.isRefreshing = true;
				this.page = 1
				this.lists = []
				this.loadingStatus = loadingType.LOADING
				this.upCallback()
			},
				
			// 初始化数据
			upCallback() {
				let {
					lists,
					loadingStatus,
					page
				} = this;
				loadingFun(getAccountLog, page, lists, loadingStatus, { source: 2, type: 0}).then(res => {
					if(res) {
						setTimeout(() => {
							this.isRefreshing = false;
						}, 500);
						this.page = res.page;
						this.lists = res.dataList
						this.loadingStatus = res.status
					}
				})
			},
			
		},
		computed: {
		    navBackground() {
		        return {
					'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
				}
		    }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	.index {
		background-size: 100% auto;
	}
	
	.home-bg {
		background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.list {
		margin: 22rpx 34rpx;
		height: 962rpx;
		box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
	}
	
	.date {
		color: rgba(0, 0, 0, .4);
	}
	 
	.excharge {
		width: 180rpx;
		height: 56rpx;
		background-color: #DBE7F6;
		border-top-left-radius: 100rpx;
		border-bottom-left-radius: 100rpx;
	}
</style>