注释客户管理

zxl

4 天以前 57f3afad90b0748424b92bca3754aeed994269a7

注释客户管理

 api/customerManager.js

@@ -0,0 +1,13 @@
/**
 * 客户管理API
 */
import { http, Method } from "@/utils/request.js";

export function getPage(param){
    return http.request({
        url:"/lmk/customer",
        method: Method.GET,
        needToken: true,
        data:param
    })
}

 pages/customerManager/customerManager.vue

@@ -1,50 +1,59 @@
<template>
    <view >
    <view class="container">
        <view class="header">
            <text class="title">客户列表</text>
        </view>
        <!-- 搜索框 -->
        <view class="search-box">
            <u-search v-model="query.username" placeholder="搜索客户" :showAction="false" @change="searchMember"></u-search>
        </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>
        <scroll-view scroll-y class="member-list" @scrolltolower="loadMore" :lower-threshold="100">
            <view>
                <view class="member-item" v-for="(member, index) in memberList" :key="member.id"
                    v-if="memberList.length > 0">

                    <view class="member-info">
                        <text class="mobile">{{ member.mobile }}</text>
                        <text class="region">{{ member.region }}</text>
                    </view>
                    <!-- 操作按钮区域 -->
                    <view class="action-buttons">
                        <u-button type="primary" size="mini" @click.stop="navigateToDetail(member.id)"
                            class="edit-btn">修改</u-button>
                        <u-button type="error" size="mini" @click.stop="joinBlack(member.id)"
                            class="delete-btn"></u-button>
                    </view>

                </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="{
            <!-- 改进的加载更多提示 -->
            <view>
                <u-loadmore class="load-more" v-if="memberList.length > 0"
                    :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
                        loadmore: '上拉加载更多',
                        loading: '正在加载',
                        nomore: '没有更多了'
                      }"
                    />
                  </view>
                  <view style="height:150rpx">
					  
                  </view>
                      }" />
            </view>
            <view style="height:150rpx">

            </view>
        </scroll-view>
	
		
	



    </view>
</template>

<script>
    import {
        getPage,
		
    } from "@/api/customerManager.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';
@@ -52,7 +61,8 @@
    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 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';
    export default {
        components: {
            UIcon,
@@ -62,25 +72,148 @@
            UInput,
            USearch,
            UPopup,
            ULoading
            ULoading,
            ULoadmore,
        },
        data() {
            return {
				
                loading: false,
                noMore: false,

                query: {
                    username: '',
                    pageNumber: 1,
                    pageSize: 15,
                },
                memberList: [],
                total:0,
            }
        },
        onLoad(){
            this.getPage()
        },
        methods: {
			
            // 搜索用户
            searchMember() {
                this.query.pageNumber = 1
                this.noMore = false
                this.clerkList = []
                this.getPage()
            },
            joinBlack(memberId){
				
            },
            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.memberList = this.query.pageNumber === 1 ?
                            newData :
                            [...this.memberList, ...newData];
							
                        // 判断是否还有更多数据
                        this.noMore = newData.length < this.query.pageSize ||
                            this.memberList.length >= this.total;
						
                    }
                })
            },
            // 加载更多
            loadMore() {
                if (!this.noMore) {
                    this.query.pageNumber++
                    this.getPage()
                }
            },

        }
    }
</script>

<style>
.load-more {
            padding: 20rpx 0;
            text-align: center;
            color: #999;
            font-size: 26rpx;
            background-color: #f7f8fa;
<style lang="scss" scoped>
    .action-buttons {
      display: flex;
      margin-left: 20rpx;
    }
    .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;
        }
</style>


    }

    .search-box {
        margin-bottom: 20rpx;
    }

    .member-list {
        flex: 1;
        overflow: hidden;
    }

    .member-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;
        }

        .member-info {
            flex: 1;
            display: flex;
            flex-direction: column;

            .mobile {
                font-size: 32rpx;
                color: #333;
                margin-bottom: 8rpx;
            }

            .region {
                font-size: 24rpx;
                color: #999;
            }
        }
    }

    .load-more {
        padding: 20rpx 0;
        text-align: center;
        color: #999;
        font-size: 26rpx;
        background-color: #f7f8fa;
    }
</style>