fix 首页细节调整

hookehuyr
Commit 9320c6f0475bfa4460d326aa373a8a627c34dc0a 9320c6f0 1 parent ea84ae17
Showing 1 changed file with 59 additions and 42 deletions
src/views/fxPark/index.vue
--- a/src/views/fxPark/index.vue
View file @9320c6f
+++ b/src/views/fxPark/index.vue
View file @9320c6f
 <!--
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-12 15:42:26
+ * @LastEditTime: 2024-04-12 21:58:01
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 文件描述
 -->
@@ -12,8 +12,8 @@
       <div class="quick-entrance-item" @click="goToAudio">
         <van-icon name="chat-o" />&nbsp;&nbsp;<span>植物之声</span>
       </div>
-      <div class="quick-entrance-item" @click="onShare">
+      <div class="quick-entrance-item" @click="goToPoster">
-        <van-icon name="chat-o" />&nbsp;&nbsp;<span>分享海报</span>
+        <van-icon name="chat-o" />&nbsp;&nbsp;<span>海报列表</span>
       </div>
     </div>
     <div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
@@ -24,8 +24,8 @@
       <!-- <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_message" title="留言" :round="false" :close-on-click-overlay="false" @cancel="onCancel">
+    <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
-      <div style="padding: 1rem 0; height: 10vh; display: flex; padding: 0.5rem;">
+      <div class="danmu-input-wrapper" :style="{ height: space_height }">
         <van-field
           ref="RefDanmu"
           v-model="danmu_message"
@@ -36,27 +36,14 @@
           @keydown.enter="handleEnterPress"
           enterkeyhint="send"
         />
-        <!-- <van-field
-          ref="RefDanmu"
-          v-model="danmu_message"
-          rows="3"
-          autosize
-          label=""
-          type="textarea"
-          placeholder="请输入留言"
-          @blur="onBlur"
-          @focus="onFocus"
-          enterkeyhint="send"
-          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>
+      <div v-if="spaceDiv" :style="{ height: space_height }"></div>
     </van-action-sheet>
     <van-floating-bubble icon="chat" @click="onCloseDanmu" />
-    <div v-if="show_danmu" style="position: fixed; bottom: 0; left: 0; right: 0; background-color: white; z-index: 10; height: 5rem;">
+
-      <div @click="commentsBtn" style="background-color: #F3F3F3; margin: 1rem 0.85rem; border-radius: 10px; padding: 0.5rem 1rem; font-size: 0.9rem; color: #ABABAB;">发一条友好的弹幕吧</div>
+    <div v-if="show_danmu" class="danmu-boxer">
+      <div class="danmu-boxer-btn" @click="commentsBtn">发一条友好的弹幕吧</div>
     </div>
   </div>
 </template>
@@ -72,6 +59,7 @@ import { parseQueryString } from '@/utils/tools.js'
 //import { } from '@/composables'
 import danmaku from '@/components/danmaku.vue';
 import { getTreeAPI, saveDanmuAPI } from '@/api/carbon.js';
+import { showToast } from 'vant';
 // 初始化WX环境
 import wx from 'weixin-js-sdk'
@@ -112,7 +100,14 @@ const TREE_CHIP = { // 碎片图结构
 const data_list = ref([]);
 const all_actived = ref(false); // 全部激活
+const space_height = ref('10vh'); // 第一次进入没有导航栏
+
 onMounted(async () => {
+  // 根据历史记录显示高度不一样，高度调高一点
+  if (history.length > 1) {
+    space_height.value = '15vh';
+  }
+  //
   const { code, data } = await getTreeAPI();
   if (code) {
     let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识
@@ -122,6 +117,9 @@ onMounted(async () => {
       });
     } else { // 全点亮
       all_actived.value = true;
+      data.forEach(item => {
+        item.chip_src = TREE_CHIP[item.revision]['active']; // 根据点亮状态，显示碎片地址
+      });
     }
     //
     data_list.value = data;
@@ -153,7 +151,9 @@ const onChipClick = () => { // 点击碎片回调
   });
 }
-const commentsBtn = () => {
+const spaceDiv = ref(false); // 占位符
+
+const commentsBtn = () => { // 点击留言输入框
   show_danmu_message.value = true;
   nextTick(() => {
     spaceDiv.value = true;
@@ -161,12 +161,11 @@ const commentsBtn = () => {
   });
 }
-const spaceDiv = ref(false);
+const saveMessage = async () => { // 提交留言
-
-const sendMessage = async () => {
   const { code, data } = await saveDanmuAPI({ note: danmu_message.value });
   if (code) {
     show_danmu_message.value = false;
+    // 实时更新到弹幕列表
     add_text.value = {
       status: '2',
       note: danmu_message.value
@@ -176,29 +175,25 @@ const sendMessage = async () => {
   }
 }
-const onDanmuBlur = (evt) => {
+const onDanmuBlur = (evt) => { // 弹幕输入框失去焦点
   show_danmu_message.value = false;
   spaceDiv.value = false;
   document.body.scrollIntoView({behavior: 'smooth'});
 }
-const handleEnterPress = (evt) => {
+const handleEnterPress = (evt) => { // 小键盘回车回调
   if (evt.keyCode === 13) {
-    sendMessage();
+    saveMessage();
     document.body.scrollIntoView({behavior: 'smooth'});
   }
 }
-const onFocus = () => {
+const goToPoster = () => { // 海报列表按钮
-  // spaceDiv.value = true;
+  let index = data.findIndex(item => item.is_light === '1'); // 没有一个点亮
-}
+  if (index === -1) {
-
+    showToast('没有点亮的植被，无法生成海报');
-const onCancel = () => {
+    return false;
-  console.warn(0);
+  }
-}
-
-const onShare = () => { // 分享海报按钮
-  // go('/finish')
   let raw_data = data_list.value.filter(item => item.is_light === '1'); // 获取所有已点亮的植被
   //
   $router.push({
@@ -209,11 +204,11 @@ const onShare = () => { // 分享海报按钮
   });
 }
-const goToAudio = () => {
+const goToAudio = () => { // 播放音频列表
-  go('/audio')
+  go('/audio');
 }
-const onCloseDanmu = () => {
+const onCloseDanmu = () => { // 弹幕开关
   show_danmu.value = !show_danmu.value;
 }
 </script>
@@ -254,4 +249,26 @@ const onCloseDanmu = () => {
     }
   }
 }
+
+.danmu-input-wrapper {
+  padding: 1rem 0;  display: flex; padding: 0.5rem;
+}
+
+.danmu-boxer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  z-index: 10;
+  height: 5rem;
+  .danmu-boxer-btn {
+    background-color: #F3F3F3;
+    margin: 1rem 0.85rem;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    color: #ABABAB;
+  }
+}
 </style>