Forráskód Böngészése

商店数据绑定

ck@123911.net 2 hónapja
szülő
commit
f6248eda88

+ 155 - 94
components/dialogs/ShopDialog.vue

@@ -23,23 +23,23 @@
       <view class="shop-header"></view>
       <view class="shop-name">{{shopName}}</view>
       <view class="shop-items">
-        <view class="shop-item" v-for="(item, index) in currentItems" :key="index" @click="onItemClick(item)">
+        <view class="shop-item" v-for="(item, index) in shopItems" :key="index" @click="onItemClick(item)">
           <view class="item-card">
             <view class="new-tag" v-if="item.isNew">新品</view>
             <view class="item-left">
               <view class="item-grid">
-                <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
-                <text class="owned-text">已有: {{item.owned}}</text>
+                <image class="item-icon" :src="item.image || defaultImage" mode="aspectFit"></image>
+                <text class="owned-text">已有: {{item.num || 0}}</text>
               </view>
             </view>
             <view class="item-center">
               <text class="item-name">{{item.name}}</text>
               <view class="item-details">
-                <text class="detail-text">{{item.detail}}</text>
+                <text class="detail-text">{{getItemDetail(item)}}</text>
               </view>
             </view>
             <view class="item-right">
-              <view class="buy-btn">
+              <view class="buy-btn" @click.stop="buyItem(item)">
                 <view class="item-price">
                   <image class="currency-icon" src="/static/island/UI/wd_icon_xingyuan.png" mode="aspectFit"></image>
                   <text>{{item.price}}</text>
