antissoft / lvqianmeiye_ERP

<template>
	<view class="member-rights-container">
		<!-- 会员信息卡片 -->
		<view class="member-info-card" v-if="memberData.MemberId">
			<view class="member-avatar">👤</view>
			<view class="member-name">{{ memberData.MemberName || '未知会员' }}</view>
			<view class="member-id">会员ID: {{ memberData.MemberId }}</view>
		</view>

		<!-- 权益列表 -->
		<view class="rights-list-card">
			<view class="list-header">
				<text class="list-title">剩余权益</text>
				<text class="total-count">共 {{ rightsList.length }} 项</text>
			</view>

			<scroll-view scroll-y class="list-content">
				<view v-if="loading" class="loading">
					<u-loading-icon mode="circle" color="#ff9800"></u-loading-icon>
					<text class="loading-text">正在加载权益数据...</text>
				</view>

				<view v-if="!loading && rightsList.length === 0" class="empty-state">
					<view class="empty-icon">💳</view>
					<view class="empty-text">暂无权益信息</view>
					<view class="empty-subtext">该会员暂无剩余权益</view>
				</view>

				<view v-for="(item, index) in rightsList" :key="index" class="rights-item">
					<view class="item-header">
						<view class="item-name">
							<text class="item-icon">📦</text>
							{{ item.ItemName || '无' }}
						</view>
						<view class="item-price">¥{{ formatMoney(item.ItemPrice) }}</view>
					</view>
					
					<view class="item-details">
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">来源类型:</text>
								<view class="source-tag" :class="item.SourceType === '购买' ? 'tag-purchase' : 'tag-gift'">
									{{ item.SourceType || '无' }}
								</view>
							</view>
						</view>
						
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">总购买:</text>
								<text class="detail-value">{{ formatNumber(item.TotalPurchased) }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">已消费:</text>
								<text class="detail-value consumed">{{ formatNumber(item.ConsumedCount) }}</text>
							</view>
						</view>
						
						<view class="detail-row">
							<view class="detail-item">
								<text class="detail-label">已退款:</text>
								<text class="detail-value refunded">{{ formatNumber(item.RefundedCount) }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">已扣除:</text>
								<text class="detail-value deducted">{{ formatNumber(item.DeductCount) }}</text>
							</view>
						</view>
						
						<view class="detail-row">
							<view class="detail-item highlight">
								<text class="detail-label">剩余:</text>
								<text class="detail-value remaining">{{ formatNumber(item.RemainingCount) }}</text>
							</view>
						</view>
						
						<view v-if="item.Remark" class="remark-row">
							<text class="remark-label">备注:</text>
							<text class="remark-text">{{ item.Remark }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 统计汇总 -->
		<view v-if="!loading && rightsList.length > 0" class="summary-card">
			<view class="summary-title">统计汇总</view>
			<view class="summary-row">
				<view class="summary-item">
					<text class="summary-label">总购买</text>
					<text class="summary-value">{{ formatNumber(totalPurchased) }}</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">已消费</text>
					<text class="summary-value consumed">{{ formatNumber(totalConsumed) }}</text>
				</view>
			</view>
			<view class="summary-row">
				<view class="summary-item">
					<text class="summary-label">已退款</text>
					<text class="summary-value refunded">{{ formatNumber(totalRefunded) }}</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">已扣除</text>
					<text class="summary-value deducted">{{ formatNumber(totalDeducted) }}</text>
				</view>
			</view>
			<view class="summary-row highlight">
				<view class="summary-item">
					<text class="summary-label">总剩余</text>
					<text class="summary-value remaining">{{ formatNumber(totalRemaining) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import clueApi from '@/apis/modules/clue.js'
	
	export default {
		data() {
			return {
				memberId: '',
				memberName: '',
				memberData: {
					MemberId: '',
					MemberName: '',
					RemainingItems: []
				},
				rightsList: [],
				loading: false
			}
		},
		computed: {
			totalPurchased() {
				return this.rightsList.reduce((sum, item) => sum + (parseFloat(item.TotalPurchased) || 0), 0)
			},
			totalConsumed() {
				return this.rightsList.reduce((sum, item) => sum + (parseFloat(item.ConsumedCount) || 0), 0)
			},
			totalRefunded() {
				return this.rightsList.reduce((sum, item) => sum + (parseFloat(item.RefundedCount) || 0), 0)
			},
			totalDeducted() {
				return this.rightsList.reduce((sum, item) => sum + (parseFloat(item.DeductCount) || 0), 0)
			},
			totalRemaining() {
				return this.rightsList.reduce((sum, item) => sum + (parseFloat(item.RemainingCount) || 0), 0)
			}
		},
		onLoad(options) {
			this.memberId = options.memberId || ''
			this.memberName = options.memberName || ''
			this.loadMemberRights()
		},
		methods: {
			// 加载会员剩余权益
			async loadMemberRights() {
				if (!this.memberId) {
					uni.showToast({
						title: '会员ID不能为空',
						icon: 'none'
					})
					return
				}
				
				try {
					this.loading = true
					const result = await clueApi.getMemberRemainingItems(this.memberId)
					
					if (result.code === 200 && result.data) {
						this.memberData = result.data
						this.rightsList = result.data.RemainingItems || []
					} else {
						uni.showToast({
							title: result.msg || '获取会员权益失败',
							icon: 'none'
						})
						this.rightsList = []
					}
				} catch (error) {
					console.error('获取会员权益失败:', error)
					uni.showToast({
						title: '获取会员权益失败',
						icon: 'none'
					})
					this.rightsList = []
				} finally {
					this.loading = false
				}
			},
			
			// 格式化金额
			formatMoney(amount) {
				if (!amount && amount !== 0) return '0.00'
				const num = parseFloat(amount)
				if (isNaN(num)) return '0.00'
				return num.toLocaleString('zh-CN', {
					minimumFractionDigits: 2,
					maximumFractionDigits: 2
				})
			},
			
			// 格式化数字
			formatNumber(num) {
				if (!num && num !== 0) return '0'
				const number = parseFloat(num)
				if (isNaN(number)) return '0'
				return number.toString()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-rights-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
		padding: 20rpx;
	}
	
	.member-info-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(255, 152, 0, 0.15);
		padding: 40rpx;
		margin-bottom: 40rpx;
		text-align: center;
		border: 2rpx solid #ffe0b2;
	}
	
	.member-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #ff9800 0%, #ff6b35 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 24rpx;
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
	}
	
	.member-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #e65100;
		margin-bottom: 16rpx;
	}
	
	.member-id {
		font-size: 28rpx;
		color: #ff9800;
	}
	
	.rights-list-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(255, 152, 0, 0.15);
		overflow: hidden;
		margin-bottom: 40rpx;
		border: 2rpx solid #ffe0b2;
	}
	
	.list-header {
		background: linear-gradient(135deg, #ff9800 0%, #ff6b35 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.list-title {
		font-size: 32rpx;
	}
	
	.total-count {
		font-size: 28rpx;
		opacity: 0.9;
	}
	
	.list-content {
		max-height: calc(80vh - 200rpx);
		overflow-y: auto;
	}
	
	.rights-item {
		padding: 32rpx 40rpx;
		border-bottom: 2rpx solid #fff3e0;
		transition: all 0.2s ease;
	}
	
	.rights-item:last-child {
		border-bottom: none;
	}
	
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	.item-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #e65100;
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex: 1;
	}
	
	.item-icon {
		font-size: 32rpx;
	}
	
	.item-price {
		font-size: 28rpx;
		color: #ff9800;
		font-weight: 600;
	}
	
	.item-details {
		background: #fffbf0;
		border-radius: 16rpx;
		padding: 24rpx;
		border: 2rpx solid #ffe0b2;
	}
	
	.detail-row {
		display: flex;
		margin-bottom: 16rpx;
		gap: 24rpx;
	}
	
	.detail-row:last-child {
		margin-bottom: 0;
	}
	
	.detail-item {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	
	.detail-item.highlight {
		background: #fff3e0;
		padding: 16rpx;
		border-radius: 12rpx;
		border: 2rpx solid #ff9800;
	}
	
	.detail-label {
		color: #ff9800;
		margin-right: 12rpx;
		font-size: 26rpx;
		font-weight: 500;
		white-space: nowrap;
	}
	
	.detail-value {
		flex: 1;
		color: #555;
		font-weight: 500;
	}
	
	.detail-value.consumed {
		color: #67C23A;
		font-weight: 600;
	}
	
	.detail-value.refunded {
		color: #E6A23C;
		font-weight: 600;
	}
	
	.detail-value.deducted {
		color: #909399;
		font-weight: 600;
	}
	
	.detail-value.remaining {
		color: #409EFF;
		font-weight: 700;
		font-size: 32rpx;
	}
	
	.source-tag {
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 500;
	}
	
	.tag-purchase {
		background: #e8f5e9;
		color: #2e7d32;
	}
	
	.tag-gift {
		background: #e3f2fd;
		color: #1976d2;
	}
	
	.remark-row {
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: 2rpx solid #ffe0b2;
		display: flex;
		align-items: flex-start;
		font-size: 26rpx;
	}
	
	.remark-label {
		color: #ff9800;
		margin-right: 12rpx;
		white-space: nowrap;
	}
	
	.remark-text {
		flex: 1;
		color: #666;
		word-break: break-all;
	}
	
	.summary-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(255, 152, 0, 0.15);
		padding: 40rpx;
		border: 2rpx solid #ffe0b2;
	}
	
	.summary-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #e65100;
		margin-bottom: 24rpx;
		text-align: center;
	}
	
	.summary-row {
		display: flex;
		margin-bottom: 16rpx;
		gap: 16rpx;
	}
	
	.summary-row.highlight {
		background: #fff3e0;
		padding: 20rpx;
		border-radius: 16rpx;
		border: 2rpx solid #ff9800;
		margin-top: 16rpx;
	}
	
	.summary-item {
		flex: 1;
		text-align: center;
		padding: 20rpx;
		background: #fffbf0;
		border-radius: 12rpx;
		border: 2rpx solid #ffe0b2;
	}
	
	.summary-label {
		display: block;
		font-size: 26rpx;
		color: #ff9800;
		margin-bottom: 12rpx;
		font-weight: 500;
	}
	
	.summary-value {
		display: block;
		font-size: 32rpx;
		color: #555;
		font-weight: 600;
	}
	
	.summary-value.consumed {
		color: #67C23A;
	}
	
	.summary-value.refunded {
		color: #E6A23C;
	}
	
	.summary-value.deducted {
		color: #909399;
	}
	
	.summary-value.remaining {
		color: #409EFF;
		font-size: 40rpx;
		font-weight: 700;
	}
	
	.loading {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #ff9800;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.loading-text {
		font-size: 28rpx;
	}
	
	.empty-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #ff9800;
	}
	
	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}
	
	.empty-text {
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}
	
	.empty-subtext {
		font-size: 24rpx;
		opacity: 0.7;
		margin-top: 16rpx;
	}
</style>