feat: pick image from image gallery

ly525
1 parent acd59990
Showing 8 changed files with 377 additions and 3 deletions
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/core/support/image-gallery/components/image-item.js
front-end/h5/src/components/core/support/image-gallery/components/uploader.js
front-end/h5/src/components/core/support/image-gallery/gallery.js
front-end/h5/src/components/core/support/image-gallery/gallery.scss
front-end/h5/src/components/core/support/image-gallery/tabs/personal.js
front-end/h5/src/components/core/support/image-gallery/tabs/pixabay.js
front-end/h5/src/components/plugins/lbp-background.js
@@ -172,6 +172,11 @@
   justify-content: center;
 }
+.flex-space-between {
+  display: flex !important;
+  justify-content: space-between;
+}
+
 .cursor-pointer {
   cursor: pointer !important;
 }
 \ No newline at end of file
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    height: {
+      type: Number,
+      default: 142
+    }
+  },
+  render (h) {
+    if (this.item.loading) {
+      return <a-spin>
+        <a-card hoverable>
+          <div
+            slot="cover"
+            style={{
+              height: `${this.height}px`
+            }}>
+          </div>
+        </a-card>
+      </a-spin>
+    }
+    return (
+      <a-card
+        hoverable
+      >
+        <div
+          slot="cover"
+          style={{
+            backgroundImage: `url(${this.item.previewURL})`,
+            backgroundSize: 'cover',
+            height: `${this.height}px`
+          }}>
+        </div>
+      </a-card>
+    )
+  }
+}
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    handleClose: {
+      type: Function,
+      default: () => {}
+    },
+    uploadSuccess: {
+      type: Function,
+      default: () => {}
+    },
+    beforeUpload: {
+      type: Function,
+      default: (file) => file
+    }
+  },
+  computed: {
+  },
+  data: () => ({
+    loading: false
+  }),
+  methods: {
+    handleBeforeUpload (file) {
+      return this.beforeUpload(file)
+    },
+    handleChange (info) {
+      this.loading = true
+      const status = info.file.status
+      if (status !== 'uploading') {
+        console.log(info.file, info.fileList)
+      }
+      if (status === 'done') {
+        this.loading = false
+        this.uploadSuccess(info)
+        this.$message.success(`${info.file.name} file uploaded successfully.`)
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`)
+      }
+    }
+  },
+  render (h) {
+    return (
+      <a-upload
+        name="files"
+        action="/upload"
+        beforeUpload={this.handleBeforeUpload}
+        onChange={this.handleChange}>
+        <slot>
+          <a-button>
+            <a-icon type="upload" /> Click to Upload
+          </a-button>
+        </slot>
+      </a-upload>
+    )
+  },
+  mounted () {
+  }
+}
+import './gallery.scss'
+import PersonalTab from './tabs/personal.js'
+import PixabayTab from './tabs/pixabay.js'
+
+export default {
+  components: {
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data: () => ({
+    tabs: [
+      {
+        value: 'personal',
+        label: '我的图库'
+      },
+      {
+        value: 'pixabay',
+        label: 'Pixabay图库'
+      }
+    ],
+    activeTab: 'personal',
+    innerVisible: false,
+    pixabayList: []
+  }),
+  computed: {
+  },
+  watch: {
+    visible (value) {
+      this.innerVisible = value
+    }
+  },
+  methods: {
+    handleClose () {
+      this.innerVisible = false
+    },
+    changeTab ({ key }) {
+      this.activeTab = key
+    },
+    handleSelectImage (item) {
+      this.handleClose()
+      this.$emit('change', item.previewURL)
+    },
+    renderContent () {
+      switch (this.activeTab) {
+        case 'personal':
+          return <PersonalTab onChangeItem={item => {
+            this.handleSelectImage(item)
+          }}/>
+        case 'pixabay':
+          return <PixabayTab onChange={item => {
+            this.handleSelectImage(item)
+          }}/>
+      }
+    },
+    renderDefaultActivator () {
+      const activatorWithoutImg = (
+        <div
+          class="default-activator cursor-pointer "
+          onClick={() => { this.innerVisible = true }}
+        >
+          <a-icon type="plus" />
+        </div>
+      )
+
+      const activatorWithImg = (
+        <div
+          class="default-activator cursor-pointer "
+          onClick={() => { this.innerVisible = true }}
+        >
+          <img src={this.value} style={{ width: '100%' }} />
+          <div class="flex-space-between" style="margin-top: 8px;">
+            <a-button>更换图片</a-button>
+            <a-button onClick={e => {
+              e.stopPropagation()
+            }}>裁剪图片</a-button>
+          </div>
+        </div>
+      )
+      return (this.value ? activatorWithImg : activatorWithoutImg)
+    }
+  },
+  render (h) {
+    return (
+      <div>
+        <slot>{this.renderDefaultActivator()}</slot>
+        <a-modal
+          closable
+          title="图片库"
+          width="65%"
+          visible={this.innerVisible}
+          onOk={this.handleClose}
+          onCancel={this.handleClose}
+          bodyStyle={{ margin: 0, padding: 0 }}
+        >
+          <a-layout style="height: 500px; position: relative;">
+            <a-layout-sider width="200px" style="background-color: white;">
+              <a-menu mode="inline" defaultSelectedKeys={['personal']} onClick={this.changeTab}>
+                {
+                  this.tabs.map((tab, index) => (
+                    <a-menu-item key={tab.value} >
+                      <a-icon type="user" />
+                      <span>{tab.label}</span>
+                    </a-menu-item>
+                  ))
+                }
+              </a-menu>
+            </a-layout-sider>
+            <a-layout-content>
+              {this.renderContent()}
+            </a-layout-content>
+          </a-layout>
+        </a-modal>
+      </div>
+    )
+  }
+}
+.default-activator {
+  border: 1px dashed #eee;
+  text-align: center;
+}
 \ No newline at end of file
+import axios from 'axios'
+import ImageItem from '../components/image-item.js'
+import Uploader from '../components/uploader.js'
+
+export default {
+  data: () => ({
+    items: [],
+    cachedItems: [],
+    loading: false
+  }),
+  methods: {
+    uploadSuccess ({ file, fileList }) {
+      const response = file.response.length && file.response[0]
+      this.items = [{ name: response.name, previewURL: response.url }, ...this.cachedItems]
+    },
+    beforeUpload (file) {
+      this.items.unshift({
+        loading: true
+      })
+      return file
+    }
+  },
+  render (h) {
+    return (
+      <div>
+        <a-spin tip="Loading..." spinning={this.loading}>
+          <a-card>
+            <Uploader
+              slot="extra"
+              beforeUpload={file => this.beforeUpload(file)}
+              uploadSuccess={info => this.uploadSuccess(info)}
+            />
+            <a-list
+              style="height: 400px; overflow: auto;"
+              grid={{ gutter: 12, column: 3 }}
+              dataSource={this.items}
+              renderItem={(item, index) => (
+                <a-list-item onClick={() => {
+                  debugger
+                  this.$emit('changeItem', item)
+                }}>
+                  <ImageItem item={item} />
+                </a-list-item>
+              )}
+            >
+            </a-list>
+          </a-card>
+        </a-spin>
+      </div>
+    )
+  },
+  mounted () {
+    // demo code
+    axios
+      .get('https://pixabay.com/api/?key=12120348-2ad26e4cc05d9bc068097ab3b&q=yellow+flowers&image_type=photo&pretty=true')
+      .then(res => {
+        this.items = res.data.hits
+        this.cachedItems = res.data.hits.slice(0)
+      })
+  }
+}
+import axios from 'axios'
+import ImageItem from '../components/image-item.js'
+
+export default {
+  data: () => ({
+    items: [],
+    loading: false,
+    options: {
+      key: '12120348-2ad26e4cc05d9bc068097ab3b', // pixabay demo key from https://pixabay.com/zh/service/about/api/
+      image_type: 'photo',
+      pretty: true,
+      q: 'yellow+flowers',
+      orientation: 'all' // "all", "horizontal", "vertical"
+    }
+  }),
+  computed: {
+    isVertial () {
+      return this.options.orientation === 'vertical'
+    }
+  },
+  methods: {
+    queryAPI () {
+      axios
+        .get('https://pixabay.com/api/', { params: this.options })
+        .then(res => {
+          this.items = res.data.hits
+        })
+    }
+  },
+  render (h) {
+    return (
+      <div>
+        <a-spin tip="Loading..." spinning={this.loading}>
+          <a-card >
+            <div slot="extra" style={{ display: 'flex' }}>
+              <a-dropdown>
+                <a-menu slot="overlay" onClick={({ key }) => {
+                  this.options.orientation = key
+                  this.queryAPI()
+                }}>
+                  <a-menu-item key="all"><a-icon type="user" />任意方位</a-menu-item>
+                  <a-menu-item key="horizontal"><a-icon type="user" />水平</a-menu-item>
+                  <a-menu-item key="vertical"><a-icon type="user" />竖直</a-menu-item>
+                </a-menu>
+                <a-button style="margin-left: 8px" type="link">
+                  图片方向 <a-icon type="down" />
+                </a-button>
+              </a-dropdown>
+              <a-input-search
+                placeholder="input search text"
+                onSearch={value => {
+                  this.options.q = value
+                  this.queryAPI()
+                }}
+              />
+            </div>
+            <a-list
+              grid={{ gutter: 12, column: this.isVertial ? 4 : 3 }}
+              dataSource={this.items}
+              renderItem={(item, index) => (
+                <a-list-item onClick={item => {
+                  this.$emit('changeItem', item)
+                }}>
+                  <ImageItem item={item} height={this.isVertial ? 240 : 142 } />
+                </a-list-item>
+              )}
+            >
+            </a-list>
+          </a-card>
+        </a-spin>
+      </div>
+    )
+  },
+  mounted () {
+    this.queryAPI()
+  }
+}
+import ImageGallery from '@/components/core/support/image-gallery/gallery.js'
+
 export default {
   name: 'lbp-background',
   render () {
@@ -41,8 +43,8 @@ export default {
   editorConfig: {
     propsConfig: {
       imgSrc: {
-        // type: 'picture-picker',
-        type: 'a-input',
+        type: 'image-gallery',
+        // type: 'a-input',
         label: '图片url',
         prop: {
           type: 'textarea'
@@ -60,7 +62,7 @@ export default {
       }
     },
     components: {
-    //   'picture-picker': PicturePicker,
+      'image-gallery': ImageGallery
     }
   }
 }