暂存-截图组件封装

components/ImgCropper.vue

@@ -0,0 +1,276 @@
+<template>
+  <el-dialog title="请裁剪图片" v-bind='$attrs' v-on='$listeners' @open='onOpen' @close='onClose' :title='dialogTitle'
+             :close-on-click-modal="false">
+    <el-row>
+      <el-col :span="12">
+        <client-only>
+          <div class="cropperBox">
+            <vue-cropper
+              :autoCrop="autoCrop"
+              :img="newAvatarUrl"
+              ref="cropper"
+              :fixed="true"
+              @realTime="realTime"
+            />
+          </div>
+        </client-only>
+      </el-col>
+      <el-col :span="24" style="margin-top: 2rem;">
+        <el-col :span="8" style="max-width: 20rem;max-height: 20rem;">
+          <div class="preview preview-large" :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
+               style="overflow:hidden;margin: 0 auto">
+            <img :src="cropImg.url" :style="cropImg.img">
+          </div>
+        </el-col>
+      </el-col>
+      <el-col :span="24" style="margin-top: 2rem;">
+        <el-upload
+          style="float: left"
+          class="avatar-uploader"
+          action=""
+          :multiple="true"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload">
+          <div>
+            <el-button type="primary" round plain>上传</el-button>
+          </div>
+        </el-upload>
+        <!--        <el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button>-->
+        <el-button style="margin-left: 20px;float: left" type="primary" round plain @click.prevent="reset">重置
+        </el-button>
+        <!--        <el-button type="primary" round plain @click.prevent="updateUser">提交</el-button>-->
+      </el-col>
+    </el-row>
+
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="close">取 消</el-button>
+          <el-button type="primary" @click="onSubmit">确 定</el-button>
+  </span>
+  </el-dialog>
+</template>
+
+<script>
+// import VueCropper from "vue-cropper";
+
+export default {
+  name: "ImgCropper",
+  data() {
+    return {
+      dialogTitle: '裁剪图片',
+      autoCrop: true,
+      cropImg: '',
+      oldAvatarUrl: '',
+      newAvatarUrl: ''
+    }
+  },
+  // components: {
+  //   VueCropper
+  // },
+  props: {
+    avatarUrl: {
+      type: [String, Object]
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.cropper.getCropData(data => {
+        console.log(data)
+        this.$emit('onSubmit',data)
+
+        // _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
+        //   if (res) {
+        //     if (res.message) {
+        //       _ts.$message.error(res.message);
+        //     } else {
+        //       _ts.$set(_ts, 'user', res);
+        //       _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
+        //       _ts.$store.commit('setUserInfo', res);
+        //       _ts.$message.success('更新成功 !');
+        //     }
+        //   }
+        // })
+      });
+
+      /*
+            this.$emit('onSubmit',this.cropImg)
+      */
+    },
+    onOpen() {
+      this.oldAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))
+      this.newAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))
+    },
+    onClose() {
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    realTime(data) {
+      console.log(data)
+      this.cropImg = data;
+      // this.$emit('cropImg', data)
+    },
+    handleAvatarSuccess(res) {
+      let _ts = this;
+      if (res && res.data && res.data.url) {
+        console.log(res.data.url)
+        // let user = _ts.user;
+        // user.avatarUrl = res.data.url;
+        user.avatarType = '0';
+        _ts.$set(_ts, 'newAvatarUrl', res.data.url);
+      } else {
+        _ts.$message.error('上传失败!');
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!(isJPG || isPNG)) {
+        this.$message.error('上传头像只能是 JPG 或者 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像大小不能超过 2MB!');
+        return false;
+      }
+      this.fileToBase64(file);
+      return false;
+    },
+    reset() {
+      this.newAvatarUrl = JSON.parse(JSON.stringify(this.oldAvatarUrl))
+      // this.$refs.cropper.clearCrop();
+    },
+    fileToBase64(file) {
+      let _ts = this;
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        _ts.$set(_ts, 'newAvatarUrl', this.result);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.cropperBox {
+  width: 100%;
+  height: 256px;
+  margin-bottom: 20px;
+  border: 1px solid #F2F6FC;
+}
+
+.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: 16rem;
+  height: 16rem;
+  line-height: 16rem;
+  text-align: center;
+}
+
+.avatar {
+  width: 16rem;
+  height: 16rem;
+  display: block;
+}
+
+.preview-area {
+  width: 16rem;
+}
+
+.preview-area p {
+  font-size: 1.25rem;
+}
+
+.preview-area p:last-of-type {
+  margin-top: 1rem;
+}
+
+.crop-placeholder {
+  width: 36px;
+  height: 36px;
+  background: #ccc;
+}
+
+.cropped-image img {
+  max-width: 100%;
+}
+
+.img-cropper {
+  width: 740px;
+  min-height: 360px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+}
+
+.preview-large img {
+  object-fit: contain;
+  width: 16rem;
+  height: 16rem;
+}
+
+.preview-large {
+  width: 16rem;
+  height: 16rem;
+  margin-bottom: 1rem;
+  margin-top: 3rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.preview-medium img {
+  object-fit: contain;
+  width: 8rem;
+  height: 8rem;
+}
+
+
+.preview-medium {
+  width: 8rem;
+  height: 8rem;
+  margin-bottom: 1rem;
+  margin-top: 11rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  overflow: hidden;
+
+}
+
+
+.preview-small {
+  width: 2rem;
+  height: 2rem;
+  margin-bottom: 1rem;
+  margin-top: 17rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.preview-small img {
+  object-fit: contain;
+  width: 2rem;
+  height: 2rem;
+}
+
+</style>

pages/admin.vue

@@ -15,18 +15,26 @@
         </el-menu>
       </el-col>
       <el-col :span="20">
+        <el-card>
+
+          <el-row>
             <el-tabs :value="editableTabsValue" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClick">
               <el-tab-pane
                 :key="item.name"
                 v-for="(item, index) in editableTabs"
                 :label="item.title"
                 :name="item.name"
-            :closable="item.closable"
+                :closable="item.closable">
-          >
-            <nuxt-child keep-alive
-                        :keep-alive-props="{include: editableTabs}"/>
               </el-tab-pane>
             </el-tabs>
+
+          </el-row>
+          <el-row>
+            <nuxt-child keep-alive
+                        :keep-alive-props="{include: editableTabs}"/>
+          </el-row>
+
+        </el-card>
       </el-col>
     </el-col>
     <el-col v-else class="text-center">

pages/admin/topic/_topic_uri.vue

@@ -107,6 +107,7 @@ export default {
       })
     },
     handleCommand(command) {
+      console.log(command)
       let _ts = this;
       if ("admin-post-topic" === command) {
         _ts.$router.push({
@@ -142,7 +143,9 @@ export default {
       }).catch(() => {
       });
     }
-  }
+  },
+
+
 }
 </script>
 

