<template>
|
<view >
|
<!-- 内容区域 -->
|
<scroll-view scroll-y style="height: 100vh;" @scrolltolower="loadMore" class="user-list"
|
:lower-threshold="100"
|
>
|
<view >
|
<view class="user-item" v-for="(user, index) in userList" :key="user.id" >
|
|
<view class="user-info">
|
<text class="realName">{{ user.realName }}</text>
|
<text class="mobile">{{ user.mobile }}</text>
|
</view>
|
<!-- 操作按钮区域 -->
|
<view class="action-buttons">
|
<u-button type="primary" size="mini" @click.stop="restPassword(user.memberId)" class="edit-btn">重置密码</u-button>
|
<u-button type="primary" size="mini" @click.stop="navigateToDetail(user.id)" class="edit-btn">修改</u-button>
|
<u-button type="error" size="mini" @click.stop="deleteUser(user.id)"
|
class="delete-btn">删除</u-button>
|
</view>
|
|
</view>
|
</view>
|
|
<!-- 改进的加载更多提示 -->
|
<view >
|
<u-loadmore class="load-more"
|
v-if="mockData.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 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'
|
export default {
|
components: {
|
UIcon,
|
UButton,
|
UForm,
|
UFormItem,
|
UInput,
|
USearch,
|
UPopup,
|
ULoading
|
},
|
data() {
|
return {
|
|
}
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style>
|
.load-more {
|
padding: 20rpx 0;
|
text-align: center;
|
color: #999;
|
font-size: 26rpx;
|
background-color: #f7f8fa;
|
}
|
</style>
|
