Переглянути джерело

新增维护代码提示对话框,用户可以通过点击按钮查看维护代码位置的提示信息,同时添加了相关的图片文件以增强用户体验。

wuyi 2 тижнів тому
батько
коміт
2455983896
2 змінених файлів з 33 додано та 0 видалено
  1. BIN
      public/img/Maintenance_code.jpg
  2. 33 0
      src/views/ScanView.vue

BIN
public/img/Maintenance_code.jpg


+ 33 - 0
src/views/ScanView.vue

@@ -53,6 +53,7 @@ const scanRecordsMaintenanceCode = ref('')
 const verifiedMaintenanceCode = ref('')
 const scanRecords = ref(null)
 const loadingScanRecords = ref(false)
+const showMaintenanceCodeHintDialog = ref(false)
 
 const FORM_KEY_MAP = Object.freeze({
   person: [
@@ -1575,6 +1576,10 @@ onMounted(() => {
           <input v-model="maintenanceCode" type="text" maxlength="8"
             class="w-full rounded-xl border border-slate-300 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20"
             placeholder="Enter the maintenance code" @keyup.enter="handleVerifyMaintenance" autofocus />
+          <button type="button" @click="showMaintenanceCodeHintDialog = true"
+            class="mt-2 text-sm text-cyan-600 hover:text-cyan-700 hover:underline">
+            Don't know the maintenance code?
+          </button>
         </div>
         <div v-if="isFirstFill" class="rounded-xl border border-emerald-200 bg-emerald-50 p-3">
           <div class="flex items-start gap-2">
@@ -1601,6 +1606,34 @@ onMounted(() => {
         </div>
       </template>
     </Dialog>
+
+    <!-- Maintenance code hint dialog -->
+    <Dialog v-model:visible="showMaintenanceCodeHintDialog" modal :style="{ width: '90vw', maxWidth: '600px' }"
+      :draggable="false">
+      <template #header>
+        <div class="flex items-center gap-3">
+          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-100">
+            <i class="pi pi-info-circle text-lg text-cyan-600" />
+          </div>
+          <h3 class="text-lg font-semibold text-slate-900">Find Maintenance Code</h3>
+        </div>
+      </template>
+
+      <div class="py-4">
+        <img src="/img/Maintenance_code.jpg" alt="Maintenance code location hint"
+          class="w-full rounded-xl border border-slate-200" />
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end">
+          <button type="button"
+            class="rounded-xl bg-cyan-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-cyan-700"
+            @click="showMaintenanceCodeHintDialog = false">
+            Got it
+          </button>
+        </div>
+      </template>
+    </Dialog>
   </div>
 </template>