From 4d49021f4196bc7450cea3d89b109c8e70ed5c6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9D=E6=A2=A6=E5=9B=AD?= <zhumengyua@qq.com>
Date: Fri, 8 Sep 2023 18:15:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/api.config.js                   |   8 +-
 nuxt.config.js                         |   6 +-
 package.json                           |   3 +-
 pages/admin/tag/post/_tag_id.vue       |   3 +-
 pages/admin/topic/post/_topic_id.vue   |   3 +-
 pages/portfolio/post/_portfolio_id.vue | 159 ++++++++++++++++---------
 pages/user/settings/avatar.vue         |   3 +-
 plugins/vue-cropper.js                 |   6 +-
 8 files changed, 115 insertions(+), 76 deletions(-)

diff --git a/config/api.config.js b/config/api.config.js
index 85c6e65..2964e32 100644
--- a/config/api.config.js
+++ b/config/api.config.js
@@ -3,7 +3,7 @@ import {NODE_ENV} from '../environment'
 const apisMap = {
   development: {
     FE: 'http://localhost:3000',
-    BASE: 'http://localhost:8099/forest',
+    BASE: 'https://rymcu.com',
     CDN: '',
     PROXY: '/proxy',
     SOCKET: 'http://localhost:3000/ws',
@@ -12,11 +12,11 @@ const apisMap = {
     VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
   },
   test: {
-    FE: 'https://test.rymcu.com',
-    BASE: 'https://test.rymcu.com',
+    FE: 'https://rymcu.com',
+    BASE: 'https://rymcu.com',
     CDN: 'https://static.rymcu.com',
     PROXY: 'https://static.rymcu.com/proxy',
-    SOCKET: 'https://test.rymcu.com/wss',
+    SOCKET: 'https://rymcu.com/wss',
     GRAVATAR: 'https://static.rymcu.com/avatar',
     VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
     VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
diff --git a/nuxt.config.js b/nuxt.config.js
index 7043019..807b573 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -58,8 +58,8 @@ export default {
     {src: '~/plugins/axios'},
     {src: '~/plugins/element-ui'},
     {src: '~/plugins/vditor', ssr: false},
-    {src: '~/plugins/vue-sse'}
-    // {src: '~/plugins/vue-cropper', ssr: false}
+    {src: '~/plugins/vue-sse'},
+    {src: '~/plugins/vue-cropper', ssr: false}
   ],
   /*
   ** Nuxt.js dev-modules
@@ -116,7 +116,7 @@ export default {
   proxy: [  //proxy配置
     ['/api', {
       target: apiConfig.BASE,  //api请求路径
-      pathRewrite: {'^/api': isDevMode ? '/api/v1' : '/api'}  //重定向请求路径，防止路由、api路径的冲突
+      pathRewrite: {'^/api': isDevMode ? '/api' : '/api'}  //重定向请求路径，防止路由、api路径的冲突
     }],
     ['/ws', {
       target: apiConfig.BASE  //api请求路径
diff --git a/package.json b/package.json
index 160353b..895fc0a 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@babel/types": "^7.21.2",
     "@chenfengyuan/vue-qrcode": "^1.0.2",
     "@nuxtjs/auth-next": "^5.0.0-1667386184.dfbbb54",
     "@nuxtjs/axios": "^5.13.1",
@@ -27,7 +28,7 @@
     "save-svg-as-png": "^1.4.17",
     "simple-icons": "^6.23.0",
     "vditor": "^3.8.18",
-    "vue-cropperjs": "^4.2.0",
+    "vue-cropper": "^0.6.2",
     "vue-sse": "^2.5.2",
     "vuejs-avataaars": "^4.0.1"
   },
diff --git a/pages/admin/tag/post/_tag_id.vue b/pages/admin/tag/post/_tag_id.vue
index e0df7d7..d6ea2c8 100644
--- a/pages/admin/tag/post/_tag_id.vue
+++ b/pages/admin/tag/post/_tag_id.vue
@@ -120,8 +120,7 @@
 <script>
 import Vue from "vue";
 import {mapState} from 'vuex';
-import VueCropper from "vue-cropperjs";
-import 'cropperjs/dist/cropper.css';
+import VueCropper from "vue-cropper";
 import apiConfig from '~/config/api.config';
 
 export default {
diff --git a/pages/admin/topic/post/_topic_id.vue b/pages/admin/topic/post/_topic_id.vue
index 8404dfc..e11f6ed 100644
--- a/pages/admin/topic/post/_topic_id.vue
+++ b/pages/admin/topic/post/_topic_id.vue
@@ -118,8 +118,7 @@
 <script>
 import Vue from 'vue';
 import {mapState} from 'vuex';
-import VueCropper from 'vue-cropperjs';
-import 'cropperjs/dist/cropper.css';
+import VueCropper from 'vue-cropper';
 import apiConfig from '~/config/api.config';
 
 export default {
diff --git a/pages/portfolio/post/_portfolio_id.vue b/pages/portfolio/post/_portfolio_id.vue
index c8634ba..3d85a4a 100644
--- a/pages/portfolio/post/_portfolio_id.vue
+++ b/pages/portfolio/post/_portfolio_id.vue
@@ -31,41 +31,50 @@
         </el-col>
         <el-col :span="6">
           <el-card>
-            <vue-cropper
-              :aspect-ratio="1"
-              :autoCrop="autoCrop"
-              :autoCropArea="1"
-              :fixedNumber="[1,2]"
-              :checkCrossOrigin="false"
-              :checkOrientation="false"
-              :imgStyle="{'width': '200px'}"
-              :img="headImgUrl"
-              preview=".preview"
-              ref="cropper"
-              v-if="headImgUrl"
-            />
-
-            <div class="preview preview-large"/>
-            <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
-            <div class="portfolioDescription">
-              {{ portfolio.portfolioDescription }}
-            </div>
-            <el-upload
-              :before-upload="beforeAvatarUpload"
-              :multiple="true"
-              :show-file-list="false"
-              action=""
-              class="avatar-uploader">
-              <div>
-                <el-button plain round type="primary">上传</el-button>
+            <div>
+              <div class="cropperBox">
+                <vue-cropper
+                  :aspect-ratio="1"
+                  :autoCrop="autoCrop"
+                  :autoCropArea="1"
+                  :fixedNumber="[1,2]"
+                  :checkCrossOrigin="false"
+                  :checkOrientation="false"
+                  :img="headImgUrl"
+                  preview=".preview"
+                  ref="cropper"
+                  @realTime="realTime"
+                />
               </div>
-            </el-upload>
-            <el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置
-            </el-button>
-            <el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
-            <p style="color: red;padding-right: 5px;">*
-              <span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
-            </p>
+              <div class="cropperBox">
+                <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
+                     style="overflow:hidden;margin: 0 auto">
+                  <img :src="cropImg.url" :style="cropImg.img">
+                </div>
+              </div>
+
+              <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
+              <div class="portfolioDescription">
+                {{ portfolio.portfolioDescription }}
+              </div>
+
+              <div class="button_box">
+
+                <el-upload
+                  :before-upload="beforeAvatarUpload"
+                  :multiple="true"
+                  :show-file-list="false"
+                  action=""
+                  class="avatar-uploader">
+                  <div>
+                    <el-button plain round type="primary">上传</el-button>
+                  </div>
+                </el-upload>
+
+                <el-button @click="reset" style="margin-left: 10px" plain round type="primary">重置
+                </el-button>
+              </div>
+            </div>
           </el-card>
         </el-col>
       </el-row>
@@ -85,8 +94,6 @@
 <script>
 import Vue from 'vue';
 import {mapState} from 'vuex';
-import VueCropper from 'vue-cropperjs';
-import 'cropperjs/dist/cropper.css';
 import apiConfig from '~/config/api.config';
 
 export default {
@@ -103,9 +110,7 @@ export default {
         .catch(err => error({statusCode: 404}))
     ])
   },
-  components: {
-    VueCropper
-  },
+
   computed: {
     ...mapState({
       portfolioDetail: state => state.portfolio.detail.data,
@@ -160,6 +165,10 @@ export default {
     }
   },
   methods: {
+    realTime(data) {
+      console.log(data)
+      this.cropImg = data
+    },
     _initEditor(data) {
       //初始化
       let _ts = this;
@@ -256,7 +265,7 @@ export default {
       if (res && res.data && res.data.url) {
         let portfolio = _ts.portfolio;
         portfolio.headImgUrl = res.data.url;
-        portfolio.headImgType = '0';
+        // portfolio.headImgType = '0';
         _ts.$set(_ts, 'portfolio', portfolio);
         _ts.$set(_ts, 'headImgUrl', res.data.url);
       } else {
@@ -284,13 +293,13 @@ export default {
       reader.readAsDataURL(file);
       reader.onload = function () {
         _ts.$set(_ts, 'headImgUrl', this.result);
-        _ts.$refs.cropper?.replace(this.result);
+        // _ts.$refs.cropper?.replace(this.result);
       }
     },
     async updatePortfolio() {
       //headImgUrl
       let _ts = this;
-      this.cropImage()
+      // this.cropImage()
       _ts.$set(_ts, 'loading', true);
       let id = _ts.idPortfolio;
       let portfolioDescription = _ts.contentEditor.getValue();
@@ -298,6 +307,12 @@ export default {
       let data = _ts.portfolio;
       data.portfolioDescription = portfolioDescription;
       data.portfolioDescriptionHtml = portfolioDescriptionHtml;
+      data.headImgUrl = _ts.headImgUrl
+      data.headImgType = '0';
+
+      //       // _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
+
+      console.log(data)
       if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
         this.$message.error('请输入必填信息');
         return false
@@ -346,24 +361,31 @@ export default {
       });
     },
     reset() {
-      this.$refs.cropper.reset();
+      this.headImgUrl = ''
+      // this.$refs.cropper.clearCrop()
     },
     // get image data for post processing, e.g. upload or setting image src
-    cropImage() {
-      let _ts = this;
-      try {
-        _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
-        let portfolio = _ts.portfolio;
-        portfolio.headImgUrl = _ts.cropImg;
-        portfolio.headImgType = '0';
-        _ts.$set(_ts, 'portfolio', portfolio);
-        _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
-        _ts.$message.success('已裁剪 !');
-      } catch (e) {
-        _ts.$message.error('图片获取失败 !');
-        return;
-      }
-    }
+    // cropImage() {
+    //   let _ts = this;
+    //   try {
+    //     _ts.cropImg = _ts.$refs.cropper.startCrop();
+    //     this.$refs.cropper.getCropData(data => {
+    //       console.log(data)
+    //       return false
+    //       // do something
+    //       let portfolio = data;
+    //       // portfolio.headImgUrl = data;
+    //       // portfolio.headImgType = '0';
+    //       _ts.$set(_ts, 'portfolio', portfolio);
+    //       // _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
+    //       _ts.$message.success('已裁剪 !');
+    //     })
+    //
+    //   } catch (e) {
+    //     _ts.$message.error('图片获取失败 !');
+    //     return;
+    //   }
+    // }
   },
   beforeRouteLeave(to, from, next) {
     let _ts = this;
@@ -443,6 +465,10 @@ export default {
 <style lang="less">
 @import "~vditor/src/assets/less/index.less";
 
+.button_box {
+  display: flex;
+}
+
 .wrapper_portfolio {
   width: 100%;
   max-width: 100%;
@@ -478,10 +504,16 @@ export default {
 
 .preview-large {
   width: 100%;
-  height: 480px;
+  height: 380px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   background-color: #ffffff;
   overflow: hidden;
+  border: 1px solid red;
+
+  > img {
+    display: block;
+    margin: 0 auto;
+  }
 }
 
 .portfolioDescription {
@@ -496,4 +528,13 @@ export default {
   -webkit-line-clamp: 3;
   word-break: break-all;
 }
+
+.cropperBox {
+  width: 100%;
+  height: 300px;
+  margin-bottom: 20px;
+  border: 1px solid #F2F6FC;
+}
+
+
 </style>
diff --git a/pages/user/settings/avatar.vue b/pages/user/settings/avatar.vue
index 41a6d64..0dbbf58 100644
--- a/pages/user/settings/avatar.vue
+++ b/pages/user/settings/avatar.vue
@@ -75,8 +75,7 @@
 import {mapState} from 'vuex';
 import Avataaars from 'vuejs-avataaars';
 import saveSvg from 'save-svg-as-png';
-import VueCropper from 'vue-cropperjs';
-import 'cropperjs/dist/cropper.css';
+import VueCropper from 'vue-cropper';
 
 const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
 export default {
diff --git a/plugins/vue-cropper.js b/plugins/vue-cropper.js
index ef1ab55..e020006 100644
--- a/plugins/vue-cropper.js
+++ b/plugins/vue-cropper.js
@@ -1,4 +1,4 @@
+import vueCropper from 'vue-cropper';
 import Vue from 'vue';
-import VueCropper from 'vue-cropperjs';
-import 'cropperjs/dist/cropper.css';
-Vue.component('vue-cropper', VueCropper);
+
+Vue.use(vueCropper);