注释客户管理

zxl

4 天以前 57f3afad90b0748424b92bca3754aeed994269a7

 pages/customerManager/customerManager.vue

@@ -1,22 +1,219 @@
<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 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>

         <!-- 改进的加载更多提示 -->
         <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>
      </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';
   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';
   export default {
      components: {
         UIcon,
         UButton,
         UForm,
         UFormItem,
         UInput,
         USearch,
         UPopup,
         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>
<style lang="scss" scoped>
   .action-buttons {
     display: flex;
     margin-left: 20rpx;
   }
   .container {
      padding: 20rpx;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f5f5f5;
   }

</style>
   .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;
      }


   }

   .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>