fix(appointment-scan): 修复步骤进度条在横屏下宽度没有占满的问题

zjk

2026-09-04 cc0c86385cdef27783ca4f71f050ccddc30eb4e2

 components/StepProgress.vue

@@ -1,5 +1,5 @@
<template>
  <view class="steps-card">
  <view class="steps-card" :class="{ landscape: isLandscapeLayout }">
    <view class="steps-row">
      <template v-for="(step, index) in stepsList" :key="index">
        <view class="step-item">
@@ -17,7 +17,7 @@
</template>

<script setup>
import { computed } from 'vue';
import { computed, ref, onMounted, onUnmounted } from 'vue';
import qrActiveIcon from '../static/appointment-scan/qr-active.png';
import qrCompletedIcon from '../static/appointment-scan/qr-completed.png';
import idcardInactiveIcon from '../static/appointment-scan/idcard-inactive.png';
@@ -36,6 +36,47 @@
import printActiveIcon from '../static/appointment-scan/print-active.png';
import stepArrowActiveImage from '../static/appointment-scan/step-arrow-active.png';
import stepArrowInactiveImage from '../static/appointment-scan/step-arrow-inactive.png';

const isLandscapeLayout = ref(false);
const updateLayoutMode = () => {
    try {
        const windowInfo = uni.getWindowInfo ? uni.getWindowInfo() : uni.getSystemInfoSync();
        const viewportWidth = Number(windowInfo?.windowWidth || windowInfo?.screenWidth || 0);
        const viewportHeight = Number(windowInfo?.windowHeight || windowInfo?.screenHeight || 0);
        isLandscapeLayout.value = Boolean(viewportWidth && viewportHeight && viewportWidth > viewportHeight);
    } catch (error) {
        console.error('StepProgress 读取窗口尺寸失败:', error);
        isLandscapeLayout.value = false;
    }
};

let flowWindowResizeHandler = null;
const registerFlowWindowResize = () => {
    if (flowWindowResizeHandler || !uni.onWindowResize) {
        return;
    }
    flowWindowResizeHandler = () => {
        updateLayoutMode();
    };
    uni.onWindowResize(flowWindowResizeHandler);
};
const unregisterFlowWindowResize = () => {
    if (!flowWindowResizeHandler || !uni.offWindowResize) {
        flowWindowResizeHandler = null;
        return;
    }
    uni.offWindowResize(flowWindowResizeHandler);
    flowWindowResizeHandler = null;
};

onMounted(() => {
    updateLayoutMode();
    registerFlowWindowResize();
});

onUnmounted(() => {
    unregisterFlowWindowResize();
});

const props = defineProps({
  currentStep: {
@@ -160,11 +201,11 @@
}

.steps-row {
  width: 100%;
  width: 1008px;
  height: 138px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-items: center;
  justify-content: space-between;
}

@@ -172,7 +213,6 @@
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 120px;
}

@@ -183,6 +223,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.step-icon {
@@ -212,7 +253,6 @@
  font-family: Inter, sans-serif;
  font-size: 23px;
  text-align: center;
  white-space: nowrap;
}

.completed-text {
@@ -236,10 +276,29 @@
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 56px;
}

.arrow-img {
  width: 92px;
  height: 82px;
}

/* 横屏模式 */
.steps-card.landscape {
  width: 1824px;
}
.steps-card.landscape .steps-row {
  width: 1824px;
}
.steps-card.landscape .step-line {
  flex: 1; /* 让连接线自动撑开 */
  align-items: center;
  justify-content: center;
  display: flex;
}
.steps-card.landscape .step-item {
  flex: none;
  width: 150px;
}
</style>