work-order/work-order-uniapp/pages/mchStaff/index.vue

<template>
  <view class="app-container">
    <HeaderBar title="员工管理" text-align="center" enable-back />

    <view class="staff-list">
      <view
        v-for="item in staffList"
        :key="item.id"
        class="staff-item"
      >
        <view class="staff-info">
          <view class="name-phone">
            <text class="name">
              {{ item.userName | dv}}
              <template v-if="item.remark">
                （{{ item.remark }}）
              </template>
            </text>
          </view>
          <view class="role">{{ MchStaffType.parseName(item.type) }}</view>
        </view>
        <view class="staff-actions">
          <view class="action-btn edit" @click="editStaff(item)">
            <u-icon name="edit-pen" size="32" color="#2979ff"></u-icon>
          </view>
          <view class="action-btn delete" @click="deleteStaff(item)" v-if="item.type !== MchStaffType.MANAGER">
            <u-icon name="trash" size="32" color="#f56c6c"></u-icon>
          </view>
        </view>
      </view>

      <!-- 添加新员工占位符 -->
      <view class="staff-item add-placeholder" @click="addStaff">
        <view class="add-content">
          <u-icon name="plus" size="40" color="#2979ff"></u-icon>
          <text class="add-text">添加新员工</text>
        </view>
      </view>
    </view>

    <StaffCodeModal
      v-model="showCodeModal"
      :code="staffCode"
      :expire-time="expireTime"
      :mch-id="mchId"
    />

    <EditStaffModal
      v-model="showEditModal"
      :staff="currentStaff"
      @success="getStaffList"
    />
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue'
import StaffCodeModal from './components/StaffCodeModal.vue'
import EditStaffModal from './components/EditStaffModal.vue'
import { mchGetStaffList, mchDeleteStaff, mchGetStaffCode } from '@/api/mch/mchStaff'
import { MchStaffType } from '@/utils/enums'
import { mapGetters } from 'vuex'

export default {
  components: {
    HeaderBar,
    StaffCodeModal,
    EditStaffModal
  },
  data() {
    return {
      MchStaffType,
      staffList: [],
      showCodeModal: false,
      staffCode: '',
      expireTime: '',
      showEditModal: false,
      currentStaff: null
    }
  },
  computed: {
    ...mapGetters(['mchId'])
  },
  onShow() {
    this.getStaffList()
  },
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: '邀请您成为店铺员工',
      path: `/pages/mch/check?code=${this.staffCode}&mchId=${this.mchId}`,
    }
  },
  methods: {
    getStaffList() {
      this.$modal.loading('加载中...')
      mchGetStaffList({ mchId: this.mchId }).then(res => {
        this.staffList = res.data
      }).finally(() => {
        this.$modal.closeLoading()
      })
    },
    deleteStaff(staff) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该员工吗？',
        success: (res) => {
          if (res.confirm) {
            mchDeleteStaff(staff.id).then(() => {
              uni.showToast({ title: '删除成功', icon: 'success' })
              this.getStaffList()
            })
          }
        }
      })
    },
    editStaff(staff) {
      this.currentStaff = staff
      this.showEditModal = true
    },
    addStaff() {
      this.$modal.loading('获取验证码中...')
      mchGetStaffCode(this.mchId).then(res => {
        this.$modal.closeLoading()
        this.staffCode = res.data.code
        this.expireTime = res.data.expireTime
        this.showCodeModal = true
      }).catch(() => {
        this.$modal.closeLoading()
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.staff-list {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.staff-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.add-placeholder {
    background: #ffffff71;
    border: 2rpx dashed #fff;
    justify-content: center;
    padding: 40rpx;

    .add-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      .add-text {
        font-size: 28rpx;
        color: #2979ff;
      }
    }
  }

  .staff-info {
    flex: 1;
    margin-right: 20rpx;

    .name-phone {
      margin-bottom: 10rpx;

      .name {
        font-size: 32rpx;
        color: #333;
        margin-right: 20rpx;
      }

      .phone {
        font-size: 28rpx;
        color: #666;
      }
    }

    .role {
      font-size: 28rpx;
      color: #666;
    }
  }

  .staff-actions {
    display: flex;
    gap: 20rpx;

    .action-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f7f8fa;
    }
  }
}

.share-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 50rpx;
  padding: 20rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  border: none;

  text {
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #2979ff;
  }
}
</style>