| | |
| | | <!-- 标题 --> |
| | | <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="searchUser()"></u-search> |
| | | <u-search v-model="query.realName" placeholder="搜索姓名" :showAction="false" @change="searchClerk()"></u-search> |
| | | </view> |
| | | |
| | | <!-- 用户列表 --> |
| | | <scroll-view scroll-y class="user-list" @scrolltolower="loadMore" v-if="userList.length > 0"> |
| | | <view class="user-item" v-for="(user, index) in userList" :key="user.id" > |
| | | <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="user-info"> |
| | | <text class="realName">{{ user.realName ? user.realName: '未设置人名' }}</text> |
| | | <text class="mobile">{{ user.mobile }}</text> |
| | | <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(user.memberId)" class="edit-btn" :disabled="!checkPermission(user)">重置密码</u-button> |
| | | <u-button type="primary" size="mini" @click.stop="navigateToDetail(user.id)" class="edit-btn" :disabled="!checkPermission(user)">修改</u-button> |
| | | <u-button type="error" size="mini" @click.stop="deleteUser(user.id)" |
| | | class="delete-btn" :disabled="!checkPermission(user)">删除</u-button> |
| | | <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="userList.length > 0" |
| | | v-if="clerkList.length > 0" |
| | | :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" |
| | | :load-text="{ |
| | | loadmore: '上拉加载更多', |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | userList: [], // 用户列表数据 |
| | | total:0, |
| | | clerkList: [], // 用户列表数据 |
| | | loading: false, // 加载状态 |
| | | noMoreData: false, // 是否没有更多数据 |
| | | noMore: false, // 是否没有更多数据 |
| | | query: { |
| | | realName: '', |
| | | pageNumber: 1, |
| | |
| | | |
| | | methods: { |
| | | //检查权限 |
| | | checkPermission(user){ |
| | | checkPermission(clerk){ |
| | | if(this.isShopkeeper){ |
| | | return true; |
| | | } |
| | | if(this.clerkId === user.id){ |
| | | if(this.clerkId === clerk.id){ |
| | | return true; |
| | | }else{ |
| | | if(this.isSuper && !user.isSuper){ |
| | | if(this.isSuper && !clerk.isSuper){ |
| | | return true; |
| | | } |
| | | return false; |
| | |
| | | getPage(this.query).then(res => { |
| | | uni.hideLoading(); |
| | | if (res.statusCode === 200) { |
| | | const data = res.data.data; |
| | | if (this.query.pageNumber === 1) { |
| | | this.userList = data || []; |
| | | console.log(this.userList.length) |
| | | } else { |
| | | // 否则追加数据 |
| | | this.userList = [...this.userList, ...(data || [])]; |
| | | 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; |
| | | |
| | | } |
| | | }) |
| | | |
| | |
| | | }, |
| | | |
| | | // 搜索用户 |
| | | searchUser() { |
| | | searchClerk() { |
| | | this.query.pageNumber = 1 |
| | | this.noMoreData = false |
| | | this.userList = [] |
| | | this.noMore = false |
| | | this.clerkList = [] |
| | | this.getPage() |
| | | }, |
| | | |
| | | // 加载更多 |
| | | loadMore() { |
| | | if (!this.noMoreData) { |
| | | if (!this.noMore) { |
| | | this.query.pageNumber++ |
| | | this.getPage() |
| | | } |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .user-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 20rpx; |
| | | border-bottom: 1rpx solid #f5f5f5; |
| | | } |
| | | |
| | | .user-info { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .action-buttons { |
| | | display: flex; |
| | | margin-left: 20rpx; |
| | |
| | | margin-bottom: 20rpx; |
| | | } |
| | | |
| | | .user-list { |
| | | .clerk-list { |
| | | flex: 1; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .user-item { |
| | | .clerk-item { |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 20rpx; |
| | |
| | | margin-right: 20rpx; |
| | | } |
| | | |
| | | .user-info { |
| | | .clerk-info { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |