Attachment detail drawer.

src/api/attachment.js

@@ -12,4 +12,11 @@ attachmentApi.list = pagination => {
   })
 }
 
+attachmentApi.get = attachmentId => {
+  return service({
+    url: `${baseUrl}/${attachmentId}`,
+    method: 'get'
+  })
+}
+
 export default attachmentApi

src/views/attachment/AttachmentList.vue

@@ -11,7 +11,7 @@
         :sm="12"
         :xs="24"
       >
-        <a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer">
+        <a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer(attachment)">
           <div class="attach-thumb">
             <img :src="attachment.thumbPath">
           </div>
@@ -46,12 +46,24 @@
       </a-upload-dragger>
     </a-modal>
     <a-drawer
+      v-if="selectAttachment"
       title="图片详情"
       :width="drawerWidth"
       closable
       :visible="drawerVisible"
       destroyOnClose
-    >图片详情</a-drawer>
+      @close="onChildClose"
+    >
+      <a-row type="flex" align="middle">
+        <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+          <a-skeleton active :loading="detailImgLoading" :paragraph="{rows: 8}">
+            <div class="attach-detail-img">
+              <img :src="selectAttachment.path">
+            </div>
+          </a-skeleton>
+        </a-col>
+      </a-row>
+    </a-drawer>
   </page-view>
 </template>
 
@@ -68,6 +80,7 @@ export default {
     return {
       uploadVisible: false,
       drawerVisible: false,
+      detailImgLoading: false,
       selectAttachment: null,
       drawerWidth: '560',
       attachments: [],
@@ -97,8 +110,13 @@ export default {
         this.pagination.total = response.data.data.total
       })
     },
-    showDetailDrawer() {
+    showDetailDrawer(attachment) {
       this.drawerVisible = true
+      this.detailImgLoading = true
+      this.selectAttachment = attachment
+      setTimeout(() => {
+        this.detailImgLoading = false
+      }, 500)
     },
     showUploadModal() {
       this.uploadVisible = true
@@ -113,6 +131,9 @@ export default {
       } else if (status === 'error') {
         this.$message.error(`${info.file.name} file upload failed.`)
       }
+    },
+    onChildClose() {
+      this.drawerVisible = false
     }
   }
 }
@@ -147,4 +168,8 @@ export default {
 .ant-card-meta {
   padding: 0.8rem;
 }
+
+.attach-detail-img img {
+  width: 100%;
+}
 </style>

src/views/post/PostEdit.vue

@@ -103,8 +103,9 @@
           <a-drawer
             title="选择图片"
             width="320"
-            :closable="true"
-            :visible="childrenDrawer"
+            closable
+            :visible="childDrawerVisible"
+            @close="onChildClose"
           >
           </a-drawer>
           <div class="postControl">
@@ -161,7 +162,7 @@ export default {
         xs: { span: 24 }
       },
       visible: false,
-      childrenDrawer: false,
+      childDrawerVisible: false,
       drawerWidth: '460',
       tags: [],
       categories: [],
@@ -241,7 +242,7 @@ export default {
       this.visible = true
     },
     showAttachDrawer() {
-      this.childrenDrawer = true
+      this.childDrawerVisible = true
     },
     handlePublishClick() {
       this.postToStage.status = 'PUBLISHED'
@@ -253,6 +254,9 @@ export default {
     },
     onClose() {
       this.visible = false
+    },
+    onChildClose() {
+      this.childDrawerVisible = false
     }
   }
 }