Commit 076aeaaf by Hantao

feat(拼图游戏): 实现零件拖拽与进度显示功能

- 实现拖拽交互逻辑,支持零件从托盘拖拽到中心区域
- 添加拼图进度显示,根据已放置零件数量更新进度条
- 完成拼图后显示完成弹窗
- 优化界面布局和样式,适配不同尺寸的拼图零件
parent e485bbf1
......@@ -63,6 +63,21 @@ const currentProgressImg = computed(() => {
return PROGRESS_MAP[placedCount.value] || ASSETS.zzjd1;
});
const currentProgressImgStyle = computed(() => {
const currentImg = PROGRESS_MAP[placedCount.value] || ASSETS.zzjd1;
if (currentImg === ASSETS.zzjd6) {
return { width: '94rpx', height: '580rpx' };
}
if (currentImg === ASSETS.zzjd) {
return { width: '70rpx', height: '554rpx' };
}
// 默认尺寸
return { width: '94rpx', height: '548rpx' };
});
const showCompletion = ref(false);
const handleReset = () => {
......@@ -182,7 +197,7 @@ const getGhostIcon = () => {
<!-- 右侧进度条 -->
<view class="progress-wrapper">
<text class="progress-title">组装进度</text>
<image class="progress-img" :src="currentProgressImg" mode="scaleToFill" />
<image class="progress-img" :src="currentProgressImg" :style="currentProgressImgStyle" mode="scaleToFill" />
</view>
<!-- 下方托盘区域 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment