zdtap-uniapp-main/pagesCoin/goodsDetail.vue

<template>
	<view class="page">
		<view class="content">
			<!-- 自定义导航栏 -->
			<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
				<view class="nav-content">
					<view class="back-btn" @click="goBack">
						<text class="cuIcon-back"></text>
					</view>
				</view>
			</view>
			
			<image class="banner" :src="breweryInfo.brandCover"></image>
			<view class="info">
				<view class="flex justify-between align-center" style="margin-bottom: 32rpx;" @click="goBreweryDetail">
					<view class="flex align-center">
						<image :src="breweryInfo.brandLogo" class="cover"></image>
						<view>
							<view>服务商家</view>
							<view style="font-size: 32rpx;color: #303048">{{ breweryInfo.brandName}}</view>
						</view>
					</view>
					<text class="cuIcon-right lg"></text>
				</view>
				<view class="flex align-start" style="margin-bottom: 28rpx;">
					<view class="flex solids-right justify-between padding-right"
						style="flex-direction: column;min-height: 136rpx;">
						<text style="color: #000;font-size: 36rpx;width: 468rpx;">{{ detail.goodsName}}</text>
						<text style="color: #5E5F60;font-size: 24rpx;">限量{{ detail.stockNum}}套，兑完即止</text>
					</view>
					<view class="text-center" style="width: 206rpx;font-size: 24rpx;">
						已兑<text style="color: #39E5B1;font-size: 36rpx;margin-left: 8rpx;font-weight: 700;">{{ detail.salesCount }}份</text>
					</view>
				</view>
				<view class="flex align-center">
					<image src="@/static/info-circle.png" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;"></image>
					<text style="color: #5E5F60;font-size: 24rpx;">限购说明：此商品每人限兑1件</text>
				</view>
			</view>
			<!-- <view class="container"> -->
				<!-- 这里是好礼介绍 -->
				<!-- <view class="text-center" style="font-size: 28rpx;color: #000;">
					好礼介绍
				</view>
				<view>
					
					<image :src="detail.goodsCover" style="width: 260rpx;height: 300rpx;"></image>
				</view> -->
				<!-- 这里是兑换须知 -->
				<!-- <view class="text-center" style="font-size: 28rpx;color：#000;">	
					——兑换须知——
				</view>
				
				<view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">1.兑换时间：2022年12月1日-2022年12月31日</view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">2.兑换地点：大九酿造·Mahanine</view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">3.兑换方式：线下兑换</view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">4.兑换数量：每人限兑1件</view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">5.兑换后，请到兑换地点领取</view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">6.兑换后，请到兑换地点领取</view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">7.兑换后，请到兑换地点领取</view>
					<view style="font-size: 24rpx;color: #5E5F60;margin-bottom: 20rpx;">8.兑换后，请到兑换地点领取</view>
				</view> -->
			<!-- </view> -->
			<!-- 兑换按钮区 -->
			<view class="bottom-box">
				<view v-if="isLogin && coinBalance.balance < detail.redeemedNum" class="tip">
					<image src="@/static/warning.png" style="margin-right: 24rpx;width: 25rpx;height: 25rpx;"></image>
					<text>您的{{breweryInfo.brandName}}品牌币数量不足哦</text>
				</view>
				<view class="fun-box">
					<view class="left">
						<view style="margin-bottom: 20rpx;">{{ detail.redeemedNum}}
							<image src="@/static/beerCoin.png" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
							</image>
						</view>
						<view class="flex align-center">当前可用品牌币：{{ isLogin ? (coinBalance.balance || 0) : '登录后可见' }}<image src="@/static/beerCoin.png"
								style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
							</image>
						</view>
					</view>
					<view class="btn" @click="handleRedeem">
						立即兑换
					</view>
				</view>
			</view>
		</view>
		<!-- 登录弹窗 -->
		<loginPopup ref="loginRef"></loginPopup>
	</view>
</template>

