Vant CountDown 倒计时与 Steps 步骤条：订单支付流程页实战

<template>
  <div class="pay-header">
    <p>订单提交成功，请在</p>
    <van-count-down :time="remainMs" format="HH:mm:ss" @finish="onTimeout" />
    <p>内完成支付</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const remainMs = ref(0);

onMounted(() => {
  // expireAt 为后端返回的支付截止时间戳（毫秒）
  const expireAt = 1799999999000;
  remainMs.value = Math.max(0, expireAt - Date.now());
});

const onTimeout = () => {
  // 倒计时结束：跳转回订单列表或提示订单已关闭
  router.replace("/order/closed");
};
</script>

<!-- 自定义格式：天 + 时:分 -->
<van-count-down :time="remainMs" format="DD 天 HH 时 mm 分" />

<!-- 自定义样式：数字卡片风格 -->
<van-count-down :time="remainMs" :millisecond="false">
  <template #default="current">
    <span class="time-box">{{ pad(current.hours) }}</span>
    <i class="colon">:</i>
    <span class="time-box">{{ pad(current.minutes) }}</span>
    <i class="colon">:</i>
    <span class="time-box">{{ pad(current.seconds) }}</span>
  </template>
</van-count-down>

<script setup>
const pad = (n) => String(n).padStart(2, "0");
</script>

<style scoped>
.time-box {
  background: #323233; color: #fff;
  border-radius: 4px; padding: 2px 6px; font-weight: 600;
}
.colon { color: #323233; margin: 0 4px; }
</style>

<template>
  <van-steps :active="stepIndex" active-color="#ee0a24" active-icon="checked">
    <van-step>提交订单</van-step>
    <van-step>付款成功</van-step>
    <van-step>商家发货</van-step>
    <van-step>确认收货</van-step>
  </van-steps>
</template>

<script setup>
import { computed, ref } from "vue";

// status: 1 待支付 2 待发货 3 待收货 4 已完成
const status = ref(2);
const stepIndex = computed(() => ({ 1: 0, 2: 1, 3: 2, 4: 3 }[status.value] ?? 0));
</script>

<van-steps :active="1" direction="vertical">
  <van-step>
    已签收
    <template #default>
      <p class="log">您的订单已送达小区驿站，凭取件码 8-2-3006 领取。</p>
      <p class="time">11-09 09:12</p>
    </template>
  </van-step>
  <van-step>
    运输中
    <template #default>
      <p class="log">包裹已到达【广州白云转运中心】</p>
      <p class="time">11-08 21:40</p>
    </template>
  </van-step>
  <van-step>
    已发货
    <template #default>
      <p class="log">商家已发货，快递单号 SF1388xxxx</p>
      <p class="time">11-08 10:05</p>
    </template>
  </van-step>
</van-steps>

<template>
  <header class="status-header" :class="{ expired: expired }">
    <template v-if="!expired">
      <p class="status-text">等待付款</p>
      <p class="count-line">
        剩余
        <van-count-down
          :time="remainMs"
          format="mm 分 ss 秒"
          style="--van-count-down-text-color: #fff"
          @finish="expired = true"
        />
        自动关闭订单
      </p>
    </template>
    <template v-else>
      <p class="status-text">订单已超时关闭</p>
    </template>
  </header>

  <van-steps :active="stepIndex" active-color="#07c160">
    <van-step>提交订单</van-step>
    <van-step>付款成功</van-step>
    <van-step>商家发货</van-step>
    <van-step>交易完成</van-step>
  </van-steps>

  <footer v-if="!expired">
    <van-button round type="danger" block @click="onPay">
      立即支付 ¥{{ amount }}
    </van-button>
  </footer>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { showToast } from "vant";

const props = defineProps({
  status: { type: Number, default: 1 },
  expireAt: { type: Number, required: true },
  amount: { type: String, default: "0.00" },
});

const expired = ref(false);
const remainMs = ref(0);

onMounted(() => {
  remainMs.value = Math.max(0, props.expireAt - Date.now());
  if (remainMs.value === 0) expired.value = true;
});

const stepIndex = computed(() =>
  ({ 1: 0, 2: 1, 3: 2, 4: 3 }[props.status] ?? 0)
);

const onPay = () => showToast("调起收银台...");
</script>