zdtap-uniapp-main/pagesCoin/beerCoin.vue

<template>
	<view class="page-content">
		<!-- :style="{'padding-top': statusBaeHeight + 60 + 'px'}" -->
		<view class="flex" style="padding-top: 24rpx;">
			<view class="left" @click="toPage">
				<view>品牌啤酒币</view>
				<view class="flex justify-between align-end" style="margin-bottom: 26rpx;">
					<text class="fs-20">{{coinList.length}}家品牌方</text>
					<view class="num">
						{{ totalCoin}}
						<text class="cuIcon-rechargefill xl"
							style="color:#FEE034;font-size: 30rpx;margin-left: 10rpx;"></text>
					</view>
				</view>
				<view class="text-right fs-20" style="color: #979797;">多品牌累计数量</view>
			</view>
			<view class="right">
				<view>通用啤酒币</view>
				<view class="num text-right" style="margin-bottom: 26rpx;">
					{{commonCoin}}
					<text class="cuIcon-rechargefill xl"
						style="color:#FEE034;font-size: 30rpx;margin-left: 10rpx;"></text>
				</view>
				<view class="text-right fs-20" style="color: #979797;">用于抵扣任意品牌啤酒币</view>
			</view>
		</view>
		<view class="flex justify-start" style="margin-bottom: 28rpx;margin-top: 28rpx;">
			<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">热门推荐</view>
			<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">关注厂牌</view>
			<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">人气优先</view>
		</view>
		<view class="goods-container">
			<scroll-view scroll-y enable-flex class="flex justify-start flex-wrap" style="height: 100%;"
				lower-threshold="20" @scrolltolower="pageChange">
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
					<view class="cover-box">
						<image :src="item.goodsCover" class="cover"></image>
						<!-- <view class="like">
							<text v-if="index % 2 == 0" class="cuIcon-like" style="color: #1E2019"></text>
							<text v-else class="cuIcon-likefill" style="color: pink"></text>
						</view> -->
					</view>
					<view class="title">
						<text>{{ item.goodsName }}</text>
					</view>
					<view class="flex justify-between align-center" style="padding:26rpx 16rpx">
						<view class="flex align-center">
							<text class="num">{{ item.redeemedNum}}</text>
							<image src="@/static/beerCoin.png" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
							</image>
						</view>
						<!-- <text style="color: #979797;font-size: 20rpx;">青岛啤酒</text> -->
					</view>
				</view>
				<view class="cu-load" style="width: 100%;"
					:class="loading?'loading': goodsList.length == total ? 'over' :'more'"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getStoreCoinBalance,
		
	} from '@/api/bar.js'
	export default {
		data() {
			return {
				statusBaeHeight: 40,
				curTag: 0,
				tabCur: 0,
				loading: false,
				goodsList: [],
				queryForm: {
					pageNum: 1,
					pageSize: 4
				},
				total: 0,
				totalCoin: 0,
				commonCoin: 0,
				coinList:[]
			};
		},
		onLoad() {
			// setTimeout(() => {
			// 	uni.setNavigationBarColor({
			// 		frontColor: '#000000',
			// 		backgroundColor: '#FFFFFF',
			// 		animation: {
			// 			duration: 400,
			// 			timingFunc: 'easeIn'
			// 		}
			// 	})
			// }, 500)
			// this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
			this.getGoodsListFun()
		},
		onShow() {
			this.getStoreCoinBalanceFun()
		},
		methods: {
			tabSelect(e) {
				console.log(e)
				this.tabCur = e.currentTarget.dataset.id;
			},
			changeTag(key) {
				this.curTag = key
				this.queryForm.status = key
				this.queryForm.pageNum = 1
				this.goodsList = []
				this.getGoodsListFun()
			},
			
			toPage() {
				uni.navigateTo({
					url: "/pagesCoin/coinCollect"
				})
			},
			// 跳转详情
			toDetail(item) {
				uni.navigateTo({
					url: "/pagesCoin/goodsDetail?id=" + item.id + "&breweryId=" + item.breweryId
				})
			},
			// 获取商品列表
			getGoodsListFun() {
				this.loading = true
				uni.showLoading({
					mask: true
				})
				getGoodsList(this.queryForm).then(res => {
					// this.goodsList = this.goodsList.concat(res.rows)
					this.total = res.total
					if (res.rows && res.rows.length > 0) {
						res.rows.forEach(it => {
							this.goodsList.push(it)
						})
					}
					// for (let i = 0; i < 20; i++) {
					// 	this.goodsList.push(res.rows[0])
					// }
					this.loading = false
					uni.hideLoading()
				}).catch(() => {
					this.loading = false
					uni.hideLoading()
				})
			},
			// 翻页
			pageChange() {
				console.log('翻页')
				if(this.goodsList.length < this.total) {
					this.queryForm.pageNum++
					this.getGoodsListFun()
				}
			},
			// 门店啤酒币余额
			getStoreCoinBalanceFun() {
				getStoreCoinBalance().then(res => {
					console.log(res)
					// 累加balance
					if(res.data && res.data.length > 0) {
						this.coinList = res.data.filter(it => it.breweryId != 0)
						this.totalCoin = this.coinList.reduce((total, item) => {
							return total + item.balance
						}, 0)
						let common = res.data.filter(it => it.breweryId == 0)
						if(common && common.length > 0) {
							this.commonCoin = common[0].balance
						}
					}
					
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background: #F2F2F2;
		padding: 0rpx 32rpx 32rpx;
		display: flex;
		flex-direction: column;
		height: 100vh;

		.fs-20 {
			font-size: 20rpx;
		}

		.num {
			font-size: 48rpx;
			color: #3D3D3D;

		}

		.left {
			width: 382rpx;
			height: 196rpx;
			border-radius: 12rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(242, 242, 242, 0.902);
			margin-right: 18rpx;
			padding: 24rpx 24rpx;


		}

		.right {
			width: 286rpx;
			height: 196rpx;
			border-radius: 12rpx;
			opacity: 1;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(242, 242, 242, 0.902);
			padding: 24rpx 14rpx;

		}

		.tab {
			color: #A5A7B9;
			margin-bottom: 18rpx;
		}

		.active {
			color: #1E2019;
		}

		.tag {
			background-color: transparent;
			border-radius: 12rpx;
			padding: 12rpx 30rpx;
			border: 1px solid #0B0E26;
			margin-right: 24rpx;
		}

		.active-tag {
			background-color: #39E5B1;
			font-weight: bold;
			border: 1px solid #39E5B1;
		}

		.goods-container {
			// flex: 1;
			// overflow-y: auto;
			// padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: env(safe-area-inset-bottom);

			.goods-item {
				// width: 334rpx;
				width: 48%;
				height: 605rpx;
				border-radius: 12rpx;
				background: #fff;
				box-sizing: border-box;
				// border: 1px solid rgba(242, 242, 242, 0.702);
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				&:nth-child(2n) {
					margin-right: 0;
				}

				.cover-box {
					// width: 334rpx;
					width: 100%;
					height: 440rpx;
					border-radius: 30rpx 30rpx 0 0;
					position: relative;

					.cover {
						width: 100%;
						height: 100%;
						border-radius: 30rpx 30rpx 0 0;
					}

					.like {
						position: absolute;
						right: 16rpx;
						bottom: 18rpx;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background-color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.title {
					padding: 16rpx 14rpx;
					font-size: 24rpx;
					border-bottom: 1px solid #D8D8D8;
					color: #3D3D3D;
				}

			}
		}
	}
</style>