<template>
	<view class="page">
		<view class="top" :style="{'padding-top': navHeight + 'px'}">
			<view class="title">品牌返利 一扫即得</view>
			<view class="flex justify-around align-center">
				<view class="flex flex-col align-center" @click="openP(1)">
					<view class="flex align-center justify-center" style="border-radius: 50%;background: #D8D8D8;width: 166rpx;height: 166rpx;margin-bottom: 22rpx;">
						<image src="http://ma.zdtap.com/profile/upload/2025/02/20/KXT1kQ1PlQxG56e382d9a28dfd20f3c2782e0a3009ef_20250220012559A002.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
					<text style="font-size: 32rpx;margin-bottom: 6rpx;" class="back-f">1 扫码酒签</text>
					<text style="font-size: 24rpx;" class="back-f">什么酒参与></text>
				</view>
				<image src="@/static/arrow-right.png" style="width: 30rpx;height: 30rpx;margin-bottom: 100rpx;"></image>
				<view class="flex flex-col align-center" @click="openP(2)">
					<view class="flex align-center justify-center" style="border-radius: 50%;background: #D8D8D8;width: 166rpx;height: 166rpx;margin-bottom: 22rpx;">
						<image src="http://ma.zdtap.com/profile/upload/2025/02/20/KXT1kQ1PlQxG56e382d9a28dfd20f3c2782e0a3009ef_20250220012559A002.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
					<text style="font-size: 32rpx;margin-bottom: 6rpx;" class="back-f">2 累积目标</text>
					<text style="font-size: 24rpx;" class="back-f">目标值多少></text>
				</view>
				<image src="@/static/arrow-right.png" style="width: 30rpx;height: 30rpx;margin-bottom: 100rpx;"></image>
				<view class="flex flex-col align-center" @click="openP(3)">
					<view class="flex align-center justify-center" style="border-radius: 50%;background: #D8D8D8;width: 166rpx;height: 166rpx;margin-bottom: 22rpx;">
						<image src="http://ma.zdtap.com/profile/upload/2025/02/20/KXT1kQ1PlQxG56e382d9a28dfd20f3c2782e0a3009ef_20250220012559A002.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
					<text style="font-size: 32rpx;margin-bottom: 6rpx;" class="back-f">3 品牌返利</text>
					<text style="font-size: 24rpx;" class="back-f">如何返利></text>
				</view>
			</view>
			
			<button class="cu-btn scan-btn" @click="handleScan">
				<text class="cuIcon-qr_code" style="margin-right: 16rpx;font-size: 36rpx;"></text>
				立即扫码累积</button>
		</view>
		<view class="bottom">
			<view style="font-size:32rpx;color: #3D3D3D;margin-bottom: 36rpx;">品牌返利 + 高效运营</view>
			<view class="flex justify-between" style="margin-bottom:74rpx;">
				<view class="nav-item">
					<view class="flex justify-center align-center img-box">
						<image src="http://ma.zdtap.com/profile/upload/2025/02/20/HnII7AUyYqVH8cb6799a504fef2edf24081848a96f84_20250220003107A003.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
					<text >累计返利</text>
				</view>
				<view class="nav-item flex flex-col justify-center align-center">
					<view class="flex justify-center align-center img-box">
						<image src="@/static/beerCoin.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
					<text >啤酒币兑换</text>
				</view>
				<view class="nav-item">
					<view class="flex justify-center align-center img-box">
						<image src="http://ma.zdtap.com/profile/upload/2025/02/20/3J1Tp20vyIcRc06cf8171d377895c7deeb0edbb4f2dc_20250220003140A004.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
					<text >酒款评分</text>
				</view>
				<view class="nav-item">
					<view class="flex justify-center align-center img-box">
						<image src="http://ma.zdtap.com/profile/upload/2025/02/20/qREGgW8ALJ1hd80993817aa74a4924a38f5432fca060_20250220002923A002.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
					<text >生成酒单</text>
				</view>
			</view>
			<view style="font-size:32rpx;color: #3D3D3D;margin-bottom: 54rpx;">常见问题</view>
			<view class="flex align-center">
				<view class="dat"></view>
				<view style="font-size: 28rpx;color: #3D3D3D;margin-bottom: 8rpx;">需要在平台下单采购吗?</view>
			</view>
			<view class="content">任意渠道您采购的桶装产品,都可以参与活动,只要确定酒标有'枝点酒掌柜'的二维码,扫码即可.</view>
			<view class="flex align-center">
				<view class="dat"></view>
				<view style="font-size: 28rpx;color: #3D3D3D;margin-bottom: 8rpx;">我的酒,没有二维码怎么办?</view>
			</view>
			<view class="content">1.如果您商品品牌方未入驻"枝点"暂时无法提供服务 </br>2.若品牌方已入驻,需最新批次产品将会体现"枝点"二维码.</view>
		</view>
		<!-- <template v-else>
			<view class="flex justify-center align-center" style="height: 100vh;">
				<view class="flex-direction flex align-center">
					<text class="text-lg margin-top">登录并认证门店后才可以参与返利哦</text>
					<text class="margin-top" style="color: #979797;font-size: 24rpx;">快去登录吧</text>
					<button class="cu-btn bg-zd margin-top" style="width: 306rpx;height: 88rpx;" @click="toLogin">
						<image src="@/static/send.png" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;"></image>
						登录/认证</button>
				</view>
			</view>
		</template> -->
		<loginPopup ref="loginRef"></loginPopup>
		<uni-popup ref="p1" type="center" :is-mask-click="false">
			<view class="p-body flex flex-col" style="width: 500rpx;height: 660rpx;">
				<view style="padding: 28rpx;flex:1">
					<view class="title">什么酒参与</view>
					<view class="p-text margin-bottom">您可查看桶装啤酒的酒标/吊牌等,只要发现有'枝点酒掌柜'标志的二维码,扫码即可参与. </view>
					<view class="p-text">多家精酿品牌陆续入驻中.敬请期待</view>
				</view>
				<view class="p-btn" @click="closeP(1)">我知道了</view>
			</view>
		</uni-popup>
		<uni-popup ref="p2" type="center" :is-mask-click="false">
			<view class="p-body flex flex-col" style="width: 500rpx;height: 660rpx;">
				<view style="padding: 28rpx;flex:1">
					<view class="title">目标多少</view>
					<view class="p-text margin-bottom">可以查看枝点发布的'活动招募',不同品牌方发布的活动目标不同. </view>
					<view class="p-text">扫码后系统会自动判定酒款符合的活动,您选择要参与的具体活动即可开始,无需额外报名. </view>
				</view>
				<view class="p-btn" @click="closeP(2)">我知道了</view>
			</view>
		</uni-popup>
		<uni-popup ref="p3" type="center" :is-mask-click="false">
					<view class="p-body flex flex-col" style="width: 500rpx;height: 660rpx;">
						<view style="padding: 28rpx;flex:1">
							<view class="title">如何返利</view>
							<view class="p-text margin-bottom">累积活动达成目标值后,系统自动发起兑付,无需人工操作,对应活动的品牌方会安排兑付相应的返利商品/啤酒币. 您可以在'我参与的'栏目查看进度.</view>
						</view>
						<view class="p-btn" @click="closeP(3)">我知道了</view>
					</view>
				</uni-popup>
	</view>
