baqing-shop/shop-app/components/order/OrderStatusBar.vue

<template>
	<view class="order-status-bar">
		<text class="order-status-bar__text">{{ statusText }}</text>
		<text v-if="showCountdown" class="order-status-bar__countdown">
			剩余 {{ countdownText }}
		</text>
		<text v-if="subText" class="order-status-bar__sub">{{ subText }}</text>
	</view>
</template>

<script setup>
import { ref, computed, watch, onUnmounted } from 'vue'
import { formatPayCountdown } from '@/utils/orderDisplay'

const props = defineProps({
	statusText: {
		type: String,
		default: ''
	},
	payRemainSeconds: {
		type: Number,
		default: null
	},
	subText: {
		type: String,
		default: ''
	}
})

const remain = ref(props.payRemainSeconds)
let timer = null

const showCountdown = computed(() => remain.value != null && remain.value > 0)

const countdownText = computed(() => formatPayCountdown(remain.value))

function clearTimer() {
	if (timer) {
		clearInterval(timer)
		timer = null
	}
}

function startTimer() {
	clearTimer()
	if (props.payRemainSeconds == null || props.payRemainSeconds <= 0) {
		remain.value = props.payRemainSeconds
		return
	}
	remain.value = props.payRemainSeconds
	timer = setInterval(() => {
		if (remain.value > 0) {
			remain.value -= 1
		} else {
			clearTimer()
		}
	}, 1000)
}

watch(
	() => props.payRemainSeconds,
	() => startTimer(),
	{ immediate: true }
)

onUnmounted(() => clearTimer())
</script>

<style lang="scss" scoped>
.order-status-bar {
	padding: 32rpx 24rpx;
	background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
	color: #fff;
}
.order-status-bar__text {
	display: block;
	font-size: 34rpx;
	font-weight: 600;
}
.order-status-bar__countdown {
	display: block;
	margin-top: 12rpx;
	font-size: 26rpx;
	opacity: 0.92;
}
.order-status-bar__sub {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	opacity: 0.85;
}
</style>