第一次上传

.svn/pristine/7d/7dfde277fb5e1258e429c5451b725229e1b1ee80.svn-base

@@ -0,0 +1,173 @@
+<template>
+	<view style="padding: 20rpx;">
+
+
+		<!-- 当前积分区域 -->
+		<view class="points-detail-section" style="margin-bottom: 20rpx;" >
+			<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
+				<view class="" style="font-size: 30rpx; color: #999;" >
+					钱包余额
+				</view>
+				<view class="" style="color: red; font-weight: bold; font-size: 34rpx; " >
+					200
+				</view>
+			</view>
+			<view class="" style="margin-top: 20rpx;" >
+				<u-button type="primary" @click="Service.GoPage('/pages/userFunc/withdrow')" :custom-style="contactButtonStyle">立即提现</u-button>
+			</view>
+			<view class="" style="font-size: 26rpx; color: #999; text-align: center; margin-top: 20rpx; " >
+				提现到账时间:T+1工作日
+			</view>
+		</view>
+
+		<!-- 积分明细 -->
+		<view class="points-detail-section">
+			<text class="section-title">积分明细</text>
+			<view class="points-list">
+				<view class="points-item" v-for="(item, index) in pointsList" :key="index">
+					<text :class="['points-number', item.code=='收入' ? 'positive' : 'negative']">
+						{{ item.code=='收入' ? '+' : '-' }}{{ item.amount }}
+					</text>
+					<view class="" style="margin-left: 20rpx;">
+						<view class="points-type">{{ item.name }}</view>
+						<view class="points-date">{{ Service.formatDate(item.addTime,1) }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<up-loadmore :status="status" />
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue';
+	import { Service } from "@/Service/Service"
+	import { vpUserService } from '@/Service/vp/vpUserService'
+	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+	// 积分明细数据类型
+	interface PointsItem {
+		amount:number
+		code:string
+		name:string
+		addTime:string
+	}
+	interface accInfo{
+		account:number
+		integral:number
+		userId:string
+	}
+	// 按钮样式
+	const contactButtonStyle = ref({
+		backgroundColor: '#FF6600',
+		borderColor: '#FF6600',
+		color: '#FFFFFF',
+		fontSize: '28rpx',
+		height: '75rpx',
+		borderRadius: '45rpx',
+		marginRight: '20rpx'
+	});
+	
+	let accInfo=ref<accInfo>()
+	
+	let status=ref('loadmore')
+	let page=ref(1)
+	// 积分明细数据
+	const pointsList = ref<PointsItem[]>([
+		
+	]);
+	
+	
+	
+
+	onLoad(() => {
+		getUseraccInfo()
+	})
+	
+	
+	
+	onReachBottom(()=>{
+		getList()
+	})
+
+	const getUseraccInfo = () => {
+		
+		status.value = 'loadmore'
+		page.value = 1
+		pointsList.value=[]
+		getList()
+	}
+	
+	
+	const getList=()=>{
+		if (status.value !== 'loadmore') {
+			return
+		}
+		status.value = 'loading'
+		vpUserService.GetUserAccInfo(page.value).then(res => {
+			accInfo.value = res.data.accInfo
+			pointsList.value=[...pointsList.value,...res.data.logList]
+			status.value = res.data.logList.length == 10 ? 'loadmore' : 'nomore'
+			page.value++
+		})
+	}
+	
+	
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #f6f6f6;
+	}
+	
+	/* 积分明细 */
+	.points-detail-section {
+		background-color: #ffffff;
+		padding: 30rpx;
+		border-radius: 20rpx;
+	}
+
+	.points-list {
+		gap: 36rpx;
+	}
+
+	.points-item {
+		display: flex;
+		align-items: center;
+
+		margin: 20rpx 0;
+	}
+
+	.points-item:last-child {
+		border-bottom: none;
+		padding-bottom: 0;
+	}
+
+	.points-type {
+		font-size: 32rpx;
+		color: #333333;
+		flex: 1;
+	}
+
+	.points-number {
+		font-size: 32rpx;
+		font-weight: bold;
+		margin-right: 24rpx;
+		min-width: 80rpx;
+		text-align: right;
+	}
+
+	.points-number.positive {
+		color: #4CD964;
+	}
+
+	.points-number.negative {
+		color: #FF4D4F;
+	}
+
+	.points-date {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	
+</style>