引导上传

components/guide/GuideManager.vue

@@ -164,6 +164,68 @@ export default {
                 ]
               }
             ]
+          },
+          {
+            name: "welcome to mainLand~",
+            stage: "mainLand",
+            steps: [
+              {
+                arrow: null,
+                talkData: [
+                  {
+                    characterImage: '/static/island/npc.png',
+                    characterName: '罗宾',
+                    text: '正式欢迎您来到我们的市政厅所在的主岛....',
+                    position: 'left',
+                    isMirror: true
+                  },
+                  {
+                    characterImage: '/static/island/npc.png',
+                    characterName: '罗宾',
+                    text: '因为前几天发生了台风，所以还有两条路被倒下的树给拦住了。',
+                    position: 'left',
+                    isMirror: true
+                  },
+                  {
+                    characterImage: '/static/island/building/1.png',
+                    characterName: '我',
+                    text: 'ah...原来如此，你刚才说的花田有没有被拦住？',
+                    position: 'right',
+                    isMirror: false
+                  }
+                ]
+              },
+              {
+                arrow: {x: 785, y: 535, r: 270},
+                talkData: [
+                  {
+                    characterImage: '/static/island/npc.png',
+                    characterName: '罗宾',
+                    text: '哦~瞧我这记性，花田在市政厅的旁边，就在那儿。走，我会告诉你怎么种花。',
+                    position: 'left',
+                    isMirror: true
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            name: "flowerFarm",
+            stage: "mainLand_farm",
+            steps: [
+              {
+                arrow: null,
+                talkData: [
+                  {
+                    characterImage: '/static/island/npc.png',
+                    characterName: '罗宾',
+                    text: '快来吧，这里就是花田了。',
+                    position: 'left',
+                    isMirror: true
+                  }
+                ]
+              }
+            ]
           }
         ]
       },
@@ -469,7 +531,7 @@ export default {
     // this.loadCompletedMainLines();
     this.loadCurrentMainLineId();
     //测试重置主线
-    this.currentMainLineId=0;
+    // this.currentMainLineId=0;
   }
 }
 </script>

pages/isLand/HuaTian.scss

@@ -281,4 +281,131 @@
 				}
 			}
 		}
-	}
+	}
+
+.huatian-tips {
+    position: absolute;
+    top: 30rpx;
+    right: 40rpx;
+    width: 120rpx;
+    z-index: 10;
+    
+    .tips-icon {
+        width: 96rpx;
+        height: 76rpx;
+    }
+
+}
+
+.huatian-tips-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+
+    .tips-content {
+        position: relative;
+        width: 700rpx;
+        height: 952rpx;
+        background: url('../../static/island/UI/kuang.png');
+        background-size: 100% 100%;
+        padding: 32rpx 10rpx;
+        
+        .tips-title {
+            text-align: center;
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #FFFFFF;
+            width: 240rpx;
+            height: 56rpx;
+            background: url('../../static/island/UI/title_bg.png');
+            background-size: 100% 100%;
+            margin: 0 auto 0rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tips-close {
+            position: absolute;
+            top: -10rpx;
+            right: -10rpx;
+            width: 68rpx;
+            height: 68rpx;
+            
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        
+        .tips-swiper {
+            width: 95%;
+            height: 780rpx;
+            margin-top: 20rpx;
+			margin-left : 10rpx;
+        }
+        
+        .tips-items {
+            height: 100%;
+            padding: 0 20rpx;
+            .tips-item {
+                display: flex;
+                align-items: flex-start;
+                margin-bottom: 20rpx;
+                padding: 20rpx;
+                border-radius: 10rpx;
+                
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                
+                .tips-img {
+                    width: 328rpx;
+                    height: 328rpx;
+                    margin-right: 30rpx;
+                    border-radius: 10rpx;
+                }
+                
+                .tips-text {
+                    flex: 1;
+                    font-size: 24rpx;
+                    color: #683830;
+                    line-height: 1.6;
+                    padding-top: 0;
+                }
+            }
+        }
+        
+        .tips-dots {
+            position: absolute;
+            bottom: 40rpx;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            
+            .dot {
+                width: 16rpx;
+                height: 16rpx;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.5);
+                margin: 0 10rpx;
+                transition: all 0.3s;
+                
+                &.active {
+                    width: 32rpx;
+                    border-radius: 8rpx;
+                    background: #FFFFFF;
+                }
+            }
+        }
+    }
+}

