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

<template>
	<view class="safe-area-inset-bottom" :style="vuex_skin">
		<!-- #ifdef MP-WEIXIN -->
		<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>
		<!-- #endif -->
		<view class="">
			<view class="bg-img flex justify-center align-center"
				:class="isH5?'marginTop':''"
				style="height: 340upx;z-index: 999;">

				<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 {
				isH5:false,
				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.fetchUserPufaPoint()

			// #ifdef MP-WEIXIN
			this.mescroll.resetUpScroll();
			// #endif

			// #ifdef H5
			this.isH5 = true
			//h5端要延时才能获取到mescroll对象
			setTimeout(() => {
				this.mescroll.resetUpScroll();
			}, 20)
			// #endif
		},
		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 lang="scss" scoped>
	.container {
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: 20upx;
	}
	
	.marginTop{
		margin-top: -80rpx;
	}

	.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;
	}
	.bg-img{
		position: relative;
		&::after { 
			content: '';
			width: 140%;
			height: 200px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			z-index: -1;
			bottom: 0;
			border-radius: 0 0 50% 50%;
			background: var(--bgColor);
		}
	}
</style>