📖 File Reader
{include file="public/top"/}
{include file="public/vue"/}
{include file="public/page"/}
<style>
/*弹窗样式*/
.modal-dialog {
width: 700px;
margin: -20px auto;
}
.spiner-example {
height: 200px;
padding-top: 212px;
}
</style>
<body class="gray-bg">
<div id="vue">
<!--加载动画-->
<div class="spiner-example" v-if="to_load == 0">
<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div>
<div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight" v-if="to_load == 1">
<div class="row">
<div class="col-sm-12" >
<div class="ibox float-e-margins" >
<div class="ibox-title">
<h5>会员地址</h5>
</div>
<div class="ibox-content">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th style="text-align: center">ID</th>
<th style="text-align: center">姓名</th>
<th style="text-align: center">手机号</th>
<th style="text-align: center;">地址</th>
<th style="text-align: center;">类型</th>
<th style="text-align: center;">创建时间</th>
<th style="text-align: center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td style="text-align: center">
{{item.address_id}}
</td>
<td style="text-align: center">
{{item.name}}
</td>
<td style="text-align: center">
{{item.phone}}
</td>
<td style="text-align: center;">
{{item.province_name}}-{{item.city_name}}-{{item.province_name}}-{{item.district_name}}-{{item.address}}
</td>
<td style="text-align: center;">
<span class="label label-primary" v-if="item.is_checked == 1">默认地址</span>
<span class="label label-default" v-if="item.is_checked == 0">非默认地址</span>
</td>
<td style="text-align: center;">
{{item.add_time}}
</td>
<td style="text-align: center;width:20%;">
<a @click="del(item.address_id)" data-toggle="modal" data-target="#myModal" class="btn btn-white btn-sm" v-if="table_jurisdiction.is53_show == 1">
<i class="glyphicon glyphicon-trash"></i> 删除
</a>
</td>
</tr>
</tbody>
</table>
<!--分页-->
<div class="page" v-show="show">
<div class="pagelist">
<span class="jump" :class="{disabled:pstart}" @click="{current_page--}">上一页</span>
<span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
<span class="ellipsis" v-show="efont">...</span>
<span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
@click="jumpPage(num)">{{num}}</span>
<span class="ellipsis" v-show="ebehind">...</span>
<span :class="{disabled:pend}" class="jump" @click="{current_page++}">下一页</span>
<span v-show="current_page<pages-4" class="jump"
@click="jumpPage(pages)">{{pages}}</span>
<span class="jumppoint">跳转到：</span>
<span class="jumpinp"><input type="text" v-model="changePage"></span>
<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#vue',
data: {
to_load :0,//加载状态：1为完成
table_jurisdiction:{},//权限
user_id:0,//会员id
form:{},//表单数据
list:[],//列表数据
sousuo_name:'',
//分页参数
current_page: 1, //当前页
pages: 1, //总页数
changePage: '', //跳转页
},
computed: {
show: function () {
return this.pages && this.pages != 1
},
pstart: function () {
return this.current_page == 1;
},
pend: function () {
return this.current_page == this.pages;
},
efont: function () {
if (this.pages <= 7) return false;
return this.current_page > 5
},
ebehind: function () {
if (this.pages <= 7) return false;
var nowAy = this.indexs;
return nowAy[nowAy.length - 1] != this.pages;
},
indexs: function () {
var left = 1,
right = this.pages,
ar = [];
if (this.pages >= 7) {
if (this.current_page > 5 && this.current_page < this.pages - 4) {
left = Number(this.current_page) - 3;
right = Number(this.current_page) + 3;
} else {
if (this.current_page <= 5) {
left = 1;
right = 7;
} else {
right = this.pages;
left = this.pages - 6;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
return ar;
},
},
methods: {
jumpPage:function(e){
this.current_page = e;
},
//权限
jurisdiction:function(){
var that = this;
var table_jurisdiction1 = "{$table_jurisdiction_json}";
table_jurisdiction1 = table_jurisdiction1.replace(/&/g,"&");
table_jurisdiction1 = table_jurisdiction1.replace(/</g,"<");
table_jurisdiction1 = table_jurisdiction1.replace(/>/g,">");
table_jurisdiction1 = table_jurisdiction1.replace(/ /g," ");
table_jurisdiction1 = table_jurisdiction1.replace(/'/g,"\'");
table_jurisdiction1 = table_jurisdiction1.replace(/"/g,"\"");
that.table_jurisdiction = JSON.parse(table_jurisdiction1);
},
load: function(){
var that = this;
$.ajax({
type: "POST",
url: "{:Url('User/user_address_ajax')}",
data: {'page':that.current_page,'user_id':that.user_id,'name':this.sousuo_name},
dataType: "json",
success: function(res){
that.list = res.data.list;
that.pages = res.data.pages;
}
});
},
//删除
del:function(id){
var that = this;
parent.layer.confirm('您确定转移到回收站么？', {
btn: ['确定','取消'], //按钮
shade: false //不显示遮罩
}, function(){
//执行关闭
var index = parent.layer.confirm();
parent.layer.close(index);
$.ajax({
type: "POST",
url: "{:Url('User/user_address_del')}",
data: {'id':id},
dataType: "json",
success: function(res){
layer.msg(res.msg,{
icon:1,
time:1800,
end:function () {
that.load();
}
})
}
});
}, function(){
parent.layer.msg('已取消', {shift: 2});
});
},
},
created() {
this.to_load = 1;
this.user_id = "{$user_id}";
this.load();
this.jurisdiction();
}
})
//监听并触发分页
vm.$watch('current_page', function (nval, oval) {
this.load();
});
</script>
<!-- 全局js -->
<script src="__PUBLIC__/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/admin/js/bootstrap.min.js?v=3.3.7"></script>
<!-- Peity -->
<script src="__PUBLIC__/admin/js/plugins/peity/jquery.peity.min.js"></script>
<!-- iCheck -->
<script src="__PUBLIC__/admin/js/plugins/iCheck/icheck.min.js"></script>
<!-- Peity -->
<script src="__PUBLIC__/admin/js/demo/peity-demo.js"></script>
<script>
$(document).ready(function () {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
});
</script>
</body>
</html>