添加投币和回应

components/RespondAdd.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="respond-add flexcenter" @click="open">
+        <img class="respond-add-icon" src="@/img/plus-sign.svg" />
+        <template v-if="selectEomjiPop">
+            <div class="respond-list-mask" @click.stop="close"></div>
+            <div class="respond-list-box" @click.stop="">
+                <div class="respond-list-title">选择你的回应：</div>
+                <div class="respond-list">
+                    <template v-for="item in riposteoptions" :key="item">
+                        <div class="respond-item" v-for="(item, key) in item.data" :key="key" v-html="jointriposte(key)" @click="selectEomji(key)"></div>
+                    </template>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    riposteoptions: Array,
+    index: Number,
+})
+
+const open = () => {
+    selectEomjiPop.value = true
+}
+
+const close = () => {
+    selectEomjiPop.value = false
+}
+
+let selectEomjiPop = ref(false)
+const emit = defineEmits(["selectEomji"])
+
+const selectEomji = key => {
+    close()
+    emit("selectEomji", key, props.index, true)
+}
+
+const jointriposte = item => {
+    return `&#x${item};`
+}
+</script>
+<style scoped></style>

components/RespondPop.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="respond-pop-mask">
+        <div class="respond-pop">
+            <div class="respond-pop-no flexcenter" v-if="JSON.stringify(respondDetail) == '{}'">
+                <img class="respond-title-icon" @click="closePopList()" src="//app.gter.net/image/gter/offer/imgdetails/cross-grey.png?v=5.1.78_206050707" />
+                <img src="//app.gter.net/image/gter/offer/imgdetails/no-discussion.png?v=5.1.78_206050707" class="respond-pop-no-icon" />
+                <div class="respond-pop-no-text">- 暂无数据 -</div>
+            </div>
+            <template v-else>
+                <div class="respond-pop-title">
+                    共<span class="respond-pop-amount">{{ respondPopObj.user }}</span
+                    >人回应
+                    <img class="respond-title-icon" @click="closePopList()" src="//app.gter.net/image/gter/offer/imgdetails/cross-grey.png?v=5.1.78_206050707" />
+                </div>
+                <div class="respond-list">
+                    <div class="respond-item" v-for="(item, index) in respondDetail" :key="index">
+                        <div class="respond-code" :class="{ 'pitch': item.selected }" v-html="jointriposte(item.item)" @click="selectEomjiListPop(item.item, index)"></div>
+                        <div class="respond-content flex1">
+                            <div class="respond-total">{{ item.user.length }} 人作此回应</div>
+                            <div class="user-item" v-for="(item, index) in item.user" :key="index" @click="TAHomePage(item.uin)">
+                                <img class="user-avatar" :src="item.avatar" />
+                                {{ item.nickname || item.username }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+<script setup>
+const props = defineProps({
+    respondDetail: Array,
+    respondPopObj: Object,
+})
+
+// 点击ta的主页
+const TAHomePage = uin => {
+    redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&uid=${uin}`)
+}
+
+// 跳转 url
+const redirectToExternalWebsite = url => {
+    const link = document.createElement("a")
+    link.href = url
+    link.target = "_blank"
+    link.click()
+}
+
+let selectEomjiPop = ref(false)
+const emit = defineEmits(["closePopList","selectEomji"])
+
+const selectEomjiListPop = key => {
+    console.log("key",key);
+    emit("selectEomji", key, props.respondPopObj.index || 0, false, true)
+}
+
+const closePopList = () => {
+    emit("closePopList")
+}
+
+const jointriposte = item => {
+    return `&#x${item};`
+}
+</script>
+<style scoped></style>