From 4cda3f7df2655bd07cb9d503e36ff0f239d967b9 Mon Sep 17 00:00:00 2001
From: guqing <38999863+DarrenGu@users.noreply.github.com>
Date: Wed, 26 Jun 2019 22:59:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=84=E4=BB=B6=E7=B1=BB=E5=9E=8B=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=E9=9D=9E=E5=9B=BE=E7=89=87=E4=B8=8D=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=A7=86=E9=A2=91=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=20(#25)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 补充了日志九宫格图片上传功能

* 完善日志图片功能

* 增加对文件类型的判断，不是图片则不支持预览

* 增加附加视频预览功能，并对不支持预览的缩略图做不支持处理

* 修复eslint
---
 package.json                                  |   5 +-
 src/components/Upload/UploadPhoto.vue         | 139 +++++++++++
 src/views/attachment/AttachmentList.vue       |  29 ++-
 .../components/AttachmentDetailDrawer.vue     |  95 ++++++-
 src/views/dashboard/Dashboard.vue             |  55 ++++-
 src/views/sheet/internal/JournalList.vue      | 231 ++++++++++--------
 6 files changed, 446 insertions(+), 108 deletions(-)
 create mode 100644 src/components/Upload/UploadPhoto.vue

diff --git a/package.json b/package.json
index 1689866e..18eb587f 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,13 @@
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.3.0",
     "vue-codemirror-lite": "^1.0.4",
+    "vue-count-to": "^1.0.13",
     "vue-cropper": "0.4.9",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.0.6",
+    "vue-video-player": "^5.0.2",
     "vuejs-logger": "^1.5.3",
-    "vuex": "^3.1.1",
-    "vue-count-to": "^1.0.13"
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.4.4",
diff --git a/src/components/Upload/UploadPhoto.vue b/src/components/Upload/UploadPhoto.vue
new file mode 100644
index 00000000..86bec4ed
--- /dev/null
+++ b/src/components/Upload/UploadPhoto.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      :name="name"
+      :customRequest="handleUpload"
+      listType="picture-card"
+      :fileList="fileList"
+      @preview="handlePreview"
+      @change="handleChange"
+    >
+      <div v-if="fileList.length < 9 && plusPhotoVisible" id="plus-photo-uploadbox">
+        <a-icon type="plus"/>
+        <div class="ant-upload-text">Upload</div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage">
+    </a-modal>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import attachmentApi from '@/api/attachment'
+export default {
+  props: {
+    photoList: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
+    },
+    plusPhotoVisible: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data() {
+    return {
+      name: 'file',
+      previewVisible: false,
+      previewImage: '',
+      fileList: [],
+      uploadHandler: attachmentApi.upload
+    }
+  },
+  created() {
+    // 在生命周期开始时调用一次赋值解决watch没有监控到数据的问题
+    this.handlerEditPreviewPhoto(this.photoList)
+  },
+  watch: {
+    photoList(newValue, oldValue) {
+      this.handlerEditPreviewPhoto(newValue)
+    }
+  },
+  methods: {
+    handlerEditPreviewPhoto(data) {
+      // 先清空
+      this.fileList = []
+      // 编辑日志时回显图片
+      if (data !== null && data !== undefined) {
+        for (var i = 0; i < data.length; i++) {
+          // 构造合适的对象
+          this.fileList.push({
+            uid: data[i].id,
+            name: data[i].name,
+            status: 'done',
+            url: data[i].thumbnail
+          })
+        }
+      }
+    },
+    handleCancel() {
+      this.previewVisible = false
+    },
+    handlePreview(file) {
+      this.previewImage = file.url || file.thumbUrl
+      this.previewVisible = true
+    },
+    handleChange({ fileList }) {
+      this.fileList = fileList
+    },
+    handleUpload(option) {
+      this.$log.debug('Uploading option', option)
+      const CancelToken = axios.CancelToken
+      const source = CancelToken.source()
+
+      const data = new FormData()
+      data.append(this.name, option.file)
+
+      this.uploadHandler(
+        data,
+        progressEvent => {
+          if (progressEvent.total > 0) {
+            progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100
+          }
+          this.$log.debug('Uploading percent: ', progressEvent.percent)
+          option.onProgress(progressEvent)
+        },
+        source.token,
+        option.file
+      )
+        .then(response => {
+          this.$log.debug('Uploaded successfully', response)
+          option.onSuccess(response, option.file)
+          this.$emit('success', response, option.file)
+        })
+        .catch(error => {
+          this.$log.debug('Failed to upload file', error)
+          option.onError(error, error.response)
+          this.$emit('failure', error, option.file)
+        })
+      return {
+        abort: () => {
+          this.$log.debug('Upload operation aborted by the user')
+          source.cancel('Upload operation canceled by the user.')
+        }
+      }
+    }
+  }
+}
+</script>
+<style>
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+.ant-upload-list-picture-card {
+  /* 将浮动恢复为默认值,避免出现纵向换行情况 */
+  float: initial;
+}
+</style>
diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index 689c85ac..3626e3bf 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -99,7 +99,8 @@
               @click="handleShowDetailDrawer(item)"
             >
               <div class="attach-thumb">
-                <img :src="item.thumbPath">
+                <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
+                <img :src="item.thumbPath" v-show="handleJudgeMediaType(item)">
               </div>
               <a-card-meta>
                 <ellipsis
@@ -242,6 +243,23 @@ export default {
     onUploadClose() {
       this.loadAttachments()
       this.loadMediaTypes()
+    },
+    handleJudgeMediaType(attachment) {
+      var mediaType = attachment.mediaType
+      // 判断文件类型
+      if (mediaType) {
+        var prefix = mediaType.split('/')[0]
+
+        if (prefix === 'image') {
+          // 是图片
+          return true
+        } else {
+          // 非图片
+          return false
+        }
+      }
+      // 没有获取到文件返回false
+      return false
     }
   }
 }
