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

  <template>
    <view class="page-container">
      <!-- 渐变蓝色背景 -->
      <view class="gradient-bg"></view>

      <!-- 用户信息卡片 -->
      <view class="user-card">
        <view class="user-info">
          <view class="info-row">
            <text class="label">用户姓名：</text>
            <text class="value">{{auditsDetail.userName}}</text>
          </view>
          <view class="info-row">
            <text class="label">性别：</text>
            <text class="value">{{auditsDetail.gender === 1? '男' : '女'}}</text>
          </view>
          <view class="info-row">
            <text class="label">证件号：</text>
            <text class="value">{{auditsDetail.idCard}}</text>
          </view>
          <view class="info-row">
            <text class="label">联系电话：</text>
            <text class="value">{{auditsDetail.phone}}</text>
          </view>
          <view class="info-row">
            <text class="label">所属单位：</text>
            <text class="value">{{auditsDetail.unitName}}</text>
          </view>

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

      <!-- 底部按钮 -->
      <view v-if="pageType === 'handle'&&auditsDetail.isAuditState===1" class="action-buttons">
        <button class="approve-btn" @click="handleApprove">通过</button>
        <button class="reject-btn" @click="handleReject">拒绝</button>
      </view>
    </view>
  </template>

  <script>
  export default {
    data() {
      return {
        pageType: 'handle', // 'handle' 或 'detail'
        auditsDetail: {},
        handleDesc: '',
        selectedImages: [],
        realImages: [],
        infoImages: []
      };
    },
    methods: {
      onLoad(options) {
        if (options.id) {
          const id = options.id;
          this.auditsDetail.id = id;
          this.queryEmployee(id);
        }
      },
      // 原有方法保持不变...
      handleApprove() {
        this.auditsDetail.isAudit=1
        this.$u.api.unit.updateEmployee(this.auditsDetail).then(res => {
          if (res.code == "200") {
            // 提交逻辑
            uni.showToast({
              title: '审核通过',
              icon: 'success',
            });
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/sys/workbench/unitManagement/employeeAudits'
              });
            }, 600);
          }
        });
      },
      handleReject() {
        this.auditsDetail.isAudit=2
        this.$u.api.unit.updateEmployee(this.auditsDetail).then(res => {
          if (res.code == "200") {
            // 提交逻辑
            uni.showToast({
              title: '拒绝通过',
              icon: 'success',
            });
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/sys/workbench/unitManagement/employeeAudits'
              });
            }, 600);
          }
        });
      },

      queryEmployee(id){
        this.$u.api.unit.queryEmployeeById(this.auditsDetail).then(res => {
          this.auditsDetail = res.data;
        });
      }
    }
  };
  </script>

  <style scoped>
  /* 渐变蓝色背景 */
  .gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 500rpx;
    background: linear-gradient(to bottom, #0A60ED, #FFFFFF);
    z-index: -1;
  }

  .page-container {
    padding: 48rpx 30rpx;
    background-color: transparent;
    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;
  }

  .reject-btn {
    background-color: transparent;
    color: #0190FF;
    border: 2rpx solid #0190FF;
    margin-left: 20rpx;
    transition: all 0.15s ease; /* 添加过渡效果 */
  }

  .reject-btn:active {
    color: #FFFFFF; /* 文字改为白色 */
    background-color: #0170CC; /* 背景改为深蓝色 */
    border-color: #0170CC;
    box-shadow: 0 4rpx 12rpx rgba(1, 112, 204, 0.4); /* 阴影加深 */
    transform: translateY(2rpx); /* 轻微下压效果 */
  }

  .approve-btn {
    background-color: #0190FF;
    color: #fff;
    border: none;
    transition: all 0.15s ease; /* 添加过渡效果 */
  }

  .approve-btn:active {
    background-color: #0150A0; /* 更深的蓝色 */
    box-shadow: 0 4rpx 12rpx rgba(1, 80, 160, 0.4); /* 阴影加深 */
    transform: translateY(2rpx); /* 轻微下压效果 */
  }

  </style>