|
|
@@ -36,7 +36,7 @@
|
|
|
</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;"> </image>
|
|
|
+ <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;">
|
|
|
@@ -44,13 +44,13 @@
|
|
|
</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;"> </image>
|
|
|
+ <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>
|
|
|
- <text class="home-text">回家</text>
|
|
|
+ <!-- <image src="/static/island/home_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
|
|
|
+ <text class="home-text">⬅回家</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -69,34 +69,37 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="ui-buttons">
|
|
|
- <button class="ui-button" @click="showInventory">背包</button>
|
|
|
- <button class="ui-button" @click="showCharacter">角色</button>
|
|
|
- <button class="ui-button" @click="showShop">商店</button>
|
|
|
+ <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>
|
|
|
|
|
|
<!-- 对话框组件 -->
|
|
|
- <inventory-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></inventory-dialog>
|
|
|
+ <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>
|
|
|
- <farm-dialog :visible.sync="farmVisible" @close="onFarmClose"></farm-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 InventoryDialog from '@/components/dialogs/InventoryDialog.vue'
|
|
|
+import BackpackDialog from '@/components/dialogs/BackpackDialog.vue'
|
|
|
import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
|
|
|
import ShopDialog from '@/components/dialogs/ShopDialog.vue'
|
|
|
-import FarmDialog from './FarmDialog.vue'
|
|
|
+import HuaTian from './HuaTian.vue'
|
|
|
+import TaskDialog from './TaskDialog.vue'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- InventoryDialog,
|
|
|
+ BackpackDialog,
|
|
|
CharacterDialog,
|
|
|
ShopDialog,
|
|
|
- FarmDialog
|
|
|
+ HuaTian,
|
|
|
+ TaskDialog
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -113,16 +116,20 @@ export default {
|
|
|
islandHeight: 0,
|
|
|
houseAnimationData: {},
|
|
|
farmAnimationData: {},
|
|
|
+ shopAnimationData: {},
|
|
|
houseAnimating: false,
|
|
|
farmAnimating: false,
|
|
|
+ shopAnimating: false,
|
|
|
baseTranslate: { x: -50, y: 50 },
|
|
|
inventoryVisible: false,
|
|
|
characterVisible: false,
|
|
|
shopVisible: false,
|
|
|
- farmVisible: false,
|
|
|
+ huaTianVisible: false,
|
|
|
+ taskDialogVisible: false,
|
|
|
homeArrowAnimation: {},
|
|
|
homeArrowAnimating: false,
|
|
|
homeArrowVisible: false,
|
|
|
+ currentShopName: '商店',
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -255,15 +262,14 @@ export default {
|
|
|
onHouseClick(event) {
|
|
|
if(this.houseAnimating) return;
|
|
|
// 处理点击事件
|
|
|
- console.log('House clicked!');
|
|
|
+ console.log('house clicked!');
|
|
|
|
|
|
- // 播放房子的点击动画
|
|
|
+ // 播放房屋的点击动画
|
|
|
this.playAnimation('house');
|
|
|
|
|
|
- uni.showToast({
|
|
|
- title: 'House clicked!',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
+ // 设置商店名称为"房屋商店"
|
|
|
+ this.currentShopName = '材料商店';
|
|
|
+ this.shopVisible = true;
|
|
|
},
|
|
|
|
|
|
onFarmClick(event) {
|
|
|
@@ -274,13 +280,24 @@ export default {
|
|
|
// 播放大厅的点击动画
|
|
|
this.playAnimation('farm');
|
|
|
|
|
|
- // 打开农场对话框
|
|
|
- this.farmVisible = true;
|
|
|
+ // 打开花田对话框
|
|
|
+ this.huaTianVisible = true;
|
|
|
+ // 将mainLand传递给HuaTian组件
|
|
|
+ this.$refs.huaTian && this.$refs.huaTian.setMainLand(this);
|
|
|
+ },
|
|
|
+
|
|
|
+ onShopClick(event) {
|
|
|
+ if(this.shopAnimating) return;
|
|
|
+ // 处理点击事件
|
|
|
+ console.log('shop clicked!');
|
|
|
|
|
|
- uni.showToast({
|
|
|
- title: 'farm clicked!111',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
+ // 播放商店的点击动画
|
|
|
+ this.playAnimation('shop');
|
|
|
+
|
|
|
+ // 设置商店名称为"花店"
|
|
|
+ this.currentShopName = '花店';
|
|
|
+ // 打开商店对话框
|
|
|
+ this.shopVisible = true;
|
|
|
},
|
|
|
|
|
|
playAnimation(type) {
|
|
|
@@ -291,6 +308,8 @@ export default {
|
|
|
this.houseAnimating = true;
|
|
|
} else if (type === 'farm') {
|
|
|
this.farmAnimating = true;
|
|
|
+ } else if (type === 'shop') {
|
|
|
+ this.shopAnimating = true;
|
|
|
}
|
|
|
|
|
|
// 创建动画实例
|
|
|
@@ -310,6 +329,8 @@ export default {
|
|
|
this.houseAnimationData = animation.export();
|
|
|
} else if (type === 'farm') {
|
|
|
this.farmAnimationData = animation.export();
|
|
|
+ } else if (type === 'shop') {
|
|
|
+ this.shopAnimationData = animation.export();
|
|
|
}
|
|
|
|
|
|
// 动画结束后重置状态
|
|
|
@@ -318,6 +339,8 @@ export default {
|
|
|
self.houseAnimating = false;
|
|
|
} else if (type === 'farm') {
|
|
|
self.farmAnimating = false;
|
|
|
+ } else if (type === 'shop') {
|
|
|
+ self.shopAnimating = false;
|
|
|
}
|
|
|
}, 800);
|
|
|
},
|
|
|
@@ -349,9 +372,9 @@ export default {
|
|
|
onShopBuy(item) {
|
|
|
console.log('Buying item:', item)
|
|
|
},
|
|
|
- onFarmClose() {
|
|
|
- console.log('Closing farm dialog...')
|
|
|
- this.farmVisible = false
|
|
|
+ onHuaTianClose() {
|
|
|
+ console.log('Closing hua tian dialog...')
|
|
|
+ this.huaTianVisible = false
|
|
|
},
|
|
|
startHomeArrowAnimation() {
|
|
|
if (this.homeArrowAnimating) return;
|
|
|
@@ -386,7 +409,18 @@ export default {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/isLand/homeLand'
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 打开任务对话框
|
|
|
+ onTaskClick() {
|
|
|
+ console.log('Opening task dialog...')
|
|
|
+ this.taskDialogVisible = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭任务对话框
|
|
|
+ onTaskDialogClose() {
|
|
|
+ console.log('Closing task dialog...')
|
|
|
+ this.taskDialogVisible = false
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -416,14 +450,24 @@ export default {
|
|
|
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;
|
|
|
+ // 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);
|
|
|
+ // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
min-width: 120rpx;
|
|
|
|
|
|
&:active {
|
|
|
@@ -431,6 +475,13 @@ export default {
|
|
|
transform: scale(0.95);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .backpack-button {
|
|
|
+ background-image: url('/static/island/icon_backpack.png');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -445,10 +496,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
.home-arrow {
|
|
|
+// background: rgba(255, 255, 255, 0.9);
|
|
|
position: absolute;
|
|
|
- left: 100rpx; // 调整到左边位置
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
+ left: 40rpx; // 调整到左边位置
|
|
|
+ bottom: 460rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
@@ -458,7 +509,7 @@ export default {
|
|
|
|
|
|
.home-text {
|
|
|
color: #ffffff;
|
|
|
- font-size: 28rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
|
|
|
margin-top: 10rpx;
|
|
|
}
|
lalalashen
