修改单位管理界面-2
This commit is contained in:
255
pages/sys/workbench/unitManagement/employeeEdit.vue
Normal file
255
pages/sys/workbench/unitManagement/employeeEdit.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user