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("该用户暂无联系方式"); } } } })