<template> <view> <menuDraw></menuDraw> <uni-group title="系统用户管理:用户管理" top="10" mode="card"> <uni-table type="selection" :border="true"> <uni-tr> <uni-th align="center">昵称</uni-th> <uni-th align="center">手机号</uni-th> <uni-th align="center">状态</uni-th> <uni-th align="center">操作</uni-th> </uni-tr> <uni-tr v-for="user in userList" > <uni-td >{{user.nickname}}</uni-td> <uni-td >{{user.phone}}</uni-td> <uni-td align="center"> <text v-if="user.isactive==1">已激活</text> <text style="color: red;" v-if="user.isactive==2" >已停用</text> </uni-td> <uni-td align="center"> <button class="uni-button" size="mini" type="primary">修改</button> <button class="uni-button" size="mini" type="warn" @click="deleteUser(user.id)" style="margin-left:80rpx;">删除</button> </uni-td> </uni-tr> </uni-table> <uni-pagination :current="pageIndex" :pageSize="pageSize" :total="pageTotle" @change="pageChange" /> </uni-group> </view> </template> <script> import menuDraw from '../tempplate/menu_draw.vue' export default{ components:{ menuDraw }, data(){ return{ userList:[],//用户数据集合 pageIndex:1,//分页器页码 pageSize:10,//每页显示数据的条数 pageTotle:0//分页器数据总条数 } }, /*当页面显示是触发*/ onShow() { this.requsetUserList(); }, //点击分页器的监听函数 methods:{ /*请求用户列表*/ requsetUserList(){ uni.request({ url: 'http://localhost:8070/user/getAll/'+this.pageIndex+'/'+this.pageSize, //仅为示例,并非真实接口地址。 success: (res) => { console.log(res.data); this.userList=res.data.data; this.pageTotle=res.data.rows; } }); }, pageChange(e){ this.pageIndex=e.current; this.requsetUserList(); }, deleteUser(e){ uni.request({ url: 'http://localhost:8070/user/remove/'+e, //仅为示例,并非真实接口地址。 success: (res) => { this.requsetUserList(); } }); } } } </script> <style> </style>
效果:
同过分页列表展示所有的用户,删除用户
添加用户
<template>
<view style="width: 350rpx;margin-left: auto;margin-right: auto;margin-top: 80rpx;">
<uni-forms :modelValue="userData" >
手机号:<input v-model="userData.phone" type="number" placeholder="请输入手机号" singleline="true" class="input_str"/>
密码:<input v-model="userData.pwd" type="password" placeholder="请输入密码" singleline="true" class="input_str"/>
昵称:<input v-model="userData.nickName" type="text" placeholder="请输入呢称" singleline="true" class="input_str"/>
<button type="primary" size="mini" @click="doLogin" >注册</button>
</uni-popup>
</uni-forms>
</view>
</template>
<script>
export default{
data(){
return{
userData:{
phone:'',
pwd:'',
nickName:'',
}
}
},
methods:{
doLogin(){
uni.request({
url: 'http://localhost:8070/user/regedit/'+this.userData.phone+'/'+this.userData.pwd+'/'+this.userData.nickName, //仅为示例,并非真实接口地址。
success: (res) => {
console.log(res.data);
if(res.data.code==200){
uni.redirectTo({
url: '../user/user'
});
}else{
this.open();
}
}
});
}
}
}
</script>
<style>
.input_str{
border:1px solid #000000;
border-radius: 5rpx;
height: 30px;
padding: 10rpx;
margin-bottom: 15rpx;
}
</style>
效果