yicangzongtai_app_240321/pages/research/community/pointsDetails.vue

<template>
	<view class="points-details">
		<navbar ref="navbar" :config="config" backColor="#999999"></navbar>
		<view class="middle">
			<view class="item" v-for="(item, index) in pointsList" :key="index">
				<view class="left">
					<view class="day">
						<!--           <text v-if="item.model_type == 0">作品</text>
            <text v-if="item.model_type == 1">文章</text>
            <text v-if="item.model_type == 2">商品</text>
            <text v-if="item.model_type == 3">订单</text>
            <text v-if="item.model_type == 4">维权订单</text>
            <text v-if="item.inner_mode == 1">被浏览</text>
            <text v-if="item.inner_mode == 2">被点赞</text>
            <text v-if="item.inner_mode == 3">被评论</text>
            <text v-if="item.inner_mode == 4">被分享</text>
            <text v-if="item.inner_mode == 5">浏览</text>
            <text v-if="item.inner_mode == 6">点赞</text>
            <text v-if="item.inner_mode == 7">评论</text>
            <text v-if="item.inner_mode == 8">分享</text>
            <text v-if="item.inner_mode == 9">购买商品</text>
            <text v-if="item.inner_mode == 10">积分商品支付过期退还</text>
            <text v-if="item.inner_mode == 11">取消订单退还</text> -->
						<text>{{item.integralNote}}</text>
					</view>
					<view class="time">
						{{ item.createTime }}
					</view>
				</view>
				<view class="right" :class="{red:item.billType==1}">
					{{item.billType==1?'+':'-'}}{{item.value}}
				</view>
			</view>
			<loadMore v-if="pointsList.length>0" :status="status"></loadMore>
			<nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
		</view>
	</view>
</template>

<script>
	import {
		detailedInfo
	} from "@/api/notice.js";
	import {
		getIntegralList
	} from "@/api/government.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "积分明细",
					color: "#1A1A1A",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: "#1A1A1A",
				},
				pointsList: [],
				params: {
					page: 1,
					pageSize: 10
				},
				status: 'more', //more|loading|noMore
			};
		},
		onLoad() {
			this.pointsList = [];
			this.getMydetailed();
		},
		onReachBottom() {
			this.params.page++
			this.getMydetailed()
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.pointsList = []
			this.getMydetailed()
		},
		methods: {
			getMydetailed() {
				getIntegralList(this.params).then(res => {
					this.pointsList = this.pointsList.concat(res.rows);
					if (this.pointsList >= res.total) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
				// this.$http.get(detailedInfo, this.params).then((res) => {
				// 	if (res && res.code == 200) {
				// 		uni.stopPullDownRefresh()
				// 		this.pointsList = this.pointsList.concat(res.page.list);
				// 		if (res.page.totalPage <= res.page.currPage) {
				// 			this.status = 'noMore'
				// 		} else {
				// 			this.status = 'more'
				// 		}
				// 	}
				// });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.middle {
		padding: 0 30rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #e6e6e6;
			padding-bottom: 36rpx;

			.left {
				line-height: 1.3;
				.day {
					// opacity: 0.9;
					margin: 34rpx 0 18rpx 0;
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
				}

				.time {
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
				}
			}

			.right {
				flex-shrink: 0;
				padding-left: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
			}

			.red {
				color: #ff0000;
			}
		}

		.item:nth-last-child(2) {
			border-bottom: none;
		}
	}
</style>