layui分页 vue渲染数据（this指向问题）html页面

转载

mb5fcf3d5431d90 2021-10-18 15:57:00

html:

<div id="app">
    <table cellspacing="0" class="tb ls">
        <tbody>
        <tr>
            <th data-hide="1200">用户名</th>
            <th data-hide="1200">价格</th>
            <th>IP</th>
            <th>添加时间</th>
            <th>可领取次数</th>
            <th>已领取次数</th>
            <th>信息</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="index">
            <td>{{item.username | capitalize}}</td>
            <td>{{item.price}}</td>
            <td>{{item.ip}}</td>
            <td>{{item.create_time}}</td>
            <td>{{item.number_count}}</td>
            <td>{{item.c_number}}</td>
            <td>
                <ul v-for="(_item,_index) in list[index].answer" :key="_index">
                    <li>{{_item.content}}</li>
                </ul>
            </td>
            <td v-if="item.phone"><button @click.stop="callPhone(list[index].phone)" class="call">电话咨询</button></td>
        </tr>
        </tbody></table>
    <div id="list_page" class="list_page" style="text-align: center;"></div>

</div>

js:

 new Vue({
        el: '#app',
        data: {
            page: 1,
            total: 0,
            pageSize:5,
            tmpListTotal:0,
            state:4,
            loadImg:"",
            timer:null,
            free_status:1,
            list: [],
            userInfo:{},
            isFirstPage:true
        },
        filters: {
            capitalize: function (value) {
                if (!value) return '暂无用户名';
                value = value.toString();
                return value.charAt(0).toUpperCase() + value.slice(1);
            }
        },
        created() {
            this.getUserInfo();
            this.getList(this.page,userInfo.userid);
        },
        mounted(){
            this.$nextTick(()=>{
                window.addEventListener('scroll',this.handleScroll,true);
            })
        },
        methods: {
            getUserInfo() {
                let _url = "/form/message.php";
                $.ajax({
                    url: _url,
                    method: "POST",
                    async:false, // 同步
                    success: function (res) {
                        let _res = JSON.parse(res);
                        if(_res.code=== 1){
                            userInfo = Object.assign({}, _res.data);
                            console.log('userInfo', userInfo);
                        }
                    },
                    error: function (res) {
                        console.log('error_res', res);
                    }
                });
            },
            getList(_page,userId) {
                let _url= "/apis/form_message/my_message";
                let _this = this;
                $.ajax({
                    url:_url,
                    data:{
                        userid: userId,
                        page:_page
                    },
                    method:"POST",
                    success:function (res) {
                        if(res.code == 1){
                            _this.total = res.data.list_count;
                            _this.pageSize = res.data.pagesize;
                            if(res.data.list_count === 0){
                                _this.state = 6;
                            }
                            if(res.data.list_count <= _this.pageSize){
                                _this.state = 5;
                            }
                            if(_this.page == 1){
                                _this.list = res.data.list;
                            }else{
                                _this.list = _this.list.concat(res.data.list);
                            }
                            if(_this.isFirstPage){
                                _this.pageInit(_this.total);
                            }
                        }
                    }
                });
            },
            pageInit(listTotal) {
                let _this = this;
                if(listTotal === 0){
                    $("#join_page").hide();

                }else{
                    $("#join_page").show();
                }
                layui.use(['laypage','layer'], function() {
                    let laypage = layui.laypage,layer = layui.layer;
                    if(listTotal) {
                        _this.tmpListTotal = listTotal;
                    } else {
                        listTotal = _this.tmpListTotal;
                    }

                    //页码初始化
                    laypage.render({
                        elem: 'list_page'
                        ,theme: '#007AFF'
                        , count: listTotal //数据总数
                        ,limit: _this.pageSize // 每页条数
                        ,prev:"<"
                        ,next:">"
                        ,jump: function(obj,first){
                            if(!first){
                                _this.isFirstPage = false;
                                _this.getList(obj.curr,userInfo.userid);
                            }else{
                                _this.isFirstPage = true
                            }
                        }
                    });
                });
            },
            callPhone(phone){
                console.log('phone',phone);
                if(phone){
                    window.location.href= "tel:"+ phone;
                }else{
                    layer.msg("该用户暂无联系方式");
                }
            }
        }
    })