</template>

<script>
	import loginPopup from '@/components/loginPopup.vue';
	export default {
		components: {
			loginPopup
		},
		data() {
			return {
				userInfo: null,
				barInfo: null,
				isLoggedIn: false,
				isVerified: false,
				navHeight: 0,
			};
		},
		onLoad() {
			let a = uni.getMenuButtonBoundingClientRect()
			this.navHeight = a.bottom +18
			this.checkLoginStatus()
		},
		onShow() {
			this.checkLoginStatus()
		},
		methods: {
			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token')
				const userInfo = uni.getStorageSync('userInfo')
				const barInfo = uni.getStorageSync('barInfo')
				
				this.isLoggedIn = !!token
				this.userInfo = userInfo
				this.barInfo = barInfo
				this.isVerified = barInfo && barInfo.authState === 2
				
				console.log('【checkLoginStatus】登录状态:', {
					isLoggedIn: this.isLoggedIn,
					isVerified: this.isVerified,
					userInfo: this.userInfo,
					barInfo: this.barInfo
				})
			},
			// 登录成功回调
			loginSuccess() {
				this.checkLoginStatus()
			},
			openP(index) {
				uni.hideTabBar()
				this.$refs['p' + index].open()
			},
			closeP(index) {
				this.$refs['p' + index].close()
				uni.showTabBar()
			},
			// 跳转登录
			toLogin() {
				uni.navigateTo({
					url: '/pages/index/chooseLogin'
				})
			},
			handleScan() {
				if (!this.isLoggedIn) {
					this.$refs.loginRef.open()
					return
				}
				
				if (!this.isVerified) {
					uni.showModal({
						title: '提示',
						content: '请先认证门店',
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/index/registration'
								})
							}
						}
					})
					return
				}
				
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success: (res) => {
									console.log(res)
									this.startScan()
								},
								fail: (err) => {
									uni.showModal({
										title: '提示',
										content: '请先授权获取您的位置信息',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														if (res.authSetting['scope.userLocation']) {
															this.startScan()
														}
													}
												})
											} else if (res.cancel) {
												console.log('用户点击取消')
											}
										}
									})
								}
							})
						} else {
							this.startScan()
						}
					},
				})
			},
			// 开始扫码
			startScan() {
				this.handleGetLocation()	
			},
			handleGetLocation() {
				uni.getLocation({
					type: "gcj02",
					success: (resLoc) => {
						console.log(resLoc)
						uni.scanCode({
							success: (res) => {
								if(!resLoc.latitude && !resLoc.longitude) {
									uni.showToast({
										title: '位置信息获取失败',
										icon: 'none',
										})
									return
								}
								uni.navigateTo({
									url: '/pagesActivity/scanResult?result=' + res.result + '&latitude=' + resLoc.latitude + '&longitude=' + resLoc.longitude
								})
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		font-family: Roboto;
		background-color: #fff;
		height: 100vh;
		.top {
			height: 700rpx;
			// background: rgba(57, 229, 177, 0.8);
			// background: rgba(25, 54, 122, 1);
			background: #19367A;
			padding: 36rpx 30rpx;
			position: relative;
			box-sizing: border-box;
			.title {
				font-family: Alimama ShuHeiTi;
				font-size: 48rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 50rpx;
			}

			.scan-btn {
				position: absolute;
				width: 690rpx;
				height: 116rpx;
				bottom: -58rpx;
				border-radius: 58rpx;
				background: #D42E78;
				font-family: Roboto;
				font-size: 40rpx;
				font-weight: normal;
				color: #FFFFFF;
			}
		}

		.bottom {
			flex: 1;
			background: #FFFFFF;
			padding: 100rpx 30rpx 0;
			// padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
			// padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
			// 快捷导航
			.nav-item {
				text-align: center;
				font-size: 28rpx;
				color: #3D3D3D;
			
				.img-box {
					width: 106rpx;
					height: 106rpx;
					background: #F2F2F2;
					border-radius: 50%;
					margin-bottom: 18rpx;
				}
			}
			.dat{
				width: 20rpx;
				height: 20rpx;
				border: 6rpx solid #39E5B1;
				border-radius: 50%;
				margin-right: 14rpx;
			}
			.content {
				margin-left: 34rpx;
				font-family: Roboto;
				font-size: 24rpx;
				font-weight: normal;
				color: #3D3D3D;
				line-height: 130%;
				margin-bottom: 34rpx;
			}
		}

	}
	.p-body {
		border-radius: 12rpx;
		background: #F2F2F2;
		.title {
			margin-bottom: 46rpx;
			font-family: Roboto;
			font-size: 32rpx;
			font-weight: normal;
			text-align: center;
			color: #3D3D3D;
		}
		.p-text {
			font-family: Roboto;
			font-size: 28rpx;
			font-weight: normal;
			color: #9E9E9E;
		}
		.p-btn {
			width: 100%;
			height: 90rpx;
			border-radius: 0px 0px 12rpx 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #D42E78;
			font-family: Roboto;
			font-size: 32rpx;
			font-weight: normal;
			color: #FFF;
		}
	}
	.back-f{
		color: #FFFFFF;
	}
</style>