@@ -262,13 +280,20 @@ export default {
   position: relative;
   padding-bottom: 56%;
   overflow: hidden;
-  img {
+  img, span{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
   }
+  span {
+    display: flex;
+    font-size: 12px;
+    align-items: center;
+    justify-content: center;
+    color: #9b9ea0;
+  }
 }
 
 .ant-card-meta {
diff --git a/src/views/attachment/components/AttachmentDetailDrawer.vue b/src/views/attachment/components/AttachmentDetailDrawer.vue
index 9ff754c2..ba0d8427 100644
--- a/src/views/attachment/components/AttachmentDetailDrawer.vue
+++ b/src/views/attachment/components/AttachmentDetailDrawer.vue
@@ -18,7 +18,15 @@
           :paragraph="{rows: 8}"
         >
           <div class="attach-detail-img">
-            <img :src="attachment.path">
+            <div v-show="nonsupportPreviewVisible">此文件不支持预览</div>
+            <img :src="attachment.path" v-show="photoPreviewVisible">
+            <video-player
+              class="video-player-box"
+              v-show="videoPreviewVisible"
+              ref="videoPlayer"
+              :options="playerOptions"
+              :playsinline="true">
+            </video-player>
           </div>
         </a-skeleton>
       </a-col>
@@ -74,7 +82,7 @@
                 <span slot="title">附件大小：</span>
               </a-list-item-meta>
             </a-list-item>
-            <a-list-item>
+            <a-list-item v-if="photoPreviewVisible">
               <a-list-item-meta :description="attachment.height+'x'+attachment.width">
                 <span slot="title">图片尺寸：</span>
               </a-list-item-meta>
@@ -100,7 +108,7 @@
                 </span>
               </a-list-item-meta>
             </a-list-item>
-            <a-list-item>
+            <a-list-item v-if="photoPreviewVisible">
               <a-list-item-meta>
                 <span slot="description">![{{ attachment.name }}]({{ attachment.path }})</span>
                 <span slot="title">
@@ -148,15 +156,40 @@
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import attachmentApi from '@/api/attachment'
 import photoApi from '@/api/photo'
+import 'video.js/dist/video-js.css'
+import { videoPlayer } from 'vue-video-player'
 
 export default {
   name: 'AttachmentDetailDrawer',
   mixins: [mixin, mixinDevice],
+  components: {
+    videoPlayer
+  },
   data() {
     return {
       detailLoading: true,
       editable: false,
-      photo: {}
+      photo: {},
+      photoPreviewVisible: false,
+      videoPreviewVisible: false,
+      nonsupportPreviewVisible: false,
+      playerOptions: {
+        // videojs options
+        muted: true,
+        language: 'zh-CN',
+        aspectRatio: '16:9',
+        fluid: true,
+        controls: true,
+        loop: false,
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [{
+          type: 'video/mp4',
+          src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
+        }],
+        poster: '/static/images/author.jpg',
+        width: document.documentElement.clientWidth,
+        notSupportedMessage: '此视频暂无法播放，请稍后再试'
+      }
     }
   },
   model: {
@@ -182,6 +215,11 @@ export default {
   created() {
     this.loadSkeleton()
   },
+  computed: {
+    player() {
+      return this.$refs.videoPlayer.player
+    }
+  },
   watch: {
     visiable: function(newValue, oldValue) {
       this.$log.debug('old value', oldValue)
@@ -189,6 +227,12 @@ export default {
       if (newValue) {
         this.loadSkeleton()
       }
+    },
+    attachment: function(newValue, oldValue) {
+      if (newValue) {
+        var attachment = newValue
+        this.handleJudgeMediaType(attachment)
+      }
     }
   },
   methods: {
@@ -250,7 +294,47 @@ export default {
     },
     onClose() {
       this.$emit('close', false)
+    },
+    handleJudgeMediaType(attachment) {
+      var mediaType = attachment.mediaType
+      // 判断文件类型
+      if (mediaType) {
+        var prefix = mediaType.split('/')[0]
+
+        if (prefix === 'video' || prefix === 'flv') {
+          this.videoPreviewVisible = true
+          this.photoPreviewVisible = false
+          this.nonsupportPreviewVisible = false
+          // 设置视频地址
+          this.$set(this.playerOptions.sources, 0, {
+            type: mediaType,
+            src: attachment.path
+          })
+          console.log(this.playerOptions.sources)
+        } else if (prefix === 'image') {
+          this.photoPreviewVisible = true
+          this.videoPreviewVisible = false
+          this.nonsupportPreviewVisible = false
+        } else {
+          this.nonsupportPreviewVisible = true
+          this.videoPreviewVisible = false
+          this.photoPreviewVisible = false
+        }
+      }
     }
+    // handleDownLoadPhoto(attachment) {
+    //   var path = attachment.path
+
+    //   var index = path.lastIndexOf('/')
+    //   var filename = path.substr(index+1, path.length)
+    //   //  chrome/firefox
+    //   var aTag = document.createElement('a')
+    //   aTag.download = filename
+    //   aTag.href = path//URL.createObjectURL(blob)
+    //   aTag.target = '_blank'
+    //   aTag.click()
+    //   URL.revokeObjectURL(aTag.href)
+    // }
   }
 }
 </script>
@@ -259,4 +343,7 @@ export default {
 .attach-detail-img img {
   width: 100%;
 }
+.video-player-box {
+  width: 100%;
+}
 </style>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 8e3016ed..2c31458d 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -200,11 +200,26 @@
                 placeholder="写点什么吧..."
               />
             </a-form-item>
+
+            <!-- 日志图片上传 -->
+            <a-form-item v-show="showMoreOptions">
+              <UploadPhoto
+                @success="handlerPhotoUploadSuccess"
+                :photoList="photoList"
+              ></UploadPhoto>
+            </a-form-item>
+
             <a-form-item>
               <a-button
                 type="primary"
                 @click="handleCreateJournalClick"
               >保存</a-button>
+              <a
+                href="javascript:;"
+                class="more-options-btn"
+                type="default"
+                @click="handleUploadPhotoWallClick"
+              >更多选项<a-icon type="down" /></a>
             </a-form-item>
           </a-form>
         </a-card>
@@ -318,6 +333,7 @@ import logApi from '@/api/log'
 import adminApi from '@/api/admin'
 import journalApi from '@/api/journal'
 import countTo from 'vue-count-to'
+import UploadPhoto from '../../components/Upload/UploadPhoto.vue'
 export default {
   name: 'Dashboard',
   mixins: [mixin, mixinDevice],
@@ -325,10 +341,13 @@ export default {
     PageView,
     AnalysisCard,
     RecentCommentTab,
-    countTo
+    countTo,
+    UploadPhoto
   },
   data() {
     return {
+      photoList: [],
+      showMoreOptions: false,
       startVal: 0,
       logType: logApi.logType,
       activityLoading: true,
@@ -339,7 +358,11 @@ export default {
       postData: [],
       logData: [],
       countsData: {},
-      journal: {},
+      journal: {
+        content: '',
+        photos: []
+      },
+      journalPhotos: [], // 日志图片集合最多九张
       logs: [],
       options: [],
       keys: ['blog_url'],
@@ -398,6 +421,18 @@ export default {
     next()
   },
   methods: {
+    handlerPhotoUploadSuccess(response, file) {
+      var callData = response.data.data
+      var photo = {
+        name: callData.name,
+        url: callData.path,
+        thumbnail: callData.thumbPath,
+        suffix: callData.suffix,
+        width: callData.width,
+        height: callData.height
+      }
+      this.journalPhotos.push(photo)
+    },
     loadOptions() {
       optionApi.listAll(this.keys).then(response => {
         this.options = response.data.data
@@ -426,11 +461,20 @@ export default {
       this.$router.push({ name: 'PostEdit', query: { postId: post.id } })
     },
     handleCreateJournalClick() {
+      // 给属性填充数据
+      this.journal.photos = this.journalPhotos
+
       journalApi.create(this.journal).then(response => {
         this.$message.success('发表成功！')
         this.journal = {}
+        this.photoList = []
+        this.showMoreOptions = false
       })
     },
+    handleUploadPhotoWallClick() {
+      // 是否显示上传照片墙组件
+      this.showMoreOptions = !this.showMoreOptions
+    },
     handleShowLogDrawer() {
       this.logDrawerVisiable = true
       this.loadLogs()
@@ -458,3 +502,10 @@ export default {
   }
 }
 </script>
+
+<style scoped="scoped">
+	.more-options-btn{
+		margin-left: 15px;
+		text-decoration: none;
+	}
+</style>
diff --git a/src/views/sheet/internal/JournalList.vue b/src/views/sheet/internal/JournalList.vue
index 5bcfa814..fb89bac0 100644
--- a/src/views/sheet/internal/JournalList.vue
+++ b/src/views/sheet/internal/JournalList.vue
@@ -6,18 +6,12 @@
           <div class="table-page-search-wrapper">
             <a-form layout="inline">
               <a-row :gutter="48">
-                <a-col
-                  :md="6"
-                  :sm="24"
-                >
+                <a-col :md="6" :sm="24">
                   <a-form-item label="关键词">
-                    <a-input v-model="queryParam.keyword" />
+                    <a-input v-model="queryParam.keyword"/>
                   </a-form-item>
                 </a-col>
-                <a-col
-                  :md="6"
-                  :sm="24"
-                >
+                <a-col :md="6" :sm="24">
                   <a-form-item label="状态">
                     <a-select placeholder="请选择状态">
                       <a-select-option value="1">公开</a-select-option>
@@ -25,32 +19,19 @@
                     </a-select>
                   </a-form-item>
                 </a-col>
-                <a-col
-                  :md="6"
-                  :sm="24"
-                >
+                <a-col :md="6" :sm="24">
                   <span class="table-page-search-submitButtons">
-                    <a-button
-                      type="primary"
-                      @click="loadJournals(true)"
-                    >查询</a-button>
-                    <a-button
-                      style="margin-left: 8px;"
-                      @click="resetParam"
-                    >重置</a-button>
+                    <a-button type="primary" @click="loadJournals(true)">查询</a-button>
+                    <a-button style="margin-left: 8px;" @click="resetParam">重置</a-button>
                   </span>
                 </a-col>
               </a-row>
             </a-form>
           </div>
           <div class="table-operator">
-            <a-button
-              type="primary"
-              icon="plus"
-              @click="handleNew"
-            >写日志</a-button>
+            <a-button type="primary" icon="plus" @click="handleNew">写日志</a-button>
           </div>
-          <a-divider />
+          <a-divider/>
           <div style="margin-top:15px">
             <a-list
               itemLayout="vertical"
@@ -58,42 +39,46 @@
               :dataSource="journals"
               :loading="listLoading"
             >
-              <a-list-item
-                slot="renderItem"
-                slot-scope="item, index"
-                :key="index"
-              >
+              <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+                <!-- 日志图片集合 -->
+                <a-card
+                  hoverable
+                  v-for="(photo, photoIndex) in item.photos"
+                  :key="photoIndex"
+                  class="photo-card"
+                  @click="handlerPhotoPreview(photo)"
+                >
+                  <img alt="example" :src="photo.thumbnail" slot="cover">
+                </a-card>
+
+                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelPreview">
+                  <img
+                    :alt="previewPhoto.name + previewPhoto.description"
+                    style="width: 100%"
+                    :src="previewPhoto.url"
+                  >
+                </a-modal>
+
                 <template slot="actions">
                   <span>
                     <a href="javascript:void(0);">
-                      <a-icon
-                        type="like-o"
-                        style="margin-right: 8px"
-                      />{{ item.likes }}
+                      <a-icon type="like-o" style="margin-right: 8px"/>
+                      {{ item.likes }}
                     </a>
                   </span>
                   <span>
-                    <a
-                      href="javascript:void(0);"
-                      @click="handleCommentShow(item)"
-                    >
-
-                      <a-icon
-                        type="message"
-                        style="margin-right: 8px"
-                      />{{ item.commentCount }}
+                    <a href="javascript:void(0);" @click="handleCommentShow(item)">
+                      <a-icon type="message" style="margin-right: 8px"/>
+                      {{ item.commentCount }}
                     </a>
                   </span>
                   <!-- <span>
                     From 微信
-                  </span> -->
+                  </span>-->
                 </template>
                 <template slot="extra">
-                  <a
-                    href="javascript:void(0);"
-                    @click="handleEdit(item)"
-                  >编辑</a>
-                  <a-divider type="vertical" />
+                  <a href="javascript:void(0);" @click="handleEdit(item)">编辑</a>
+                  <a-divider type="vertical"/>
                   <a-popconfirm
                     title="你确定要删除这条日志？"
                     @confirm="handleDelete(item.id)"
@@ -103,13 +88,10 @@
                     <a href="javascript:void(0);">删除</a>
                   </a-popconfirm>
                 </template>
+
                 <a-list-item-meta :description="item.content">
                   <span slot="title">{{ item.createTime | moment }}</span>
-                  <a-avatar
-                    slot="avatar"
-                    size="large"
-                    :src="user.avatar"
-                  />
+                  <a-avatar slot="avatar" size="large" :src="user.avatar"/>
                 </a-list-item-meta>
               </a-list-item>
               <div class="page-wrapper">
@@ -132,29 +114,35 @@
     <!-- 编辑日志弹窗 -->
     <a-modal v-model="visible">
       <template slot="title">
-        {{ title }} <a-tooltip
-          slot="action"
-          title="只能输入250字"
-        >
-          <a-icon type="info-circle-o" />
+        {{ title }}
+        <a-tooltip slot="action" title="只能输入250字">
+          <a-icon type="info-circle-o"/>
         </a-tooltip>
       </template>
       <template slot="footer">
-        <a-button
-          key="submit"
-          type="primary"
-          @click="createOrUpdateJournal"
-        >
-          发布
-        </a-button>
+        <a-button key="submit" type="primary" @click="createOrUpdateJournal">发布</a-button>
       </template>
       <a-form layout="vertical">
         <a-form-item>
-          <a-input
-            type="textarea"
-            :autosize="{ minRows: 8 }"
-            v-model="journal.content"
-          />
+          <a-input type="textarea" :autosize="{ minRows: 8 }" v-model="journal.content"/>
+        </a-form-item>
+        <a-form-item v-show="showMoreOptions">
+          <UploadPhoto
+            @success="handlerPhotoUploadSuccess"
+            :photoList="photoList"
+            :plusPhotoVisible="plusPhotoVisible"
+          ></UploadPhoto>
+        </a-form-item>
+        <a-form-item>
+          <a
+            href="javascript:;"
+            class="more-options-btn"
+            type="default"
+            @click="handleUploadPhotoWallClick"
+          >
+            更多选项
+            <a-icon type="down"/>
+          </a>
         </a-form-item>
       </a-form>
     </a-modal>
@@ -166,21 +154,11 @@
       v-model="selectCommentVisible"
     >
       <template slot="footer">
-        <a-button
-          key="submit"
-          type="primary"
-          @click="handleReplyComment"
-        >
-          回复
-        </a-button>
+        <a-button key="submit" type="primary" @click="handleReplyComment">回复</a-button>
       </template>
       <a-form layout="vertical">
         <a-form-item>
-          <a-input
-            type="textarea"
-            :autosize="{ minRows: 8 }"
-            v-model="replyComment.content"
-          />
+          <a-input type="textarea" :autosize="{ minRows: 8 }" v-model="replyComment.content"/>
         </a-form-item>
       </a-form>
     </a-modal>
@@ -194,23 +172,16 @@
       destroyOnClose
       @close="()=>this.commentVisiable = false"
     >
-      <a-row
-        type="flex"
-        align="middle"
-      >
+      <a-row type="flex" align="middle">
         <a-col :span="24">
           <a-comment>
-            <a-avatar
-              :src="user.avatar"
-              :alt="user.nickname"
-              slot="avatar"
-            />
+            <a-avatar :src="user.avatar" :alt="user.nickname" slot="avatar"/>
             <p slot="content">{{ journal.content }}</p>
 
             <span slot="datetime">{{ journal.createTime | moment }}</span>
           </a-comment>
         </a-col>
-        <a-divider />
+        <a-divider/>
         <a-col :span="24">
           <journal-comment-tree
             v-for="(comment,index) in comments"
@@ -231,12 +202,22 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
 import journalApi from '@/api/journal'
 import journalCommentApi from '@/api/journalComment'
 import userApi from '@/api/user'
-
+import UploadPhoto from '@/components/Upload/UploadPhoto.vue'
 export default {
   mixins: [mixin, mixinDevice],
-  components: { JournalCommentTree },
+  components: { JournalCommentTree, UploadPhoto },
   data() {
     return {
+      plusPhotoVisible: true,
+      photoList: [], // 编辑图片时回显所需对象
+      previewVisible: false,
+      showMoreOptions: false,
+      previewPhoto: {
+        // 图片预览信息临时对象
+        name: '',
+        description: '',
+        url: ''
+      },
       title: '发表',
       listLoading: false,
       visible: false,
@@ -255,7 +236,12 @@ export default {
       },
       journals: [],
       comments: [],
-      journal: {},
+      journal: {
+        id: undefined,
+        content: '',
+        photos: []
+      },
+      journalPhotos: [], // 日志图片集合最多九张
       selectComment: null,
       replyComment: {},
       user: {}
@@ -266,6 +252,30 @@ export default {
     this.loadUser()
   },
   methods: {
+    handleCancelPreview() {
+      this.previewVisible = false
+    },
+    handlerPhotoPreview(photo) {
+      // 日志图片预览
+      this.previewVisible = true
+      this.previewPhoto = photo
+    },
+    handlerPhotoUploadSuccess(response, file) {
+      var callData = response.data.data
+      var photo = {
+        name: callData.name,
+        url: callData.path,
+        thumbnail: callData.thumbPath,
+        suffix: callData.suffix,
+        width: callData.width,
+        height: callData.height
+      }
+      this.journalPhotos.push(photo)
+    },
+    handleUploadPhotoWallClick() {
+      // 是否显示上传照片墙组件
+      this.showMoreOptions = !this.showMoreOptions
+    },
     loadJournals(isSearch) {
       this.queryParam.page = this.pagination.page - 1
       this.queryParam.size = this.pagination.size
@@ -289,11 +299,19 @@ export default {
       this.title = '新建'
       this.visible = true
       this.journal = {}
+
+      // 显示图片上传框
+      this.plusPhotoVisible = true
+      this.photoList = []
     },
     handleEdit(item) {
       this.title = '编辑'
       this.journal = item
       this.visible = true
+
+      // 为编辑时需要回显图片数组赋值,并隐藏图片上传框
+      this.plusPhotoVisible = false
+      this.photoList = item.photos
     },
     handleDelete(id) {
       journalApi.delete(id).then(response => {
@@ -330,6 +348,9 @@ export default {
       })
     },
     createOrUpdateJournal() {
+      // 给属性填充数据
+      this.journal.photos = this.journalPhotos
+
       if (this.journal.id) {
         journalApi.update(this.journal.id, this.journal).then(response => {
           this.$message.success('更新成功！')
@@ -339,6 +360,7 @@ export default {
         journalApi.create(this.journal).then(response => {
           this.$message.success('发表成功！')
           this.loadJournals()
+          this.photoList = []
         })
       }
       this.visible = false
@@ -356,3 +378,16 @@ export default {
   }
 }
 </script>
+<style scoped="scoped">
+.more-options-btn {
+  margin-left: 15px;
+  text-decoration: none;
+}
+
+/* 日志图片卡片样式 */
+.photo-card {
+  width: 104px;
+  display: inline-block;
+  margin-right: 5px;
+}
+</style>