首页新增弹幕功能

hookehuyr
Commit 491198690a9ed86b48e84fad9df2d29712ee89da 49119869 1 parent 3abe423c
Showing 3 changed files with 86 additions and 6 deletions
components.d.ts
src/components/danmaku.vue
src/views/fxPark/index.vue
--- a/components.d.ts
View file @4911986
+++ b/components.d.ts
View file @4911986
@@ -10,6 +10,8 @@ declare module 'vue' {
     Danmaku: typeof import('./src/components/danmaku.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VanActionSheet: typeof import('vant/es')['ActionSheet']
+    VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
     VanLoading: typeof import('vant/es')['Loading']
--- a/src/components/danmaku.vue
View file @4911986
+++ b/src/components/danmaku.vue
View file @4911986
 <!--
  * @Date: 2024-04-10 14:16:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-10 14:22:14
+ * @LastEditTime: 2024-04-11 14:19:23
  * @FilePath: /fxPark/src/components/danmaku.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="danmaku-page">
-    <vue-danmaku ref="danmaku" v-model:danmus="danmus" useSlot loop :channels="4" :speeds="50" :top="20" style="height:12rem; width:100vw; position: absolute; top:0; z-index: 10;">
+    <vue-danmaku ref="danmaku" v-model:danmus="danmus" useSlot loop :channels="2" :speeds="50" :top="0" style="height:15rem; width:100vw; position: absolute; top:0; z-index: 10; padding-top: 1rem;">
       <template v-slot:dm="{ index, danmu }">
-        <span style="background-color: rgba(48, 48, 48, 0.50); padding: 0.25rem 1rem; border-radius: 14px;">{{ index }}{{ danmu.name }}：{{ danmu.text }}</span>
+        <div style="background-color: rgba(48, 48, 48, 0.50); padding: 0.25rem 1rem; border-radius: 14px; margin-top: 1rem;">{{ danmu.text }}</div>
       </template>
     </vue-danmaku>
   </div>
@@ -28,8 +28,21 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+const props = defineProps({
+  text: {
+    type: Object,
+    default: {}
+  }
+});
+
+watch(() => props.text, (v) => {
+  if (v.text) {
+    danmaku.value.add(v)
+  }
+});
+
 const danmaku = ref(null)
-const danmus = ref([{ avatar: 'http://a.com/a.jpg', name: 'a', text: 'aaa' }, { avatar: 'http://a.com/b.jpg', name: 'b', text: 'bbb' }])
+const danmus = ref([{ name: 'a', text: 'aaa' }, { name: 'b', text: 'bbb' }])
 </script>
--- a/src/views/fxPark/index.vue
View file @4911986
+++ b/src/views/fxPark/index.vue
View file @4911986
 <!--
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-10 15:01:38
+ * @LastEditTime: 2024-04-11 14:52:47
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="fxPark-page">
-    <danmaku />
+    <danmaku :text="add_text" />
     <div class="quick-entrance-wrapper">
       <div class="quick-entrance-item" style="">
         <van-icon name="chat-o" />&nbsp;&nbsp;<span>植物之声</span>
@@ -16,6 +16,37 @@
     <div class="container" v-for="(item, index) in img_list" :key="index" @click="onClick(item)">
       <img :src="item.src" class="img">
     </div>
+    <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;">
+      <div style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div>
+      <div @click="commentsBtn" style="display: inline-flex; padding: 0.6rem 2rem; color: #fff; background-color: #F68015;align-items: center; border-radius: 1.5rem;">弹幕留言</div>
+    </div>
+
+    <van-action-sheet v-model:show="show_danmu" title="留言" :round="false" :close-on-click-overlay="false" @cancel="onCancel">
+      <div style="padding: 1rem 0; height: 10vh; display: flex; padding: 0.5rem;">
+        <!-- <van-field
+          v-model="message"
+          rows="3"
+          autosize
+          label=""
+          type="textarea"
+          placeholder="请输入留言"
+          @blur="onBlur"
+        /> -->
+        <van-field
+          v-model="message"
+          rows="3"
+          autosize
+          label=""
+          type="textarea"
+          placeholder="请输入留言"
+          @blur="onBlur"
+          @focus="onFocus"
+          style="background-color: #F3F3F3; padding: 1rem; border-radius: 5px; flex: 1; margin-right: 1rem;"
+        />
+        <div @click="sendMessage" style="display: flex; align-items: flex-end; justify-content: center; margin-right: 0.5rem;">发送</div>
+      </div>
+      <div v-if="spaceDiv" style="height: 10vh;"></div>
+    </van-action-sheet>
   </div>
 </template>
@@ -36,6 +67,10 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+const show_danmu = ref(false);
+const message = ref('');
+const add_text = ref({});
+
 const img_list = ref([{
   src:'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png' ,
 }, {
@@ -63,10 +98,40 @@ const onClick = (item) => {
     }
   });
 }
+
+const commentsBtn = () => {
+  show_danmu.value = true;
+}
+
+const spaceDiv = ref(false);
+
+const sendMessage = () => {
+  show_danmu.value = false;
+  console.warn(message.value);
+  add_text.value = {
+    name: '123',
+    text: message.value
+  }
+  //
+  message.value = '';
+}
+
+const onBlur = () => {
+  spaceDiv.value = false;
+}
+
+const onFocus = () => {
+  spaceDiv.value = true;
+}
+
+const onCancel = () => {
+  console.warn(0);
+}
 </script>
 <style lang="less" scoped>
 .fxPark-page {
+  position: relative;
   .quick-entrance-wrapper {
     .quick-entrance-item {
       position: absolute;