company_h5/src/views/cashier/components/detailsCardHeader.vue

<template>
    <div class="paymentl-header">
        <div :class="!codeTpe.switch ? '' : 'code-title'" class="paymentl-header-title"> {{codeTpe.imgType?'支付成功':'支付失败'}} </div>
        <img v-if="!codeTpe.switch" class="paymentl-header-img" :src="codeTpe.imgType? cg :sb " alt="">
        <div v-else class="paymentl-vue-qr">
            <vue-qr v-if="codeTpe.codeValue" :text="codeTpe.codeValue"></vue-qr>
            <div class="paymentl-vue-qr-tip">
                <van-count-down style="color:#999999" format="mm:ss" :time="countTimer" />
                提示：该二维码每隔3分钟自动刷新一次
                </div>
        </div>
    </div>
</template>

<script>
import vueQr from 'vue-qr'

export default {
    props: {
        countTimer:{
            type:Number,
            default:0
        },
        codeTpe: {
            type: Object,
            default: () => {
                return {
                    switch: false,
                    codeValue: '',
                    imgType:true
                }
            }
        }
    },
    components: {
        vueQr,
    },
    data() {
        return {
            cg:require('../../../assets/zfcg.png'),
            sb:require('../../../assets/zfsb.png'),
            type: 0
        }
    },
}
</script>
<style>
.paymentl-vue-qr img {
    width: 324px;
    height: 324px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
}
</style>
<style scoped>
.paymentl-vue-qr-tip {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
}

.paymentl-vue-qr {
    width: 690px;
    height: 544px;
    background: #FFFFFF;
    box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.5020);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    margin: 0 auto;
    background-image: url('@/assets/codebg.png');
    background-size: 100% 428px;
    background-repeat: no-repeat;
    position: relative;
    margin-top: -25px;
}

.paymentl-header {}

.paymentl-header-img {
    width: 515px;
    height: 245px;
}

.code-title {
    background-color: #ff6700;
    color: #FFFFFF !important;
}

.paymentl-header-title {
    font-size: 42px;
    font-family: PingFang SC-粗体, PingFang SC;
    font-weight: normal;
    color: #333333;
    margin: 0px auto;
    padding: 50px 0;

}
</style>