qimall/backend/modules/mall/views/addons/order-detail.php

<style>
    #app{
        background-color: #ffffff;
    }
    .order_steps{
        padding: 30px;
        width: 50%;
        margin: 0 auto;
        clear: both;
    }
    .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;
    }
    .title{
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        color: #999999;
        font-size: 18px;
        padding: 9px 0 1px 40px;
    }
    /*头像样式 start*/
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
    }
    .el-table_1_column_1 .cell { /*-2 表示在第二行*/
        display: flex;
    }
    .order_left{width: 50%; padding: 20px; float: left; margin-top: 20px;}
    .order_right{width: 50%; padding-right: 40px; margin-top: 20px; text-align: right; float: right;}
    /*头像样式 end*/
    .order_data{
        width: 100%;
        height: 170px;
    }
    .line_5{
        width: 100%;
        height: 5px;
        clear: both;
        background-color: #f2f2f2
    }
    .order_data_left{
        width: 44%;
        padding-left: 2%;
        float: left;
        margin-top: 47px;
    }
    .order_data_left .img{
        width: 85px;
        float: left;
    }
    .order_data_left msg{
        float: left;
    }
    .order_data_left samp{
        margin-top: 5px;
    }
    .order_data_right{
        width: 44%;
        padding-right: 2%;
        height: 150px;
        float: right;
        text-align: right;
    }
    .order_msg{
        width: 60%;
        float: left;
        padding-bottom: 5px;
        padding-right: 40px;
    }
    .order_msg .order_money{
        margin-top: 21px;
        line-height: 41px;
    }
    .order_msg button{
        margin-top: 10px;
        margin-left: 20px;
    }
    .order_time{
        margin: 0px;
        text-align: left;
        height: 170px;
        width: 40%;
        float: left;
        padding: 35px 0 5px 10px;
        border-left: 1px #e1dfdf solid;
    }
    .order_time span{
        line-height: 40px;
    }
    .order_data_right dl span{

    }
</style>

<div id="app" v-cloak>
        <div class="order_data">
            <div class="order_data_left">
                <div class="img">
                    <el-image v-if="addons.order_status == 0"  style="width: 70px; height: 70px;" src="/resources/img/mall/waitepay.png" fit="contain"></el-image>
                    <el-image v-if="addons.order_status == 4"  style="width: 70px; height: 70px;" src="/resources/img/mall/rigth.png" fit="contain"></el-image>
                    <el-image v-if="addons.order_status == -4" style="width: 70px; height: 70px;" src="/resources/img/mall/closepay.png" fit="contain"></el-image>
                </div>
                <div class="msg">
                    <div style="color:#000; padding: 0px 0px 13px 0; font-size: 20px;">
                        <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>
                    <samp style="color: #6666;font-size: 13px;">
                        <span v-if="addons.order_status == 0">请在{{addons.expire_time|dateTimeFormat('Y-m-d H:i:s')}}前付款，避免订单超时取消</span>
                        <span v-if="addons.order_status == 4">完成时间{{addons.pay_time|dateTimeFormat('Y-m-d H:i:s')}}</span>
                        <span v-if="addons.order_status == -4">关闭时间：{{addons.close_time|dateTimeFormat('Y-m-d H:i:s')}}</span>
                    </samp>
                </div>
            </div>
            <div class="order_data_right">
                <dl class="order_msg">
                    <div class="order_money" v-if="addons.order_status == 0">应付：<font color="F65610" style="font-size: 18px;">￥{{addons.pay_money}}</font></div>
                    <span class="order_money_btn" v-if="addons.order_status == 0">
                        <el-button type="primary" :loading="loading" @click="saveAddForm()">去付款</el-button>
                    </span>
                    <span v-if="addons.order_status == 0">
                        <el-button :loading="loading" @click="closeOrder()">取消订单</el-button>
                    </span>

                </dl>
                <dl class="order_time">
                    <span  style="color: #6666">订单编号：{{addons.order_no}}</span>
                    <span  style="color: #6666;padding-right: 15px;">创建时间：{{addons.created_at|dateTimeFormat('Y-m-d H:i:s')}}</span>
                </dl>

            </div>
        </div>
        <div class="line_5"></div>
        <div class="title">购买店铺：{{addons.mall_name}}</div>
        <div class="table-body">
            <el-table :data="tableData" style="width: 100%;    padding: 0 20px 20px 20px;" >
                <el-table-column label="应用名称" width="500">
                    <div class="user_img">
                        <com-image width="80" height="80" :src="addons.addons.cover" fit="contain"></com-image>
                    </div>
                    <div>
                        <div style="color:#000; padding: 10px 0 5px 0; font-size: 20px;">{{addons.addons.title}}</div>
                        <samp>{{brief_introduction}}</samp>
                    </div>
                </el-table-column>
                <el-table-column  label="周期" >
                    <div v-if="addons.duration == '-1'">
                        {{unit[addons.unit]}}
                    </div>
                    <div v-else>
                        {{addons.duration}}{{unit[addons.unit]}}
                    </div>
                </el-table-column>
                <el-table-column  label="单价">
                    <template slot-scope="scope">
                        ￥{{addons.pay_money}}
                    </template>
                </el-table-column>
                <el-table-column  label="数量">x1</el-table-column>
                <el-table-column  label="小计">
                    <template slot-scope="scope">
                        ￥{{addons.pay_money}}
                    </template>
                </el-table-column>
            </el-table>


        </div>

</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                unit:['永久','月','年'],
                loading: false,
                btnLoading:false,
                order_id:'',
                setting: {},
                cover:'',
                brief_introduction:'',
                addons:{},
                pay_data: {},
                tableData: [{
                    date: '',
                    name: '',
                    address: ''
                }],
            };
        },
        created() {
            this.order_id = getQuery('id');
            this.getList();
        },
        methods: {
            getList() {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/addons/order-detail',
                        order_id:this.order_id,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.addons = e.data.data
                        this.cover = this.addons.addons.cover;
                        this.brief_introduction = this.addons.addons.brief_introduction;
                        //this.price_setting = this.addons.price_setting;
                        console.log(this.setting,99);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });
            },
            closeOrder(){
                this.loading = true;
                request({
                    params: {
                        r: 'mall/addons/order-close',
                        id:this.order_id,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    this.$message.success(e.data.msg);
                    window.location.reload();
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            saveAddForm(){
                this.loading = true;
                navigateTo({r: 'mall/addons/confirm-pay',order_id:this.order_id});//确认支付
            },
        }
    });
</script>