From 6315693bcbec6683c8ad8f9fb27eabd7a6c6dc35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9D=E6=A2=A6=E5=9B=AD?= <zhumengyua@qq.com>
Date: Mon, 19 Feb 2024 18:39:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98-=E6=88=AA=E5=9B=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ImgCropper.vue            | 276 ++++++++++++++++++++++++
 pages/admin.vue                      |  28 ++-
 pages/admin/topic/_topic_uri.vue     |   5 +-
 pages/admin/topic/post/_topic_id.vue |  30 ++-
 pages/user/settings/account.vue      | 308 +++++++++++++++------------
 5 files changed, 483 insertions(+), 164 deletions(-)
 create mode 100644 components/ImgCropper.vue

diff --git a/components/ImgCropper.vue b/components/ImgCropper.vue
new file mode 100644
index 0000000..b5d7383
--- /dev/null
+++ b/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>
diff --git a/pages/admin.vue b/pages/admin.vue
index 9149f82..d5bd9a0 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -15,18 +15,26 @@
         </el-menu>
       </el-col>
       <el-col :span="20">
-        <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"
-          >
+        <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">
+              </el-tab-pane>
+            </el-tabs>
+
+          </el-row>
+          <el-row>
             <nuxt-child keep-alive
                         :keep-alive-props="{include: editableTabs}"/>
-          </el-tab-pane>
-        </el-tabs>
+          </el-row>
+
+        </el-card>
       </el-col>
     </el-col>
     <el-col v-else class="text-center">
diff --git a/pages/admin/topic/_topic_uri.vue b/pages/admin/topic/_topic_uri.vue
index 64e1356..3bcb61a 100644
--- a/pages/admin/topic/_topic_uri.vue
+++ b/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>
 
diff --git a/pages/admin/topic/post/_topic_id.vue b/pages/admin/topic/post/_topic_id.vue
index e11f6ed..7a3a1ac 100644
--- a/pages/admin/topic/post/_topic_id.vue
+++ b/pages/admin/topic/post/_topic_id.vue
@@ -23,17 +23,24 @@
         <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"
-              />
+<!--              <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
+                              :autoCrop="autoCrop"
+                              :img="topicIconPath"
+                              ref="cropper"
+                              :fixed="true"
+                            />
             </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
               <el-col :span="8">
@@ -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">
diff --git a/pages/user/settings/account.vue b/pages/user/settings/account.vue
index 9872f3f..6db53fd 100644
--- a/pages/user/settings/account.vue
+++ b/pages/user/settings/account.vue
@@ -1,157 +1,181 @@
 <template>
