🐛 修复作品集图片裁剪问题

2023-10-07 10:38:23 +08:00 · 2023-10-07 10:38:23 +08:00 · 76113de0a8
commit 76113de0a8
parent 1fd0ea1a9b 67401b55ec
3 changed files with 163 additions and 91 deletions
--- a/components/common/portfolio/list.vue
+++ b/components/common/portfolio/list.vue
@ -2,28 +2,15 @@
  <div class="wrapper">
    <el-row class="row-cards row-deck" :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" v-for="portfolio in portfolios.list" :key="portfolio.idPortfolio">
-        <el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;">
-          <el-card :body-style="{ padding: '20px' }">
+        <el-col style="margin-bottom: 20px;">
+          <el-card>
            <el-col :span="12">
-              <el-image :src="portfolio.headImgUrl" style="width:96px;height: 96px;border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"
-                        :preview-src-list="[portfolio.headImgUrl]"></el-image>
-            </el-col>
-            <el-col :span="12" style="padding-top: 30px;text-align: right;">
-              <el-button @click="onRouter('portfolio', portfolio.idPortfolio)" round>阅读</el-button>
-            </el-col>
-            <el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
-              <span v-html="portfolio.portfolioTitle"></span>
-            </el-col>
-            <el-col style="padding-bottom: 20px;font-size: 14px;">
-              <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
-            </el-col>
-          </el-card>
-        </el-col>
-        <el-col v-else style="margin-bottom: 20px;">
-          <el-card :body-style="{ padding: '20px' }">
-            <el-col :span="12">
-              <el-image style="width:96px;height: 96px;border-radius: 10px;border: #f5f7fa solid 2px;">
-                <div slot="error" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
+              <el-image :src="portfolio.headImgUrl"
+                        style="width:96px;height: 96px;border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;"
+                        fit="cover"
+                        :preview-src-list="[portfolio.headImgUrl]">
+                <div v-if="portfolio.headImgUrl" slot="error"
+                     style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                  无图片
                </div>
              </el-image>
@ -32,7 +19,7 @@
              <el-button @click="onRouter('portfolio', portfolio.idPortfolio)" round>阅读</el-button>
            </el-col>
            <el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
-              <span v-html="portfolio.portfolioTitle"></span>
+              <span class="portTitle" v-html="portfolio.portfolioTitle"></span>
            </el-col>
            <el-col style="padding-bottom: 20px;font-size: 14px;">
              <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
@ -198,4 +185,13 @@ h3, .h3 {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
 }
