scancode-miro/pages/cjx/hexiao/jxs/ywy_list.vue

<template>
  <view class="page-container">
    <view class="search-wrapper">
      <view class="search-bar">
        <uni-icons type="search" size="20" color="#999"></uni-icons>
        <input
            class="search-input"
            v-model="searchQuery"
            placeholder="输入业务员姓名/账号搜索"
            placeholder-class="placeholder"
            confirm-type="search"
            @confirm="handleSearch"
        />
      </view>
    </view>

    <scroll-view class="list-container" scroll-y="true" @scrolltolower="loadMore">
      <view v-if="salespersonList.length === 0 && loadStatus !== 'loading'" class="empty-list">
        <text>暂无业务员数据</text>
      </view>

      <view v-for="item in salespersonList" :key="item.id" class="salesperson-card">
        <view class="card-header">
          <view class="header-left">
            <uni-icons type="person-filled" size="22" color="#3c82f8"></uni-icons>
            <text class="salesperson-name">{{ item.nick_name }}</text>
          </view>
          <view class="status-badge" :class="item.is_job  ? 'active' : 'inactive'">
            {{ item.is_job  ? '在职' : '离职' }}
          </view>
        </view>

        <view class="card-body">
          <view class="detail-row" @click="copy(item.account)">
            <text class="detail-label">业务员账号</text>
            <text class="detail-value">{{ item.tel_ }}</text>
          </view>
          <view class="detail-row clickable" @click="goToStores(item.id)">
            <text class="detail-label">门店数量</text>
            <view class="detail-value with-arrow">
              <text>{{ item.storeCount }}家</text>
              <uni-icons type="right" size="14" color="#999"></uni-icons>
            </view>
          </view>
          <view class="detail-row">
            <text class="detail-label">创建时间</text>
            <text class="detail-value">{{ item.create_time }}</text>
          </view>
          <view class="detail-row clickable" @click="viewSalesData(item.id)">
            <text class="detail-label">销售数据</text>
            <view class="detail-value with-arrow">
              <text class="view-text">查看</text>
              <uni-icons type="right" size="14" color="#999"></uni-icons>
            </view>
          </view>
        </view>

        <view class="card-footer">
          <view class="action-btn" @click="editSalesperson(item.id)">
            <uni-icons type="compose" size="18" color="#3c82f8"></uni-icons>
            <text>编辑</text>
          </view>
          <view class="action-btn" @click="viewPatrolRecords(item.id)">
            <uni-icons type="home-filled" size="18" color="#3c82f8"></uni-icons>
            <text>巡店记录</text>
          </view>
          <view class="action-btn delete-btn" @click="deleteSalesperson(item.id)">
            <uni-icons type="trash-filled" size="18" color="#e54d42"></uni-icons>
            <text>删除</text>
          </view>
        </view>
      </view>

      <uni-load-more :status="loadStatus"></uni-load-more>
    </scroll-view>

    <view class="fixed-footer">
      <button class="add-btn" @click="addNewSalesperson">新增业务员</button>
    </view>
  </view>
</template>

<script>
import {ywyList,delYwy} from "../../../../api/hexiao";

export default {
  data() {
    return {
      searchQuery: '',
      salespersonList: [],
      pagination: { page: 1, limit: 10 },
      loadStatus: 'more',
      isLoading: false,
    };
  },
  onLoad() {
    this.fetchSalespeople(true);
  },
  onShow(){
    this.fetchSalespeople(true);
  },
  onPullDownRefresh() {
    // this.fetchSalespeople(true);
  },
  methods: {
    build(){
      uni.showToast({
        title: '功能建设中',
        icon: 'none'
      });
    },
    fetchSalespeople(isRefresh = false) {
      if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
        return;
      }
      if (isRefresh) {
        this.pagination.page = 1;
        this.salespersonList = [];
        this.loadStatus = 'more';
      }
      this.isLoading = true;
      this.loadStatus = 'loading';

      // --- 模拟API请求 ---
      console.log(`请求第 ${this.pagination.page} 页...`);

      ywyList(this.searchQuery).then(res=>{
        let mockData = res.data;
        this.salespersonList = mockData
        // uni.stopPullDownRefresh();
        // if (mockData.length > 0 && !noMoreData) {
        //   this.salespersonList = [...this.salespersonList, ...mockData];
        //   this.pagination.page++;
        //   this.loadStatus = 'more';
        // } else {
        //   this.loadStatus = 'noMore';
        // }
        this.isLoading = false;
        this.loadStatus = 'noMore';
      })


    },
    loadMore() {
      this.fetchSalespeople();
    },
    handleSearch() {
      // uni.showToast({ title: '触发搜索', icon: 'none' });
      this.fetchSalespeople(true);
    },
    copy(text) {
      uni.setClipboardData({
        data: text,
        success: () => uni.showToast({ title: '已复制' })
      });
    },
    goToStores(id) {


    },
    viewSalesData(id) { console.log('查看销售数据 ID:', id); this.build() },
    editSalesperson(id) {
      uni.navigateTo({ url: '/pages/cjx/hexiao/jxs/add_ywy?id='+id });
      console.log('编辑业务员 ID:', id); },
    viewPatrolRecords(id) { console.log('查看巡店记录 ID:', id); this.build()},
    deleteSalesperson(id) {
      let self = this;
      uni.showModal({
        title: '确认删除',
        content: '您确定要删除该业务员吗？',
        confirmColor: '#e54d42',
        success: (res) => {
          if (res.confirm) {

            delYwy(id).then(res=>{
              self.fetchSalespeople(true);
            })
          }
        }
      });
    },
    addNewSalesperson() {
      console.log('跳转到新增业务员页面');
      uni.navigateTo({ url: '/pages/cjx/hexiao/jxs/add_ywy' });
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f6fa;
}

.search-wrapper {
  padding: 20rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}
.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f6fa;
  border-radius: 50rpx;
  padding: 0 25rpx;
  height: 70rpx;
}
.search-input { flex: 1; font-size: 28rpx; margin-left: 15rpx; }
.placeholder { color: #b0b0b0; }

.list-container {
  flex: 1;
  height: 100%;
  padding-bottom: 160rpx; // 为底部按钮留出空间
}
.empty-list { text-align: center; color: #999; padding-top: 150rpx; }

.salesperson-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-left {
    display: flex;
    align-items: center;
  }
  .salesperson-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-left: 15rpx;
  }
}

.status-badge {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  color: #fff;
  &.active {
    background-color: #3c82f8;
  }
  &.inactive {
    background-color: #c0c4cc;
  }
}

.card-body {
  padding: 20rpx 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  .detail-label { color: #666; }
  .detail-value { color: #333; }
  .with-arrow {
    display: flex;
    align-items: center;
    color: #999;
    .view-text {
      color: #3c82f8;
    }
  }
  &.clickable:active {
    background-color: #f9f9f9;
  }
}

.card-footer {
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid #f5f5f5;
  margin-top: 10rpx;
  padding-top: 25rpx;
}
.action-btn {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #3c82f8;
  text { margin-left: 8rpx; }
  &.delete-btn { color: #e54d42; }
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f5f6fa;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  z-index: 100;
}
.add-btn {
  background-color: #3c82f8;
  color: white;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  &::after { border: none; }
}
</style>