liche/admin/views/app/appusual/subjects/reply.php

<style type="text/css">

    .apptese-img img {
        display: block;
        margin: 10px auto 0 auto;
        max-width: 400px;
    }

</style>
<form id="vue-edit" class="am-form am-form-horizontal" action="/app/appusual/subreply/add" data-auto="true"
      method="post" style="width: 90%;padding-top: 10px" onsubmit="return false">
    <div class="am-form-group">
        <label class="am-para-label">发布用户：</label>
        <div class="am-para-input wp60 w300" style="width: 20%">
            <button type="button" class="am-btn am-btn-default am-btn-sm"
                    @click="userModal">{{info.nickname}}
            </button>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">内容：</label>
            <textarea id="content-text" name="content_text" style="min-height: 250px; width: 600px">{{info.content}}</textarea>
    </div>
    <div class="am-form-group">
        <button class="am-btn ml20 am-btn-sm am-btn-success w100" type="button" @click="saveEdit" style="margin-left: 300px">保存</button>
    </div>

    <div id="user-modal" style="display: none;">
        <div class="modal-body">
            <table width="100%">
                <tr>
                    <td width="35%" style="font-weight: bold;padding-left: 8px;">用户名</td>
                    <td width="20%"></td>
                    <td width="35%" style="padding-right: 8px;"><label class="sr-only" for="search">用户名</label>
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" style="font-size: 1.2rem;font-weight: bold;"
                                   v-model='usersTitle' placeholder="用户名">
                            <div class="input-group-btn">
                                <button type="button" @click='getUsers(1);' class="btn btn-default">搜</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="border-bottom: 1px solid #ddd;height: 1px;margin-top: 8px;"></div>
            <table class="table table-middle">
                <colgroup>
                    <col width="70%"/>
                    <col width="10%"/>
                    <col width="20%"/>
                </colgroup>
                <tbody>
                <tr v-for="(v,i) in usersList">
                    <td>{{v.nickname}}</td>
                    <td class="text-right">
                        <a v-if="v.selected==0" href="javascript:void(0);" @click="setUsers(v,1)"
                           class="btn btn-primary btn-sm">选择</a>
                        <a v-else-if="v.selected==1" href="javascript:void(0);" @click="setUsers(v,0)"
                           class="btn btn-default btn-sm">移除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="clearfix">
                <span class="pull-left text-muted">第{{usersPage.page}}页(每页{{usersPage.pageLimit}}条,共{{usersPage.pageCount}}条)</span>
                <nav class="pull-right" aria-label="Page navigation">
                    <ul class="pagination pagination-sm">
                        <li>
                            <a href="javascript:void(0);" @click="beforeUsersPage();" aria-label="上一页">
                                <span class="glyphicon glyphicon-menu-left"></span>
                            </a>
                        </li>
                        <li v-if="usersPage.hasNext">
                            <a href="javascript:void(0);" @click="afterUsersPage();" aria-label="下一页">
                                <span class="glyphicon glyphicon-menu-right"></span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    var loading = false;
    var vue_obj = new Vue({
        el: '#vue-edit',
        data: {
            info: {},
            usersList: [],
            usersPage: [],
            usersTitle: '',
            tourl:"",
        },
        mounted:function() {
            var vm = this;
            vm.app_id = <?=$app_id?>;
            vm.info = <?=json_encode($info)?>;
        },
        methods: {
            userModal: function () {
                var vm = this;
                vm.getUsers(1);
                layer.open({
                    type: 1,
                    area: ['50%', '80%'], //宽高
                    content: $('#user-modal'),
                    title: '选择用户',
                    shade: false,
                    btn: ['选好了'],
                    yes: function (index) {
                        layer.close(index);
                    }
                });
            },
            getUsers: function (page) {
                var vm = this;
                $.ajax({
                    // url: '/common/users_app',
                    url: '/app/xmfish/member/lists_json',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        page: page,
                        app_id: vm.info.app_id,
                        nickname: vm.usersTitle,
                        group_id: 4
                    },
                    success: function (re) {
                        // var usersList = re.data.usersList;  // 对应'/common/users_app'
                        var usersList = re.data.list;
                        vm.usersPage = re.data.usersPage;
                        usersList.map(function (_item, _index) {
                            if (vm.info.uid == _item.id) {
                                usersList[_index].selected = 1;
                            } else {
                                usersList[_index].selected = 0;
                            }
                        });
                        vm.usersList = usersList;
                    }
                });
            },
            setUsers: function (users, checked) {
                var vm = this;
                var usersList = vm.usersList;
                usersList.map(function (_item, _index) {
                    usersList[_index].selected = 0;
                });
                vm.usersList = usersList;
                if (checked) {
                    vm.info.uid = users.id;
                    vm.info.nickname = users.nickname;
                    users.selected = 1;
                } else {
                    vm.info.uid = 0;
                    vm.info.nickname = '请选择用户';
                }
            },
            beforeUsersPage: function () {
                var vm = this;
                if (vm.usersPage.page == 1) {
                    layer.msg('已经是第一页了');
                    return;
                }
                vm.usersPage.page--;
                vm.getUsers(vm.usersPage.page);
            },
            afterUsersPage: function () {
                var vm = this;
                vm.usersPage.page++;
                vm.getUsers(vm.usersPage.page);
            },
            saveEdit:function(){
                var vm =this;
                if (loading) {
                    return;
                }
                loading = true;

                vm.info.content = $('#content-text').val();
                $.ajax({
                    url: '/app/appusual/subreply/add',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        info: vm.info,
                    },
                    beforeSend: function () {
                        layer.load(1, {
                            shade: [0.1, '#fff'] //0.1透明度的白色背景
                        });
                    },
                    success: function (data) {
                        loading = false;
                        if (data['code']) {
                            layer.msg(data.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                if(vm.tourl.length > 0){
                                    $.form.href(vm.tourl);
                                } else {
                                    $.form.reload();
                                }
                            });
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    complete: function () {
                        loading = false;
                        layer.closeAll('loading');
                    }
                });
            }
        },
    });
</script>