更新相册相关页面

src/components/upload/EditImage.vue

@@ -40,7 +40,7 @@
         </el-row>
       </el-col>
       <el-col :md="16">
-        <div>
+        <div v-if="this.data !== null">
           <el-col
             v-for="(image, index) in data.images"
             :key="image.thumbnailUrl"
@@ -87,7 +87,7 @@
 
 <script>
 import { getAlbumImage, deleteAlbumImage, addAlbumImage, updateAlbumCover } from '@/api/image'
-import { getServerInfo } from '@/api/content'
+import { getPhotoChannelInfo } from '@/api/file'
 
 var imageFileMap = new Map()
 export default {
@@ -100,7 +100,7 @@ export default {
         Authorization: ''
       },
       imgData: {
-        channelId: 6
+        channelId: 105
       },
       dialogImageUrl: '',
       dialogVisible: false,
@@ -121,28 +121,29 @@ export default {
       if (res.code === 0) {
         const resData = res.data
         this.data = resData
+        console.log(this.data)
         this.imageCount = this.data.images.length
         this.limit = 40 - this.data.images.length
-        this.form.albumName = resData.albumName
       }
     })
 
-    getServerInfo(this.imgData.channelId).then(res => {
+    getPhotoChannelInfo().then(res => {
       if (res.code === 0) {
         const resData = res.data
+        this.imgOssUrl = resData.ossUrl
         this.imgHeaders.Authorization = 'Bearer ' + resData.token
       } else {
         this.$notify({
-          title: '失败提示',
-          message: res.msg,
-          type: 'warning',
+          title: '提示',
+          message: '获取 OSS 服务器地址失败, 暂时无法上传图片',
+          type: 'error',
           duration: 3000
         })
       }
     }).catch(error => {
       this.$notify({
-        title: '错误提示',
-        message: error.message,
+        title: '提示',
+        message: '获取 OSS 服务器地址失败, 暂时无法上传图片',
         type: 'warning',
         duration: 3000
       })

src/components/upload/PublishImage.vue

@@ -78,7 +78,7 @@ export default {
         Authorization: ''
       },
       imgData: {
-        channelId: 0
+        channelId: 105
       },
       dialogImageUrl: '',
       dialogVisible: false,
@@ -87,7 +87,7 @@ export default {
       submitForm: {
         imageFileIds: [],
         albumName: null,
-        channelId: 0,
+        channelId: 105,
         scope: '2',
         scheduledPubDate: null
       },

src/views/post/ImagePost.vue

@@ -1,6 +1,11 @@
 <template>
-  <el-row>
-    <el-row :md="6" :sm="12" :xs="12">
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 10px">
+        <el-button type="plain" icon="el-icon-plus" @click="createAlbumDiaglog = true">创建相册</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
       <el-table
         :data="dataList"
         style="width: 100%"
@@ -32,7 +37,7 @@
           width="180"
         >
           <template slot-scope="scope">
-            <router-link target="_blank" :to="`/image/album/${scope.row.albumId}`">
+            <router-link style="text-decoration-line: none" target="_blank" :to="`/image/album/${scope.row.albumId}`">
               <span>{{ scope.row.albumName }}</span>
             </router-link>
           </template>
@@ -87,31 +92,6 @@
           </template>
         </el-table-column>
       </el-table>
-
-      <!-- 修改可见范围对话框 -->
-      <el-dialog
-        append-to-body
-        :visible.sync="showEditScopeDialog"
-        width="30%"
-        center
-      >
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>修改相册可见范围</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
-          </div>
-          <div class="text item">
-            <el-select v-model="form.scope" placeholder="选择可见范围">
-              <el-option label="本人可见" value="1" />
-              <el-option label="所有人可见" value="2" />
-              <el-option label="VIP 可见" value="3" />
-              <el-option label="验证码可见" value="4" />
-            </el-select>
-          </div>
-        </el-card>
-      </el-dialog>
-    </el-row>
-    <el-row>
       <el-pagination
         background
         :small="screenWidth <= 768"
@@ -123,12 +103,65 @@
         @prev-click="handleCurrentChange"
         @next-click="handleCurrentChange"
       />
-    </el-row>
-  </el-row>
+    </el-main>
+
+    <!-- 创建相册对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="createAlbumDiaglog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>创建相册</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onCreateAlbum">确定</el-button>
+        </div>
+        <div class="text item">
+          <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="相册名">
+              <el-input v-model="form.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
+            </el-form-item>
+            <el-form-item label="可见范围">
+              <el-select v-model="form.scope" placeholder="选择可见范围">
+                <el-option label="本人可见" value="1" />
+                <el-option label="所有人可见" value="2" />
+                <el-option label="VIP 可见" value="3" />
+                <el-option label="验证码可见" value="4" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+    </el-dialog>
+
+    <!-- 修改可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改相册可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-select v-model="form.scope" placeholder="选择可见范围">
+            <el-option label="本人可见" value="1" />
+            <el-option label="所有人可见" value="2" />
+            <el-option label="VIP 可见" value="3" />
+            <el-option label="验证码可见" value="4" />
+          </el-select>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-container>
 </template>
 
 <script>
-import { updateAlbumScope, deleteAlbum, getUserAlbums } from '@/api/image'
+import { updateAlbumScope, deleteAlbum, getUserAlbums, submitAlbum } from '@/api/image'
 
 export default {
   name: 'ImagePost',
@@ -144,8 +177,9 @@ export default {
       showEditScopeDialog: false,
       form: {
         albumId: null,
-        scope: 1
-      }
+        scope: '1'
+      },
+      createAlbumDiaglog: false
     }
   },
   created() {
@@ -207,6 +241,28 @@ export default {
         })
       })
     },
+    onCreateAlbum() {
+      this.createAlbumDiaglog = false
+      submitAlbum(this.form).then(res => {
+        if (res.code === 0) {
+          this.$message.info('相册已创建')
+        } else {
+          this.$notify({
+            title: '提示',
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
     onUpdateScope() {
       this.showEditScopeDialog = false
       updateAlbumScope(this.form).then(res => {