@{
    Layout = "_UserLayout";
}
<div id="app">
    <table class="table">
    <caption>余额资金明细</caption>
    <thead>
        <tr>
            <th style="min-width: 100px;">交易时间</th>
            <th style="min-width: 100px;">用户</th>
            <th style="min-width: 100px;">资金去向</th>
            <th style="min-width: 50px;">金额</th>
            <th style="min-width: 100px;">操作前余额</th>
            <th style="min-width: 100px;">操作后余额</th>
            <th >备注</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="info in tableData">
            <td>{{info.CreateTime}}</td>
            <td>{{info.UserName}}</td>
            <td>{{info.ScoreTypeName}}</td>
            <td>{{info.ScoreValue}}</td>
            <td>{{info.RestAmount1}}</td>
            <td>{{info.RestAmount2}}</td>
            <td style="max-width: 500px;overflow:hidden;;">{{info.Remark}}</td>
        </tr>
    </tbody>
    </table>
    <ul class="pager">
        <li v-on:click="previous"><a>上一页</a></li>
        <li v-on:click="next"><a>下一页</a></li>
    </ul>
</div>
<script>
   var vm = new Vue({
	    el:'#app',
	    data:{
	        tableData: [],
            page:1
	    },
        created:function(){
            this.post();
        },
	    methods:{
            post:function(){
                var param = [];
                let cashOutData = {
                    cookie:document.cookie
                }
                $.ajax({
                    type: 'post',
                    async:false,
                    url: 'https://php-api.juip.com/user/UserScore/getList',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(cashOutData),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        param = res;
                    }
                });
                this.tableData = param;
	        },
            previous(){
                this.page--;
                if (this.page<1) {
                    this.page = 1;
                }
                var param = [];
                let cashOutData = {
                    cookie:document.cookie,
                    page:this.page
                }
                $.ajax({
                    type: 'post',
                    async:false,
                    url: 'https://php-api.juip.com/user/UserScore/getList',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(cashOutData),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        param = res;
                    }
                });
                this.tableData = param;
            },
            next(){
                this.page++;
                if (this.page<1) {
                    this.page = 1;
                }
                var param = [];
                let cashOutData = {
                    cookie:document.cookie,
                    page:this.page
                }
                $.ajax({
                    type: 'post',
                    async:false,
                    url: 'https://php-api.juip.com/user/UserScore/getList',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(cashOutData),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        param = res;
                    }
                });
                this.tableData = param;
            },
	    }
	});
</script>