Commit 32159a82 authored by zhangsan's avatar zhangsan

1

parent 273dfd24
<template>
<div class="app-container">
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<!-- 用户搜索区域 -->
<el-form-item label="用户手机号" prop="phone">
<el-input
v-model="form.phone"
placeholder="请输入用户手机号"
style="width: 300px"
>
<el-button slot="append" @click="searchUser">查询</el-button>
</el-input>
</el-form-item>
<!-- 用户信息编辑区域 -->
<template v-if="userInfo">
<div class="user-info-card">
<h3>当前用户信息</h3>
<div class="info-grid">
<div class="info-item">
<span class="label">用户ID:</span>
<span class="value">{{ userInfo.userId }}</span>
</div>
<div class="info-item">
<span class="label">手机号:</span>
<span class="value">{{ userInfo.phonenumber }}</span>
</div>
</div>
</div>
<el-form-item label="用户名字" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入用户名字"
style="width: 300px"
/>
</el-form-item>
<el-form-item label="用户身份证号" prop="identityId">
<el-input
v-model="form.identityId"
placeholder="请输入用户身份证号"
style="width: 300px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">保存修改</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</template>
</el-form>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'EditUser',
data() {
// 身份证号验证规则
const validateIdentityId = (rule, value, callback) => {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (!reg.test(value)) {
callback(new Error('请输入正确的身份证号'))
} else {
callback()
}
}
return {
form: {
phone: '',
nickName: '',
identityId: '',
userId: ''
},
rules: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
],
nickName: [
{ required: true, message: '请输入用户昵称', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
identityId: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ validator: validateIdentityId, trigger: 'blur' }
]
},
userInfo: null
}
},
methods: {
// 搜索用户
searchUser() {
if (!this.form.phone) {
this.$message.warning('请输入手机号')
return
}
request({
url: '/system/user/sysList',
method: 'get',
params: {
pageNum: 1,
pageSize: 10,
phonenumber: this.form.phone
}
}).then(response => {
if (response.rows && response.rows.length > 0) {
this.userInfo = response.rows[0]
this.form.userId = this.userInfo.userId
this.form.nickName = this.userInfo.nickName
this.form.identityId = this.userInfo.identityId || ''
} else {
this.$message.warning('未找到该用户')
this.resetForm()
}
})
},
// 提交表单
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
request({
url: '/system/user/edit',
method: 'post',
data: {
userId: this.form.userId,
nickName: this.form.nickName,
identityId: this.form.identityId
}
}).then(() => {
this.$message.success('修改成功')
this.resetForm()
})
}
})
},
// 重置表单
resetForm() {
this.$refs.form.resetFields()
this.userInfo = null
this.form.userId = ''
}
}
}
</script>
<style scoped>
.app-container {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.user-info-card {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 24px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}
.user-info-card h3 {
margin: 0 0 16px 0;
color: #303133;
font-size: 16px;
border-bottom: 1px solid #ebeef5;
padding-bottom: 10px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.info-item {
display: flex;
align-items: center;
}
.info-item .label {
color: #606266;
margin-right: 8px;
font-weight: 500;
}
.info-item .value {
color: #303133;
}
.el-form-item {
margin-bottom: 22px;
}
.el-button {
padding: 12px 20px;
}
</style>
\ No newline at end of file
...@@ -28,6 +28,15 @@ ...@@ -28,6 +28,15 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 添加新的编辑用户卡片 -->
<el-col :span="6">
<el-card class="box-card" shadow="hover" @click.native="handleOpen('editUser')">
<div class="card-content">
<i class="el-icon-user"></i>
<span>编辑用户实名信息</span>
</div>
</el-card>
</el-col>
</el-row> </el-row>
<!-- 弹窗组件 --> <!-- 弹窗组件 -->
...@@ -75,11 +84,13 @@ ...@@ -75,11 +84,13 @@
<script> <script>
import xunibi from "./xunibi.vue"; import xunibi from "./xunibi.vue";
import addMoney from "./addMoney.vue"; import addMoney from "./addMoney.vue";
import editUser from "./editUser.vue"; // 导入新组件
import request from '@/utils/request' import request from '@/utils/request'
export default { export default {
components: { components: {
xunibi, xunibi,
addMoney addMoney,
editUser // 注册新组件
}, },
data() { data() {
return { return {
...@@ -116,6 +127,10 @@ export default { ...@@ -116,6 +127,10 @@ export default {
this.currentComponent = 'addMoney'; this.currentComponent = 'addMoney';
this.dialogTitle = '用户加钱'; this.dialogTitle = '用户加钱';
break; break;
case 'editUser': // 添加新的 case
this.currentComponent = 'editUser';
this.dialogTitle = '编辑用户';
break;
case 'openExport': case 'openExport':
this.exportDialogVisible = true; this.exportDialogVisible = true;
return; return;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment