MoeNovaClient/pages/isLand/homeLand.vue

<template>
	<view class="home-land-container">
		<!-- 第三层：背景 -->
		<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">
      <image class="island-image" src="/static/island/island.png" mode="widthFix" style="width:1536rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
			<view style="position: absolute;width: 670rpx;left: 340rpx; bottom:320rpx;align-items: center;">
        <image class="house-image" src="/static/island/building/home1.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">	</image>
			</view>

			<view style="position: absolute;width: 300rpx;left:280rpx; bottom:200rpx;align-items: center;">
        <image class="table-image" src="/static/island/building/workTable.png" mode="widthFix" style="width:670rpx; position: static;" @click="onTableClick" :animation="tableAnimationData">	</image>
			</view>

			<view style="position: absolute;width:200rpx;left:660rpx; bottom:260rpx;align-items: center;">
        <image class="mailBox-image" src="/static/island/building/mailBox.png" mode="widthFix" style="width:670rpx; position: static;" >	</image>
			</view>

			<view style="position: absolute;width:200rpx;left:1000rpx; bottom:450rpx;align-items: center;">
        <image class="taskBoard-image" src="/static/island/building/taskBoard.png" mode="widthFix" style="width:670rpx; position: static;" @click="showTask" :animation="taskAnimationData">	</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="main-arrow" @click="goToMainLand" :animation="mainArrowAnimation" :style="{ opacity: mainArrowVisible ? 1 : 0 }">
				<!-- <image src="/static/island/main_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
		<view class="arrow" ></view>
				<text class="main-text">主岛</text>

			</view>
		</view>

		<!-- 第一层：UI -->
		<!-- <view class="ui-layer"> -->
			<view class="ui-content">
				<view class="status-bar"></view>
				<view class="customHead">
					<!-- 添加返回按钮 -->
					<view class="back-button" @click="goBack()">
						<image src="/static/island/UI/back_button.png" mode="widthFix" style="width:100rpx"></image>
					</view>
					<!-- 添加货币计数器 -->
					<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>
				<view class="ui-buttons">
					<image src="/static/island/icon_backpack.png" mode="widthFix" style="width:100rpx"
						@click="showInventory"></image>
				</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" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
		<task-dialog class="task-dialog" :visible.sync="taskVisible" @close="onTaskClose" type="main"></task-dialog>

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

		<!-- 制造台对话框组件 -->
		<crafting-dialog :visible.sync="craftingVisible" @close="craftingVisible = false"></crafting-dialog>

		<!-- 引导管理器 -->
		<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 TaskDialog from './TaskDialog.vue'
import TalkGuide from './talkGuide.vue'
import CraftingDialog from '@/components/dialogs/CraftingDialog.vue'
import GuideManager from '@/components/guide/GuideManager.vue'

