vpUni/.svn/pristine/3a/3a13748f30150067881d8eca0a283b2ec6a0d210.svn-base

<template>
	<view style="padding: 20rpx;">


		<!-- 当前积分区域 -->
		<view class="current-points-section">
			<text class="points-label">当前积分</text>
			<text class="points-value">2,758</text>
		</view>

		<!-- 积分获取规则 -->
		<view class="rules-section">
			<text class="section-title">积分获取规则</text>
			<view class="rule-item">
				<view class="flex-center" style=" border-radius: 50%; padding: 20rpx; background-color: #F9FAFB; ">
					<image :src="Service.GetIconImg('/static/userFunc/intergration/shop.png')" class="service-icon"></image>
				</view>
				<view class="" style="margin-left: 20rpx;" >
					<view class="rule-title">消费获得积分</view>
					<view class="rule-desc">每消费1元得1分</view>
				</view>
			</view>
			<view class="rule-item">
				<view class="flex-center" style=" border-radius: 50%; padding: 20rpx; background-color: #F9FAFB; ">
					<image :src="Service.GetIconImg('/static/userFunc/intergration/share.png')" class="service-icon"></image>
				</view>
				<view class="" style="margin-left: 20rpx;" >
					<view class="rule-title">分享商品</view>
					<view class="rule-desc">每次分享得5分</view>
				</view>
			</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.isPositive ? 'positive' : 'negative']">
						{{ item.isPositive ? '+' : '-' }}{{ item.points }}
					</text>
					<view class="" style="margin-left: 20rpx;" >
						<view class="points-type">{{ item.type }}</view>
						<view class="points-date">{{ item.date }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import {Service} from "@/Service/Service"
	// 积分明细数据类型
	interface PointsItem {
		id : number;
		type : string;
		points : number;
		isPositive : boolean;
		date : string;
	}

	// 积分明细数据
	const pointsList = ref<PointsItem[]>([
		{
			id: 1,
			type: '购买商品获得积分',
			points: 100,
			isPositive: true,
			date: '2025-09-12 14:30'
		},
		{
			id: 2,
			type: '购买商品获得积分',
			points: 5,
			isPositive: true,
			date: '2025-09-12 11:45'
		},
		{
			id: 3,
			type: '积分抵消费金额',
			points: 20,
			isPositive: false,
			date: '2025-09-11 09:15'
		},
		{
			id: 4,
			type: '购买商品获得积分',
			points: 200,
			isPositive: true,
			date: '2025-09-10 18:00'
		}
	]);
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
	
	.service-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	/* 当前积分区域 */
	.current-points-section {
		background-color: #ffffff;
		padding: 60rpx 0;
		text-align: center;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
	}

	.points-label {
		font-size: 32rpx;
		color: #666666;
		display: block;
		margin-bottom: 20rpx;
	}

	.points-value {
		font-size: 64rpx;
		color: #FF6600;
		font-weight: bold;
	}

	/* 积分获取规则 */
	.rules-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		display: block;
		margin-bottom: 30rpx;
	}

	.rule-item {
		display: flex;
		align-items: center;
		margin-bottom: 36rpx;
	}

	.rule-item:last-child {
		margin-bottom: 0;
	}

	.rule-icon {
		margin-right: 24rpx;
	}

	.rule-title {
		font-size: 32rpx;
		color: #333333;
		margin-right: 24rpx;
	}

	.rule-desc {
		font-size: 28rpx;
		color: #999999;
	}

	/* 积分明细 */
	.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>