<script>
	import loginPopup from '@/components/loginPopup.vue';
	import { getGoodsInfo, getBreweryInfo, getBreweryCoinBalance } from '@/api/bar.js'
	export default {
		components: {
			loginPopup
		},
		data() {
			return {
				id:'',
				breweryId:'', // 品牌方id
				detail: {},
				breweryInfo:{},
				coinBalance:{},
				isLogin: false, // 登录状态
				isVerified: false, // 认证状态
				statusBarHeight: 0, // 状态栏高度
			};
		},
		onLoad({id, breweryId}) {
			// 获取状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			
			this.id = id
			this.breweryId = breweryId
			this.checkLoginStatus()
			this.getBreweryInfoFun()
			this.getDetailFun()
		},
		onShow() {
			this.checkLoginStatus()
			if(this.isLogin) {
				this.getBreweryCoinBalanceFun()
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			// 检查登录状态
			checkLoginStatus() {
				try {
					const token = uni.getStorageSync('token')
					const userInfo = uni.getStorageSync('userInfo')
					this.isLogin = !!token && !!userInfo
					this.isVerified = userInfo?.isVerified === 1
					
					// 如果登录了但没有用户信息，说明登录状态异常
					if(token && !userInfo) {
						uni.removeStorageSync('token')
						this.isLogin = false
						this.isVerified = false
					}
				} catch(e) {
					console.error('检查登录状态失败:', e)
					this.isLogin = false
					this.isVerified = false
				}
			},
			// 品牌方详情
			getBreweryInfoFun() {
				getBreweryInfo(this.breweryId).then(res => {
					this.breweryInfo = res.data
				}).catch(err => {
					console.error('获取品牌信息失败:', err)
					uni.showToast({
						title: '获取品牌信息失败',
						icon: 'none'
					})
				})
			}, 
			// 获取详情
			getDetailFun() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getGoodsInfo(this.id).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.detail = res.data
					} 
				}).catch(err => {
					console.error('获取商品详情失败:', err)
					uni.hideLoading()
					uni.showToast({
						title: '获取商品详情失败',
						icon: 'none'
					})
				})
			},
			// 跳转品牌方详情
			goBreweryDetail() {
				uni.navigateTo({
					url: '/pages/index/brandHome?breweryId=' + this.breweryId
				})
			},
			// 特定品牌啤酒币余额
			getBreweryCoinBalanceFun() {
				getBreweryCoinBalance(this.breweryId).then(res => {
					this.coinBalance = res.data
				}).catch(err => {
					console.error('获取币种余额失败:', err)
					uni.showToast({
						title: '获取币种余额失败',
						icon: 'none'
					})
				})
			},
			// 兑换
			async handleRedeem() {
				// 重新检查登录状态
				this.checkLoginStatus()
				
				if(!this.isLogin) {
					// 使用 nextTick 确保组件已加载
					await this.$nextTick()
					if(this.$refs.loginRef) {
						this.$refs.loginRef.open()
					} else {
						uni.showToast({
							title: '请稍后再试',
							icon: 'none'
						})
					}
					return
				}
				
				if(!this.isVerified) {
					uni.showModal({
						title: '提示',
						content: '请先完成实名认证',
						confirmText: '去认证',
						success: (res) => {
							if(res.confirm) {
								uni.navigateTo({
									url: '/pagesMy/verify'
								})
							}
						}
					})
					return
				}
				
				if(!this.coinBalance.balance || this.coinBalance.balance < this.detail.redeemedNum) {
					uni.showToast({
						title: '品牌币余额不足',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				uni.navigateTo({
					url: '/pagesCoin/redeemOrder?goodsId=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		
		.custom-nav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background: transparent;
			
			.nav-content {
				height: 44px;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				
				.back-btn {
					width: 64rpx;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(255, 255, 255, 0.8);
					border-radius: 50%;
					
					.cuIcon-back {
						font-size: 36rpx;
						color: #000;
					}
				}
			}
		}
		
		.banner {
			width: 100%;
			height: 724rpx;
			margin-top: v-bind('statusBarHeight + 44 + "px"');
		}
		
		.info {
			position: relative;
			border-radius: 30rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid #F2F2F2;
			padding: 20rpx 32rpx 30rpx;
			margin-bottom: 18rpx;
			margin-top: -150rpx;
			z-index: 100;
			.cover {
				width: 72rpx;
				height: 72rpx;
				margin-right: 32rpx;
				border-radius: 50%;
			}
		}
		
		.bottom-box {
			position: fixed;
			left: 0;
			width: 100%;
			bottom: 0;
			background: #FFFFFF;
			z-index: 99;

			.tip {
				height: 52rpx;
				border-radius: 15px 15px 0px 0px;
				background: rgba(255, 237, 52, 0.5);
				color: #3D3D3D;
				font-size: 20rpx;
				padding-left: 38rpx;
				display: flex;
				align-items: center;
			}

			.fun-box {
				height: 224rpx;
				background: #FFFFFF;
				box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 32rpx 40rpx;
				padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

				.left {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					view {
						font-size: 20rpx;
						color: #3D3D3D;

						&:nth-child(1) {
							font-size: 48rpx;
							color: #3D3D3D;
							font-weight: 700;
						}
					}
				}

				.btn {
					width: 344rpx;
					height: 82rpx;
					background: #39E5B1;
					border-radius: 12rpx;
					font-size: 34rpx;
					color: #000;
					text-align: center;
					line-height: 82rpx;
					transition: all 0.3s;
					
					&:active {
						transform: scale(0.98);
						opacity: 0.9;
					}
				}
			}
		}
	}
	
	// 确保登录弹窗在最顶层
	:deep(.uni-popup) {
		z-index: 9999;
	}
</style>