activitys-uniapp/pages/mine/points/pointsDetail.vue

<template>
	<view class="safe-area-inset-bottom">
		<back v-if="backShow" :title="title"></back>
		<u-navbar v-else title-color="#fff" :border-bottom="false" title="积分明细" back-icon-color="#fff"
			:background="{'backgroundColor': vuex_theme.shopBg}"></u-navbar>
		<view class="" >
			<view class="bg-img flex justify-center align-center"
				style="background-image: url('https://vote.guosen-fumao.cn/obsfile/6002585ea7d548508d5f6dcce4ed1116-mingxi.png');height: 340upx;z-index: 9999999999999;">
				<view class="text-center" style="margin-top: 150upx;">
					<view style="font-size: 26upx;color: #FFFFFF;font-weight: 400;">可用积分</view>
					<view style="font-size: 58upx;margin-top: 7rpx;color: #ffffff;">
						{{userPoint || 0}}
					</view>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
				@up="upCallback">
				<view class="flex justify-between align-center container " v-for="(item, index) in list" :key="index">
					<view class="padding">
						<view v-if="item.pointType=='CMCC_POINT_EXCHANGE'" class="type">移动积分兑换道具</view>
						<view v-if="item.pointType=='PUFA_POINT_SEND'" class="type">普法积分赠送</view>
						<view v-if="item.pointType=='PUFA_POINT_EXCHANGE'" class="type">普法积分兑换</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="padding">
						<view class="points" :class="symbol(item.pointType)?symbol(item.pointType):''">{{item.point}} 积分</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import back from "@/components/back.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			back,
		},
		data() {
			return {
				userPoint:0,
				title: '积分明细',
				backShow: true,

				downOption: {
					auto: false
				},
				upOption:{
					auto:false
				},
				list: []
			}
		},
		computed:{
			symbol(){
				return pointType=>{
					let PLUS_LIST=['PUFA_POINT_SEND']
					if (PLUS_LIST.includes(pointType)) {
						return 'plus'
					}else{
						return 'reduce'
					}
				}
			}
		},
		onPageScroll(res) {
			if (res.scrollTop > 0) {
				this.title = ''
			} else {
				this.title = '积分明细'
			}

			if (res.scrollTop > 100) {
				this.backShow = false
			} else {
				this.backShow = true
			}
		},
		onLoad() {
			this.mescroll.resetUpScroll();
			this.fetchUserPufaPoint()
		},
		methods: {
			fetchUserPufaPoint() {
				if (!this.vuex_phone) {
					return
				}
				let params = {
					phone: this.vuex_phone
				}
				this.$api.loginUser.userHeatValueAndPufaPoint(params).then(res => {
					this.userPoint=res.data.data.userPufaPoint
				})
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 800)
			},
			upCallback(mescroll) {
				try {
					let params = {
						current: mescroll.num,
						size: mescroll.size,
						userId: this.vuex_userId
					}
					this.$api.points.list(params).then(res => {
						let data = res.data.data.records
						let total = res.data.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				} 
			}
		}
	}
</script>

<style>
	.container {
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: 20upx;
	}

	.type {
		font-size: 30upx;
		font-family: PingFang-SC-Heavy;
		font-weight: bold;
		margin-bottom: 20upx;
		color: #111111;
	}

	.time {
		font-size: 24upx;
		font-family: PingFang-SC-Medium;
		font-weight: 400;
		color: #999999;
	}

	.points {
		font-size: 28upx;
		font-family: PingFang-SC-Bold;
		color: #111111;
	}
</style>