image-gallery: update previewURL to url

ly525
1 parent 2e6cd487
Showing 4 changed files with 26 additions and 10 deletions
front-end/h5/src/components/core/support/image-gallery/components/image-item.js
front-end/h5/src/components/core/support/image-gallery/gallery.js
front-end/h5/src/components/core/support/image-gallery/tabs/personal.js
front-end/h5/src/components/core/support/image-gallery/tabs/pixabay.js
@@ -29,7 +29,7 @@ export default {
         <div
           slot="cover"
           style={{
-            backgroundImage: `url(${this.item.previewURL})`,
+            backgroundImage: `url(${this.item.url})`,
             backgroundSize: 'cover',
             height: `${this.height}px`
           }}>
@@ -50,7 +50,7 @@ export default {
     },
     handleSelectImage (item) {
       this.handleClose()
-      this.$emit('change', item.previewURL)
+      this.$emit('change', item.url)
     },
     renderContent () {
       switch (this.activeTab) {
@@ -79,12 +79,12 @@ export default {
           <div class="default-activator cursor-pointer "><img src={this.value} width="50%" style={{ margin: 'auto' }} /></div>
           <div class="flex-space-between" style="margin-top: 8px;">
             <a-button size="small">更换</a-button>
-            <a-button size="small" onClick={e => {
+            {/* <a-button size="small" onClick={e => {
               e.stopPropagation()
-            }}>裁剪</a-button>
+            }}>裁剪</a-button> */}
             <a-button size="small" onClick={(e) => {
               e.stopPropagation()
-              this.handleSelectImage({ previewURL: '' })
+              this.handleSelectImage({ url: '' })
             }}>移除</a-button>
           </div>
         </div>
@@ -11,7 +11,7 @@ export default {
   methods: {
     uploadSuccess ({ file, fileList }) {
       const response = file.response.length && file.response[0]
-      this.items = [{ name: response.name, previewURL: response.url.replace('http://localhost:1337', '') }, ...this.cachedItems]
+      this.items = [{ name: response.name, url: response.url.replace('http://localhost:1337', '') }, ...this.cachedItems]
     },
     beforeUpload (file) {
       this.items.unshift({
@@ -51,10 +51,16 @@ export default {
   mounted () {
     // demo code
     axios
-      .get('https://pixabay.com/api/?key=12120348-2ad26e4cc05d9bc068097ab3b&q=yellow+flowers&image_type=photo&pretty=true')
+      .get('/upload/files', {
+        params: {
+          '_limit': 10,
+          '_start': 0,
+          mime: 'image/png'
+        }
+      })
       .then(res => {
-        this.items = res.data.hits
-        this.cachedItems = res.data.hits.slice(0)
+        this.items = res.data
+        this.cachedItems = []
       })
   }
 }
+/*
+ * @Author: ly525
+ * @Date: 2019-12-01 18:11:50
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-01-13 00:48:13
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/support/image-gallery/tabs/pixabay.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: Do not edit
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
 import axios from 'axios'
 import ImageItem from '../components/image-item.js'
@@ -23,7 +33,7 @@ export default {
       axios
         .get('https://pixabay.com/api/', { params: this.options })
         .then(res => {
-          this.items = res.data.hits
+          this.items = res.data.hits.map(item => ({ ...item, url: item.previewURL }))
         })
     }
   },