export default {
	components: {
		BackpackDialog,
		CharacterDialog,
		ShopDialog,
		TaskDialog,
		TalkGuide,
		CraftingDialog,
		GuideManager
	},
	data() {
		return {
			// 背景位置控制
			translateX: -141,
			startX: 0,
			currentX: 0,
			isDragging : false,

			// 获取屏幕宽度和背景宽度
			screenWidth: 0,
			backgroundWidth: 0,
			islandHeight: 0,
			houseAnimationData: {},
			tableAnimationData: {},
			taskAnimationData: {},
			houseAnimating: false,
			tableAnimating: false,
			taskAnimating: false,
			baseTranslate: { x: -50, y: 50 },
			inventoryVisible: false,
			characterVisible: false,
			shopVisible: false,
			mainArrowAnimation: {},
			mainArrowAnimating: false,
			mainArrowVisible: false,
			taskVisible: false,
			playerName: '梦幻',
			guideData: [
				{
					characterImage: '/static/island/npc.png',
					characterName: '罗宾',
					text: '这位大人，这里太大了吧....',
					position: 'left',
					isMirror: true
				},
				{
					characterImage: '/static/island/building/1.png',
					characterName: '我',
					text: '好的，我马上上会教付清',
					position: 'right',
					isMirror: false
				},
				{
					characterImage: '/static/island/building/1.png',
					characterName: '我',
					text: '很奇怪不是吗？',
					position: 'right',
					isMirror: false
				},
				{
					characterImage: '/static/island/npc.png',
					characterName: '罗宾',
					text: '怎么回事',
					position: 'left',
					isMirror: true
				}
			],
			craftingVisible: false,
			guideManager: null,
			userInfo: {
				num_gmd: 0,
				num_gmg: 0,
			},
			moneyTimer: null, // 添加定时器变量
			showTalkGuide: false,
			currentTalkData: [],
			// 引导箭头相关
			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('homeLand');
	},
	onReady() {
		// 在组件渲染完成后获取图片尺寸
		setTimeout(() => {
			this.getImageSize();
			// 延迟1秒后显示箭头并开始动画
			setTimeout(() => {
				this.mainArrowVisible = true;
				this.startMainArrowAnimation();
			}, 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.maxTranslate = this.backgroundWidth - this.screenWidth;

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

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

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

				} else {
					console.error('未能获取岛屿图片的尺寸');
				}
			}).exec();
		},
		// 触摸开始
		touchStart(e) {
			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');

			// uni.showToast({
			// 	title: 'House clicked!',
			// 	icon: 'none'
			// });
		},

		onTableClick(event) {
			if(this.tableAnimating) return;
			console.log('Table clicked!');

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

			// 显示制造台界面
			this.craftingVisible = true;

			this.checkAndShowGuide('homeLand_table');
		},

		onTaskClick(event) {
			if(this.taskAnimating) return;
			// 处理点击事件
			console.log('Task clicked!');

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

			// uni.showToast({
			// 	title: 'task clicked!',
			// 	icon: 'none'
			// });
		},

		playAnimation(type) {
			let self = this;

			// 根据类型设置对应的动画状态
			if (type === 'house') {
				this.houseAnimating = true;
			} else if (type === 'table') {
				this.tableAnimating = true;
			} else if (type === 'task') {
				this.taskAnimating = 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 === 'table') {
				this.tableAnimationData = animation.export();
			} else if (type === 'task') {
				this.taskAnimationData = animation.export();
			}

			// 动画结束后重置状态
			setTimeout(() => {
				if (type === 'house') {
					self.houseAnimating = false;
				} else if (type === 'table') {
					self.tableAnimating = false;
				} else if (type === 'task') {
					self.taskAnimating = 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)
		},
		showTask() {
			console.log('Opening task board...')
			this.taskVisible = true;
			this.checkAndShowGuide('homeLand_TaskBoard');

		},
		onTaskClose() {
			console.log('Closing task board...')
			this.taskVisible = false
		},
		startMainArrowAnimation() {
			if (this.mainArrowAnimating) return;
			this.mainArrowAnimating = true;

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

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

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

				setTimeout(() => {
					animation.translateY(0).step({ duration: 1000 });
					this.mainArrowAnimation = animation.export();

					setTimeout(() => {
						if (this.mainArrowAnimating) {
							animate();
						}
					}, 1000);
				}, 1000);
			};

			animate();
		},
		goToMainLand() {
			uni.navigateTo({
				url: '/pages/isLand/mainLand'
			});
		},
		// 检查并显示引导
		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);
		},
		// 获取用户铃钱
		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;
					}
				}
			})
		},
		// 对话完成回调
		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;
				// 隐藏引导箭头
				// this.showGuideArrow = 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;
				}
			}
		},
		goBack() { 
			uni.navigateBack({
				delta: 1
			});
		},
	},
	beforeDestroy() {
		this.mainArrowAnimating = false;
	}
}
</script>


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

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

	.ui-content {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%; 
		pointer-events: auto;
		z-index: 101; 
	}
 
	.ui-buttons {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.ui-button {
			background: rgba(255, 255, 255, 0.9);
			border: none;
			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);
			}
		}
	}
// }

.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;
	}
}

.main-arrow {
	//   background: rgba(255, 255, 255, 0.9);
	position: absolute;
	height: 190rpx;
	right: 50rpx;
  bottom: 20rpx;  // 改为 bottom 定位
	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(270deg);
	}

	.main-text {
		color: #ffffff;
		font-size: 32rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
		margin-top: 10rpx;
	}
}
.task-dialog{
	 ::v-deep.dialog-content{
		background: transparent !important;
	}
}
</style>