更新：图书搜索功能；听书实时显示对应文字；书籍评论功能完善；

components/bkhumor-emojiplus/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <view
+    class="emotion-box"
+    style="display: flex; flex-direction: row; flex-wrap: wrap; height: 275px; overflow-y: scroll;"
+  >
+    <block v-for="(list, index) in emojilist" :key="index">
+      <view style="width: 10%; margin: 10px 3.3%;">
+        <image
+          @click="clickEmoji(list)"
+          :src="`/static/emojis/qq/${list.url}`"
+          style="width: 35px; height: 35px;"
+        />
+      </view>
+    </block>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, defineProps, defineEmits } from 'vue'
+import emojiList1 from './emoji/biaoqing.js'
+
+const props = defineProps({
+  windowWidth: {
+    type: Number,
+    default: 320,
+  },
+})
+
+const emit = defineEmits(['emotion'])
+
+const emojilist = ref(emojiList1)
+const img_width = ref(0)
+
+onMounted(() => {
+  const query = uni.createSelectorQuery().in(this)
+  query
+    .select('.emotion-box')
+    .boundingClientRect((data) => {
+      img_width.value = props.windowWidth / 10
+    })
+    .exec()
+})
+
+/**
+ * 点击表情事件
+ */
+function clickEmoji(val) {
+  const emotioni = val.alt
+  const emotion = getEmotion(val.url)
+	console.log(emotion)
+  emit('emotion', { emotion, emotioni })
+}
+
+/**
+ * 根据表情 url 生成完整图片路径
+ */
+function getEmotion(res) {
+  return `https://www.amazinglimited.com/emoji/qq/${res}`
+}
+</script>
+
+<style scoped>
+.emotion-box {
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 8upx;
+  overflow: hidden;
+  background: white;
+}
+
+.emotion-box-line {
+  display: flex;
+}
+
+.emotion-item {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  padding: 10upx;
+}
+</style>