liche/admin/views/order/purchase/lists.php

<div class="coms-table-wrap mt10" id="vue-app">
    <form class=" form-search coms-table-hd clearfix no-border" onsubmit="return false"
          action="/order/purchase/lists">
        <input type="hidden" value="<?= $_GET['spm'] ?>" name="spm"/>
        <input type="hidden" name="app_id" v-model="params.app_id"/>
        <div class="am-form am-form-horizontal">
            <div class="am-form-group fl">
                <label class="am-para-label w100">订单搜索：</label>
                <div class="am-para-inline w120">
                    <select name="search_k" id="search_k" v-model="params.search_k">
                        <option :value="i" v-for="(v,i) in searchAry">{{v}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group fl">
                <div class="am-para-inline w300">
                    <input id="search_v" name="search_v" type="text" v-model="params.search_v"/>
                </div>
            </div>
            <div class="am-form-group fl">
                <label class="am-para-label w100">订单状态：</label>
                <div class="am-form-group am-para-inline w150">
                    <select name="status" v-model="params.status">
                        <option value="">选择状态</option>
                        <option :value="i" v-for="(v,i) in statusAry">{{v}}</option>
                    </select>
                </div>
                <div class="am-form-group am-para-inline w150">
                    <select id="status_detail" name="status_detail" v-model="params.status_detail">
                        <option value="">选择详细状态</option>
                        <option :value="i" v-for="(v,i) in statusDetailAry">{{v}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group fl">
                <label class="am-para-label w100">付款方式：</label>
                <div class="am-para-inline w120">
                    <select name="payway" v-model="params.payway">
                        <option value="">选择方式</option>
                        <option :value="i" v-for="(v,i) in paywayAry">{{v}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group" style="margin-bottom:0px;"></div>
            <div class="am-form-group fl">
                <div class="am-para-inline w300">
                    <input id="order-lists-time" type="text" name="time" value="<?= $params['time'] ?>"
                           autocomplete="off"
                           placeholder="下单时间范围"/>
                </div>
            </div>
            <div class="am-form-group fl mb10" style="margin-top: 5px">
                <div class="am-para-inline w300">
                    <a class="mr10 order-lists-time-btn" href="javascript:void (0);" data-date="today">今天</a>
                    <a class="mr10 order-lists-time-btn" href="javascript:void (0);"
                       data-date="yesterday">昨日</a>
                    <a class="mr10 order-lists-time-btn" href="javascript:void (0);" data-date="7day">最近7天</a>
                    <a class="mr10 order-lists-time-btn" href="javascript:void (0);" data-date="30day">最近30天</a>
                </div>
            </div>
            <div class="am-form-group fl ml10">
                <button type="submit" class="am-btn am-btn-success am-btn-sm w100">搜索</button>
            </div>
    </form>

    <div class="coms-table-bd">
        <div class="fr">共有<?= $pager['totle'] ?>条数据</div>
        <table class="am-table am-table-bordered">
            <thead>
            <tr>
                <th width="5%"><input type="checkbox" data-check-target=".order-ids"><span>全选</span></th>
                <th width="10%"><span>买家</span></th>
                <th width=""><span>标题</span></th>
                <th width="10%"><span>下单时间</span></th>
                <th width="10%"><span>单价*数量</span></th>
                <th width="10%"><span>实付金额</span></th>
                <th width="10%"><span>订单状态</span></th>
                <th width="10%"><span>付款方式</span></th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(item,index) in lists">
                <tr>
                    <td colspan="8" style="border-right: none;text-align: left">
                        <span>
                            <input type="checkbox" name="ids[]" class="order-ids"
                                   :value="'+item.id+'"/>订单号：{{item.sid}}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">{{item.uname}}<br/>{{item.mobile}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.c_time}}</td>
                    <td>{{item.item_price_name}}</td>
                    <td>{{item.pay_price_name}}</td>
                    <td>{{item.status_name}}</td>
                    <td>{{item.payway_name}}</td>
                </tr>
                <tr v-if="item.opt.action">
                    <td colspan="8" class="align-r">
                        <a type="button" data-ajax="post" :data-action="item.opt.action" :data-params-sid="item.sid" class="am-btn am-btn-xs am-btn-primary">完成支付下一步</a>
                    </td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <div class="coms-table-ft clearfix">
        <div class="hander am-form">
            <label class="checkall">
                <input type="checkbox" data-check-target=".order-ids">全选</label>
            <div class="am-para-inline w120" style="display: none">
                <select data-update-group="" data-list-target=".order-ids" data-action="/biz/case/visits/batch"
                        data-field="ifcheck">
                    <option value="">批量操作</option>
                </select>
            </div>
        </div>
        <div class="coms-pagination fr mr20">
            <?php page_view($pager) ?>
        </div>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="/static/js/plugin/autocomplete/styles.css?t=2020221">
<script>
    require(['laydate', 'autocomplete'], function (laydate) {
        //日期范围
        laydate.render({elem: '#order-lists-time', range: '~'});
        $('.order-lists-time-btn').click(function () {
            var type = $(this).data('date'), date = '', d_obj = new Date();
            switch (type) {
                case 'today':
                    date = d_obj.Format('yyyy-MM-dd');
                    date = date + ' ~ ' + date;
                    break;
                case 'yesterday':
                    date = (new Date(d_obj.getTime() - 86400000)).Format('yyyy-MM-dd');
                    date = date + ' ~ ' + date;
                    break;
                case '7day':
                    date = (new Date(d_obj.getTime() - 86400000 * 7)).Format('yyyy-MM-dd') + ' ~ ' + d_obj.Format('yyyy-MM-dd');
                    break;
                case '30day':
                    date = (new Date(d_obj.getTime() - 86400000 * 30)).Format('yyyy-MM-dd') + ' ~ ' + d_obj.Format('yyyy-MM-dd');
                    break;
            }
            $('#order-lists-time').val(date);
        });
    });

    var vue_obj;
    $(function () {
        vue_obj = new Vue({
            el: '#vue-app',
            data: {
                params: [],
                searchAry: [],
                statusAry:[],
                statusDAry:[],
                statusDetailAry:[],
                paywayAry:[],
                lists: []
            },
            mounted: function () {
                var vm = this;
                vm.params = <?=json_encode($params)?>;
                vm.lists = <?=json_encode($lists)?>;
                vm.searchAry = <?=json_encode($searchAry)?>;
                vm.statusAry = <?=json_encode($statusAry)?>;
                vm.statusDAry = <?=json_encode($statusDAry)?>;
                vm.paywayAry = <?=json_encode($paywayAry)?>;
            },
            methods: {},
            watch: {
                "params.status":function(nv, ov){
                    var vm = this;
                    if('' != nv){
                        vm.statusDetailAry = vm.statusDAry[nv];
                    } else {
                        vm.statusDetailAry = [];
                    }
                    if(undefined == vm.statusDetailAry[vm.params.status_detail]){
                        vm.params.status_detail = '';
                    }
                }
            }
        });

        <?php page_script($pager) ?>
    });

</script>