pages/admin/topic/post/_topic_id.vue

@@ -23,16 +23,23 @@
         <el-form-item label="图标">
           <el-row>
             <el-col :span="24">
+<!--              <vue-cropper-->
+<!--                ref="cropper"-->
+<!--                :aspect-ratio="1 / 1"-->
+<!--                :src="topicIconPath"-->
+<!--                :checkCrossOrigin="false"-->
+<!--                :checkOrientation="false"-->
+<!--                :imgStyle="{width: '480px', height: '480px'}"-->
+<!--                :autoCropArea="1"-->
+<!--                :autoCrop="autoCrop"-->
+<!--                preview=".preview"-->
+<!--              />-->
+              {{topicIconPath}}
                             <vue-cropper
-                ref="cropper"
-                :aspect-ratio="1 / 1"
-                :src="topicIconPath"
-                :checkCrossOrigin="false"
-                :checkOrientation="false"
-                :imgStyle="{width: '480px', height: '480px'}"
-                :autoCropArea="1"
                               :autoCrop="autoCrop"
-                preview=".preview"
+                              :img="topicIconPath"
+                              ref="cropper"
+                              :fixed="true"
                             />
             </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
@@ -41,6 +48,7 @@
                   <div class="card-body d-flex flex-column">
                     <el-col :span="4" style="text-align: right;">
                       <div v-if="topicIconPath" class="preview preview-large topic-brand-img"/>
+
                       <el-image v-else class="topic-brand-img" />
                     </el-col>
                     <el-col :span="20">

pages/user/settings/account.vue

@@ -1,4 +1,5 @@
 <template>
+  <el-card>
     <client-only>
       <el-row>
         <el-col>
@@ -6,6 +7,10 @@
         </el-col>
         <el-col>
           <el-form :model="user" :rules="rules" ref="user" label-width="100px">
+            <el-form-item>
+              <img :src="user.avatarUrl" style="width: 100px;height: 100px" @click="visible=true">
+              <!--              <el-image :src="user.avatarUrl"></el-image>-->
+            </el-form-item>
             <el-form-item label="昵称" prop="nickname">
               <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
             </el-form-item>
@@ -58,18 +63,27 @@
         </el-col>
       </el-row>
     </client-only>
+    <ImgCropper @onSubmit="updateUser" :visible.sync='visible' :avatarUrl="user.avatarUrl||''"></ImgCropper>
+
+  </el-card>
+
 </template>
 
 <script>
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
+import ImgCropper from "~/components/ImgCropper.vue";
+import VueCropper from "vue-cropper";
 
-  export default {
+export default {
   name: "account",
   middleware: 'auth',
+  components: {
+    ImgCropper, VueCropper
+  },
   computed: {
     ...mapState({
       idUser: state => state.auth.user.idUser
-      })
+    }),
   },
   data() {
     return {
@@ -85,15 +99,40 @@
           {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
         ]
       },
-        loading: false
+      loading: false,
+      visible: false
+    }
+  },
+  watch: {
+    user() {
+      console.log(this.user)
     }
   },
   methods: {
+    updateUser(data) {
+      let _ts = this;
+      let user = _ts.user;
+      user.avatarUrl = data
+      _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
+        if (res) {
+          if (res.message) {
+            _ts.$message.error(res.message);
+          } else {
+            _ts.$set(_ts, 'user', res);
+            // _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
+            // _ts.$store.commit('setUserInfo', res);
+            _ts.$message.success('更新成功 !');
+          }
+        }
+      })
+
+    },
     getData() {
       let _ts = this;
       _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
         if (res) {
-            _ts.$set(_ts, 'user', res);
+          // _ts.$set(_ts, 'user', res);
+          _ts.user = res
         }
       })
       _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
@@ -120,22 +159,7 @@
       let user = _ts.user;
       _ts.updateUser(user);
     },
-      updateUser(user) {
+
-        let _ts = this;
-        _ts.$refs['user'].validate((valid) => {
-          if (valid) {
-            _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
-              if (res) {
-                _ts.$set(_ts, 'user', res);
-                _ts.$store.commit('setUserInfo', res);
-                _ts.$message.success('更新成功 !');
-              }
-            })
-          } else {
-            _ts.$message.error('数据异常 !');
-          }
-        });
-      },
     updateUserExtend() {
       let _ts = this;
       let userExtend = _ts.userExtend;
@@ -151,7 +175,7 @@
     this.$store.commit('setActiveMenu', 'account');
     this.getData();
   }
-  }
+}
 </script>
 
 <style scoped>