update

src/views/user/index.vue

@@ -1,3 +1,28 @@
+<style lang="scss">
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>
 <template>
   <section class="content">
     <h4>用户管理</h4>
@@ -48,6 +73,15 @@
       <el-table-column align="center" prop="usercode" label="登录代码" />
       <el-table-column align="center" prop="username" label="用户名" />
       <el-table-column align="center" prop="nickname" label="微信昵称" />
+      <el-table-column>
+        <template slot-scope="scope">
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="scope.row.avatar"
+              :preview-src-list="[scope.row.avatar]"
+              ></el-image>
+        </template>
+      </el-table-column>
       <el-table-column
         header-align="center"
         align="center"
@@ -73,7 +107,7 @@
         </template>
       </el-table-column>
       <!-- <el-table-column align="center"  prop="date" label="资产"/> -->
-      <el-table-column align="center" prop="date" label="操作">
+      <el-table-column align="center" prop="date" label="操作" width="150">
         <template slot-scope="scope">
           <el-button @click="edit(scope.row.id)" size="mini" type="warning"
             >编辑</el-button
@@ -118,6 +152,20 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="头像" prop="avatar">
+          <el-upload
+            class="avatar-uploader"
+            action="/api/admin/uploadfile"
+            :data="{watermark:0}"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <span style="color:red;">尺寸要求100*100</span>
+        </el-form-item>
         <el-form-item label="手机号" prop="phone" v-if="form.player_type==2||form.player_type==3">
           <el-input
             clearable
@@ -278,6 +326,9 @@ export default {
         phone: [
           { required: true, message: "请输入用户手机号", trigger: "blur" },
         ],
+        avatar: [
+          { required: true, message: "请输入用户手机号", trigger: "change" },
+        ],
       },
       rules1: {
         match_id: [
@@ -356,6 +407,22 @@ export default {
         this.open = true;
       });
     },
+    handleAvatarSuccess(res, file) {
+      this.form.avatar = res.data.url;
+    },
+    beforeAvatarUpload(file) {
+      return;
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {