@{
    Layout = "_UserLayout";
}
<div id="app">
    <table class="table">
    <caption>软路由订单列表</caption>
    <thead>
        <tr>
            <th>用户</th>
            <th>软路由</th>
            <th>实付</th>
            <th>订单编号</th>
            <th>收货人姓名</th>
            <th>收货人电话</th>
            <th>收货人地址</th>
            <th>购买时间</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="info in tableData">
            <td>{{info.username}}</td>
            <td>{{info.product_name}}</td>
            <td>{{info.real_price}}</td>
            <td>{{info.order_no}}</td>
            <td>{{info.user}}</td>
            <td>{{info.phone}}</td>
            <td>{{info.address}}</td>
            <td>{{info.create_time}}</td>
        </tr>
    </tbody>
    </table>
</div>
<script>
   var vm = new Vue({
	    el:'#app',
	    data:{
	        tableData: [],
	    },
        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/ros/order/getList',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(cashOutData),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        param = res.data;
                        console.log(res)
                    }
                });
                this.tableData = param;
	        }
	    }
	});
</script>