建设古镇 具体图片加上去，逻辑调整

src/store/index.js

@@ -5,7 +5,7 @@ function resetGameProgress() {
     jigsawProgress: config.sceneTree.map((item) => {
       return {
         name: item.name,
-        isJigsawDone: false, // 是否已完成拼图游戏
+        isJigsawDone: true, // 是否已完成拼图游戏
         jigsawList: [...item.jigsawList], // 拼图碎片名称列表
         children: item.children.map((innerItem) => {
           // console.log(innerItem)
@@ -18,7 +18,7 @@ function resetGameProgress() {
         })
       }
     }),
-    buildProgress: -1,
+    buildProgress: 0,
   }
   localStorage.setItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`, JSON.stringify(ret))
   return ret

src/views/Bag.vue

@@ -19,7 +19,7 @@
       >
         <img
           class=""
-          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}.jpg`)"
+          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}-small.jpg`)"
           alt=""
           draggable="false"
         >

src/views/BuildTown.vue

@@ -1,30 +1,35 @@
 <template>
   <div
     class="build-town"
+    :class="{
+      celebrating: isCelebrating,
+    }"
   >
     <div class="left">
       <div
         v-for="(item, idx) in sceneList"
         :key="idx"
         class="scene"
-        :class="gameProgress.jigsawProgress[item.idxInConfig].isJigsawDone ? 'unlock' : 'lock'"
+        :class="gameProgress.buildProgress >= item.idxInConfig + 1 ? 'unlock' : 'lock'"
         :style="{
           width: `calc(${item.width} / ${windowSizeWhenDesign} * ${unit})`,
           height: `calc(${item.height} / ${windowSizeWhenDesign} * ${unit})`,
           top: `calc(${item.top} / ${windowSizeWhenDesign} * ${unit})`,
           left: `calc(${item.left} / ${windowSizeWhenDesign} * ${unit})`,
+          pointerEvents: gameProgress.buildProgress >= item.idxInConfig ? '' : 'none',
         }"
+        @click="recordBuildProgress(item.idxInConfig + 1)"
       >
         <img
           class=""
-          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}.jpg`)"
+          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}-small.jpg`)"
           alt=""
           draggable="false"
         >
         <div class="text-wrap">
           <span>{{ gameProgress.jigsawProgress[item.idxInConfig].name }}</span>
           <img
-            v-if="!gameProgress.jigsawProgress[item.idxInConfig].isJigsawDone"
+            v-if="!(gameProgress.buildProgress >= item.idxInConfig)"
             class="lock"
             src="@/assets/images/lock.png"
             alt=""
@@ -40,6 +45,71 @@
       >
     </div>
     <div class="right">
+      <div class="effect">
+        <transition name="fade-in">
+          <img
+            v-if="gameProgress.buildProgress >= 0"
+            class=""
+            src="@/assets/images/build-town-0.png"
+            alt=""
+            draggable="false"
+          >
+        </transition>
+        <transition name="fade-in">
+          <img
+            v-if="gameProgress.buildProgress >= 1"
+            class=""
+            src="@/assets/images/build-town-1.png"
+            alt=""
+            draggable="false"
+          >
+        </transition>
+        <transition name="fade-in">
+          <img
+            v-if="gameProgress.buildProgress >= 2"
+            class=""
+            src="@/assets/images/build-town-2.png"
+            alt=""
+            draggable="false"
+          >
+        </transition>
+        <transition name="fade-in">
+          <img
+            v-if="gameProgress.buildProgress >= 3"
+            class=""
+            src="@/assets/images/build-town-3.png"
+            alt=""
+            draggable="false"
+          >
+        </transition>
+        <transition name="fade-in">
+          <img
+            v-if="gameProgress.buildProgress >= 4"
+            class=""
+            src="@/assets/images/build-town-4.png"
+            alt=""
+            draggable="false"
+          >
+        </transition>
+        <transition name="fade-in">
+          <img
+            v-if="gameProgress.buildProgress >= 5"
+            class=""
+            src="@/assets/images/build-town-5.png"
+            alt=""
+            draggable="false"
+          >
+        </transition>
+        <transition name="fade-in">
+          <img
+            v-if="gameProgress.buildProgress >= 6"
+            class=""
+            src="@/assets/images/build-town-6.png"
+            alt=""
+            draggable="false"
+          >
+        </transition>
+      </div>
       <div class="bottom-wrap">
         <div
           v-for="(item, idx) in buildList"
@@ -47,11 +117,9 @@
           class="step"
         >
           <button
-            v-click-audio
             :class="{
-              done: gameProgress.buildProgress >= idx
+              done: gameProgress.buildProgress >= idx,
             }"
-            @click="recordBuildProgress(idx)"
           >
             <div>{{ item.name }}</div>
           </button>
@@ -68,6 +136,7 @@
 <script>
 import { onMounted, reactive, toRefs, ref } from 'vue'
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+import { ElMessageBox } from 'element-plus'
 
 export default {
   name: 'BuildTown',
@@ -126,24 +195,28 @@ export default {
       ],
       buildList: [
         {
-          name: '建民居',
+          name: '草地',
+        },
+        {
+          name: '桃花源',
         },
         {
-          name: '布祠堂',
+          name: '牌坊',
         },
         {
-          name: '立牌坊',
+          name: '祠堂',
         },
         {
-          name: '过程名',
+          name: '民居',
         },
         {
-          name: '过程名',
+          name: '匠心独运',
         },
         {
-          name: '过程名',
+          name: '拾遗',
         },
       ],
+      isCelebrating: false,
     }
   },
   computed: {
@@ -154,6 +227,24 @@ export default {
       return config.sceneTree
     },
   },
+  watch: {
+    'gameProgress.buildProgress': {
+      handler(vNew) {
+        if (vNew === 6) {
+          ElMessageBox.alert('', '拼图完成！', {
+            confirmButtonText: '确定',
+            callback: (action) => {
+              console.log(action)
+            },
+          })
+          this.isCelebrating = true
+          setTimeout(() => {
+            this.isCelebrating = false
+          }, 1000)
+        }
+      }
+    }
+  },
   mounted() {
   },
   unmounted() {
@@ -180,7 +271,21 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;
+  padding-bottom: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+  &.celebrating{
+    animation: flash 0.8s forwards;
+  }
+  @keyframes flash {
+    0% {
+      filter: brightness(1)
+    }
+    50% {
+      filter: brightness(1.2)
+    }
+    100% {
+      filter: brightness(1)
+    }
+  }
   >.left {
     position: relative;
     width: calc(746 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
@@ -244,11 +349,23 @@ export default {
     position: relative;
     width: calc(950 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-    background: red;
     background-image: url(@/assets/images/bg-jigsaw-game-page-frame.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    padding: calc(10 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    >.effect{
+      position: relative;
+      width: 100%;
+      height: 100%;
+      >img{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
     >div.bottom-wrap {
       position: absolute;
       left: 50%;
@@ -261,6 +378,7 @@ export default {
       >.step {
         display: flex;
         align-items: center;
+        pointer-events: none;
         >button {
           width: calc(14 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
           height: calc(14 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
@@ -287,10 +405,10 @@ export default {
         }
         >.line {
           display: inline-block;
-          width: calc(120 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;;
+          width: calc(120 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
           height: 1px;
           border-top: 1px dashed #C26827;
-          margin: 0 calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;;
+          margin: 0 calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
         }
       }
     }