1

src/views/ops/webPage/editUser.vue

+<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

src/views/ops/webPage/index.vue

@@ -28,6 +28,15 @@
           </div>
         </el-card>
       </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>
 
     <!-- 弹窗组件 -->
@@ -75,11 +84,13 @@
 <script>
 import xunibi from "./xunibi.vue";
 import addMoney from "./addMoney.vue";
+import editUser from "./editUser.vue";  // 导入新组件
 import request from '@/utils/request'
 export default {
   components: {
     xunibi,
-    addMoney
+    addMoney,
+    editUser  // 注册新组件
   },
   data() {
     return {
@@ -116,6 +127,10 @@ export default {
           this.currentComponent = 'addMoney';
           this.dialogTitle = '用户加钱';
           break;
+        case 'editUser':  // 添加新的 case
+          this.currentComponent = 'editUser';
+          this.dialogTitle = '编辑用户';
+          break;
         case 'openExport':
           this.exportDialogVisible = true;
           return;