+
+.portTitle {
+  display: block;
+  /*border: 1px solid red;*/
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
--- a/pages/portfolio/manager/_portfolio_id.vue
+++ b/pages/portfolio/manager/_portfolio_id.vue
@ -26,12 +26,17 @@
      <el-col>
        <el-col style="text-align: right;">
          <el-col>
-            <el-link rel="nofollow" @click="onRouter('post-portfolio',portfolio.idPortfolio)" :underline="false" class="text-default"
+            <el-link rel="nofollow" @click="onRouter('post-portfolio',portfolio.idPortfolio)" :underline="false"
+                     class="text-default"
                     style="margin-right: 1rem;">编辑
            </el-link>
-            <el-link rel="nofollow" @click="showBindArticleDialog(portfolio.idPortfolio)" :underline="false" class="text-default"
+            <el-link rel="nofollow" @click="showBindArticleDialog(portfolio.idPortfolio)" :underline="false"
+                     class="text-default"
                     style="margin-right: 1rem;">添加文章
            </el-link>
+            <el-link rel="nofollow" @click="handleDel" :underline="false"
+                     type="danger" style="margin-right: 1rem;">删除作品集
+            </el-link>
          </el-col>
        </el-col>
        <el-col>
@ -55,66 +60,104 @@
 </template>

 <script>
-  import {mapState} from 'vuex';
-  import PortfolioManagerList from "~/components/common/portfolio/manager/list";
+import {mapState} from 'vuex';
+import PortfolioManagerList from "~/components/common/portfolio/manager/list";

-  export default {
-    name: "PortfolioManager",
-    components: {
-      PortfolioManagerList
-    },
-    validate({params, store}) {
-      return params.portfolio_id && !isNaN(Number(params.portfolio_id))
-    },
-    fetch() {
-      let {store, params, error} = this.$nuxt.context
-      return Promise.all([
-        store
-          .dispatch('portfolio/fetchDetail', params)
-          .catch(err => error({statusCode: 404}))
-      ])
-    },
-    computed: {
-      ...mapState({
-        portfolio: state => state.portfolio.detail.data
-      }),
-      isAuthor() {
-        let account = this.$store.state.auth.user?.nickname;
-        if (account) {
-          if (account === this.portfolio.portfolioAuthorName) {
-            return true;
-          }
+export default {
+  name: "PortfolioManager",
+  components: {
+    PortfolioManagerList
+  },
+  validate({params, store}) {
+    return params.portfolio_id && !isNaN(Number(params.portfolio_id))
+  },
+  fetch() {
+    let {store, params, error} = this.$nuxt.context
+    return Promise.all([
+      store
+        .dispatch('portfolio/fetchDetail', params)
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  computed: {
+    ...mapState({
+      portfolio: state => state.portfolio.detail.data
+    }),
+    isAuthor() {
+      let account = this.$store.state.auth.user?.nickname;
+      if (account) {
+        if (account === this.portfolio.portfolioAuthorName) {
+          return true;
        }
-        return false;
      }
+      return false;
    },
-    methods: {
-      onRouter(name, data) {
-        if (name === 'article') {
-          this.$router.push({
-            path: data
-          })
-        } else if (name === 'user') {
-          this.$router.push(
-            {
-              path: '/user/' + data
-            }
-          )
-        } else {
-          this.$router.push(
-            {
-              path: '/portfolio/post/' + data
-            }
-          )
-        }
-      },
-      showBindArticleDialog(idPortfolio) {
+    idPortfolio() {
+      return this.$route.params.portfolio_id ? this.$route.params.portfolio_id : 0
+    }
+  },
+  methods: {
+    onRouter(name, data) {
+      if (name === 'article') {
        this.$router.push({
-          path: `/portfolio/manager/bind/${idPortfolio}`
-        });
+          path: data
+        })
+      } else if (name === 'user') {
+        this.$router.push(
+          {
+            path: '/user/' + data
+          }
+        )
+      } else {
+        this.$router.push(
+          {
+            path: '/portfolio/post/' + data
+          }
+        )
      }
+    },
+    showBindArticleDialog(idPortfolio) {
+      this.$router.push({
+        path: `/portfolio/manager/bind/${idPortfolio}`
+      });
+    },
+    handleDel() {
+      let _ts = this;
+      _ts.$confirm(`确定删除【${_ts.portfolio.portfolioTitle}】该作品集合集吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log(_ts.portfolio.articleNumber)
+        if (Number(_ts.portfolio.articleNumber) === 0) {
+          _ts.$axios.$delete('/api/portfolio/delete', {
+            params: {
+              idPortfolio: _ts.idPortfolio
+            }
+          }).then(function (res) {
+            if (res) {
+              _ts.$set(_ts, 'notificationFlag', false);
+              _ts.$router.push({
+                path: '/user/' + _ts.$store.state.auth.user?.account
+              })
+            }
+          })
+        } else {
+          _ts.$message({
+            type: 'error',
+            message: '请先删除文章'
+          });
+        }
+
+      }).catch(() => {
+        _ts.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
    }
  }
+}
 </script>

 <style scoped>
--- a/pages/portfolio/post/_portfolio_id.vue
+++ b/pages/portfolio/post/_portfolio_id.vue
@ -24,7 +24,7 @@
              <el-form-item class="text-right">
                <el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
                <el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
-                <el-button @click="updatePortfolio" v-else>提交</el-button>
+                <el-button @click="submitData" v-else>提交</el-button>
              </el-form-item>
            </el-form>
          </el-card>
@ -37,7 +37,8 @@
                  :aspect-ratio="1"
                  :autoCrop="autoCrop"
                  :autoCropArea="1"
-                  :fixedNumber="[1,2]"
+                  fixed
+                  :fixedNumber="[1,1]"
                  :checkCrossOrigin="false"
                  :checkOrientation="false"
                  :img="headImgUrl"
@ -264,7 +265,6 @@ export default {
      if (res && res.data && res.data.url) {
        let portfolio = _ts.portfolio;
        portfolio.headImgUrl = res.data.url;
-        // portfolio.headImgType = '0';
        _ts.$set(_ts, 'portfolio', portfolio);
        _ts.$set(_ts, 'headImgUrl', res.data.url);
      } else {
@ -295,25 +295,58 @@ export default {
        // _ts.$refs.cropper?.replace(this.result);
      }
    },
-    async updatePortfolio() {
-      //headImgUrl
+    handleSubmitData() {
      let _ts = this;
-      // this.cropImage()
      _ts.$set(_ts, 'loading', true);
-      let id = _ts.idPortfolio;
      let portfolioDescription = _ts.contentEditor.getValue();
      let portfolioDescriptionHtml = _ts.contentEditor.getHTML();
      let data = _ts.portfolio;
+      data.portfolioDescription = portfolioDescription;
+      data.portfolioDescriptionHtml = portfolioDescriptionHtml;
+      data.headImgType = 0
+      // if (_ts.isEdit) {
+
+      //
+      // } else {
+      //   data.headImgUrl = _ts.headImgUrl
+      // }
+      if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
+        this.$message.error('请输入必填信息');
+        return false
+      }
+      return data
+    },
+    async submitData() {
+      let _ts = this
+      let data = this.handleSubmitData()
+      let id = _ts.idPortfolio;
+
+      data.headImgUrl = _ts.headImgUrl
+      let title = id ? '更新' : '添加';
+      _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
+        if (res && res.message) {
+          _ts.$message.error(res.message);
+        } else {
+          _ts.$message({
+            type: 'success',
+            message: title + '成功!'
+          });
+          _ts.$set(_ts, 'notificationFlag', false);
+          _ts.$router.push({
+            path: '/portfolio/' + res.idPortfolio
+          })
+        }
+        _ts.$set(_ts, 'loading', false)
+      }).catch(error => _ts.$set(_ts, 'loading', false))
+
+    },
+    async updatePortfolio() {
+      let _ts = this
+      let data = this.handleSubmitData()
+      let id = _ts.idPortfolio;
+
      this.$refs.cropper.getCropData(img => {
        data.headImgUrl = img
-        data.portfolioDescription = portfolioDescription;
-        data.portfolioDescriptionHtml = portfolioDescriptionHtml;
-        // data.headImgUrl = _ts.headImgUrl
-        data.headImgType = '0';
-        if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
-          this.$message.error('请输入必填信息');
-          return false
-        }
        let title = id ? '更新' : '添加';
        _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
          if (res && res.message) {