qimall/backend/modules/mall/views/diy/paid.php

<div id="app" v-cloak>
    <el-card
        style="border:0; min-width: 800px;"
        shadow="never"
        body-style="background-color: #f3f3f3;padding: 10px 0 0;"
    >
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer" @click="$navigate({r:'mall/diy/template-market'})">
                    模板市场
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>支付状态</el-breadcrumb-item>
            </el-breadcrumb>
		</div>

        <div class="content">
            <div class="paid">
                <div class="loading" v-if="loading">
                    <i class="el-icon-loading"></i>
                    <span>查询中</span>
                </div>
                <div class="success" v-if="!loading && paid">
                    <i class="el-icon-circle-check"></i>
                    <span>支付完成</span>
                </div>
                <div class="fail" v-if="!loading && !paid">
                    <i class="el-icon-circle-close"></i>
                    <span>支付失败</span>
                </div>
                <div class="btn">
                    <el-button type="success" @click="$navigate({r:'mall/diy/template-market'})">返回模板市场</el-button>
                </div>
            </div>
        </div>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                paid: true,
            }
        },
    })
</script>


<style>
    .content {
        background: #fff;
        display: flex;
        justify-content: center;
    }

    .paid {
        padding: 100px 0;
    }

    .success {
        color: #67C23A;
        font-size: 50px;
    }

    .loading {
        color: #409EFF;
        font-size: 50px;
    }

    .fail {
        color: #F56C6C;
        font-size: 50px;
    }

    .btn {
        display: flex;
        justify-content: center;
        padding-top: 20px;
    }
</style>