会员信息修改

src/views/store/user/index.vue

@@ -228,17 +228,35 @@
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="会员头像" prop="avatar">
+          <div style="display: flex; align-items: center; gap: 16px;">
             <el-popover
-            placement="right"
-            title=""
-            trigger="hover"
-          >
-            <img slot="reference" :src="form.avatar" width="80">
-            <img :src="form.avatar" style="max-width: 80px;">
-          </el-popover>
+              placement="right"
+              title=""
+              trigger="hover"
+            >
+              <img slot="reference" :src="form.avatar" width="80" style="border-radius: 8px; border: 2px solid #ddd;">
+              <img :src="form.avatar" style="max-width: 200px; border-radius: 8px;">
+            </el-popover>
+            
+            <div>
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadUrl"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+                :http-request="handleAvatarUpload"
+              >
+                <el-button size="small" type="primary" icon="el-icon-upload">上传头像</el-button>
+              </el-upload>
+              <div style="font-size: 12px; color: #999; margin-top: 4px;">
+                支持 JPG、PNG 格式，建议尺寸 200x200
+              </div>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item label="会员昵称" prop="nickname">
-          <el-input v-model="form.nickname" disabled placeholder="请输入用户昵称" />
+          <el-input v-model="form.nickname" placeholder="请输入用户昵称" />
         </el-form-item>
         <el-form-item label="手机号码" prop="phone">
           <el-input v-model="form.phone" disabled placeholder="请输入手机号码" />
@@ -352,6 +370,7 @@ export default {
   name: "User",
   data() {
     return {
+      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS", // 上传的图片服务器地址
       userIsPromoterOptions:[],
       userLevelOptions:[],
       statusOptions:[],
@@ -466,6 +485,26 @@ export default {
     this.getList();
   },
   methods: {
+    // 头像上传前的校验
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!');
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+      }
+      return isJPG && isLt2M;
+    },
+
+
+    // 上传成功回调（如果使用服务器上传）
+    handleAvatarSuccess(response, file) {
+      this.form.avatar = response.url; // 假设服务器返回的是 {url: '图片地址'}
+      this.$message.success('头像上传成功');
+    },
     /** 查询用户列表 */
     getList() {
       this.loading = true;