scancode-miro/pages/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 clickable" @click="viewExpandStoreCount(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 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 class="detail-row clickable" @click="viewShanghuoData(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 leave-btn" v-if="item.is_job" @click="leaveSalesperson(item)">
            <uni-icons type="minus" size="18" color="#f59e0b"></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,transferStoreOwnership} 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) {
      uni.navigateTo({ url: '/pages/hexiao/ywy/retail?id='+id });

    },
    viewSalesData(id) {
      console.log('查看销售数据 ID:', id);
      uni.navigateTo({ url: '/pages/hexiao/ywy/sale_detail?id='+id });
    },

    viewShanghuoData(id) {
      console.log('查看销售数据 ID:', id);
      uni.navigateTo({ url: '/pages/hexiao/ywy/hexiao_detail_ywy?id='+id });
    },
    viewExpandStoreCount(id) {
      uni.navigateTo({ url: '/pages/hexiao/jxs/store_expand_list?ywyId='+id });
    },
    editSalesperson(id) {
      uni.navigateTo({ url: '/pages/hexiao/jxs/add_ywy?id='+id });
      console.log('编辑业务员 ID:', id); },
    viewPatrolRecords(id) {
      uni.navigateTo({ url: '/pages/hexiao/ywy/patrol_record?id='+id });

    },
    deleteSalesperson(id) {
      let self = this;
      uni.showModal({
        title: '确认删除',
        content: '您确定要删除该业务员吗？',
        confirmColor: '#e54d42',
        success: (res) => {
          if (res.confirm) {

            delYwy(id).then(res=>{
              self.fetchSalespeople(true);
            })
          }
        }
      });
    },
    leaveSalesperson(item) {
      if (!item.is_job) {
        uni.showToast({ title: '业务员已离职', icon: 'none' });
        return;
      }
      uni.showModal({
        title: '确认离职',
        content: `确认将${item.nick_name}设置为离职吗？`,
        confirmColor: '#e54d42',
        success: (res) => {
          if (!res.confirm) return;
          uni.showModal({
            title: '门店继承',
            content: '是否需要选择在职业务员进行门店继承？',
            confirmText: '需要',
            cancelText: '不需要',
            success: (inheritRes) => {
              if (inheritRes.confirm) {
                this.chooseSuccessor(item);
                return;
              }
              if (inheritRes.cancel) {
                this.submitLeave(item.id);
              }
            }
          });
        }
      });
    },
    chooseSuccessor(item) {
      const candidates = this.salespersonList.filter((person) => person.is_job && person.id !== item.id);
      if (candidates.length === 0) {
        uni.showToast({ title: '暂无可继承的在职业务员，已直接离职', icon: 'none' });
        this.submitLeave(item.id);
        return;
      }
      const itemList = candidates.map((person) => {
        const phone = person.tel_ ? ` ${person.tel_}` : '';
        return `${person.nick_name}${phone}`;
      });
      uni.showActionSheet({
        itemList,
        success: (res) => {
          const selected = candidates[res.tapIndex];
          if (selected) {
            this.submitLeave(item.id, selected.id);
          }
        },
        fail: () => {
          this.submitLeave(item.id);
        }
      });
    },
    submitLeave(ywyId, inheritYwyId) {
      uni.showLoading({ title: '处理中...' });
      const data = {
        leavingYwyId: ywyId,
        inheritYwyId: inheritYwyId || 0
      };
      transferStoreOwnership(data)
        .then((res) => {
          uni.hideLoading();
          if (res.code === 0) {
            uni.showToast({ title: '已离职' });
            this.fetchSalespeople(true);
            return;
          }
          uni.showToast({ title: res.message || '操作失败', icon: 'none' });
        })
        .catch(() => {
          uni.hideLoading();
          uni.showToast({ title: '操作失败', icon: 'none' });
        });
    },
    addNewSalesperson() {
      console.log('跳转到新增业务员页面');
      uni.navigateTo({ url: '/pages/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; }
  &.leave-btn { color: #f59e0b; }
  &.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>