搞到step4

src/components/ToolList.vue

@@ -72,10 +72,10 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const props = defineProps(['requiredToolList'])
+const props = defineProps(['currentStepInfo'])
 
 const requiredToolList = computed(() => {
-  return props.requiredToolList
+  return props.currentStepInfo.toolIdxList
 })
 
 /**
@@ -84,8 +84,29 @@ const requiredToolList = computed(() => {
 function onClickToolItem(idx) {
   if (requiredToolList.value.includes(idx)) {
     if (toolList.value[idx].selected === false) {
-      toolList.value[idx].selected = true
-      window.alert('选择正确')
+      if (requiredToolList.value.length === 1) {
+        toolList.value[idx].selected = true
+        window.alert('选择正确')
+      } else if (!props.currentStepInfo.hasToolOrder) {
+        toolList.value[idx].selected = true
+        window.alert('选择正确')
+      } else {
+        const toolIdxInRequiredToolList = requiredToolList.value.indexOf(idx)
+        if (toolIdxInRequiredToolList === 0) {
+          toolList.value[idx].selected = true
+          window.alert('选择正确')
+        } else {
+          for (let i = 0; i < toolIdxInRequiredToolList; i++) {
+            const preToolIdxInToolList = requiredToolList.value[i]
+            if (!toolList.value[preToolIdxInToolList].selected) {
+              window.alert('您拿错工具了~请重新选择')
+              return
+            }
+            toolList.value[idx].selected = true
+            window.alert('选择正确')
+          }
+        }
+      }
     }
   } else {
     window.alert('您拿错工具了~请重新选择')

src/config.js

@@ -7,6 +7,7 @@ export default {
     {
       name: '将线稿复写至胶板上',
       toolIdxList: [5, 6],
+      hasToolOrder: false,
     },
     {
       name: '雕刻胶版',
@@ -15,10 +16,12 @@ export default {
     {
       name: '用滚筒将颜料铺平',
       toolIdxList: [2, 3],
+      hasToolOrder: true,
     },
     {
       name: '蒙上版画纸，用木蘑菇压实',
-      toolIdxList: [4, 7],
+      toolIdxList: [7, 4],
+      hasToolOrder: true,
     },
     {
       name: '完成转印',

src/store/index.js

@@ -59,13 +59,6 @@ export const selectedToolNum = computed(() => {
 })
 
 export const workState = ref('init') // init, working, done
-watch(workState, (vNew) => {
-  if (vNew === 'init') {
-    toolList.value.forEach((item) => {
-      item.selected = false
-    })
-  }
-})
 
 export default createStore({
   state: {

src/views/DrawView.vue

@@ -33,7 +33,7 @@
     <tool-list
       v-show="workState === 'init'"
       class="tool-list"
-      :required-tool-list="currentStepInfo.toolIdxList"
+      :current-step-info="currentStepInfo"
     />
     <button
       v-show="workState === 'done'"
@@ -66,7 +66,7 @@ const {
 inject('$uaInfo')
 inject('$env')
 
-const curStepIdx = ref(0)
+const curStepIdx = ref(3)
 
 const currentStepInfo = computed(() => {
   return config.stepList[curStepIdx.value]
@@ -75,6 +75,9 @@ const currentStepInfo = computed(() => {
 function onClickNext() {
   workState.value = 'init'
   curStepIdx.value++
+  toolList.value.forEach((item) => {
+    item.selected = false
+  })
 }
 </script>
 

src/views/StepView1.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="working-area">
     <img
-      class="effect effect-begin"
-      src="@/assets/images/step-0-final.png"
+      class="effect"
+      src="@/assets/images/step-1-init.png"
       alt=""
       draggable="false"
     >

src/views/StepView2.vue

@@ -1,15 +1,31 @@
 <template>
   <div class="working-area">
     <img
-      class="effect effect-begin"
-      src="@/assets/images/step-0-final.png"
+      v-show="toolList[6].selected"
+      class="rubber-board"
+      src="@/assets/images/rubber-board-big.png"
       alt=""
       draggable="false"
     >
+    <div
+      v-show="toolList[5].selected && workState === 'init'"
+      class="copying-paper-bottom"
+    />
+    <img
+      v-show="workState === 'init'"
+      class="original-paint"
+      src="@/assets/images/step-2-init.png"
+      alt=""
+      draggable="false"
+    >
+    <div
+      v-show="toolList[5].selected && workState === 'init'"
+      class="copying-paper-top"
+    />
     <video
       v-show="workState === 'working' || workState === 'done'"
       ref="videoRef"
-      src="@/assets/videos/step-1.mp4"
+      src="@/assets/videos/step-2.mp4"
       playsinline
       webkit-playsinline="true"
       muted
@@ -59,19 +75,42 @@ watch(workState, (vNew) => {
   transform: translate(-50%, -50%);
   width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-  >img.effect{
+  >img.rubber-board{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
+  >.copying-paper-bottom{
+    position: absolute;
+    left: 15%;
+    top: 15%;
+    width: 70%;
+    height: 70%;
+    background-color: rgba(31, 74, 114, 1);
+  }
+  >img.original-paint{
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    width: 70%;
+    height: 70%;
+  }
+  >.copying-paper-top{
+    position: absolute;
+    left: 5%;
+    top: 5%;
+    width: 70%;
+    height: 70%;
+    background-color: rgba(0, 0, 0, 0.25);
+  }
   >video{
     position: absolute;
     left: 0;
     top: 0;
-    width: 100%;
-    height: 100%;
+    width: 94%;
+    height: 97%;
   }
 }
 </style>

src/views/StepView3.vue

@@ -1,15 +1,23 @@
 <template>
   <div class="working-area">
     <img
-      class="effect effect-begin"
-      src="@/assets/images/step-0-final.png"
+      v-show="workState === 'init'"
+      class="init"
+      src="@/assets/images/step-3-init.png"
+      alt=""
+      draggable="false"
+    >
+    <img
+      v-show="workState === 'working' || workState === 'done'"
+      class="rubber-board"
+      src="@/assets/images/rubber-board-big.png"
       alt=""
       draggable="false"
     >
     <video
       v-show="workState === 'working' || workState === 'done'"
       ref="videoRef"
-      src="@/assets/videos/step-1.mp4"
+      src="@/assets/videos/step-3.mp4"
       playsinline
       webkit-playsinline="true"
       muted
@@ -59,19 +67,26 @@ watch(workState, (vNew) => {
   transform: translate(-50%, -50%);
   width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-  >img.effect{
+  >img.init{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
-  >video{
+  >img.rubber-board{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
+  >video{
+    position: absolute;
+    left: 0.5%;
+    top: 0;
+    width: 96.9%;
+    height: 98%;
+  }
 }
 </style>

src/views/StepView4.vue

@@ -1,15 +1,56 @@
 <template>
   <div class="working-area">
     <img
-      class="effect effect-begin"
-      src="@/assets/images/step-0-final.png"
+      v-show="innerState === 0"
+      class="helper-board"
+      src="@/assets/images/helper-board.png"
       alt=""
       draggable="false"
     >
     <video
-      v-show="workState === 'working' || workState === 'done'"
-      ref="videoRef"
-      src="@/assets/videos/step-1.mp4"
+      v-show="innerState === 0 && workState === 'working'"
+      ref="videoRef1"
+      class="helper-board"
+      src="@/assets/videos/step-4-1.mp4"
+      playsinline
+      webkit-playsinline="true"
+      muted
+      @ended="workState = 'init', innerState = 1"
+    />
+    <img
+      v-show="innerState == 1 || innerState === 2"
+      class="helper-board"
+      src="@/assets/images/helper-board-done.png"
+      alt=""
+      draggable="false"
+    >
+    <video
+      v-show="(innerState === 1 && workState === 'working') || (innerState === 2)"
+      ref="videoRef2"
+      class="helper-board"
+      src="@/assets/videos/step-4-2.mp4"
+      playsinline
+      webkit-playsinline="true"
+      muted
+      @ended="innerState = 2, videoRef3.play()"
+    />
+    <!-- <img
+      v-show="innerState == 2"
+      class="helper-board"
+      src="@/assets/images/helper-board-done.png"
+      alt=""
+      draggable="false"
+    > -->
+    <img
+      class="rubber-board-init"
+      src="@/assets/images/step-4-init.png"
+      alt=""
+      draggable="false"
+    >
+    <video
+      ref="videoRef3"
+      class="rubber-board"
+      src="@/assets/videos/step-4-3.mp4"
       playsinline
       webkit-playsinline="true"
       muted
@@ -34,18 +75,28 @@ const requiredToolList = computed(() => {
 })
 
 watch(selectedToolNum, (vNew) => {
-  if (vNew === requiredToolList.value.length) {
+  if (vNew === 1) {
+    setTimeout(() => {
+      workState.value = 'working'
+    }, 500)
+  } else if (vNew === 2) {
     setTimeout(() => {
       workState.value = 'working'
     }, 500)
   }
 })
 
-const videoRef = ref(null)
+const videoRef1 = ref(null)
+const videoRef2 = ref(null)
+const videoRef3 = ref(null)
+
+const innerState = ref(0) //0：初始，1：颜料已挤出，2：滚筒已粘上颜料
 
 watch(workState, (vNew) => {
-  if (vNew === 'working') {
-    videoRef.value.play()
+  if (vNew === 'working' && innerState.value === 0) {
+    videoRef1.value.play()
+  } else if (vNew === 'working' && innerState.value === 1) {
+    videoRef2.value.play()
   }
 })
 
@@ -59,19 +110,31 @@ watch(workState, (vNew) => {
   transform: translate(-50%, -50%);
   width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-  >img.effect{
+  >img.helper-board{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
+    // height: 100%;
   }
-  >video{
+  >video.helper-board{
     position: absolute;
     left: 0;
     top: 0;
+    width: 98%;
+    // height: 100%;
+  }
+  >img.rubber-board-init{
+    position: absolute;
+    left: 0;
+    top: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     width: 100%;
-    height: 100%;
+  }
+  >video.rubber-board{
+    position: absolute;
+    left: 0;
+    top: calc(169 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    width: 97.5%;
   }
 }
 </style>

src/views/StepView5.vue

@@ -2,7 +2,7 @@
   <div class="working-area">
     <img
       class="effect effect-begin"
-      src="@/assets/images/step-0-final.png"
+      src="@/assets/images/step-1-init.png"
       alt=""
       draggable="false"
     >