|
|
@@ -11,10 +11,20 @@
|
|
|
<ion-footer>
|
|
|
<ion-toolbar>
|
|
|
<div class="message">
|
|
|
- <van-field type="text" v-model="message" placeholder="请输入需要咨询的问题" />
|
|
|
+ <van-field type="text" :border="false" v-model="message" placeholder="请输入需要咨询的问题" />
|
|
|
<img class="icon" src="../assets/icon_liaotian_biaoqing.png" alt="" />
|
|
|
<img class="icon" src="../assets/icon_liaotian_gengduo.png" alt="" />
|
|
|
</div>
|
|
|
+ <div class="emoji-list">
|
|
|
+ <div
|
|
|
+ class="emoji-info"
|
|
|
+ @click="chooseEmoji(item)"
|
|
|
+ v-for="(item, index) in emojisPeople"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item.char }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</ion-toolbar>
|
|
|
</ion-footer>
|
|
|
</ion-page>
|
|
|
@@ -23,6 +33,53 @@
|
|
|
<script setup>
|
|
|
import { ref } from 'vue'
|
|
|
import chatInfo from '../components/ChatInfo.vue'
|
|
|
+import emojis from '../emojis.json'
|
|
|
+
|
|
|
+const emojisPeople = Object.keys(emojis)
|
|
|
+ .filter(key => {
|
|
|
+ return emojis[key].category == 'people'
|
|
|
+ })
|
|
|
+ .map(key => {
|
|
|
+ return emojis[key]
|
|
|
+ })
|
|
|
|
|
|
const message = ref('')
|
|
|
+
|
|
|
+const chooseEmoji = item => {
|
|
|
+ message.value = message.value + item.char
|
|
|
+}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.message {
|
|
|
+ .f();
|
|
|
+ padding: 8px 20px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-cell {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-radius: 8px;
|
|
|
+ --van-field-placeholder-text-color: #bcc1cc;
|
|
|
+ --van-cell-horizontal-padding: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.emoji-list {
|
|
|
+ .f();
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0px 10px 16px;
|
|
|
+ height: 200px;
|
|
|
+ overflow: auto;
|
|
|
+ .emoji-info {
|
|
|
+ width: 24px;
|
|
|
+ .f();
|
|
|
+ justify-content: center;
|
|
|
+ margin: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