pages/isLand/HuaTian.vue

@@ -59,6 +59,9 @@ select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种
 			<view class="close" @click="onClose">
 				<image src="../../static/island/UI/btn_close.png" class="close"></image>
 			</view>
+			<view class="huatian-tips" @click="showHuaTianTips">
+				<image src="../../static/island/huatian/tips_icon.png" class="tips-icon"></image>
+			</view>
 			<view class="btn_list">
 				<view class="item item1" @click="showUnlockConfirm">
 					解锁荒地
@@ -114,6 +117,55 @@ select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种
 			</view>
 		</view>
 
+		<view class="huatian-tips-dialog" v-if="showTipsDialog">
+			<view class="tips-content">
+				<view class="tips-title">花田心得</view>
+				<view class="tips-close" @click="closeTipsDialog">
+					<image src="../../static/island/UI/btn_close.png"></image>
+				</view>
+				<swiper class="tips-swiper" :current="currentPage" @change="handlePageChange">
+					<swiper-item>
+						<view class="tips-items">
+							<view class="tips-item">
+								<image src="../../static/island/huatian/tips1.png" class="tips-img"></image>
+								<view class="tips-text">点击【解锁荒地】,中高亮闪烁的荒地,消耗铃钱解锁新的种植地块。</view>
+							</view>
+							<view class="tips-item">
+								<image src="../../static/island/huatian/tips2.png" class="tips-img"></image>
+								<view class="tips-text">点击【除草】,选中高亮闪烁的地块进行消除杂草,放能进行种植。</view>
+							</view>
+						</view>
+					</swiper-item>
+					<swiper-item>
+						<view class="tips-items">
+							<view class="tips-item">
+								<image src="../../static/island/huatian/tips3.png" class="tips-img"></image>
+								<view class="tips-text">点击【播种】，选心仪的花种播撒至高亮区域，查看成熟期或消耗 M 币加速生长。</view>
+							</view>
+							<view class="tips-item">
+								<image src="../../static/island/huatian/tips4.png" class="tips-img"></image>
+								<view class="tips-text">当花朵绽放成熟期已至，点击【收获】选中，进行采摘吧。</view>
+							</view>
+						</view>
+					</swiper-item>
+					<swiper-item>
+						<view class="tips-items">
+							<view class="tips-item">
+								<image src="../../static/island/huatian/tips5.png" class="tips-img"></image>
+								<view class="tips-text">收获的花朵将放在你的背包中，你可以对花朵进行出售，来赚取铃钱哟。</view>
+							</view>
+							<view class="tips-item">
+								<image src="../../static/island/huatian/tips6.png" class="tips-img"></image>
+								<view class="tips-text">花朵种子可以在花田旁边的【花店】中购买哟。</view>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+				<view class="tips-dots">
+					<view class="dot" v-for="index in 3" :key="index" :class="{'active': currentPage === index-1}"></view>
+				</view>
+			</view>
+		</view>
 
 	</view>
 </template>
@@ -136,6 +188,8 @@ select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种
 				dataLoaded: false,
 				// 用户ID
 				ssoId: 0,
