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

<style>
    .vue-line-clamp p {
        line-height: 22px;
    }
    .demo-form-inline .el-select .el-input {
        width: 100px;
    }

    /* 订单表格 start */
    .width-pre10 {
        width: 12%;
        text-align: center;
    }

    .width-50 {
        width: 50px;
    }

    .width-400 {
        width: 700px;
    }

    .order-table {
        overflow-x: scroll;
    }

    .tab-title,
    .tab-cont {
        width: 100%;
        min-width: 1290px;
        font-size: 13px;
    }

    .tab-title {
        padding: 20px 0;
    }

    .tab-title>li {
        padding: 0 10px;
    }

    .tab-cont {
        border: 1px solid #F2F2F2;
        margin-bottom: 20px;
    }

    .tab-cont-row {
        padding: 10px 0 10px 10px;
        background-color: #F7F7F7;
    }

    .tab-cont-info {
        height: 100px;
    }

    .tab-cont-info>li {
        /* display: flex;
        flex-direction: column;
        justify-content: center; */
        height: 100%;
        padding: 16px 10px;
    }

    .tab-btns {
        width: 320px;
        margin-right: 20px;
    }

    .tab-goods-name {
        margin: 0 10px;
    }

    .border-right {
        border-right: 1px solid #f2f2f2;
    }

    .border-bottom {
        border-bottom: 1px solid #f2f2f2;
    }

    .no-border-bottom {
        border-bottom: none !important;

    }

    .cursor {
        cursor: pointer;
    }

    .edit-icon {
        color: #03c5ff;
        cursor: pointer;
    }

    .popover-btn {
        font-size: 12px;
        padding: 0 10px;
        border-right: 1px solid var(--primary, #03c5ff);
        cursor: pointer;
        display: inline-block;
        line-height: 1;
        color: #03c5ff;
    }

    .popover-btn:last-child {
        border-right: none;
    }

    .width-s {
        width: 200px;
        text-align: center;
    }

    .el-button--text {
        padding: 0 !important;
    }

    .com-order-refund-status {
        position: absolute;
        bottom: 18px;
        left: 0px;
        height: 20px;
        width: 50px;
        background-color: #FF7171;
        color: #fff;
        text-align: center;
        border-radius: 0 0 5px 5px;
        font-size: 12px;
    }
    .fenRunData  .el-dialog__body{
        padding: 0px 10px 0 10px;
    }
    .change_price p{
        padding: 5px;
        font-size: 15px;
        width: 200px;
    }
    .change_price{
        width: 200px;
        margin: 0px 0 0px 81%;

    }
    .change_price label{
        float:left;
        width: 100px;
        text-align: right;
        padding-right: 20px;
    }
    .change_formula{
        float: left;
        width: 300px;
        color: #6c6969;
        font-size: 12px;
    }

    /* 订单表格 end */
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="listLoading">
        <div slot="header">
            <span>购买记录</span>
        </div>
        <div class="table-body">
            <el-tabs v-model="activeName">
                    <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                        <el-form-item label="下单时间">
                            <el-date-picker style="margin-top: 1px;" @change="changeTime" v-model="search_data.datetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                        </el-form-item>

                        <el-form-item label="订单状态">
                            <el-select v-model="search_data.order_status" placeholder="请选择">
                                <el-option label="待支付" value="0"></el-option>
                                <el-option label="已完成" value="4"></el-option>
                                <el-option label="已关闭" value="-4"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                            <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 订单表格 start -->
                    <div class="order-table">
                        <ul class="tab-title" flex="dir:left cross:center" style="margin-bottom: 5px; background-color: #F7F7F7;">
                            <li class="width-400">应用信息</li>
                            <li class="width-pre10">周期</li>
                            <li class="width-pre10">单价</li>
                            <li class="width-pre10">数量</li>
                            <li class="width-s">实付</li>
                        </ul>

                        <div class="tab-cont" v-for="(item, index) in list" :key="index">
                            <div class="tab-cont-row" flex="main:justify cross:center">
                                <div flex="dir:left cross:center">
                                    <div style="padding-right: 20px;">订单({{ item.id }})编号：{{ item.order_no || '-' }}</div>
                                    <div style="padding-right: 20px;">操作账号：{{ item.operator_username }}</div>
                                    <div style="padding-right: 20px;">下单时间：{{ item.created_at|dateTimeFormat('Y-m-d H:i:s') }}</div>
                                </div>
                            </div>

                            <ul class="tab-cont-info" flex="dir:left cross:center" v-if="item.addons">
                                <li class="tab-shop-info width-400" flex="dir:left">
                                    <div style="position: relative;">
                                        <el-image  style="width: 50px; height: 50px; border-radius: 5px;" :src="item.addons.cover">
                                            <div slot="error" class="image-slot">
                                                <com-image :src="item.addons.default_cover"></com-image>
                                            </div>
                                        </el-image>
                                    </div>
                                    <div class="tab-goods-name" style="line-height: 26px;">
                                        <div style="font-size: 16px;">{{ item.addons.title }}</div>
                                        <div style="color: #8E8C8B;">{{ item.addons.brief_introduction }}</div>
                                    </div>
                                </li>

                                <li class="width-pre10">
                                    <p v-if="item.unit == 0">永久有效</p>
                                    <p v-if="item.unit > 0">{{ item.duration }}{{ unit_arr[item.unit] }}</p>
                                </li>

                                <li class="width-pre10">
                                    <p>￥{{ item.order_price }}</p>
                                </li>

                                <li class="width-pre10 border-right">
                                    <p>x1</p>
                                </li>

                                <li class="width-s" style="line-height: 18px;">
                                    <p>￥{{ item.pay_money }}</p>
                                    <p style="color: #F65610;">{{ status_arr[item.order_status] }} </p>
                                    <p v-if="item.order_status == 0">{{ item.expire_time|dateTimeFormat('Y-m-d H:i:s') }} 前有效</p>
                                    <el-button type="text" @click="handle('detail', item)">查看详情</el-button>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                    </div>
                    <!-- 订单表格 end -->

            </el-tabs>
        </div>
    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                order_status: null,
                activeName: '999',
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                search_data: { // 筛选条件
                    order_status: null,
                    datetime:[],
                },
                unit_arr:{
                    1: '月',
                    2: '年',
                },
                status_arr:{
                    '0': '待付款',
                    '4': '已完成',
                    '-4': '已关闭',
                }
            };
        },
        mounted: function() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.order_status) || !isEmpty(this.search_data.datetime);
            }
        },
        methods: {
            search() {
                this.page = 1;
                this.getList(this.search_data);
            },
            clearSearch() {
                this.search_data.order_status = null;
                this.search_data.datetime = [];
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'mall/addons/order-detail'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                }
            },
            send(url, params, callback) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList(this.search_data);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList(this.search_data);
            },
            changeTime(e) {
            },
            // 获取商品列表
            getList(params = {}) {
                let self = this;
                let basic_params = {
                    page: self.page,
                };
                params = Object.assign(basic_params, params);
                if (self.listLoading == false) {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'mall/addons/order-list',
                        },
                        method: 'post',
                        data:params
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code == 0) {
                            this.handleData(e.data.data.list)
                            self.list = e.data.data.list;
                            self.pageCount = e.data.data.page_count;
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        self.$message.error(e.data.msg);
                        self.listLoading = false;
                    });
                }
            },
            handleData(data){
                if(data){
                    for(let order in data){
                        if(data[order].addons){
                            data[order].addons.default_cover = _diy_img_prefix+'/static/addons/icon/'+data[order].addons.name+'.png'
                        }
                    }
                }
            },
        }
    });
</script>