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">{{employeeDetail.userName}}</text>
        </view>
        <view class="info-row">
          <text class="label">性别：</text>
          <text class="value">{{employeeDetail.gender === 1? '男' : '女'}}</text>
        </view>
        <view class="info-row">
          <text class="label">证件号：</text>
          <text class="value">{{employeeDetail.idCard}}</text>
        </view>
        <view class="info-row">
          <text class="label">联系电话：</text>
          <text class="value">{{employeeDetail.phone}}</text>
        </view>
        <view class="info-row">
          <text class="label">所属单位：</text>
          <text class="value">{{employeeDetail.unitName}}</text>
        </view>

        <!-- 人脸图片区域 -->
        <view class="face-image-section">
          <text class="label">人脸图片：</text>
          <image
              class="face-image"
              :src="employeeDetail.img || '/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">{{employeeDetail.email}}</text>
        </view>
        <view class="info-row">
          <text class="label">车牌号：</text>
          <text class="value">{{employeeDetail.carNumber}}</text>
        </view>
      </view>
    </view>

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

            <!-- 禁用选项 -->
            <view class="radio-option" @click="changeStatus(0)">
              <view class="radio-circle" :class="{ 'active': employeeDetail.state === 0 }"></view>
              <text class="radio-label">禁用</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <button class="submit-btn" @click="saveInfo">保存</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageType: 'handle', // 'handle' 或 'detail'
      employeeDetail: {},
    };
  },
  methods: {
    onLoad(options) {
      if (options.id) {
        const id = options.id;
        this.employeeDetail.id = id;
        this.queryEmployee();
      }
    },
    // 原有方法保持不变...
    handleApprove() {
      console.log('approve');
    },
    handleReject() {
      console.log('reject');
    },
    async submit(action) {
      // 提交逻辑...
    },
    queryEmployee(){
      this.$u.api.unit.queryEmployeeById(this.employeeDetail).then(res => {
        this.employeeDetail = res.data;
      });
    },
    // 新增状态变更方法
    changeStatus(newState) {
      this.employeeDetail.state = newState;
    },
    saveInfo(){
      console.log( this.employeeDetail);
      this.$u.api.unit.updateEmployee( this.employeeDetail).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: '状态更新成功',
            icon: 'success'
          });
        }else {
          uni.showToast({
            title: '状态更新失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</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;
}

.submit-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  color: #fff;
  background-color: #409eff;
  border-radius: 4px;
  border: none;
}
</style>