-  <client-only>
-    <el-row>
-      <el-col>
-        <h1>基本信息</h1>
-      </el-col>
-      <el-col>
-        <el-form :model="user" :rules="rules" ref="user" label-width="100px">
-          <el-form-item label="昵称" prop="nickname">
-            <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
-          </el-form-item>
-          <el-form-item label="性别">
-            <el-radio-group v-model="user.sex">
-              <el-radio border label="0">保密</el-radio>
-              <el-radio border label="1">男</el-radio>
-              <el-radio border label="2">女</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="个人介绍" prop="signature">
-            <el-input type="textarea" v-model="user.signature"></el-input>
-          </el-form-item>
-          <el-form-item style="text-align: right;">
-            <el-button type="primary" round plain @click="updateUserInfo">保存基本信息</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col>
-        <h1>社交信息</h1>
-      </el-col>
-      <el-col>
-        <el-form :model="userExtend" ref="userExtend" label-width="100px">
-          <el-form-item label="博客" prop="signature">
-            <el-input placeholder="设置后将会公开你的博客" v-model="userExtend.blog">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="github" prop="signature">
-            <el-input placeholder="yourname" v-model="userExtend.github">
-              <template slot="prepend">https://github.com/</template>
-            </el-input>
-          </el-form-item>
-          <el-form-item label="微博" prop="signature">
-            <el-input placeholder="yourname" v-model="userExtend.weibo">
-              <template slot="prepend">https://weibo.com/n/</template>
-            </el-input>
-          </el-form-item>
-          <el-form-item label="微信" prop="signature">
-            <el-input placeholder="设置后将会公开你的微信" v-model="userExtend.weixin">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="QQ" prop="signature">
-            <el-input placeholder="设置后将会公开你的 QQ" v-model="userExtend.qq">
-            </el-input>
-          </el-form-item>
-          <el-form-item style="text-align: right;">
-            <el-button type="primary" round plain @click="updateUserExtend">保存社交信息</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-  </client-only>
+  <el-card>
+    <client-only>
+      <el-row>
+        <el-col>
+          <h1>基本信息</h1>
+        </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>
+            <el-form-item label="性别">
+              <el-radio-group v-model="user.sex">
+                <el-radio border label="0">保密</el-radio>
+                <el-radio border label="1">男</el-radio>
+                <el-radio border label="2">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="个人介绍" prop="signature">
+              <el-input type="textarea" v-model="user.signature"></el-input>
+            </el-form-item>
+            <el-form-item style="text-align: right;">
+              <el-button type="primary" round plain @click="updateUserInfo">保存基本信息</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col>
+          <h1>社交信息</h1>
+        </el-col>
+        <el-col>
+          <el-form :model="userExtend" ref="userExtend" label-width="100px">
+            <el-form-item label="博客" prop="signature">
+              <el-input placeholder="设置后将会公开你的博客" v-model="userExtend.blog">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="github" prop="signature">
+              <el-input placeholder="yourname" v-model="userExtend.github">
+                <template slot="prepend">https://github.com/</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="微博" prop="signature">
+              <el-input placeholder="yourname" v-model="userExtend.weibo">
+                <template slot="prepend">https://weibo.com/n/</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="微信" prop="signature">
+              <el-input placeholder="设置后将会公开你的微信" v-model="userExtend.weixin">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="QQ" prop="signature">
+              <el-input placeholder="设置后将会公开你的 QQ" v-model="userExtend.qq">
+              </el-input>
+            </el-form-item>
+            <el-form-item style="text-align: right;">
+              <el-button type="primary" round plain @click="updateUserExtend">保存社交信息</el-button>
+            </el-form-item>
+          </el-form>
+        </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 {
-    name: "account",
-    middleware: 'auth',
-    computed: {
-      ...mapState({
-        idUser: state => state.auth.user.idUser
-      })
-    },
-    data() {
-      return {
-        user: {},
-        userExtend: {},
-        rules: {
-          nickname: [
-            {required: true, message: '请输入昵称', trigger: 'blur'},
-            {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
-          ],
-          email: [
-            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
-            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
-          ]
-        },
-        loading: false
-      }
-    },
-    methods: {
-      getData() {
-        let _ts = this;
-        _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
-          if (res) {
-            _ts.$set(_ts, 'user', res);
-          }
-        })
-        _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
-          if (res) {
-            _ts.$set(_ts, 'userExtend', res);
-          }
-        })
+export default {
+  name: "account",
+  middleware: 'auth',
+  components: {
+    ImgCropper, VueCropper
+  },
+  computed: {
+    ...mapState({
+      idUser: state => state.auth.user.idUser
+    }),
+  },
+  data() {
+    return {
+      user: {},
+      userExtend: {},
+      rules: {
+        nickname: [
+          {required: true, message: '请输入昵称', trigger: 'blur'},
+          {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
+        ],
+        email: [
+          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
+          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
+        ]
       },
-      checkNickname() {
-        let _ts = this;
-        _ts.$axios.$get('/api/user-info/check-nickname', {
-          params: {
-            idUser: _ts.user.idUser,
-            nickname: _ts.user.nickname
-          }
-        }).then(function (res) {
-          if (!res) {
-            _ts.$message.error('昵称已被占用!');
-          }
-        })
-      },
-      updateUserInfo() {
-        let _ts = this;
-        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('更新成功 !');
-              }
-            })
+      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.$message.error('数据异常 !');
-          }
-        });
-      },
-      updateUserExtend() {
-        let _ts = this;
-        let userExtend = _ts.userExtend;
-        _ts.$axios.$patch('/api/user-info/update-extend', userExtend).then(function (res) {
-          if (res) {
-            _ts.$set(_ts, 'userExtend', res);
+            _ts.$set(_ts, 'user', res);
+            // _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
+            // _ts.$store.commit('setUserInfo', res);
             _ts.$message.success('更新成功 !');
           }
-        })
-      }
+        }
+      })
+
     },
-    mounted() {
-      this.$store.commit('setActiveMenu', 'account');
-      this.getData();
+    getData() {
+      let _ts = this;
+      _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
+        if (res) {
+          // _ts.$set(_ts, 'user', res);
+          _ts.user = res
+        }
+      })
+      _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
+        if (res) {
+          _ts.$set(_ts, 'userExtend', res);
+        }
+      })
+    },
+    checkNickname() {
+      let _ts = this;
+      _ts.$axios.$get('/api/user-info/check-nickname', {
+        params: {
+          idUser: _ts.user.idUser,
+          nickname: _ts.user.nickname
+        }
+      }).then(function (res) {
+        if (!res) {
+          _ts.$message.error('昵称已被占用!');
+        }
+      })
+    },
+    updateUserInfo() {
+      let _ts = this;
+      let user = _ts.user;
+      _ts.updateUser(user);
+    },
+
+    updateUserExtend() {
+      let _ts = this;
+      let userExtend = _ts.userExtend;
+      _ts.$axios.$patch('/api/user-info/update-extend', userExtend).then(function (res) {
+        if (res) {
+          _ts.$set(_ts, 'userExtend', res);
+          _ts.$message.success('更新成功 !');
+        }
+      })
     }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'account');
+    this.getData();
   }
+}
 </script>
 
 <style scoped>