@@ -76,93 +76,11 @@ export default {
       dialogVisible: false,
       currentTab: 0,
       tabs: ['种子', '道具', '钻石'],
-      items: {
-        0: [
-          { 
-            icon: '/static/island/items/item_wood1.png', 
-            name: '草莓种子', 
-            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_wood2.png', 
-            name: '草莓种子', 
-            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_mine1.png', 
-            name: '草莓种子', 
-            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_mine2.png', 
-            name: '铁矿石', 
-            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_axe1.png', 
-            name: '斧头', 
-            detail: '收获期: 160时\n成长期: 60时\n产量: 10',
-            price: 100,
-            owned: 3,
-            isNew: false
-          }
-        ],
-        1: [
-          { 
-            icon: '/static/island/items/item_wood1.png', 
-            name: '杂木材', 
-            detail: '普通木材,用来造普通的东西',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_wood2.png', 
-            name: '松木材', 
-            detail: '松树木材,比一般木材硬一点,可以用来造强度更好的东西',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_mine1.png', 
-            name: '石材', 
-            detail: '匀称规整的石头,适合用来造房子和石器',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_mine2.png', 
-            name: '铁矿石', 
-            detail: '铁矿石,可以练出铁锭',
-            price: 100,
-            owned: 3,
-            isNew: false
-          },
-          { 
-            icon: '/static/island/items/item_blueprint1.png', 
-            name: '斧头图纸', 
-            detail: '制造斧头的图纸,购买学习后可以制作斧头',
-            price: 100,
-            owned: 3,
-            isNew: false
-          }
-        ],
-        2: []
-      }
+      shopItems: [],
+      defaultImage: '/static/island/items/default.png',
+      shopType: 'main', // 默认商店类型
+      userMoney: 0, // 用户铃钱
+      loading: false
     }
   },
   computed: {
@@ -173,6 +91,9 @@ export default {
   watch: {
     visible(val) {
       this.dialogVisible = val
+      if (val) {
+        // this.fetchShopData()
+      }
     },
     dialogVisible(val) {
       this.$emit('update:visible', val)
@@ -180,11 +101,18 @@ export default {
     shopName: {
       immediate: true,
       handler(val) {
+        console.log("shopName",val)
         if (val === '材料商店') {
-          this.currentTab = 1
+          this.shopType = 'main'
+        } else if (val === '花店') {
+          this.shopType = 'huatian'
         } else {
-          this.currentTab = 0
+          this.shopType = 'main'
         }
+        // 如果对话框可见,则重新获取数据
+        if (this.dialogVisible) {
+        }
+        this.fetchShopData()
       }
     }
   },
@@ -194,6 +122,139 @@ export default {
     },
     onItemClick(item) {
       this.$emit('buy', item)
+    },
+    // 获取商店数据
+    async fetchShopData() {
+      if (this.loading) return
+      this.loading = true
+      console.log("shoptype",this.shopType)
+      try {
+        uni.request({
+          url: this.$apiHost + '/Game/get_shop_list',
+          method: 'GET',
+          data: {
+            uuid: getApp().globalData.uuid,
+            type: this.shopType
+          },
+          header: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'sign': getApp().globalData.headerSign,
+          },
+          success: (res) => {
+            console.log("res",res.data)
+            if (res.data && res.data.code === 0) {
+              this.shopItems = res.data.list || []
+              
+              // 获取用户铃钱
+              this.getUserMoney()
+            } else {
+              uni.showToast({
+                title: res.data?.msg || '获取商店数据失败',
+                icon: 'none'
+              })
+            }
+          },
+          fail: (err) => {
+            console.error('获取商店数据异常', err)
+            uni.showToast({
+              title: '网络异常,请重试',
+              icon: 'none'
+            })
+          },
+          complete: () => {
+            this.loading = false
+          }
+        })
+      } catch (error) {
+        console.error('获取商店数据异常', error)
+        uni.showToast({
+          title: '网络异常,请重试',
+          icon: 'none'
+        })
+        this.loading = 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 && res.data.code === 0) {
+            this.userMoney = res.data.num_gmg || 0
+          }
+        }
+      })
+    },
+    // 购买物品
+    buyItem(item) {
+      if (this.userMoney < item.price) {
+        uni.showToast({
+          title: '铃钱不足',
+          icon: 'none'
+        })
+        return
+      }
+      
+      uni.request({
+        url: this.$apiHost + '/Game/buy_shop_item',
+        method: 'POST',
+        data: {
+          uuid: getApp().globalData.uuid,
+          shop_id: item.id
+        },
+        header: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'sign': getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          if (res.data && res.data.code === 0) {
+            uni.showToast({
+              title: '购买成功',
+              icon: 'success'
+            })
+            
+            // 更新用户铃钱
+            this.userMoney = res.data.data.money
+            
+            // 更新物品数量
+            const index = this.shopItems.findIndex(i => i.id === item.id)
+            if (index !== -1) {
+              this.shopItems[index].num = (this.shopItems[index].num || 0) + 1
+            }
+            
+            // 通知父组件购买成功
+            this.$emit('buy-success', item)
+          } else {
+            uni.showToast({
+              title: res.data?.msg || '购买失败',
+              icon: 'none'
+            })
+          }
+        },
+        fail: (err) => {
+          console.error('购买物品异常', err)
+          uni.showToast({
+            title: '网络异常,请重试',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    // 获取物品详情
+    getItemDetail(item) {
+      if (this.shopType === 'huatian') {
+        return `收获期: ${item.limit_time}时\n产量: ${item.num_out}`
+      } else {
+        return item.content || '暂无描述'
+      }
     }
   }
 }

+ 14 - 12
pages.json

@@ -339,6 +339,11 @@
 				"navigationBarTitleText": "我的星灵",
 				"navigationStyle": "custom"
 			}
+		}, {
+			"path": "pages/isLand/test",
+			"style": {
+				"navigationBarTitleText": "测试"
+			}
 		}, {
 			"path": "pages/isLand/mainLand",
 			"style": {
@@ -376,26 +381,23 @@
 			}
 		},
 		{
-			"path" : "pages/vip/index",
-			"style" : 
-			{
-				"navigationBarTitleText" : "会员",
+			"path": "pages/vip/index",
+			"style": {
+				"navigationBarTitleText": "会员",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/vip/M_purchase",
-			"style" : 
-			{
-				"navigationBarTitleText" : "M币充值",
+			"path": "pages/vip/M_purchase",
+			"style": {
+				"navigationBarTitleText": "M币充值",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/vip/record",
-			"style" : 
-			{
-				"navigationBarTitleText" : "充值记录",
+			"path": "pages/vip/record",
+			"style": {
+				"navigationBarTitleText": "充值记录",
 				"navigationStyle": "custom"
 			}
 		}

+ 6 - 0
pages/isLand/HuaTian.vue

@@ -416,6 +416,8 @@ select_zz:7种花的view,默认应该隐藏,点击播种时显示,播种
 
 			// 显示解锁确认对话框
 			showUnlockConfirm() {
+				this.harvestMode = false;
+				this.weedMode = false;
 				this.showUnlockDialog = true;
 			},
 
@@ -478,6 +480,7 @@ select_zz:7种花的view,默认应该隐藏,点击播种时显示,播种
 
 			// 除草
 			async removeWeed() {
+				this.harvestMode = false;
 				if (this.weedMode) {
 					// 如果已经在除草模式,则退出
 					this.weedMode = false;
@@ -506,6 +509,7 @@ select_zz:7种花的view,默认应该隐藏,点击播种时显示,播种
 
 			// 进入收获模式
 			enterHarvestMode() {
+				this.weedMode = false;
 				if (this.harvestMode) {
 					// 如果已经在收获模式,则退出
 					this.harvestMode = false;
@@ -534,6 +538,8 @@ select_zz:7种花的view,默认应该隐藏,点击播种时显示,播种
 
 			// 显示花的选择
 			showFlowerSelect() {
+				this.harvestMode = false;
+				this.weedMode = false;
 				if (this.showFlowerSelection) {
 					this.showFlowerSelection = false;
 					return;

+ 551 - 480
pages/isLand/mainLand.vue

@@ -1,528 +1,599 @@
 <template>
- <view class="main-land-container">
-<!--    <view class="scroll-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" >
+	<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 class="background-layer"></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 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: 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 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="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>
 
-		<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>
+		<!-- 第一层: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>
 
-    <!-- 回家箭头 -->
-    <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>
+		<!-- 对话框组件 -->
+		<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"></task-dialog>
 	</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">9999</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">9999</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"></task-dialog>
-  </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'
-
-export default {
-	components: {
-		BackpackDialog,
-		CharacterDialog,
-		ShopDialog,
-		HuaTian,
-		TaskDialog
-	},
-	data() {
-		return {
-			// // 背景位置控制
-			translateX: -200,
-			startX: 0,
-			currentX: 0,
-			isDragging : false,
-			// maxTranslate: 0,
-			
-			// // 获取屏幕宽度和背景宽度
-			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: '商店',
-		}
-	},
-	onLoad() {
-		let self = this;
-		// 获取屏幕宽度
-		uni.getSystemInfo({
-			success: (res) => {
-				self.screenWidth = res.windowWidth;
-				console.log('屏幕宽度:', self.screenWidth);
+	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'
+
+	export default {
+		components: {
+			BackpackDialog,
+			CharacterDialog,
+			ShopDialog,
+			HuaTian,
+			TaskDialog
+		},
+		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: '商店',
 			}
-		});
-	},
-	onShow() {
-		// this.loadData();
-	},
-	onReady() {
-		// 在组件渲染完成后获取图片尺寸
-		setTimeout(() => {
-			this.getImageSize();
-			// 延迟1秒后显示箭头并开始动画
-			setTimeout(() => {
-				this.homeArrowVisible = true;
-				this.startHomeArrowAnimation();
-			}, 1000);
-		}, 300);
-	},
-	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('未能获取岛屿图片的尺寸');
+		onLoad() {
+			let self = this;
+			// 获取屏幕宽度
+			uni.getSystemInfo({
+				success: (res) => {
+					self.screenWidth = res.windowWidth;
+					console.log('屏幕宽度:', self.screenWidth);
 				}
-			}).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.getUserMoney();
 			
-			this.translateX = newTranslateX;
-			console.log('moveX =',moveX);
-			console.log('this.translateX =',this.translateX);
+			// 启动定时器,每2秒更新一次铃钱
+			this.moneyTimer = setInterval(() => {
+				this.getUserMoney();
+			}, 2000);
+		},
+		onShow() {
+			// this.loadData();
 		},
-		// 触摸结束
-		touchEnd() {
-			console.log('----------- touchEnd');
-			this.currentX = this.translateX;
-			console.log('this.currentX =',this.currentX);
+		onReady() {
+			// 在组件渲染完成后获取图片尺寸
+			setTimeout(() => {
+				this.getImageSize();
+				// 延迟1秒后显示箭头并开始动画
+				setTimeout(() => {
+					this.homeArrowVisible = true;
+					this.startHomeArrowAnimation();
+				}, 1000);
+			}, 300);
 		},
-		
-		onmousedown(e) {
-			console.log('----------- onmousedown');
-			console.log('----------- e',e);
-			this.isDragging = true;
-			this.startX = e.clientX;
-			this.currentX = this.translateX;
-			mapLayer.style.cursor = 'grabbing';
+		onUnload() {
+			// 清除定时器
+			if (this.moneyTimer) {
+				clearInterval(this.moneyTimer);
+				this.moneyTimer = null;
+			}
 		},
-		
-		onmousemove(e) {
-			if(this.isDragging){
-				console.log('----------- onmousemove');
-				const moveX = e.clientX - this.startX;
+		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);
-			}
-		},
-		
-		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);
-		},
-
-		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(() => {
+				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);
+			},
+
+			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') {
-					self.houseAnimating = false;
+					this.houseAnimating = true;
 				} else if (type === 'farm') {
-					self.farmAnimating = false;
+					this.farmAnimating = true;
 				} else if (type === 'shop') {
-					self.shopAnimating = false;
+					this.shopAnimating = true;
 				}
-			}, 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();
+				// 创建动画实例
+				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(() => {
-					animation.translateY(0).step({ duration: 1000 });
+					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(() => {
-						if (this.homeArrowAnimating) {
-							animate();
-						}
+						animation.translateY(0).step({
+							duration: 1000
+						});
+						this.homeArrowAnimation = animation.export();
+
+						setTimeout(() => {
+							if (this.homeArrowAnimating) {
+								animate();
+							}
+						}, 1000);
 					}, 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
-		},
+				};
+
+				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;
+						}
+					}
+				})
+			},
+		}
 	}
-}
 </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;
-  }
-}
-
-.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> 
+	@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;
+		}
+	}
+
+	.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>

BIN
static/island/items/flower1.png


BIN
static/island/items/flower2.png


BIN
static/island/items/flower3.png


BIN
static/island/items/flower4.png


BIN
static/island/items/flower5.png


BIN
static/island/items/flower6.png


BIN
static/island/items/flower7.png


BIN
static/island/items/item_blueprint2.png


BIN
static/island/items/item_blueprint3.png