zdtap-uniapp-main/pagesCoin/coinCollect.vue

<template>
	<view class="page-content">
		<scroll-view scroll-y class="coin-container" lower-threshold="20" @scrolltolower="pageChange">
			<template v-if="coinList.length > 0">
				<view class="coin-list">
					<view class="coin-item" v-for="(item, index) in coinList" :key="index" @click="toBrandHome(item)">
						<view class="coin-item__left">
							<image :src="item.brandLogo" class="brand-logo" mode="aspectFill"></image>
							<view class="brand-info">
								<text class="brand-name">{{item.brandName || '--'}}</text>
								<text class="exchange-info">{{item.goodsNum}}款商品可兑换</text>
							</view>
						</view>
						<view class="coin-amount">
							<text class="amount">{{item.balance}}</text>
							<text class="cuIcon-rechargefill coin-icon"></text>
						</view>
					</view>
				</view>
			</template>
			
			<template v-else>
				<view class="empty-state">
					<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
					<text class="empty-text">暂无品牌方啤酒币</text>
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getStoreCoinBalance,
	} from '@/api/bar.js'
	export default {
		data() {
			return {
				coinList: [],
			};
		},
		mounted() {
			this.getStoreCoinBalanceFun()
		},
		methods: {
			// 门店啤酒币余额
			getStoreCoinBalanceFun() {
				getStoreCoinBalance().then(res => {
					if(res.data && res.data.length > 0) {
						this.coinList = res.data.filter(it => it.breweryId != 0)
					}
				})
			},
			// 跳转到品牌方页面
			toBrandHome(item) {
				if (!item || !item.breweryId) return
				uni.navigateTo({
					url: `/pages/index/brandHome?breweryId=${item.breweryId}&tab=3`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-content {
	min-height: 100vh;
	background: #F6F7FB;
	box-sizing: border-box;
}

.coin-container {
	height: 100vh;
	box-sizing: border-box;
	padding: 24rpx;
}

.coin-list {
	.coin-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		
		&__left {
			display: flex;
			align-items: center;
			flex: 1;
		}
		
		.brand-logo {
			width: 88rpx;
			height: 88rpx;
			border-radius: 12rpx;
			margin-right: 24rpx;
			background: #F5F5F5;
		}
		
		.brand-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.brand-name {
				font-size: 32rpx;
				color: #333333;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			
			.exchange-info {
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.coin-amount {
			display: flex;
			align-items: center;
			
			.amount {
				font-size: 40rpx;
				color: #333333;
				font-weight: 600;
				margin-right: 8rpx;
			}
			
			.coin-icon {
				color: #FFD700;
				font-size: 32rpx;
			}
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 32rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}
}
</style>