HuaTian.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125
  1. <template>
  2. <!--
  3. 设定:
  4. suo:锁;
  5. flower:花,共7种,图片分别为flower1.png flower2.png flower7.png;
  6. zacao:杂草;
  7. tian:田地,如果是待解锁的田地,图片用tian_suo.png,如果是已解锁就用tian.png;
  8. souhuo:收获标识;
  9. select_zz:7种花的view,默认应该隐藏,点击播种时显示,播种结束后隐藏
  10. 4个按钮:
  11. 解锁荒地:点击时,将第一块待解锁的田地转换为已解锁地
  12. 除草:点击时,让杂草隐藏
  13. 播种:点击时,需要先将7种花显示出来,选择其中一种,然后再点击除去杂草的地,然后该块地上显示种子,然后10分钟倒计时,然后显示对应的花,以及收获标识
  14. 收获:点击后,有收获标识的土地上的收获标识图片隐藏,花隐藏,出现杂草
  15. 操作流程:
  16. 默认显示待解锁的田地(其他几个图标都隐藏),点击"解锁荒地",点击"除草",点击"播种",到时间后点击"收获" -->
  17. <view class="page" v-if="show">
  18. <view class="bgAlpha" @click="onClose"></view>
  19. <view class="task-board">
  20. <view class="task_day" @click="handleTaskDayClick" :class="{'task-day-active': taskDayActive}">
  21. <image src="../../static/island/huatian/btn_task_day.png" class="task"></image>
  22. </view>
  23. <view class="board-title">
  24. </view>
  25. <view class="bodyContent">
  26. <block v-for="(field, index) in fields" :key="index">
  27. <view class="blank" v-if="index == 0 || index == 7 || index == 10"></view>
  28. <view class="item" :class="{
  29. 'locked': !field.isUnlocked,
  30. 'weedy': field.hasWeed,
  31. 'weed-blink': weedMode && field.hasWeed,
  32. 'planted': field.flower,
  33. 'growing': field.isGrowing,
  34. 'ready': field.canHarvest,
  35. 'harvest-blink': harvestMode && field.canHarvest
  36. }" @click="handleFieldClick(index)">
  37. <image v-if="!field.isUnlocked" src="../../static/island/huatian/suo.png" class="suo"></image>
  38. <image v-if="field.flower && field.growthCompleted"
  39. :src="`../../static/island/items/flower${field.flowerType}.png`" class="flower"></image>
  40. <image v-if="field.seedStage && field.isGrowing" src="../../static/island/huatian/zongzi.png"
  41. class="flower"></image>
  42. <image v-if="field.hasWeed && field.isUnlocked" src="../../static/island/huatian/zacao.png"
  43. class="zacao"></image>
  44. <image
  45. :src="field.isUnlocked ? '../../static/island/huatian/tian.png' : '../../static/island/huatian/tian_suo.png'"
  46. class="tian"></image>
  47. <image v-if="field.canHarvest" src="../../static/island/huatian/souhuo.png" class="souhuo">
  48. </image>
  49. <view class="timer" v-if="field.isGrowing">
  50. <image src="../../static/island/huatian/timer.png" class="icon"></image>
  51. <text>{{formatTime(field.remainingTime)}}</text>
  52. </view>
  53. </view>
  54. <view class="blank" v-if="index == 2 || index == 9 || index == 12"></view>
  55. </block>
  56. </view>
  57. <view class="close" @click="onClose">
  58. <image src="../../static/island/UI/btn_close.png" class="close"></image>
  59. </view>
  60. <view class="huatian-tips" @click="showHuaTianTips">
  61. <image src="../../static/island/huatian/tips_icon.png" class="tips-icon"></image>
  62. </view>
  63. <view class="btn_list">
  64. <view class="item item1" @click="showUnlockConfirm">
  65. 解锁荒地
  66. </view>
  67. <view class="item item2" @click="removeWeed">
  68. 除草
  69. </view>
  70. <view class="item item3" @click="showFlowerSelect">
  71. 播种
  72. </view>
  73. <view class="item item4" @click="enterHarvestMode">
  74. 收获
  75. </view>
  76. </view>
  77. <view class="select_zz" v-if="showFlowerSelection">
  78. <view class="item" v-for="(flower, idx) in flowers" :key="idx" @click="selectFlower(idx)"
  79. v-if="flower.count > 0">
  80. <view class="img">
  81. <image :src="`../../static/island/items/flower${idx+1}.png`"></image>
  82. </view>
  83. <view class="foot">
  84. {{flower.count}}
  85. </view>
  86. </view>
  87. <view class="jiantou">
  88. <image class="jiantou" src="../../static/island/huatian/jiantou.png"></image>
  89. </view>
  90. </view>
  91. </view>
  92. <!-- 解锁确认对话框 -->
  93. <view class="confirm-dialog" v-if="showUnlockDialog">
  94. <view class="dialog-content">
  95. <view class="dialog-title">解锁荒地</view>
  96. <view class="dialog-text">是否支付{{nextLandPrice}}铃钱解锁荒地?</view>
  97. <view class="dialog-buttons">
  98. <view class="btn-cancel" @click="cancelUnlock">取消</view>
  99. <view class="btn-confirm" @click="confirmUnlock">确认</view>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="guild" v-if="showGuide">
  104. <view class="content">
  105. "欢迎来到花田!在这里,你将成为农场的主人,体验种植和经营农场的乐趣。首先,让我们来开垦一块土地吧。只需支付铃钱即可解锁!"
  106. </view>
  107. <view class="title">
  108. 罗奇
  109. </view>
  110. <view class="npc">
  111. <image src="../../static/island/npc.png"></image>
  112. </view>
  113. </view>
  114. <view class="huatian-tips-dialog" v-if="showTipsDialog">
  115. <view class="tips-content">
  116. <view class="tips-title">花田心得</view>
  117. <view class="tips-close" @click="closeTipsDialog">
  118. <image src="../../static/island/UI/btn_close.png"></image>
  119. </view>
  120. <swiper class="tips-swiper" :current="currentPage" @change="handlePageChange">
  121. <swiper-item>
  122. <view class="tips-items">
  123. <view class="tips-item">
  124. <image src="../../static/island/huatian/tips1.png" class="tips-img"></image>
  125. <view class="tips-text">点击【解锁荒地】,消耗铃钱解锁新的种植地块。</view>
  126. </view>
  127. <view class="tips-item">
  128. <image src="../../static/island/huatian/tips2.png" class="tips-img"></image>
  129. <view class="tips-text">点击【除草】,选中高亮闪烁的地块进行消除杂草,放能进行种植。</view>
  130. </view>
  131. </view>
  132. </swiper-item>
  133. <swiper-item>
  134. <view class="tips-items">
  135. <view class="tips-item">
  136. <image src="../../static/island/huatian/tips3.png" class="tips-img"></image>
  137. <view class="tips-text">点击【播种】,选心仪的花种播撒至高亮区域。</view>
  138. </view>
  139. <view class="tips-item">
  140. <image src="../../static/island/huatian/tips4.png" class="tips-img"></image>
  141. <view class="tips-text">当花朵绽放成熟期已至,点击【收获】选中,进行采摘吧。</view>
  142. </view>
  143. </view>
  144. </swiper-item>
  145. <swiper-item>
  146. <view class="tips-items">
  147. <view class="tips-item">
  148. <image src="../../static/island/huatian/tips5.png" class="tips-img"></image>
  149. <view class="tips-text">收获的花朵将放在你的背包中,你可以对花朵进行出售,来赚取铃钱哟。</view>
  150. </view>
  151. <view class="tips-item">
  152. <image src="../../static/island/huatian/tips6.png" class="tips-img"></image>
  153. <view class="tips-text">花朵种子可以在花田旁边的【花店】中购买哟。</view>
  154. </view>
  155. </view>
  156. </swiper-item>
  157. </swiper>
  158. <view class="tips-dots">
  159. <view class="dot" v-for="index in 3" :key="index" :class="{'active': currentPage === index-1}">
  160. </view>
  161. </view>
  162. </view>
  163. </view>
  164. </view>
  165. </template>
  166. <script>
  167. export default {
  168. name: 'TaskDialog',
  169. components: {
  170. },
  171. props: {
  172. visible: {
  173. type: Boolean,
  174. default: false
  175. }
  176. },
  177. data() {
  178. return {
  179. show: false,
  180. dataLoaded: false,
  181. // 用户ID
  182. ssoId: 0,
  183. // 是否第一次打开花田
  184. isFirstOpenHuaTian: true,
  185. // 田地数据
  186. fields: Array(20).fill().map(() => ({
  187. id: 0, // 后端数据库ID
  188. tid: 0, // 对应的土地表ID
  189. isUnlocked: false,
  190. hasWeed: false,
  191. flower: false,
  192. flowerType: null,
  193. isGrowing: false,
  194. growthCompleted: false,
  195. canHarvest: false,
  196. remainingTime: 0,
  197. timer: null,
  198. seedStage: false,
  199. plantTime: '',
  200. state: 0 // 与后端对应的状态
  201. })),
  202. // 花的数据
  203. flowers: [],
  204. // 种子数据
  205. seeds: [],
  206. // 用户铃钱
  207. money: 0,
  208. // 下一块要解锁的土地价格
  209. nextLandPrice: 100,
  210. // 选择状态
  211. selectedFlowerIndex: -1,
  212. showFlowerSelection: false,
  213. showGuide: false,
  214. plantMode: false,
  215. showUnlockDialog: false, // 解锁确认对话框显示状态
  216. // 当前选择的土地ID
  217. selectedLandId: 0,
  218. // 成长检查定时器
  219. growthCheckTimer: null,
  220. weedMode: false, // 添加除草模式状态
  221. weedyFields: [], // 添加可除草的地块列表
  222. harvestMode: false, // 添加收获模式状态
  223. harvestableFields: [], // 添加可收获的地块列表
  224. taskDayActive: false,
  225. // 主岛引用
  226. mainLand: null,
  227. showTipsDialog: false, // 添加花田心得弹框显示状态
  228. currentPage: 0, // 当前页码
  229. }
  230. },
  231. watch: {
  232. visible: {
  233. immediate: true,
  234. handler(val) {
  235. if (val) {
  236. this.fetchData();
  237. } else {
  238. this.show = false;
  239. this.dataLoaded = false;
  240. }
  241. }
  242. }
  243. },
  244. onLoad() {
  245. // 初始化获取数据
  246. this.fetchData();
  247. },
  248. onShow() {
  249. // 重新获取数据
  250. this.fetchData();
  251. },
  252. beforeDestroy() {
  253. // 清除所有定时器
  254. this.fields.forEach(field => {
  255. if (field.timer) {
  256. clearInterval(field.timer);
  257. }
  258. });
  259. // 清除生长检查定时器
  260. if (this.growthCheckTimer) {
  261. clearInterval(this.growthCheckTimer);
  262. }
  263. },
  264. methods: {
  265. // 关闭界面
  266. onClose() {
  267. this.show = false;
  268. this.$emit('update:visible', false);
  269. this.$emit('close');
  270. },
  271. // 初始化获取数据
  272. async fetchData() {
  273. console.log("uuid", getApp().globalData.uuid)
  274. try {
  275. // 检查是否是第一次打开花田
  276. const isFirstOpen = uni.getStorageSync('isFirstOpenHuaTian');
  277. if (isFirstOpen === '') {
  278. // 第一次打开,设置标志并显示提示对话框
  279. uni.setStorageSync('isFirstOpenHuaTian', 'false');
  280. this.isFirstOpenHuaTian = true;
  281. } else {
  282. this.isFirstOpenHuaTian = false;
  283. }
  284. uni.request({
  285. url: this.$apiHost + '/Game/huatian/index',
  286. method: 'POST',
  287. data: {
  288. uuid: getApp().globalData.uuid,
  289. },
  290. header: {
  291. 'Content-Type': 'application/x-www-form-urlencoded',
  292. 'sign': getApp().globalData.headerSign,
  293. },
  294. success: (res) => {
  295. if (res.data && res.data.code === 0) {
  296. // 更新用户铃钱
  297. this.money = res.data.money;
  298. // 更新种子数据
  299. this.seeds = res.data.seeds || [];
  300. // 更新背包数据
  301. const bagItems = res.data.bag_list || [];
  302. // 更新花的数据(背包中type=1的是种子)
  303. this.flowers = [];
  304. for (let i = 1; i <= 7; i++) {
  305. // 找到对应的种子数量
  306. const seedBag = bagItems.find(item => item.type === 1 && item.tid ===
  307. i);
  308. this.flowers.push({
  309. id: i,
  310. name: this.seeds[i - 1]?.name || `花${i}`,
  311. count: seedBag ? seedBag.num : 0
  312. });
  313. }
  314. // 更新土地数据
  315. const tudiList = res.data.tudi_list || [];
  316. // 重置田地数据
  317. this.fields = Array(20).fill().map((_, index) => ({
  318. id: 0,
  319. tid: index + 1,
  320. isUnlocked: false,
  321. hasWeed: false,
  322. flower: false,
  323. flowerType: null,
  324. isGrowing: false,
  325. growthCompleted: false,
  326. canHarvest: false,
  327. remainingTime: 0,
  328. timer: null,
  329. seedStage: false,
  330. plantTime: '',
  331. state: 0
  332. }));
  333. // 更新已解锁的田地状态
  334. tudiList.forEach(land => {
  335. const fieldIndex = land.tid - 1;
  336. if (fieldIndex >= 0 && fieldIndex < this.fields.length) {
  337. const field = this.fields[fieldIndex];
  338. field.id = land.id;
  339. field.tid = land.tid;
  340. field.isUnlocked = true;
  341. field.state = land.state;
  342. field.plantTime = land.plant_time;
  343. // 根据状态设置不同的显示
  344. if (land.state === -1) {
  345. // 杂草地
  346. field.hasWeed = true;
  347. } else if (land.state === 0) {
  348. // 待播种的空地
  349. field.hasWeed = false;
  350. } else if (land.state >= 1 && land.state <= 7) {
  351. // 种植了花
  352. field.hasWeed = false;
  353. field.flowerType = land.zzid;
  354. // 计算是否已经成熟
  355. if (land.plant_time) {
  356. const plantTime = new Date(land.plant_time);
  357. const now = new Date();
  358. const growthHours = (now - plantTime) / (1000 *
  359. 60 * 60);
  360. // 获取对应种子的生长周期
  361. const seed = this.seeds.find(s => s.id === land
  362. .state);
  363. const limitHours = seed ? seed.limit_time : 0;
  364. if (growthHours >= limitHours) {
  365. // 已成熟
  366. field.flower = true;
  367. field.growthCompleted = true;
  368. field.canHarvest = true;
  369. } else {
  370. // 未成熟,显示生长中
  371. field.isGrowing = true;
  372. field.seedStage = true;
  373. field.remainingTime = Math.ceil((limitHours -
  374. growthHours) * 60 * 60);
  375. this.startGrowthTimer(fieldIndex);
  376. }
  377. }
  378. } else if (land.state === 99) {
  379. // 成熟待收割
  380. field.hasWeed = false;
  381. field.flower = true;
  382. field.flowerType = land.flowerType || land.zzid;
  383. field.growthCompleted = true;
  384. field.canHarvest = true;
  385. }
  386. }
  387. });
  388. // 找到下一块可解锁土地的价格
  389. for (let i = 0; i < this.fields.length; i++) {
  390. if (!this.fields[i].isUnlocked) {
  391. console.log("this.landpric", i + 1)
  392. // 从服务端获取土地价格
  393. uni.request({
  394. url: this.$apiHost + '/Game/huatian/get_land_price',
  395. method: 'POST',
  396. data: {
  397. uuid: getApp().globalData.uuid,
  398. land_id: i + 1
  399. },
  400. header: {
  401. 'Content-Type': 'application/x-www-form-urlencoded',
  402. 'sign': getApp().globalData.headerSign,
  403. uuid: getApp().globalData.uuid,
  404. },
  405. success: (res) => {
  406. console.log('res.data', res.data);
  407. if (res.data && res.data.code === 0) {
  408. this.nextLandPrice = res.data.data.price;
  409. } else {
  410. // 如果获取失败,使用默认值
  411. this.nextLandPrice = 100;
  412. }
  413. // 数据加载完成,显示界面
  414. this.dataLoaded = true;
  415. this.show = true;
  416. // 如果是第一次打开,显示提示对话框
  417. if (this.isFirstOpenHuaTian) {
  418. this.showTipsDialog = true;
  419. }
  420. },
  421. fail: (err) => {
  422. console.error('获取土地价格异常', err);
  423. // 如果获取失败,使用默认值
  424. this.nextLandPrice = 100;
  425. // 数据加载完成,显示界面
  426. this.dataLoaded = true;
  427. this.show = true;
  428. }
  429. });
  430. break;
  431. }
  432. }
  433. // 启动定时检查植物生长状态
  434. this.startGrowthCheck();
  435. } else {
  436. uni.showToast({
  437. title: res.data?.msg || '获取数据失败',
  438. icon: 'none'
  439. });
  440. this.dataLoaded = true;
  441. this.show = true;
  442. }
  443. },
  444. fail: (err) => {
  445. console.error('获取数据异常', err);
  446. uni.showToast({
  447. title: '网络异常,请重试',
  448. icon: 'none'
  449. });
  450. this.dataLoaded = true;
  451. this.show = true;
  452. }
  453. });
  454. } catch (error) {
  455. console.error('获取数据异常', error);
  456. uni.showToast({
  457. title: '网络异常,请重试',
  458. icon: 'none'
  459. });
  460. this.dataLoaded = true;
  461. this.show = true;
  462. }
  463. },
  464. // 显示解锁确认对话框
  465. showUnlockConfirm() {
  466. this.harvestMode = false;
  467. this.weedMode = false;
  468. this.showUnlockDialog = true;
  469. },
  470. // 取消解锁
  471. cancelUnlock() {
  472. this.showUnlockDialog = false;
  473. },
  474. // 确认解锁
  475. async confirmUnlock() {
  476. try {
  477. uni.request({
  478. url: this.$apiHost + '/Game/huatian/unlock_land',
  479. method: 'POST',
  480. data: {
  481. uuid: getApp().globalData.uuid,
  482. },
  483. header: {
  484. 'Content-Type': 'application/x-www-form-urlencoded',
  485. 'sign': getApp().globalData.headerSign,
  486. uuid: getApp().globalData.uuid,
  487. },
  488. success: (res) => {
  489. if (res.data && res.data.code === 0) {
  490. uni.showToast({
  491. title: '解锁成功',
  492. icon: 'success'
  493. });
  494. // 更新用户铃钱
  495. this.money = res.data.data.money;
  496. // 重新获取数据
  497. this.fetchData();
  498. } else {
  499. uni.showToast({
  500. title: res.data?.msg || '解锁失败',
  501. icon: 'none'
  502. });
  503. }
  504. },
  505. fail: (err) => {
  506. console.error('解锁土地异常', err);
  507. uni.showToast({
  508. title: '网络异常,请重试',
  509. icon: 'none'
  510. });
  511. }
  512. });
  513. } catch (error) {
  514. console.error('解锁土地异常', error);
  515. uni.showToast({
  516. title: '网络异常,请重试',
  517. icon: 'none'
  518. });
  519. }
  520. this.showUnlockDialog = false;
  521. },
  522. // 除草
  523. async removeWeed() {
  524. this.harvestMode = false;
  525. if (this.weedMode) {
  526. // 如果已经在除草模式,则退出
  527. this.weedMode = false;
  528. this.weedyFields = [];
  529. return;
  530. }
  531. // 找到所有有杂草的已解锁土地
  532. this.weedyFields = this.fields.filter(field => field.isUnlocked && field.hasWeed);
  533. if (this.weedyFields.length === 0) {
  534. uni.showToast({
  535. title: '没有需要除草的土地',
  536. icon: 'none'
  537. });
  538. return;
  539. }
  540. // 进入除草模式
  541. this.weedMode = true;
  542. uni.showToast({
  543. title: '请点击需要除草的土地',
  544. icon: 'none'
  545. });
  546. },
  547. // 进入收获模式
  548. enterHarvestMode() {
  549. this.weedMode = false;
  550. if (this.harvestMode) {
  551. // 如果已经在收获模式,则退出
  552. this.harvestMode = false;
  553. this.harvestableFields = [];
  554. return;
  555. }
  556. // 找到所有可收获的土地
  557. this.harvestableFields = this.fields.filter(field => field.canHarvest);
  558. if (this.harvestableFields.length === 0) {
  559. uni.showToast({
  560. title: '没有可收获的花',
  561. icon: 'none'
  562. });
  563. return;
  564. }
  565. // 进入收获模式
  566. this.harvestMode = true;
  567. uni.showToast({
  568. title: '请点击需要收获的土地',
  569. icon: 'none'
  570. });
  571. },
  572. // 显示花的选择
  573. showFlowerSelect() {
  574. this.harvestMode = false;
  575. this.weedMode = false;
  576. if (this.showFlowerSelection) {
  577. this.showFlowerSelection = false;
  578. return;
  579. }
  580. // 检查是否有可播种的土地
  581. const canPlantFields = this.fields.filter(field => field.isUnlocked && !field.hasWeed && !field.flower && !
  582. field.isGrowing);
  583. if (canPlantFields.length === 0) {
  584. uni.showToast({
  585. title: '没有可播种的土地',
  586. icon: 'none'
  587. });
  588. return;
  589. }
  590. this.showFlowerSelection = true;
  591. this.plantMode = false;
  592. this.selectedFlowerIndex = -1;
  593. },
  594. // 选择花
  595. selectFlower(idx) {
  596. this.selectedFlowerIndex = idx;
  597. this.showFlowerSelection = false;
  598. this.plantMode = true;
  599. },
  600. // 点击田地
  601. handleFieldClick(index) {
  602. if (this.weedMode) {
  603. // 在除草模式下,只处理有草的地块
  604. if (this.fields[index].hasWeed) {
  605. this.removeWeedFromField(index);
  606. }
  607. return;
  608. }
  609. if (this.harvestMode) {
  610. // 在收获模式下,只处理可收获的地块
  611. if (this.fields[index].canHarvest) {
  612. this.harvestField(this.fields[index].id);
  613. }
  614. return;
  615. }
  616. if (this.plantMode) {
  617. if (this.fields[index].canHarvest) {}
  618. this.handleFieldClickBZ(index);
  619. return;
  620. }
  621. // 原有的种植逻辑
  622. if (!this.fields[index].isUnlocked) {
  623. uni.showToast({
  624. title: '该地块未解锁',
  625. icon: 'none'
  626. });
  627. return;
  628. }
  629. if (this.fields[index].flower) {
  630. if (this.fields[index].canHarvest) {
  631. this.harvestField(this.fields[index].id);
  632. } else {
  633. uni.showToast({
  634. title: '花朵正在生长中',
  635. icon: 'none'
  636. });
  637. }
  638. return;
  639. }
  640. // 打开种子选择弹窗
  641. this.currentFieldIndex = index;
  642. this.showSeedSelector = true;
  643. },
  644. // 点击田地
  645. async handleFieldClickBZ(index) {
  646. const field = this.fields[index];
  647. // 已解锁土地且处于播种模式
  648. if (this.plantMode && field.isUnlocked && !field.hasWeed && !field.flower && !field.isGrowing) {
  649. // 设置当前选中的土地
  650. this.selectedLandId = field.id;
  651. // 播种
  652. try {
  653. uni.request({
  654. url: this.$apiHost + '/Game/huatian/plant_seed',
  655. method: 'POST',
  656. data: {
  657. uuid: getApp().globalData.uuid,
  658. land_id: field.id,
  659. seed_id: this.selectedFlowerIndex + 1
  660. },
  661. header: {
  662. 'Content-Type': 'application/x-www-form-urlencoded',
  663. 'sign': getApp().globalData.headerSign,
  664. uuid: getApp().globalData.uuid,
  665. },
  666. success: (res) => {
  667. if (res.data && res.data.code === 0) {
  668. // 更新土地状态
  669. field.isGrowing = true;
  670. field.seedStage = true;
  671. field.flowerType = this.selectedFlowerIndex + 1;
  672. field.state = this.selectedFlowerIndex + 1;
  673. field.plantTime = res.data.data.plantTime;
  674. // 计算剩余生长时间
  675. const limitTimeHours = res.data.data.limitTime;
  676. field.remainingTime = limitTimeHours * 60 * 60;
  677. // 开始计时
  678. this.startGrowthTimer(index);
  679. // 更新种子数量
  680. const flowerData = this.flowers[this.selectedFlowerIndex];
  681. if (flowerData && flowerData.count > 0) {
  682. flowerData.count--;
  683. }
  684. // 退出播种模式
  685. this.plantMode = false;
  686. uni.showToast({
  687. title: '播种成功',
  688. icon: 'success'
  689. });
  690. } else {
  691. uni.showToast({
  692. title: res.data?.msg || '播种失败',
  693. icon: 'none'
  694. });
  695. this.plantMode = false;
  696. }
  697. },
  698. fail: (err) => {
  699. console.error('播种异常', err);
  700. uni.showToast({
  701. title: '网络异常,请重试',
  702. icon: 'none'
  703. });
  704. this.plantMode = false;
  705. }
  706. });
  707. } catch (error) {
  708. console.error('播种异常', error);
  709. uni.showToast({
  710. title: '网络异常,请重试',
  711. icon: 'none'
  712. });
  713. this.plantMode = false;
  714. }
  715. } else if (field.canHarvest) {
  716. // 收获花朵
  717. this.harvestField(field.id);
  718. }
  719. },
  720. // 从特定地块移除杂草
  721. removeWeedFromField(index) {
  722. // 调用除草API
  723. uni.request({
  724. url: this.$apiHost + '/Game/huatian/remove_weed',
  725. method: 'POST',
  726. data: {
  727. uuid: getApp().globalData.uuid,
  728. land_id: this.fields[index].id
  729. },
  730. header: {
  731. 'Content-Type': 'application/x-www-form-urlencoded',
  732. 'sign': getApp().globalData.headerSign,
  733. uuid: getApp().globalData.uuid,
  734. },
  735. success: (res) => {
  736. if (res.data && res.data.code === 0) {
  737. // 更新地块状态
  738. this.fields[index].hasWeed = false;
  739. this.fields[index].state = 0;
  740. // 从可除草地块列表中移除
  741. this.weedyFields = this.weedyFields.filter(f => f.id !== this.fields[index].id);
  742. uni.showToast({
  743. title: '除草成功',
  744. icon: 'success'
  745. });
  746. // 如果所有草都已清除,退出除草模式
  747. if (this.weedyFields.length === 0) {
  748. this.weedMode = false;
  749. uni.showToast({
  750. title: '所有杂草已清除',
  751. icon: 'success'
  752. });
  753. }
  754. } else {
  755. uni.showToast({
  756. title: res.data?.msg || '除草失败',
  757. icon: 'none'
  758. });
  759. }
  760. },
  761. fail: (err) => {
  762. console.error('除草异常', err);
  763. uni.showToast({
  764. title: '网络异常,请重试',
  765. icon: 'none'
  766. });
  767. }
  768. });
  769. },
  770. // 开始生长计时器
  771. startGrowthTimer(fieldIndex) {
  772. const field = this.fields[fieldIndex];
  773. // 清除可能存在的旧定时器
  774. if (field.timer) {
  775. clearInterval(field.timer);
  776. }
  777. field.timer = setInterval(() => {
  778. field.remainingTime--;
  779. if (field.remainingTime <= 0) {
  780. // 生长完成
  781. clearInterval(field.timer);
  782. field.isGrowing = false;
  783. field.seedStage = false;
  784. field.growthCompleted = true;
  785. field.flower = true;
  786. field.canHarvest = true;
  787. }
  788. }, 1000);
  789. },
  790. // 收获特定地块
  791. async harvestField(landId) {
  792. console.log("land", landId);
  793. try {
  794. uni.request({
  795. url: this.$apiHost + '/Game/huatian/harvest',
  796. method: 'POST',
  797. data: {
  798. uuid: getApp().globalData.uuid,
  799. land_id: landId
  800. },
  801. header: {
  802. 'Content-Type': 'application/x-www-form-urlencoded',
  803. 'sign': getApp().globalData.headerSign,
  804. uuid: getApp().globalData.uuid,
  805. },
  806. success: (res) => {
  807. if (res.data && res.data.code === 0) {
  808. // 找到对应的田地
  809. const fieldIndex = this.fields.findIndex(f => f.id === landId);
  810. if (fieldIndex >= 0) {
  811. const field = this.fields[fieldIndex];
  812. // 重置状态
  813. field.flower = false;
  814. field.flowerType = null;
  815. field.growthCompleted = false;
  816. field.canHarvest = false;
  817. field.hasWeed = true;
  818. field.state = -1;
  819. // 如果有定时器,清除它
  820. if (field.timer) {
  821. clearInterval(field.timer);
  822. field.timer = null;
  823. }
  824. }
  825. // 重新获取数据以更新背包
  826. this.fetchData();
  827. uni.showToast({
  828. title: `收获了${res.data.data.harvestNum}朵花`,
  829. icon: 'success'
  830. });
  831. // 从可收获地块列表中移除
  832. this.harvestableFields = this.harvestableFields.filter(f => f.id !==
  833. landId);
  834. // 如果所有花都已收获,退出收获模式
  835. if (this.harvestableFields.length === 0) {
  836. this.harvestMode = false;
  837. uni.showToast({
  838. title: '所有花已收获',
  839. icon: 'success'
  840. });
  841. }
  842. } else {
  843. uni.showToast({
  844. title: res.data?.msg || '收获失败',
  845. icon: 'none'
  846. });
  847. }
  848. },
  849. fail: (err) => {
  850. console.error('收获异常', err);
  851. uni.showToast({
  852. title: '网络异常,请重试',
  853. icon: 'none'
  854. });
  855. }
  856. });
  857. } catch (error) {
  858. console.error('收获异常', error);
  859. uni.showToast({
  860. title: '网络异常,请重试',
  861. icon: 'none'
  862. });
  863. }
  864. },
  865. // 收获所有可收获的花
  866. async harvest() {
  867. const harvestFields = this.fields.filter(field => field.canHarvest);
  868. if (harvestFields.length === 0) {
  869. uni.showToast({
  870. title: '没有可收获的花',
  871. icon: 'none'
  872. });
  873. return;
  874. }
  875. try {
  876. for (const field of harvestFields) {
  877. await this.harvestField(field.id);
  878. }
  879. } catch (error) {
  880. console.error('批量收获异常', error);
  881. }
  882. },
  883. // 格式化时间显示
  884. formatTime(seconds) {
  885. const hours = Math.floor(seconds / 3600);
  886. const minutes = Math.floor((seconds % 3600) / 60);
  887. const secs = seconds % 60;
  888. // 获取当前时间,用于控制冒号闪烁
  889. const now = new Date();
  890. const blinkState = now.getSeconds() % 2 === 0;
  891. // 格式化为 "HH:MM" 格式
  892. return `${hours.toString().padStart(2, '0')}${blinkState ? ':' : ' '}${minutes.toString().padStart(2, '0')}`;
  893. },
  894. // 开始定时检查植物生长状态
  895. startGrowthCheck() {
  896. // 清除可能存在的旧定时器
  897. if (this.growthCheckTimer) {
  898. clearInterval(this.growthCheckTimer);
  899. }
  900. // 每分钟检查一次植物生长状态
  901. this.growthCheckTimer = setInterval(async () => {
  902. try {
  903. uni.request({
  904. url: this.$apiHost + '/Game/huatian/check_growth',
  905. method: 'POST',
  906. data: {
  907. uuid: getApp().globalData.uuid,
  908. },
  909. header: {
  910. 'Content-Type': 'application/x-www-form-urlencoded',
  911. 'sign': getApp().globalData.headerSign,
  912. uuid: getApp().globalData.uuid,
  913. },
  914. success: (res) => {
  915. if (res.data && res.data.code === 0) {
  916. const growthData = res.data.data || [];
  917. // 更新每块土地的状态
  918. growthData.forEach(item => {
  919. if (item.isReady) {
  920. // 找到对应的田地
  921. const field = this.fields.find(f => f.id ===
  922. item.landId);
  923. if (field) {
  924. // 更新为可收获状态
  925. field.isGrowing = false;
  926. field.seedStage = false;
  927. field.growthCompleted = true;
  928. field.flower = true;
  929. field.canHarvest = true;
  930. field.state = 99;
  931. // 清除定时器
  932. if (field.timer) {
  933. clearInterval(field.timer);
  934. field.timer = null;
  935. }
  936. }
  937. }
  938. });
  939. }
  940. },
  941. fail: (err) => {
  942. console.error('检查生长状态异常', err);
  943. }
  944. });
  945. } catch (error) {
  946. console.error('检查生长状态异常', error);
  947. }
  948. }, 60000); // 60秒检查一次
  949. },
  950. handleTaskDayClick() {
  951. this.taskDayActive = true;
  952. setTimeout(() => {
  953. this.taskDayActive = false;
  954. }, 200);
  955. // 如果mainLand存在,调用其onTaskClick方法
  956. if (this.mainLand) {
  957. // 关闭当前花田界面
  958. // this.onClose();
  959. // 打开任务对话框
  960. this.mainLand.onTaskClick();
  961. }
  962. },
  963. // 设置mainLand引用
  964. setMainLand(mainLand) {
  965. this.mainLand = mainLand;
  966. },
  967. // 显示花田心得弹框
  968. showHuaTianTips() {
  969. this.showTipsDialog = true;
  970. },
  971. // 关闭花田心得弹框
  972. closeTipsDialog() {
  973. this.showTipsDialog = false;
  974. },
  975. handlePageChange(e) {
  976. this.currentPage = e.detail.current;
  977. },
  978. },
  979. }
  980. </script>
  981. <style lang="scss">
  982. @import './HuaTian.scss';
  983. @keyframes weedBlink {
  984. 0% {
  985. opacity: 1;
  986. transform: scale(1);
  987. }
  988. 50% {
  989. opacity: 0.5;
  990. transform: scale(1.1);
  991. }
  992. 100% {
  993. opacity: 1;
  994. transform: scale(1);
  995. }
  996. }
  997. .weed-blink {
  998. animation: weedBlink 1s infinite;
  999. z-index: 10;
  1000. }
  1001. @keyframes harvestBlink {
  1002. 0% {
  1003. opacity: 1;
  1004. transform: scale(1);
  1005. }
  1006. 50% {
  1007. opacity: 0.5;
  1008. transform: scale(1.1);
  1009. }
  1010. 100% {
  1011. opacity: 1;
  1012. transform: scale(1);
  1013. }
  1014. }
  1015. .harvest-blink {
  1016. animation: harvestBlink 1s infinite;
  1017. z-index: 10;
  1018. }
  1019. .task-day-active {
  1020. transform: scale(0.95);
  1021. opacity: 0.8;
  1022. transition: all 0.2s ease;
  1023. }
  1024. </style>