LocalLivingServicesUniapp/pages/store/components/status.vue

<template>
    <view class="progress-status" 
        :style="status == null ? '' : 'padding: 20upx 42upx;'">
        <view v-if="status == 0">
            <view class="flex justify-between">
                <view class="status">
                    <image src="/static/login/status1.png" mode="aspectFit"></image>
                    <text style="font-weight: 500;">待审核</text>
                </view>
                <!-- <text style="color: #999;">{{updateTime }}</text> -->
            </view>
            <view  style="color: #666666;">{{updateTime }} 提交的店铺信息待审核中</view>
        </view>
        <view v-if="status== 1">
            <view class="flex justify-between">
                <view class="status">
                    <image src="/static/login/status2.png" mode="aspectFit"></image>
                    <text style="font-weight: 500;color: #509B45;">审核通过</text>
                </view>
                <!-- <text style="color: #999;">{{updateTime }}</text> -->
            </view>
            <view style="color: #666666;">{{ updateTime }} 提交的店铺信息审核通过</view>
        </view>
        <view v-if="status == 2">
            <view class="flex justify-between">
                <view class="status">
                    <image src="/static/login/status3.png" mode="aspectFit"></image>
                    <text style="color: #F34F4F;font-weight: 500;">审核驳回</text>
                </view>
                <!-- <text style="color: #999;">{{updateTime }}</text> -->
            </view>
            <view>驳回原因：{{ remark }}{{updateTime }} </view>
        </view>
    </view>
</template>
<script>
export default {
    props:{
        status: {
            type: Number,
            default: null
        },
        updateTime: {
            type: String,
            default: ''
        },
        remark: {
            type: String,
            default: ''
        }
}
}
</script>
<style scoped lang="scss">
.progress-status {
    position: fixed;
    width: 100%;
    z-index: 9999;
    background: #FFFFFF;
    border-top: 1px solid #EEEEEE;
    .status {
        font-size: 38upx;
        color: #596ABB;
        font-weight: 500;
        margin-bottom: 10upx;

        text {
            margin-left: 5upx
        }

        image {
            vertical-align: text-top;
            width: 42upx;
            height: 42upx;
        }
    }
}
</style>