MoeNovaClient/pages/isLand/mainLand.vue

<template>
	<view class="main-land-container">
		<!--    <view class="scroll-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" >
      <view class="background" :style="{ transform: `translateX(${translateX}px)` }">
        <image class="island-image" src="/static/island/island.png" mode="heightFix"></image>
      </view>
    </view> -->


		<!-- 第三层：背景 -->
		<view class="background-layer"></view>

		<!-- 第二层：地图 -->
		<view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown"
			@mousemove="onmousemove" @mouseup="onmouseup">
			<!-- 这里可以放置地图元素（示例：一个方块） -->
			<!-- <view style="position: absolute; top: 30%; left: 30%; width: 100px; height: 100px; background: green;"></view> -->
			<image class="island-image" src="/static/island/mainLand.png" mode="widthFix"
				style="width:2048rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
			<!-- <view style="position: absolute;width: 300rpx;left: 280rpx; bottom:230rpx;align-items: center;">
			<image class="house-image" src="/static/island/building/4.png" mode="widthFix" style="width:300rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">	</image>
		</view> -->

			<view style="position: absolute;width: 360rpx;left:782rpx; bottom:385rpx;align-items: center;">
				<image class="farm-image" src="/static/island/building/3.png" mode="widthFix"
					style="width:360rpx; position: static;" @click="onFarmClick" :animation="farmAnimationData">
				</image>
			</view>

			<view style="position: absolute;width: 360rpx;left: 335rpx; bottom:835rpx;align-items: center;">
				<image class="mine-image" src="/static/island/building/4.png" mode="widthFix"
					style="width:360rpx; position: static;"> </image>
			</view>

			<view style="position: absolute;width: 360rpx;left: 782rpx; bottom:720rpx;align-items: center;">
				<image class="hall-image" src="/static/island/building/5.png" mode="widthFix"
					style="width:360rpx; position: static;"> </image>
			</view>

			<view style="position: absolute;width: 360rpx;left: 248rpx; bottom:488rpx;align-items: center;">
				<image class="wood-image" src="/static/island/building/6.png" mode="widthFix"
					style="width:360rpx; position: static;"> </image>
			</view>

			<view style="position: absolute;width: 360rpx;left: 910rpx; bottom:108rpx;align-items: center;">
				<image class="shop-image" src="/static/island/building/2.png" mode="widthFix"
					style="width:360rpx; position: static;" @click="onShopClick" :animation="shopAnimationData">
				</image>
			</view>

			<view style="position: absolute;width: 360rpx;left: 1498rpx; bottom:75rpx;align-items: center;">
				<image class="airport-image" src="/static/island/building/7.png" mode="widthFix"
					style="width:360rpx; position: static;"> </image>
			</view>

			<view style="position: absolute;width: 360rpx;left: 1400rpx; bottom:380rpx;align-items: center;">
				<image class="house-image" src="/static/island/building/1.png" mode="widthFix"
					style="width:360rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">
				</image>
			</view>

			<!-- 引导箭头 -->
			<view class="guide-arrow" v-if="showGuideArrow" :style="{ left: guideArrowPosition.x + 'rpx', bottom: guideArrowPosition.y + 'rpx', transform: `rotate(${guideArrowPosition.r}deg)` }">
				<image src="/static/island/arrow.png" mode="aspectFit"></image>
			</view>

			<!-- 回家箭头 -->
			<view class="home-arrow" @click="goHome" :animation="homeArrowAnimation"
				:style="{ opacity: homeArrowVisible ? 1 : 0 }">
				<!-- <image src="/static/island/home_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
				<view class="arrow"></view>
				<text class="home-text">回家</text>
			</view>
		</view>

		<!-- 第一层：UI -->
		<view class="ui-layer">
			<view class="ui-content">
				<!-- 添加货币计数器 -->
				<view class="currency-display">
					<view class="currency-item">
						<image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon"></image>
						<text class="currency-value">{{userInfo.num_gmd}}</text>
					</view>
					<view class="currency-item">
						<image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon">
						</image>
						<text class="currency-value">{{userInfo.num_gmg}}</text>
					</view>
				</view>
				<view class="ui-buttons">
					<image src="/static/island/icon_backpack.png" mode="widthFix" style="width:100rpx"
						@click="showInventory" class="ui-icon-button"></image>
					<!-- <button class="ui-button" @click="showCharacter">角色</button>
          <button class="ui-button" @click="showShop">商店</button> -->
				</view>
			</view>
		</view>


    <!-- 对话框组件 -->
    <backpack-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></backpack-dialog>
    <character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
    <shop-dialog :visible.sync="shopVisible" :shopName="currentShopName" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
    <hua-tian :visible.sync="huaTianVisible" @close="onHuaTianClose" ref="huaTian"></hua-tian>
    <task-dialog :visible.sync="taskDialogVisible" @close="onTaskDialogClose" type="huatian"></task-dialog>

    <!-- 引导对话组件 -->
    <talk-guide 
      v-if="showTalkGuide"
      :guide-data="currentTalkData"
      :player-name="playerName"
      :visible="showTalkGuide"
      @talk-complete="onTalkComplete"
    ></talk-guide>

    <!-- 引导管理器 -->
    <guide-manager ref="guideManager"></guide-manager>
  </view> 

