book-hi/pages-mine/components/return-notice.vue

<template>
    <!-- 添加退回提示区域 -->
    <view class="return-notice" @click="handleReturn">
        <view class="notice-content">
            <view class="title-row">
                <text class="title">退回不通过书籍</text>
                <text class="tag" v-if="orderInfo.firstOrder == 1">首次免费退</text>
            </view>
            <view class="countdown">
                您需要在
                <u-count-down
                    v-if="!isRestStopped"
                    class="time"
                    :timestamp="orderInfo.restTime"
                    separator="zh"
                    separator-size="28"
                    separator-color="#FF0000"
                    color="#FF0000"
                    bg-color="transparent"
                ></u-count-down>
                <text v-else class="time">{{ hmsTextZh }}</text>
                内处理
            </view>
        </view>
        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
    </view>
</template>

<script>
export default {
    props: {
        orderInfo: {
            type: Object,
            default: {}
        }
    },
    computed: {
        // 是否停止倒计时
        isRestStopped() {
            const stop = this.orderInfo && this.orderInfo.restStop
            return Number(stop) === 1
        },
        // 当停止时，静态显示“时分秒”
        hmsTextZh() {
            const secRaw = this.orderInfo && this.orderInfo.restTime
            const sec = Math.max(0, Number(secRaw || 0))
            const h = String(Math.floor(sec / 3600)).padStart(2, '0')
            const m = String(Math.floor((sec % 3600) / 60)).padStart(2, '0')
            const s = String(sec % 60).padStart(2, '0')
            return `${h}时${m}分${s}秒`
        }
    },
    methods: {
        handleReturn() {
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scoped>
// 添加新的样式
.return-notice {
    margin: 30rpx;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF4F4;
    border-radius: 10rpx;
    border: 2rpx solid #FF0000;

    .notice-content {
        flex: 1;

        .title-row {
            display: flex;
            align-items: center;
            margin-bottom: 12rpx;

            .title {
                font-size: 32rpx;
                font-weight: 500;
                color: #333;
            }

            .tag {
                margin-left: 12rpx;
                padding: 4rpx 12rpx;
                background: #FF4B4B;
                color: #fff;
                font-size: 24rpx;
                border-radius: 4rpx;
            }
        }

        .countdown {
            font-size: 28rpx;
            color: #666;

            .time {
                color: #FF4B4B;
            }
        }
    }
}
</style>