video_mini/pagesA/integral/pointsdetail.vue

<template>
	<view class="pagesContent">
		<view class="navBack">
			<uni-icons class="backIcon" type="left" size="24" color="#333333" @click="navBack"></uni-icons>
			积分明细
		</view>
		<view class="box flex alcenter"
			style="height: 120rpx; margin: 0 26rpx; width: 700rpx;justify-content: space-between">
			<view class="flex alcenter" style="margin-left: 36rpx;">
				<text class="ft14 ftw500" style="color: #666666;">积分余额：</text>
				<text class="ft24 ftw600 cl-333">{{score}}</text>
			</view>
			<view class="ft14 ftw500" style="margin-right: 36rpx; border: 2rpx solid #09D89E;width: 172rpx;
height: 60rpx; text-align: center; line-height: 60rpx; color: #09D89E;border-radius: 12rpx;" @click="shopjing">兑换金豆
			</view>
		</view>
		<view class="content">
			<view class="typeTab">
				<view :class="['typeItem',{'typeCheck':typeCheck==2}]" @click="changeType(2)">收入明细</view>
				<view :class="['typeItem',{'typeCheck':typeCheck==1}]" @click="changeType(1)">支出明细</view>
			</view>

			<view class="myList">
				<view class="lineItem" v-for="(item,index) in listData" :key="item.id">
					<view class="lineInfo">
						<view class="lineName">{{item.memo}}</view>
						<view class="lineDescribe">{{item.createtime}}</view>
					</view>
					<view class="lineNum">{{item.score}}</view>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
		<integralTrade ref="integral"> </integralTrade>
	</view>
</template>

<script>
	import integralTrade from "@/pagesA/components/integralTrade.vue"
	export default {
		components: {
			integralTrade
		},
		data() {
			return {
				remark: "",
				typeCheck: 2,
				listData: [],
				pages: {
					currentPage: 1,
					pageSize: 10,
					allPage: 1,
				},
				status: 'more',
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				score:"",
			}
		},
		onLoad() {
			this.status = 'more';
			this.changeType(2)
			this.getuser()
		},
		onReachBottom() {
			if (this.pages.currentPage <= this.pages.allPage) {
				this.getuserscoreinfo()
				this.status = 'more';
			}
		},
		methods: {
			navBack() {
				uni.navigateBack(1);
			},
			changeType(item) {
				this.typeCheck = item
				this.getuserscoreinfo()
			},
			getuserscoreinfo() {
				this.status = 'loading';
				this.$httpRequest({
					url: '/api/user/userscoreinfo',
					methods: "POST",
					data: {
						page: this.pages.currentPage,
						limit: this.pages.pageSize,
						type: this.typeCheck
					},
				}).then(res => {
						this.status = ''
						if (this.pages.currentPage == 1) {
							this.listData = res.rows;
							this.pages.allPage = Math.ceil(res.data.total / this.pages.pageSize);
						} else if (res.rows.length > 0) {
							this.listData.push(...res.rows)
						} else {
							this.status = 'noMore';
							this.pages.isNextPage = 1;
						}
						this.pages.currentPage++;
				}).catch(err => {
					this.status = '';
				})
			},
			//获取 用户积分
			getuser() {
				this.$httpRequest({
					url: '/api/user/index',
					methods: "POST",
				}).then(res => {
					console.log(res.data.score);
					this.score = res.data.score
				}).catch(err => {})
			},

			shopjing() {
				this.$refs.integral.pointsyesshop()
			}




		}
	}
</script>

<style scoped>
	.pagesContent {
		background: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/order_bg.png);
	padding-top: 58rpx;
		background-repeat: no-repeat;
		background-size: 750rpx 356rpx;
		background-color: #Ffffff;
		min-height: 100vh;

	}

	.navBack {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		text-align: center;
		height: 120rpx;
		line-height: 120rpx;
		position: relative;
		z-index: 1;
	}

	.backIcon {
		position: absolute;
		left: 16rpx;
		top: 0rpx;
	}

	.content {
		padding: 0 26rpx;
		/* background-color: #Ffffff; */
	}

	.typeTab {
		padding: 0 42rpx;
		padding-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;



	}

	.typeItem {
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
		margin-right: 70rpx;
	}

	.typeCheck {
		color: #333333;
		position: relative;
	}

	.typeCheck:before {
		content: ' ';
		position: absolute;
		width: 48rpx;
		height: 4px;
		background-color: #333333;
		bottom: -16rpx;
		left: calc(50% - 30rpx);
	}


	.lineImg {
		width: 192rpx;
		height: 240rpx;
		border-radius: 8rpx;
	}

	.lineName {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;

	}

	.lineDescribe {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
	}

	.lineNum {
		font-weight: 500;
		font-size: 32rpx;
		color: #EF1857;
		line-height: 44rpx;
	}

	.lineItem {
		display: flex;
		padding-top: 24rpx;
		padding-bottom: 30rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #F7F8F9;
		align-items: center;

	}

	.noListData {
		position: absolute;
		top: 40vh;
		width: 100%;
		text-align: center;
		font-size: 0;



	}

	.noImg {
		width: 314rpx;
		height: 228rpx;
	}

	.noText {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.24);
		line-height: 40rpx;
		text-align: center;
		padding-top: 20rpx;
	}
</style>