img search

miniprogram/pages/imgs/imgs.js

+// pages/imgs/imgs.js
+const app = getApp();
+// const baseUrl = app.remoteConfig.baseUrl;
+Component({
+  /**
+   * 继承父级样式
+   */
+  options: {
+    addGlobalClass: true,
+  },
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    title: '表情包',
+    loading: false,
+    searchVal: '二次元',
+    emptyText:'查询为空',
+    baseUrl: 'https://yongma16.xyz',
+    config: {
+      title: '表情包搜索',
+      searchPlaceholder: '输入搜索图片',
+      searchText: '查询'
+    },
+    // 展示的图片
+    imgsArray: []
+  },
+  lifetimes: {
+    // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
+    attached: function () {
+      console.log('获取attached')
+      const imgConfig = app.wxProgramConfig.imgConfig;
+      if (imgConfig) {
+        this.setData({
+          title: imgConfig.title,
+          searchVal: imgConfig.searchVal,
+          config: imgConfig.config,
+          emptyText:imgConfig.emptyText
+        })
+      }
+      this.searchImg()
+    },
+    moved: function () { },
+    detached: function () {
+      console.log('detached')
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    bindKeyInput(e) {
+      this.setData({
+        searchVal: e.detail.value
+      })
+    },
+    previewImage(e) {
+      console.log('click png', e)
+      const url = e.target.dataset.url
+      wx.previewImage({
+        current: url, // 当前显示图片的http链接
+        urls: [url] // 需要预览的图片http链接列表
+      })
+    },
+    searchImg() {
+      this.setData({
+        loading: true
+      })
+      const prefix = '/api/emoji/get/' + this.data.searchVal
+      const remotePath = this.data.baseUrl + prefix
+      const thisBack = this
+      wx.request({
+        url: remotePath,
+        method: 'GET',
+        success: (res) => {
+          console.log('res', res)
+          let imgData = []
+          if (res.data) {
+            const { data } = res.data
+            imgData = data.map(url => {
+              return {
+                mode: 'aspectFill',
+                title: '图片',
+                src: url
+              }
+            })
+          }
+          thisBack.setData({
+            loading: false,
+            imgsArray: imgData
+          })
+        },
+        fail: () => {
+          thisBack.setData({
+            loading: false,
+            imgsArray: []
+          })
+        }
+      })
+    }
+  }
+})

miniprogram/pages/imgs/imgs.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

miniprogram/pages/imgs/imgs.wxml

+<!--pages/imgs/imgs.wxml-->
+<view class="container">
+  <view class="container-header">
+    {{config.title}}
+  </view>
+  <view class="container-content">
+    <view class="container-content-top">
+      <view class="container-content-left">
+        <input 
+        class="weui-input" 
+        bindinput="bindKeyInput" 
+        bindconfirm="bindKeyInput"
+        value="{{searchVal}}" Loading="{{loading}}" placeholder="{{config.searchPlaceholder}}" />
+      </view>
+      <view class="container-content-right">
+        <button class="mini-btn" type="primary" size="mini"
+        bindtap="searchImg"
+        >{{config.searchText}}</button>
+      </view>
+    </view>
+    <view class="imgs-list">
+      <view class="imgs-list-content" wx:for="{{imgsArray}}" wx:for-item="item" wx:key="index">
+        <view class="img_title">{{item.text}}</view>
+        <view class="img-box">
+          <image class="img-content" mode="{{item.mode}}" src="{{item.src}}" data-url="{{item.src}}" bindtap="previewImage"></image>
+        </view>
+      </view>
+      <view wx:if="{{!imgsArray.lenghth}}" class="empty-text">
+       {{emptyText}}
+      </view>
+    </view>
+  </view>
+</view>
\ No newline at end of file

miniprogram/pages/imgs/imgs.wxss

+/* pages/imgs/imgs.wxss */
+.container {
+  position: relative;
+  width: 100vw;
+  height: 90vh;
+  background: rgba(255, 255, 255, 0.5);
+  /* fallback for old browsers */
+  overflow: hidden;
+}
+
+.container-header {
+  background: rgba(16, 116, 187);
+  width: 100%;
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
+}
+
+.container-content {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}
+
+.container-content-top {
+  position: relative;
+  padding: 10px 2px;
+  display: flex;
+}
+
+.imgs-list{
+  padding: 5px 5px;
+  max-height: calc( 100vh - 165px);
+  overflow: auto;
+}
+
+.img-box{
+  display: inline;
+}
+.empty-text{
+  height: 40px;
+  width: 100%;
+  color: #333;
+}
+.weui-input{
+  position: relative;
+  border: 1px solid rgba(16, 116, 187,.2);
+  color: #333;
+  height: 32px;
+  line-height: 32px;
+  width: 100%;
+}
+.mini-btn{
+  background:rgba(16, 116, 187) !important;
+  color: #fff;
+  border-radius: 5px;
+  width: 100%;
+}
+.container-content-left{
+  width: 80%;
+}
+.container-content-right{
+  width: 20%;
+  margin-left: 2px;
+  line-height: 32px;
+}
+.img-content{
+  width: 200px;
+  border: 2px solid rgba(16, 116, 187);
+  padding: 1px;
+  height: 100px;
+  margin-bottom: 5px;
+}
\ No newline at end of file