qimall/backend/modules/mall/views/addons/confirm-success.php

<style>
    #app{
        background-color: #ffffff;
    }
    .order_steps{
        padding: 30px;
        width: 50%;
        margin: 0 auto;
    }
    .order_steps .el-step__title{
        font-size: small;
        font-weight: initial;
    }
    .el-step__icon{
        font-size: small;
        font-weight: initial;
    }
    .el-table__header thead tr th{
        background-color: rgb(242 242 242);
        height: 40px;
        line-height: 40px;
    }
    .pay-msg{
        margin-top: 10px;
        font-size: 16px;
        color: #999;
    }
    .pay-msg-sam{
        width: 100%;
        text-align: center;
        margin-top: 5px;
        font-size: 18px;
        color: #999;
    }
    .line_title img{

    }
    .submit_but{
        width: 100%;
        text-align: center;
        margin-top: 23px;
    }
    .order_img{
        width: 100%;
        text-align: center;
    }
</style>
<div id="app" v-cloak>
    <template>
        <div class="order_steps">
            <el-steps :active="active" finish-status="success">
                <el-step title="提交订单"></el-step>
                <el-step title="支付订单"></el-step>
                <el-step title="订单结果"></el-step>
            </el-steps>
        </div>
        <div class="order_steps line_title" >
            <div class="order_img">
                <el-image v-if="addons.order_status == 0" style="width: 80px; height: 80px;" src="/resources/img/mall/waitepay.png" fit="contain"></el-image>
                <el-image v-if="addons.order_status == 4" style="width: 80px; height: 80px;" src="/resources/img/mall/rigth.png" fit="contain"></el-image>
                <el-image v-if="addons.order_status == -4" style="width: 80px; height: 80px;" src="/resources/img/mall/closepay.png" fit="contain"></el-image>
                <div class="pay-msg">
                    <span v-if="addons.order_status == 0">待付款</span>
                    <span v-if="addons.order_status == 4">订单已完成</span>
                    <span v-if="addons.order_status == -4">订单已关闭</span>
                </div>
            </div>
            <div class="pay-msg-sam">你可前往【购买记录】查看应用信息</div>
            <div class="submit_but">
                <el-button v-if="addons.order_status == 0" type="primary" :loading="btnLoading" @click="entrysuccess">前往我的应用</el-button>
                <el-button v-if="addons.order_status == 0"  :loading="btnLoading" @click="entrysuccess">前往已购应用</el-button>
                <el-button  v-if="addons.order_status == 0" type="primary" :loading="btnLoading" @click="topay">马上付款</el-button>
            </div>
        </div>
    </template>


</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading:false,
                active: 3,
                addons:[],

            };
        },
        created() {
            this.name = getQuery('name');
            this.order_id = getQuery('order_id');
            this.getList();
        },
        methods: {
            getList() {
                request({
                    params: {
                        r: 'mall/addons/confirm-pay',
                        order_id:this.order_id,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.addons = e.data.data
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });
            },
            saveAddForm(){
                if(this.checked != 1){
                    this.$message.error("请同意服务协议");
                }
            },
            entrysuccess(addonsName) {
                navigateTo({r: 'mall/addons/purchased'});
            },
            topay(){
                navigateTo({r: 'mall/addons/confirm-pay',order_id:this.order_id});
            }
        }
    });
</script>