样式调整

src/pages/fill-order/StepOne.vue

@@ -93,7 +93,13 @@
     </div>
     <div class="ptc-button-group">
       <div class="ptc-inner">
-        <button class="ptc-button" @click="next">NEXT</button>
+        <button
+          class="ptc-button"
+          :class="{ disabled: !state.form.subscribe_type }"
+          @click="next"
+        >
+          NEXT
+        </button>
       </div>
     </div>
   </div>

src/pages/repair/steps/StepTwo.vue

@@ -34,28 +34,41 @@
       </div>
     </div>
   </div>
-  <div v-if="state.date" class="ptc-block">
-    <div class="ptc-inner">
-      <div class="ptc-cell">
-        <p class="ptc-label">Selection period</p>
-        <div class="ptc-value">
-          <PtcRadioGroup
-            v-model="state.period"
-            class="date-list"
-            @change="onPeriodChange"
-          >
-            <PtcRadio
-              v-for="(item, index) of state.periods"
-              :key="index"
-              class="date"
-              :disabled="item.is_resreve != 1"
-              :value="item.interface_time"
-              >{{ item.interface_time }}</PtcRadio
+  <div v-if="state.date" class="ptc-wrapper">
+    <div class="ptc-block">
+      <div class="ptc-inner">
+        <div class="ptc-cell">
+          <p class="ptc-label">Selection period</p>
+          <div class="ptc-value">
+            <PtcRadioGroup
+              v-model="state.period"
+              class="date-list"
+              @change="onPeriodChange"
             >
-          </PtcRadioGroup>
+              <PtcRadio
+                v-for="(item, index) of state.periods"
+                :key="index"
+                class="date"
+                :disabled="item.is_resreve != 1"
+                :value="item.interface_time"
+                >{{ item.time }}</PtcRadio
+              >
+            </PtcRadioGroup>
+          </div>
         </div>
       </div>
     </div>
+    <div class="ptc-button-group">
+      <div class="ptc-inner">
+        <button
+          class="ptc-button"
+          :class="{ disabled: !state.period }"
+          @click="state.step++"
+        >
+          NEXT
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -99,6 +112,6 @@ async function onDateChange(date: string) {
 
 function onPeriodChange(val: string) {
   state.uiPeriod = state.periods.find(item => item.interface_time === val)!.time
-  state.date && setTimeout(() => state.step++, 200)
+  // state.date && setTimeout(() => state.step++, 200)
 }
 </script>

src/style/components.scss

@@ -72,6 +72,10 @@
   &:active {
     background: $primary-color-lighten;
   }
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
   &--stroke {
     background: none;