Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9320c6f0 1 parent ea84ae17

fix 首页细节调整

Inline Side-by-side
Showing 1 changed file with 59 additions and 42 deletions
<!--
* @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">
<van-icon name="chat-o" />&nbsp;&nbsp;<span>分享海报</span>
<div class="quick-entrance-item" @click="goToPoster">
<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">
<div style="padding: 1rem 0; height: 10vh; display: flex; padding: 0.5rem;">
<van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
<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 sendMessage = async () => {
const saveMessage = 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 = () => {
// spaceDiv.value = true;
}
const onCancel = () => {
console.warn(0);
}
const onShare = () => { // 分享海报按钮
// go('/finish')
const goToPoster = () => { // 海报列表按钮
let index = data.findIndex(item => item.is_light === '1'); // 没有一个点亮
if (index === -1) {
showToast('没有点亮的植被，无法生成海报');
return false;
}
let raw_data = data_list.value.filter(item => item.is_light === '1'); // 获取所有已点亮的植被
//
$router.push({
......@@ -209,11 +204,11 @@ const onShare = () => { // 分享海报按钮
});
}
const goToAudio = () => {
go('/audio')
const goToAudio = () => { // 播放音频列表
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>
......