+				// 是否第一次打开花田
+				isFirstOpenHuaTian: true,
 				// 田地数据
 				fields: Array(20).fill().map(() => ({
 					id: 0, // 后端数据库ID
@@ -179,6 +233,8 @@ select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种
 				taskDayActive: false,
 				// 主岛引用
 				mainLand: null,
+				showTipsDialog: false, // 添加花田心得弹框显示状态
+				currentPage: 0, // 当前页码
 			}
 		},
 		watch: {
@@ -227,6 +283,16 @@ select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种
 			async fetchData() {
 				console.log("uuid", getApp().globalData.uuid)
 				try {
+					// 检查是否是第一次打开花田
+					const isFirstOpen = uni.getStorageSync('isFirstOpenHuaTian');
+					if (isFirstOpen === '') {
+						// 第一次打开，设置标志并显示提示对话框
+						uni.setStorageSync('isFirstOpenHuaTian', 'false');
+						this.isFirstOpenHuaTian = true;
+					} else {
+						this.isFirstOpenHuaTian = false;
+					}
+					
 					uni.request({
 						url: this.$apiHost + '/Game/huatian/index',
 						method: 'POST',
@@ -368,6 +434,11 @@ select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种
 												// 数据加载完成，显示界面
 												this.dataLoaded = true;
 												this.show = true;
+												
+												// 如果是第一次打开，显示提示对话框
+												if (this.isFirstOpenHuaTian) {
+													this.showTipsDialog = true;
+												}
 											},
 											fail: (err) => {
 												console.error('获取土地价格异常', err);
@@ -975,6 +1046,18 @@ select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种
 			setMainLand(mainLand) {
 				this.mainLand = mainLand;
 			},
+			// 显示花田心得弹框
+			showHuaTianTips() {
+				this.showTipsDialog = true;
+			},
+			
+			// 关闭花田心得弹框
+			closeTipsDialog() {
+				this.showTipsDialog = false;
+			},
+			handlePageChange(e) {
+				this.currentPage = e.detail.current;
+			},
 		},
 
 	}

pages/isLand/mainLand.vue

@@ -60,6 +60,11 @@
 				</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 }">
@@ -101,6 +106,15 @@
     <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> 
@@ -114,6 +128,7 @@ 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 {
@@ -123,6 +138,7 @@ export default {
 		ShopDialog,
 		HuaTian,
 		TaskDialog,
+		TalkGuide,
 		GuideManager
 	},
 		data() {
@@ -162,6 +178,13 @@ export default {
 				homeArrowAnimating: false,
 				homeArrowVisible: false,
 				currentShopName: '商店',
+				// 引导相关数据
+				showTalkGuide: false,
+				currentTalkData: [],
+				playerName: '梦幻',
+				// 引导箭头相关
+				showGuideArrow: false,
+				guideArrowPosition: { x: 0, y: 0, r: 0 }
 			}
 		},
 		onLoad() {
@@ -181,7 +204,8 @@ export default {
 			}, 2000);
 		},
 		onShow() {
-			// this.loadData();
+			// 检查是否需要显示引导
+			this.checkAndShowGuide('mainLand');
 		},
 		onReady() {
 			// 在组件渲染完成后获取图片尺寸
@@ -329,6 +353,9 @@ export default {
 				this.huaTianVisible = true;
 				// 将mainLand传递给HuaTian组件
 				this.$refs.huaTian && this.$refs.huaTian.setMainLand(this);
+				
+				// 检查是否需要显示引导
+				this.checkAndShowGuide('mainLand_farm');
 			},
 
 			onShopClick(event) {
@@ -499,12 +526,78 @@ export default {
 			},
 
 			// 检查并显示引导
-			checkAndShowGuide() {
+			checkAndShowGuide(stageId) {
+				console.log('checkAndShowGuide stageId :', stageId);
 				// 延迟执行以确保DOM已经渲染
 				setTimeout(() => {
-					this.$refs.guideManager && this.$refs.guideManager.startGuide('mainLand');
-				}, 500);
+					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>
@@ -580,6 +673,38 @@ export default {
 		}
 	}
 
+	.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;