feat: add emoji kitchen

Author: LeeJim

miniprogram/app.json

@@ -1,6 +1,7 @@
 {
   "pages": [
     "pages/index/index",
+    "pages/kitchen/kitchen",
     "pages/detail/index",
     "pages/my/index",
     "pages/myStarred/index",

miniprogram/pages/kitchen/kitchen.js

@@ -0,0 +1,69 @@
+import { knownSupportedEmoji } from './supported';
+let emojiData = {};
+
+Page({
+  data: {
+    visible: false,
+    knownSupportedEmoji,
+    enableEmoji: [],
+    leftEmoji: '',
+    rightEmoji: '',
+    pos: '',
+  },
+  onLoad() {
+    wx.request({
+      url: 'https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/emoji.json',
+      success(res) {
+        emojiData = res.data;
+      },
+      fail(err) {
+        console.log(err);
+      }
+    })
+  },
+  handleSelected(e) {
+    const { pos } = e.currentTarget.dataset;
+    const { leftEmoji } = this.data;
+    
+    if (pos == 'right') {
+      if (leftEmoji == '') {
+        wx.showToast({ icon: 'none', title: '从左边开始' })
+        return;
+      }
+      this.setData({
+        enableEmoji: knownSupportedEmoji.map(e => {
+          const target = emojiData[leftEmoji].find(item => {
+            if (e === leftEmoji) {
+              return item.leftEmoji == e && item.rightEmoji == e;
+            }
+            return item.leftEmoji == e || item.rightEmoji == e;
+          })
+          return {
+            isValid: !!target,
+            id: e,
+            date: target ? target.date : ''
+          }
+        })
+      })
+    }
+    this.setData({ visible: true, pos })
+  },
+
+  onVisibleChange(e) {
+    this.setData({ visible: e.detail.visible })
+  },
+
+  handleSelectedEmoji(e) {
+    const { pos } = this.data;
+    const { id, date, valid } = e.target.dataset;
+    const rect = {};
+
+    if (pos == 'right' && !valid) return;
+
+    if (pos == 'right') {
+      rect.date = date
+    }
+
+    this.setData({ ...rect, [`${pos}Emoji`]: id, visible: false });
+  }
+})

miniprogram/pages/kitchen/kitchen.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "navigationBarTitleText": "表情厨房"
+}

miniprogram/pages/kitchen/kitchen.less

@@ -0,0 +1,44 @@
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  width: 120px;
+  border-radius: 6px;
+  background-color: #efefef;
+  font-size: 58px;
+  color: #ccc;
+
+  &-result {
+    background-color: #fff;
+    margin: 32px auto;
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+  }
+}
+
+.container {
+  display: flex;
+  padding: 24px;
+  background-color: #e4e4e4;
+  justify-content: space-around;
+}
+.block {
+  background: #fff;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.popup-wrapper {
+  height: 60vh;
+}
+
+.emoji {
+  width: 100rpx;
+  height: 100rpx;
+  padding: 24rpx;
+}

miniprogram/pages/kitchen/kitchen.wxml

@@ -0,0 +1,60 @@
+
+<view class="container">
+  <view class="box box-a" bind:tap="handleSelected" data-pos="left">
+    <image
+      wx:if="{{leftEmoji}}"
+      class="emoji"
+      src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(leftEmoji)}}.svg" />
+    <t-icon wx:else name="add" />
+  </view>
+  <view class="box box-b" bind:tap="handleSelected" data-pos="right">
+    <image
+      wx:if="{{rightEmoji}}"
+      class="emoji"
+      src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(rightEmoji)}}.svg" />
+    <t-icon wx:else name="add" />
+  </view>
+</view>
+
+<view class="box box-result">
+  <image
+      wx:if="{{leftEmoji && rightEmoji}}"
+      class="emoji"
+      src="https://www.gstatic.com/android/keyboard/emojikitchen/{{date}}/u{{_.fix(leftEmoji)}}/u{{_.fix(leftEmoji)}}_u{{_.fix(rightEmoji)}}.png" />
+</view>
+
+<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
+  <scroll-view class="popup-wrapper" scroll-y>
+    <view class="block" bind:tap="handleSelectedEmoji">
+      <view wx:if="{{enableEmoji.length > 0}}">
+        <image
+          wx:for="{{enableEmoji}}" 
+          wx:key="index" 
+          lazy-load
+          class="emoji"
+          data-id="{{item.id}}"
+          data-date="{{item.date}}"
+          data-valid="{{item.isValid}}"
+          style="{{item.isValid ? '' : 'opacity: .2;'}}"
+          src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(item.id)}}.svg" />
+      </view>
+      <view wx:else>
+        <image
+          wx:for="{{knownSupportedEmoji}}" 
+          wx:key="index" 
+          lazy-load
+          class="emoji"
+          data-id="{{item}}"
+          src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(item)}}.svg" />
+      </view>
+    </view>
+  </scroll-view>
+</t-popup>
+
+<wxs module="_">
+  module.exports.fix = function(str) {
+    return str.split("-")
+      .filter(function(x) { return x !== "fe0f" })
+      .join("_")
+  }
+</wxs>