<template>
|
<view class="container">
|
<!-- 标题 -->
|
<view class="header">
|
<text class="title">用户列表</text>
|
</view>
|
<view>
|
<button class="add-btn" @click="navigateToAdd()" :disabled="!isShopkeeper">新增用户</button>
|
</view>
|
<!-- 搜索框 -->
|
<view class="search-box">
|
<u-search v-model="query.realName" placeholder="搜索姓名" :showAction="false" @change="searchClerk()"></u-search>
|
</view>
|
|
<!-- 用户列表 -->
|
<scroll-view scroll-y class="clerk-list" @scrolltolower="loadMore" v-if="clerkList.length > 0">
|
<view class="clerk-item" v-for="(clerk, index) in clerkList" :key="clerk.id" >
|
|
<view class="clerk-info">
|
<text class="realName">{{ clerk.realName ? clerk.realName: '未设置人名' }}</text>
|
<text class="mobile">{{ clerk.mobile }}</text>
|
</view>
|
<!-- 操作按钮区域 -->
|
<view class="action-buttons">
|
<u-button type="primary" size="mini" @click.stop="restPassword(clerk.memberId)" class="edit-btn" :disabled="!checkPermission(clerk)">重置密码</u-button>
|
<u-button type="primary" size="mini" @click.stop="navigateToDetail(clerk.id)" class="edit-btn" :disabled="!checkPermission(clerk)">修改</u-button>
|
<u-button type="error" size="mini" @click.stop="deleteUser(clerk.id)"
|
class="delete-btn" :disabled="!checkPermission(clerk)">删除</u-button>
|
</view>
|
|
</view>
|
|
<!-- 加载更多提示 -->
|
|
<view class="load-more">
|
<u-loadmore
|
v-if="clerkList.length > 0"
|
:status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'"
|
:load-text="{
|
loadmore: '上拉加载更多',
|
loading: '正在加载',
|
nomore: '没有更多了'
|
}"
|
/>
|
</view>
|
<view style="height:150rpx">
|
|
</view>
|
</scroll-view>
|
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
getPage,
|
del,
|
add,
|
update,
|
restPassword,
|
checkClerkPermission
|
} from "@/api/userPermissions.js"
|
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
|
import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
|
import UForm from '@/uview-components/uview-ui/components/u-form/u-form.vue';
|
import UFormItem from '@/uview-components/uview-ui/components/u-form-item/u-form-item.vue';
|
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
|
import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue';
|
import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue';
|
import ULoading from '@/uview-components/uview-ui/components/u-loading/u-loading.vue';
|
import ULoadmore from '@/uview-components/uview-ui/components/u-loadmore/u-loadmore.vue';
|
|
import storage from "@/utils/storage.js"; //缓存
|
import {
|
getUserInfo
|
} from "@/api/members";
|
|
export default {
|
components: {
|
UIcon,
|
UButton,
|
UForm,
|
UFormItem,
|
UInput,
|
USearch,
|
UPopup,
|
ULoading,
|
ULoadmore,
|
},
|
data() {
|
return {
|
total:0,
|
clerkList: [], // 用户列表数据
|
loading: false, // 加载状态
|
noMore: false, // 是否没有更多数据
|
query: {
|
realName: '',
|
pageNumber: 1,
|
pageSize: 15,
|
},
|
isSuper:false,
|
isShopkeeper:false,
|
clerkId:'',//登录账号id
|
}
|
},
|
onShow() {
|
this.getPage()
|
},
|
onLoad() {
|
this.getPage()
|
//获得用户权限
|
checkClerkPermission().then(res=>{
|
this.isSuper = res.data.data.isSuper;
|
this.isShopkeeper = res.data.data.isShopkeeper;
|
this.clerkId = res.data.data.clerkId;
|
})
|
|
},
|
|
methods: {
|
//检查权限
|
checkPermission(clerk){
|
if(this.isShopkeeper){
|
return true;
|
}
|
if(this.clerkId === clerk.id){
|
return true;
|
}else{
|
if(this.isSuper && !clerk.isSuper){
|
return true;
|
}
|
return false;
|
}
|
|
},
|
restPassword(id){
|
restPassword(id).then(res=>{
|
if(res.statusCode === 200){
|
uni.showToast({
|
title: res.data.msg, // 提示文字
|
icon: 'none', // 图标类型（success/loading/none）
|
mask: true // 是否显示透明蒙层（防止触摸穿透）
|
});
|
}
|
})
|
},
|
async getPage() {
|
//
|
uni.showLoading({
|
title: '加载中'
|
});
|
getPage(this.query).then(res => {
|
uni.hideLoading();
|
if (res.statusCode === 200) {
|
const newData = res.data.data;
|
// 更新总数据量
|
this.total = res.data.total || 0;
|
// 追加或替换数据
|
this.clerkList = this.query.pageNumber === 1 ?
|
newData :
|
[...this.clerkList, ...newData];
|
|
// 判断是否还有更多数据
|
this.noMore = newData.length < this.query.pageSize ||
|
this.clerkList.length >= this.total;
|
|
}
|
})
|
|
|
},
|
|
// 搜索用户
|
searchClerk() {
|
this.query.pageNumber = 1
|
this.noMore = false
|
this.clerkList = []
|
this.getPage()
|
},
|
|
// 加载更多
|
loadMore() {
|
if (!this.noMore) {
|
this.query.pageNumber++
|
this.getPage()
|
}
|
},
|
// 跳转到新增用户
|
navigateToAdd() {
|
uni.navigateTo({
|
url: `/pages/userPermissions/addStoreMember`
|
})
|
},
|
// 跳转到用户详情
|
navigateToDetail(id) {
|
uni.navigateTo({
|
url: `/pages/userPermissions/addStoreMember?id=${id}`
|
})
|
},
|
deleteUser(id){
|
del(id).then(res =>{
|
if (res.statusCode === 200) {
|
this.getPage();
|
}
|
})
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.action-buttons {
|
display: flex;
|
margin-left: 20rpx;
|
}
|
|
.edit-btn {
|
margin-right: 10rpx;
|
}
|
.container {
|
padding: 20rpx;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background-color: #f5f5f5;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
|
}
|
|
.add-btn {
|
width: 50%;
|
background-color: #2979ff;
|
color: white;
|
border-radius: 40rpx;
|
padding: 0 50rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 26rpx;
|
box-shadow: 0 2rpx 10rpx rgba(41, 121, 255, 0.3);
|
margin-bottom: 20rpx;
|
}
|
|
.search-box {
|
margin-bottom: 20rpx;
|
}
|
|
.clerk-list {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.clerk-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
background-color: #fff;
|
border-radius: 12rpx;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
.avatar {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
margin-right: 20rpx;
|
}
|
|
.clerk-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.realName {
|
font-size: 32rpx;
|
color: #333;
|
margin-bottom: 8rpx;
|
}
|
|
.mobile {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
}
|
.load-more {
|
padding: 20rpx 0;
|
text-align: center;
|
color: #999;
|
font-size: 26rpx;
|
background-color: #f7f8fa;
|
}
|
|
</style>
|
