SmartParks_uniapp/pages/sys/workbench/unitManagement/employeeEdit.vue

<template>
  <view class="page-container">

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="info-row">
          <text class="label">用户姓名：</text>
          <text class="value">余永乐</text>
        </view>
        <view class="info-row">
          <text class="label">性别：</text>
          <text class="value">男</text>
        </view>
        <view class="info-row">
          <text class="label">证件号：</text>
          <text class="value">5001255658789955</text>
        </view>
        <view class="info-row">
          <text class="label">联系电话：</text>
          <text class="value">17898987887</text>
        </view>
        <view class="info-row">
          <text class="label">所属单位：</text>
          <text class="value">x x x x x</text>
        </view>

        <!-- 人脸图片区域 -->
        <view class="face-image-section">
          <text class="label">人脸图片：</text>
          <image
              class="face-image"
              :src="auditsDetail.avatar || '/static/ic_avg.png'"
              mode="aspectFill"
          />
        </view>
      </view>
    </view>

    <view class="user-card">
      <view class="user-info">
        <view class="info-row">
          <text class="label">邮箱：</text>
          <text class="value">-</text>
        </view>
        <view class="info-row">
          <text class="label">车牌号：</text>
          <text class="value">-</text>
        </view>
      </view>
    </view>

    <view class="user-card">
      <view class="user-info">
        <view class="info-row">
          <text class="label">入驻时间：</text>
          <text class="value">-</text>
        </view>
        <view class="info-row">
          <text class="label">在职状态：</text>
          <view class="status-options">
            <!-- 启用选项 -->
            <view class="radio-option" @click="changeStatus(auditsDetail, '1')">
              <view class="radio-circle" :class="{ 'active': auditsDetail.status === '1' }"></view>
              <text class="radio-label">启用</text>
            </view>

            <!-- 禁用选项 -->
            <view class="radio-option" @click="changeStatus(auditsDetail, '0')">
              <view class="radio-circle" :class="{ 'active': auditsDetail.status === '0' }"></view>
              <text class="radio-label">禁用</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageType: 'handle', // 'handle' 或 'detail'
      auditsDetail: {status:'0'},
      handleDesc: '',
      selectedImages: [],
      realImages: [],
      infoImages: []
    };
  },
  methods: {
    // 原有方法保持不变...
    handleApprove() {
      console.log('approve');
    },
    handleReject() {
      console.log('reject');
    },
    async submit(action) {
      // 提交逻辑...
    },
    // 新增状态变更方法
    changeStatus(item, newStatus) {
      item.status = newStatus;
      // 这里可以添加API调用更新状态
      this.$u.api.updateEmployeeStatus({
        id: item.id,
        status: newStatus
      }).then(res => {
        if (res.code === '200') {
          uni.showToast({
            title: '状态更新成功',
            icon: 'success'
          });
        }
      });
    }
  }
};
</script>

<style scoped>

.page-container {
  padding: 48rpx 30rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 用户信息卡片样式 */
.user-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.user-info {
  width: 100%;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32rpx;
  font-size: 32rpx;
}

.info-row .label {
  color: #000;
  font-weight: 500;
}

.info-row .value {
  color: #7F7F7F;
}

/* 人脸图片区域 */
.face-image-section {
  margin-bottom: 32rpx;
}

.face-image-section .label {
  display: block;
  margin-bottom: 20rpx;
  color: #000;
  font-weight: 500;
}

.face-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
}

/* 底部按钮样式 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  padding: 0 30rpx;
}

.action-buttons button {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
}
/* 状态选项容器 */
.status-options {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

/* 单选选项容器 */
.radio-option {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
  cursor: pointer;
}

/* 圆形单选按钮 */
.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 5rpx solid #ccc;
  margin-right: 10rpx;
  position: relative;
  transition: all 0.3s;
}

/* 激活状态的圆形 */
.radio-circle.active {
  border-color: #0090FF;
}

/* 圆形中间的实心点 */
.radio-circle.active::after {
  content: '';
  position: absolute;
  width: 32rpx;
  height: 32rpx;
  background-color: #0090FF;
  border-radius: 50%;
  border: 2rpx solid #ccc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 禁用状态的特殊样式 */
.radio-option:last-child .radio-circle.active {
  border-color: #FF4D4F;
}

.radio-option:last-child .radio-circle.active::after {
  background-color: #FF4D4F;
}

/* 选项文字 */
.radio-label {
  font-size: 28rpx;
  color: #333;
}
</style>