liche/admin/views/receiver/customer/lists.php

<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css?v=1581252500">
<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs" style="font-size:15px;">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="<?= !strlen($params['status']) ? 'active' : '' ?>">
            <a href="javascript:void (0);" data-open="/receiver/customer">全部</a>
        </li>
        <? foreach ($status_arr as $key => $val) { ?>
            <li role="presentation"
                class="<?= strlen($params['status']) && $params['status'] == $key ? 'active' : '' ?>">
                <a href="javascript:void (0);" data-open="/receiver/customer?status=<?= $key ?>">
                    <?= $val ?>
                </a>
            </li>
        <? } ?>
    </ul>
</div>

<div class="coms-table-wrap mt10">
    <form class="form-search coms-table-hd clearfix no-border" onsubmit="return false"
          action="/receiver/customer">
        <input name="status" value="<?=$params['status']?>" type="hidden">
        <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 w100">
                    <select name="search_tp" v-model="params.search_tp">
                        <option :value="i" v-for="(v,i) in searchTpAry">{{v}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group fl">
                <div class="am-para-inline w260">
                    <input id="title" name="title" type="text" v-model="params.title"/>
                </div>
            </div>

            <div class="am-form-group fl">
                <div class="am-form-group" style="margin-bottom: 0px;"></div>
                <label class="am-para-label w100">创建时间：</label>
                <div class="am-form-group fl">
                    <div class="am-para-inline w300">
                        <input id="id-create-time" name="c_time" type="text" value="<?= $params['c_time'] ?>"
                               placeholder="创建时间范围" autocomplete="off"/>
                    </div>
                    <div class="am-para-inline" style="padding-top: 5px;">
                        <a class="mr10 id-day-btn" href="javascript:void (0);" data-date="today">今天</a>
                        <a class="mr10 id-day-btn" href="javascript:void (0);" data-date="yesterday">昨日</a>
                        <a class="mr10 id-day-btn" href="javascript:void (0);" data-date="7day">最近7天</a>
                        <a class="mr10 id-day-btn" href="javascript:void (0);" data-date="30day">最近30天</a>
                    </div>
                </div>
            </div>
            <div class="am-form-group" style="margin-bottom: 0px;"></div>
            <div class="am-form-group fl" style="margin-bottom: 0px;">
                <div class="am-form-group fl ml10">
                    <button type="submit" class="am-btn am-btn-success am-btn-sm w100">搜索</button>
                </div>
            </div>
        </div>
    </form>

    <div class="coms-table-bd">
        <div class="am-form-group fr mr10">
            <span>共<?= intval($pager['totle']) ?>个客户</span>
        </div>
        <table class="am-table am-table-bordered">
            <thead>
            <tr>
                <th width="3%">ID</th>
                <th width="5%"><span>客户姓名</span></th>
                <th width="5%"><span>客户电话</span></th>
                <th width="8%"><span>客户来源</span></th>
                <th width="7%"><span>所属门店</span></th>
                <th width="8%"><span>状态</span></th>
                <th width="4%"><span>跟进人</span></th>
                <th width="7%"><span>创建时间</span></th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(v,i) in lists">
                <tr>
                    <td>{{v.id}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.mobile_sub}}</td>
                    <td>{{v.cf_title}}</td>
                    <td>{{v.biz_name}}</td>
                    <td>{{v.status_name}}</td>
                    <td>{{v.admin_name}}</td>
                    <td>{{v.c_time}}</td>
                </tr>
                <tr>
                    <td colspan="8">
                        <div class="row">
                            <div class="col-md-4 align-l">
                            </div>
                            <div class="col-md-8 align-r" style="padding-right: 30px;">
                                <a :data-modal="'/common/bind_mobile?id='+v.id+'&type=customer'"
                                   href="javascript:void(0);" class="am-btn am-btn-primary am-btn-xs"
                                   data-title="获取手机号">拨打电话</a>
                                <a :data-modal="'/common/show_sms?id='+v.id+'&type=customer'"
                                   href="javascript:void(0);" class="am-btn am-btn-primary am-btn-xs"
                                   data-title="发送短信">短信</a>
                                <a href="javascript:void(0);" :data-open="'/receiver/customer/get?id='+v.id"
                                   class="am-btn am-btn-primary am-btn-xs">查看详情</a>
                            </div>
                    </td>
                </tr>
            </template>
        </table>
    </div>
    <div class="coms-table-ft clearfix">
        <div class="hander am-form">
        </div>
        <div class="coms-pagination fr mr20">
            <?php page_view($pager) ?>
        </div>
    </div>
</div>
<script>
    require(['laydate', 'autocomplete'], function (laydate) {
        laydate.render({
            elem: '#id-create-time', range: '~'
        });
        $('.id-day-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;
            }
            $('#id-create-time').val(date);
        });
    });

    var vue_obj;
    $(function () {
        vue_obj = new Vue({
            el: '.coms-table-wrap',
            data: {
                params: [],
                searchTpAry: [],
                lists: []
            },
            mounted: function () {
                var vm = this;
                vm.params = <?=json_encode($params)?>;
                vm.searchTpAry = <?=json_encode($searchTpAry)?>;
                vm.lists = <?=json_encode($lists)?>;
            },
            methods: {
                saveEdit: function () {
                    $("form").submit();
                }
            },
            watch: {}
        });

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

</script>