</template>


<script>
import BackpackDialog from '@/components/dialogs/BackpackDialog.vue'
import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
import ShopDialog from '@/components/dialogs/ShopDialog.vue'
import HuaTian from './HuaTian.vue'
import TaskDialog from './TaskDialog.vue'
import TalkGuide from './talkGuide.vue'
import GuideManager from '@/components/guide/GuideManager.vue'

export default {
	components: {
		BackpackDialog,
		CharacterDialog,
		ShopDialog,
		HuaTian,
		TaskDialog,
		TalkGuide,
		GuideManager
	},
		data() {
			return {
				// // 背景位置控制
				translateX: -200,
				startX: 0,
				currentX: 0,
				isDragging: false,
				// maxTranslate: 0,
				userInfo: {
					num_gmd: 0,
					num_gmg: 0,
				},
				moneyTimer: null, // 添加定时器变量

				// // 获取屏幕宽度和背景宽度
				screenWidth: 0,
				backgroundWidth: 0,
				islandHeight: 0,
				houseAnimationData: {},
				farmAnimationData: {},
				shopAnimationData: {},
				houseAnimating: false,
				farmAnimating: false,
				shopAnimating: false,
				baseTranslate: {
					x: -50,
					y: 50
				},
				inventoryVisible: false,
				characterVisible: false,
				shopVisible: false,
				huaTianVisible: false,
				taskDialogVisible: false,
				homeArrowAnimation: {},
				homeArrowAnimating: false,
				homeArrowVisible: false,
				currentShopName: '商店',
				// 引导相关数据
				showTalkGuide: false,
				currentTalkData: [],
				playerName: '梦幻',
				// 引导箭头相关
				showGuideArrow: false,
				guideArrowPosition: { x: 0, y: 0, r: 0 }
			}
		},
		onLoad() {
			let self = this;
			// 获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					self.screenWidth = res.windowWidth;
					console.log('屏幕宽度:', self.screenWidth);
				}
			});
			this.getUserMoney();
			
			// 启动定时器，每2秒更新一次铃钱
			this.moneyTimer = setInterval(() => {
				this.getUserMoney();
			}, 2000);
		},
		onShow() {
			// 检查是否需要显示引导
			this.checkAndShowGuide('mainLand');
		},
		onReady() {
			// 在组件渲染完成后获取图片尺寸
			setTimeout(() => {
				this.getImageSize();
				// 延迟1秒后显示箭头并开始动画
				setTimeout(() => {
					this.homeArrowVisible = true;
					this.startHomeArrowAnimation();
				}, 1000);
			}, 300);
		},
		onUnload() {
			// 清除定时器
			if (this.moneyTimer) {
				clearInterval(this.moneyTimer);
				this.moneyTimer = null;
			}
		},
		methods: {
			loadData() {
				// 可以在这里加载其他数据
			},
			getImageSize() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.island-image').boundingClientRect(data => {
					if (data) {
						// 获取岛屿图片的宽度和高度
						this.backgroundWidth = data.width;
						this.islandHeight = data.height;
						// this.backgroundWidth = 1536;
						// this.islandHeight = 1024;


						// 设置背景高度为岛屿高度的两倍（在CSS中实现）

						// 计算最大可移动距离
						this.maxTranslate = this.backgroundWidth - this.screenWidth;

						// 初始位置居中
						// this.translateX = -this.maxTranslate / 2;

						// 打印调试信息
						// console.log('屏幕宽度:', this.screenWidth);
						// console.log('背景宽度:', this.backgroundWidth);
						// console.log('岛屿高度:', this.islandHeight);
						// console.log('屏幕宽度:',this.screenWidth);
						// console.log('最大可移动距离:',this.maxTranslate);

						// console.log('岛屿data:', data);

					} else {
						console.error('未能获取岛屿图片的尺寸');
					}
				}).exec();
			},
			// 触摸开始
			touchStart(e) {
				// console.log('----------- touchStart');
				this.startX = e.touches[0].clientX;
				this.currentX = this.translateX;
				console.log('this.startX =', this.startX);
				console.log('this.currentX =', this.currentX);
			},
			// 触摸移动
			touchMove(e) {
				console.log('----------- touchMove');
				const moveX = e.touches[0].clientX - this.startX;
				let newTranslateX = this.currentX + moveX;

				// 限制移动范围，不让背景两侧露出
				if (newTranslateX > 0) {
					newTranslateX = 0;
				} else if (newTranslateX < -this.maxTranslate) {
					newTranslateX = -this.maxTranslate;
				}

				this.translateX = newTranslateX;
				console.log('moveX =', moveX);
				console.log('this.translateX =', this.translateX);
			},
			// 触摸结束
			touchEnd() {
				console.log('----------- touchEnd');
				this.currentX = this.translateX;
				console.log('this.currentX =', this.currentX);
			},

			onmousedown(e) {
				console.log('----------- onmousedown');
				console.log('----------- e', e);
				this.isDragging = true;
				this.startX = e.clientX;
				this.currentX = this.translateX;
				mapLayer.style.cursor = 'grabbing';
			},

			onmousemove(e) {
				if (this.isDragging) {
					console.log('----------- onmousemove');
					const moveX = e.clientX - this.startX;
					let newTranslateX = this.currentX + moveX;

					//限制移动范围，不让背景两侧露出
					if (newTranslateX > 0) {
						newTranslateX = 0;
					} else if (newTranslateX < -this.maxTranslate) {
						newTranslateX = -this.maxTranslate;
					}

					this.translateX = newTranslateX;
					console.log('moveX =', moveX);
					console.log('this.translateX =', this.translateX);
				}
			},

			onmouseup(e) {
				console.log('----------- onmouseup');
				this.isDragging = false;
				mapLayer.style.cursor = 'grab';
			},

			onHouseClick(event) {
				if (this.houseAnimating) return;
				// 处理点击事件
				console.log('house clicked!');

				// 播放房屋的点击动画
				this.playAnimation('house');

				// 设置商店名称为"房屋商店"
				this.currentShopName = '材料商店';
				this.shopVisible = true;
			},

			onFarmClick(event) {
				if (this.farmAnimating) return;
				// 处理点击事件
				console.log('farm clicked!111');

				// 播放大厅的点击动画
				this.playAnimation('farm');

				// 打开花田对话框
				this.huaTianVisible = true;
				// 将mainLand传递给HuaTian组件
				this.$refs.huaTian && this.$refs.huaTian.setMainLand(this);
				
				// 检查是否需要显示引导
				this.checkAndShowGuide('mainLand_farm');
			},

			onShopClick(event) {
				if (this.shopAnimating) return;
				// 处理点击事件
				console.log('shop clicked!');

				// 播放商店的点击动画
				this.playAnimation('shop');

				// 设置商店名称为"花店"
				this.currentShopName = '花店';
				// 打开商店对话框
				this.shopVisible = true;
			},

			playAnimation(type) {
				let self = this;

				// 根据类型设置对应的动画状态
				if (type === 'house') {
					this.houseAnimating = true;
				} else if (type === 'farm') {
					this.farmAnimating = true;
				} else if (type === 'shop') {
					this.shopAnimating = true;
				}

				// 创建动画实例
				const animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				});

				// 定义果冻动画序列
				animation.scale(0.95).step({
						duration: 100
					})
					.scale(1.05).step({
						duration: 100
					})
					.scale(0.98).step({
						duration: 100
					})
					.scale(1).step({
						duration: 100
					});

				// 根据类型应用动画到对应的元素
				if (type === 'house') {
					this.houseAnimationData = animation.export();
				} else if (type === 'farm') {
					this.farmAnimationData = animation.export();
				} else if (type === 'shop') {
					this.shopAnimationData = animation.export();
				}

				// 动画结束后重置状态
				setTimeout(() => {
					if (type === 'house') {
						self.houseAnimating = false;
					} else if (type === 'farm') {
						self.farmAnimating = false;
					} else if (type === 'shop') {
						self.shopAnimating = false;
					}
				}, 800);
			},

			showInventory() {
				console.log('Opening inventory...')
				this.inventoryVisible = true
			},
			onInventoryClose() {
				console.log('Closing inventory...')
				this.inventoryVisible = false
			},
			showCharacter() {
				console.log('Opening character...')
				this.characterVisible = true
			},
			onCharacterClose() {
				console.log('Closing character...')
				this.characterVisible = false
			},
			showShop() {
				console.log('Opening shop...')
				this.shopVisible = true
			},
			onShopClose() {
				console.log('Closing shop...')
				this.shopVisible = false
			},
			onShopBuy(item) {
				console.log('Buying item:', item)
			},
			onHuaTianClose() {
				console.log('Closing hua tian dialog...')
				this.huaTianVisible = false
			},
			startHomeArrowAnimation() {
				if (this.homeArrowAnimating) return;
				this.homeArrowAnimating = true;

				const animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease-in-out',
				});

				const animate = () => {
					if (!this.homeArrowAnimating) return;

					animation.translateY(-20).step({
						duration: 1000
					});
					this.homeArrowAnimation = animation.export();

					setTimeout(() => {
						animation.translateY(0).step({
							duration: 1000
						});
						this.homeArrowAnimation = animation.export();
						setTimeout(() => {
							if (this.homeArrowAnimating) {
								animate();
							}
						}, 1000);
					}, 1000);
				};

				animate();
			},
			goHome() {
				uni.navigateTo({
					url: '/pages/isLand/homeLand'
				});
			},
			// 打开任务对话框
			onTaskClick() {
				console.log('Opening task dialog...')
				this.taskDialogVisible = true
			},

			// 关闭任务对话框
			onTaskDialogClose() {
				console.log('Closing task dialog...')
				this.taskDialogVisible = false
			},
			// 获取用户铃钱
			getUserMoney() {
				uni.request({
					url: this.$apiHost + '/User/getinfo',
					method: 'GET',
					data: {
						uuid: getApp().globalData.uuid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'sign': getApp().globalData.headerSign,
					},
					success: (res) => {
						if (res.data) {
							console.log("res.getUserMoney", res.data)
							this.userInfo = res.data;
						}
					}
				})
			},

			// 检查并显示引导
			checkAndShowGuide(stageId) {
				console.log('checkAndShowGuide stageId :', stageId);
				// 延迟执行以确保DOM已经渲染
				setTimeout(() => {
					if (this.$refs.guideManager) {
						const hasGuide = this.$refs.guideManager.startGuide(stageId);
						console.log('checkAndShowGuide hasGuide :', hasGuide);
						if (hasGuide) {
							this.currentTalkData = this.$refs.guideManager.getCurrentTalkData();
							console.log('checkAndShowGuide currentTalkData :', this.currentTalkData);
							if (this.currentTalkData) {
								this.showTalkGuide = true;
								// 检查是否需要显示引导箭头
								this.checkAndShowGuideArrow();
							}else{
								console.log('currentTalkData err:', this.currentTalkData);
							}
						}
					}
				}, 200);
			},
			
			// 对话完成回调
			onTalkComplete() {
				// 调用引导管理器的下一步
				console.log('----------- onTalkComplete');
				this.$refs.guideManager && this.$refs.guideManager.nextStep();
				
				// 获取新的对话数据
				const newTalkData = this.$refs.guideManager.getCurrentTalkData();
				console.log('----------- onTalkComplete newTalkData:', newTalkData);
				if (newTalkData) {
					// 先隐藏对话组件
					this.showTalkGuide = false;
					// 更新对话数据
					this.currentTalkData = newTalkData;
					// 使用 nextTick 确保数据更新后再显示对话组件
					this.$nextTick(() => {
						this.showTalkGuide = true;
						// 检查是否需要显示引导箭头
						this.checkAndShowGuideArrow();
					});
				} else {
					// 如果没有新的对话数据，隐藏对话组件
					this.showTalkGuide = false;
				}
			},
			
			// 检查并显示引导箭头
			checkAndShowGuideArrow() {
				if (this.$refs.guideManager) {
					const arrowPosition = this.$refs.guideManager.getCurrentArrowPosition();
					console.log('----------- checkAndShowGuideArrow arrowPosition:', arrowPosition);
					
					if (arrowPosition) {
						// 显示引导箭头
						this.showGuideArrow = true;
						// 设置箭头位置
						this.guideArrowPosition = {
							x: arrowPosition.x,
							y: arrowPosition.y,
							r: arrowPosition.r || 0
						};
						
						console.log('----------- guideArrowPosition:', this.guideArrowPosition);
						console.log('----------- showGuideArrow:', this.showGuideArrow);
					} else {
						// 隐藏引导箭头
						this.showGuideArrow = false;
					}
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import './mainLand.scss';

	.ui-layer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 100;

		.ui-content {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			pointer-events: auto;
			z-index: 101;
		}

		.ui-buttons {
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.ui-icon-button {
				transition: transform 0.2s ease;

				&:active {
					transform: scale(0.9);
					opacity: 0.8;
				}
			}

			.ui-button {
				//   background: rgba(255, 255, 255, 0.9);
				//   border: none;
				width: 120rpx;
				padding: 16rpx 32rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #333;
				//   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				min-width: 120rpx;

				&:active {
					opacity: 0.8;
					transform: scale(0.95);
				}
			}

			.backpack-button {
				background-image: url('/static/island/icon_backpack.png');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
		}
	}

	.map-layer {
		position: relative;
		z-index: 1;
		cursor: grab;

		&:active {
			cursor: grabbing;
		}
	}

	.guide-arrow {
		position: absolute;
		z-index: 10;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		pointer-events: none; /* 防止箭头阻挡点击事件 */
		
		image {
			width: 100rpx;
			height: 100rpx;
			animation: pulse 1.5s infinite; /* 添加脉冲动画 */
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		50% {
			transform: scale(1.2);
			opacity: 0.8;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.home-arrow {
		//   background: rgba(255, 255, 255, 0.9);
		position: absolute;
		left: 40rpx; // 调整到左边位置
		bottom: 460rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		z-index: 10;
		transition: opacity 0.5s ease-in-out; // 添加淡入效果

		.arrow {
			content: '';
			display: block;
			width: 60rpx;
			height: 60rpx;
			background: url('/static/island/arrow.png') no-repeat center center;
			background-size: contain;
			transform: rotate(90deg);
		}

		.home-text {
			color: #ffffff;
			font-size: 32rpx;
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
			margin-top: 10rpx;
		}
	}
</style>