Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
523af4df 1 parent b7852e51

弹幕功能调整，API联调

Inline Side-by-side
Showing 8 changed files with 214 additions and 68 deletions
...@@ -13,8 +13,8 @@ declare module 'vue' { ...@@ -13,8 +13,8 @@ declare module 'vue' {
13 VanActionSheet: typeof import('vant/es')['ActionSheet'] 13 VanActionSheet: typeof import('vant/es')['ActionSheet']
14 VanCol: typeof import('vant/es')['Col'] 14 VanCol: typeof import('vant/es')['Col']
15 VanField: typeof import('vant/es')['Field'] 15 VanField: typeof import('vant/es')['Field']
16 + VanFloatingBubble: typeof import('vant/es')['FloatingBubble']
16 VanIcon: typeof import('vant/es')['Icon'] 17 VanIcon: typeof import('vant/es')['Icon']
17 - VanImage: typeof import('vant/es')['Image']
18 VanLoading: typeof import('vant/es')['Loading'] 18 VanLoading: typeof import('vant/es')['Loading']
19 VanRow: typeof import('vant/es')['Row'] 19 VanRow: typeof import('vant/es')['Row']
20 VanUploader: typeof import('vant/es')['Uploader'] 20 VanUploader: typeof import('vant/es')['Uploader']
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2024-04-11 09:50:51 5 + * @LastEditTime: 2024-04-12 06:04:39
6 * @FilePath: /fxPark/src/App.vue 6 * @FilePath: /fxPark/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
......
1 +import { fn, fetch } from '@/api/fn';
2 +
3 +const Api = {
4 + GET_TREE: '/srv/?a=api&t=get_tree',
5 + GET_DANMU: '/srv/?a=api&t=get_bulletscreen',
6 + SAVE_DANMU: '/srv/?a=api&t=save_bulletscreen',
7 +}
8 +
9 +
10 +/**
11 + * @description: 用户的植被数据
12 + * @returns
13 + */
14 +export const getTreeAPI = (params) => fn(fetch.get(Api.GET_TREE, params));
15 +
16 +/**
17 + * @description: 显示弹幕
18 + * @returns
19 + */
20 +export const getDanmuAPI = (params) => fn(fetch.get(Api.GET_DANMU, params));
21 +
22 +/**
23 + * @description: 保存弹幕
24 + * @returns
25 + */
26 +export const saveDanmuAPI = (params) => fn(fetch.post(Api.SAVE_DANMU, params));
1 <!-- 1 <!--
2 * @Date: 2024-04-10 14:16:36 2 * @Date: 2024-04-10 14:16:36
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-04-11 14:19:23 4 + * @LastEditTime: 2024-04-12 12:27:41
5 * @FilePath: /fxPark/src/components/danmaku.vue 5 * @FilePath: /fxPark/src/components/danmaku.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="danmaku-page"> 9 <div class="danmaku-page">
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;"> 10 + <vue-danmaku ref="danmakuRef" 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;">
11 <template v-slot:dm="{ index, danmu }"> 11 <template v-slot:dm="{ index, danmu }">
12 - <div style="background-color: rgba(48, 48, 48, 0.50); padding: 0.25rem 1rem; border-radius: 14px; margin-top: 1rem;">{{ danmu.text }}</div> 12 + <div class="dm-item">
13 + <van-icon v-if="danmu.status === '2'" name="fire-o" color="red" />&nbsp;
14 + <span>{{ danmu.note }}</span>
15 + </div>
13 </template> 16 </template>
14 </vue-danmaku> 17 </vue-danmaku>
15 </div> 18 </div>
...@@ -24,6 +27,8 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@ ...@@ -24,6 +27,8 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
24 //import { } from '@/utils/generateModules.js' 27 //import { } from '@/utils/generateModules.js'
25 //import { } from '@/utils/generateIcons.js' 28 //import { } from '@/utils/generateIcons.js'
26 //import { } from '@/composables' 29 //import { } from '@/composables'
30 +import { getDanmuAPI } from '@/api/carbon.js';
31 +
27 const $route = useRoute(); 32 const $route = useRoute();
28 const $router = useRouter(); 33 const $router = useRouter();
29 useTitle($route.meta.title); 34 useTitle($route.meta.title);
...@@ -32,20 +37,51 @@ const props = defineProps({ ...@@ -32,20 +37,51 @@ const props = defineProps({
32 text: { 37 text: {
33 type: Object, 38 type: Object,
34 default: {} 39 default: {}
40 + },
41 + show: {
42 + type: Boolean,
43 + default: false
35 } 44 }
36 }); 45 });
37 46
38 watch(() => props.text, (v) => { 47 watch(() => props.text, (v) => {
39 - if (v.text) { 48 + if (v.note) {
40 - danmaku.value.add(v) 49 + danmakuRef.value.add(v)
50 + }
51 +});
52 +watch(() => props.show, (v) => {
53 + nextTick(() => {
54 + if (v) {
55 + danmakuRef.value.show()
56 + } else {
57 + danmakuRef.value.hide()
41 } 58 }
59 + })
60 +}, {
61 + immediate: true
42 }); 62 });
43 63
44 -const danmaku = ref(null) 64 +const danmakuRef = ref(null)
45 -const danmus = ref([{ name: 'a', text: 'aaa' }, { name: 'b', text: 'bbb' }]) 65 +const danmus = ref([]);
66 +
67 +onMounted(async () => {
68 + const { code, data } = await getDanmuAPI();
69 + if (code) {
70 + console.warn(data);
71 + danmus.value = data;
72 + }
73 +})
46 74
47 </script> 75 </script>
48 76
49 <style lang="less" scoped> 77 <style lang="less" scoped>
50 -.danmaku-page {} 78 +.danmaku-page {
79 + .dm-item {
80 + background-color: rgba(48, 48, 48, 0.50);
81 + padding: 0.25rem 1rem;
82 + border-radius: 14px;
83 + margin-top: 1rem;
84 + font-size: 0.95rem;
85 + }
86 +}
51 </style> 87 </style>
......
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-31 12:06:19 3 * @Date: 2022-05-31 12:06:19
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-12-31 17:32:10 5 + * @LastEditTime: 2024-04-12 11:15:38
6 - * @FilePath: /tswj/src/main.js 6 + * @FilePath: /fxPark/src/main.js
7 * @Description: 7 * @Description:
8 */ 8 */
9 import { createApp } from 'vue'; 9 import { createApp } from 'vue';
10 -import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, Notify } from 'vant'; 10 +import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, Notify, FloatingBubble } from 'vant';
11 import router from './router'; 11 import router from './router';
12 import App from './App.vue'; 12 import App from './App.vue';
13 // import axios from './utils/axios'; 13 // import axios from './utils/axios';
...@@ -21,6 +21,6 @@ const app = createApp(App); ...@@ -21,6 +21,6 @@ const app = createApp(App);
21 21
22 app.config.globalProperties.$http = axios; // 关键语句 22 app.config.globalProperties.$http = axios; // 关键语句
23 23
24 -app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(Notify); 24 +app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(Notify).use(FloatingBubble);
25 25
26 app.mount('#app'); 26 app.mount('#app');
......
1 /* 1 /*
2 * @Date: 2024-04-07 10:14:17 2 * @Date: 2024-04-07 10:14:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-04-11 15:36:49 4 + * @LastEditTime: 2024-04-11 17:20:27
5 * @FilePath: /fxPark/src/router/routes/modules/fxPark/index.js 5 * @FilePath: /fxPark/src/router/routes/modules/fxPark/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
......
1 <!-- 1 <!--
2 * @Date: 2024-04-07 10:15:55 2 * @Date: 2024-04-07 10:15:55
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-04-11 15:45:54 4 + * @LastEditTime: 2024-04-12 12:16:24
5 * @FilePath: /fxPark/src/views/fxPark/index.vue 5 * @FilePath: /fxPark/src/views/fxPark/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="fxPark-page"> 9 <div class="fxPark-page">
10 - <danmaku :text="add_text" /> 10 + <danmaku :show="show_danmu" :text="add_text" />
11 <div class="quick-entrance-wrapper"> 11 <div class="quick-entrance-wrapper">
12 <div class="quick-entrance-item" @click="goToAudio"> 12 <div class="quick-entrance-item" @click="goToAudio">
13 <van-icon name="chat-o" />&nbsp;&nbsp;<span>植物之声</span> 13 <van-icon name="chat-o" />&nbsp;&nbsp;<span>植物之声</span>
14 </div> 14 </div>
15 </div> 15 </div>
16 - <div class="container" v-for="(item, index) in img_list" :key="index" @click="onClick(item)"> 16 + <div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
17 - <img :src="item.src" class="img"> 17 + <img :src="item.chip_src" class="img">
18 </div> 18 </div>
19 <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;"> 19 <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;">
20 - <div @click="onShare" style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div> 20 + <div v-if="all_actived" @click="onShare" style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div>
21 - <div @click="commentsBtn" style="display: inline-flex; padding: 0.6rem 2rem; color: #fff; background-color: #F68015;align-items: center; border-radius: 1.5rem;">弹幕留言</div> 21 + <!-- <div @click="commentsBtn" style="display: inline-flex; padding: 0.6rem 2rem; color: #fff; background-color: #F68015;align-items: center; border-radius: 1.5rem;">弹幕留言</div> -->
22 </div> 22 </div>
23 23
24 - <van-action-sheet v-model:show="show_danmu" title="留言" :round="false" :close-on-click-overlay="false" @cancel="onCancel"> 24 + <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" @cancel="onCancel">
25 <div style="padding: 1rem 0; height: 10vh; display: flex; padding: 0.5rem;"> 25 <div style="padding: 1rem 0; height: 10vh; display: flex; padding: 0.5rem;">
26 - <!-- <van-field 26 + <van-field
27 - v-model="message" 27 + ref="RefDanmu"
28 - rows="3" 28 + v-model="danmu_message"
29 - autosize
30 label="" 29 label=""
31 - type="textarea" 30 + type="text"
32 placeholder="请输入留言" 31 placeholder="请输入留言"
33 - @blur="onBlur" 32 + @blur="onDanmuBlur"
34 - /> --> 33 + @keydown.enter="handleEnterPress"
35 - <van-field 34 + enterkeyhint="send"
36 - v-model="message" 35 + />
36 + <!-- <van-field
37 + ref="RefDanmu"
38 + v-model="danmu_message"
37 rows="3" 39 rows="3"
38 autosize 40 autosize
39 label="" 41 label=""
...@@ -41,12 +43,18 @@ ...@@ -41,12 +43,18 @@
41 placeholder="请输入留言" 43 placeholder="请输入留言"
42 @blur="onBlur" 44 @blur="onBlur"
43 @focus="onFocus" 45 @focus="onFocus"
46 + enterkeyhint="send"
44 style="background-color: #F3F3F3; padding: 1rem; border-radius: 5px; flex: 1; margin-right: 1rem;" 47 style="background-color: #F3F3F3; padding: 1rem; border-radius: 5px; flex: 1; margin-right: 1rem;"
45 /> 48 />
46 - <div @click="sendMessage" style="display: flex; align-items: flex-end; justify-content: center; margin-right: 0.5rem;">发送</div> 49 + <div @click="sendMessage" style="display: flex; align-items: flex-end; justify-content: center; margin-right: 0.5rem;">发送</div> -->
47 </div> 50 </div>
48 <div v-if="spaceDiv" style="height: 10vh;"></div> 51 <div v-if="spaceDiv" style="height: 10vh;"></div>
49 </van-action-sheet> 52 </van-action-sheet>
53 +
54 + <van-floating-bubble icon="chat" @click="onCloseDanmu" />
55 + <div v-if="show_danmu" style="position: fixed; bottom: 0; left: 0; right: 0; background-color: white; z-index: 10; height: 5rem;">
56 + <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>
57 + </div>
50 </div> 58 </div>
51 </template> 59 </template>
52 60
...@@ -56,9 +64,11 @@ import { useRoute, useRouter } from 'vue-router' ...@@ -56,9 +64,11 @@ import { useRoute, useRouter } from 'vue-router'
56 64
57 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js' 65 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
58 //import { } from '@/utils/generateModules.js' 66 //import { } from '@/utils/generateModules.js'
67 +import { parseQueryString } from '@/utils/tools.js'
59 //import { } from '@/utils/generateIcons.js' 68 //import { } from '@/utils/generateIcons.js'
60 //import { } from '@/composables' 69 //import { } from '@/composables'
61 -import danmaku from '@/components/danmaku.vue' 70 +import danmaku from '@/components/danmaku.vue';
71 +import { getTreeAPI, saveDanmuAPI } from '@/api/carbon.js';
62 72
63 // 初始化WX环境 73 // 初始化WX环境
64 import wx from 'weixin-js-sdk' 74 import wx from 'weixin-js-sdk'
...@@ -69,74 +79,130 @@ const $route = useRoute(); ...@@ -69,74 +79,130 @@ const $route = useRoute();
69 const $router = useRouter(); 79 const $router = useRouter();
70 useTitle($route.meta.title); 80 useTitle($route.meta.title);
71 81
82 +const TREE_CHIP = { // 碎片图结构
83 + 1: {
84 + invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png',
85 + active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png'
86 + },
87 + 2: {
88 + invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s2.png',
89 + active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s2.png'
90 + },
91 + 3: {
92 + invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s3.png',
93 + active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s3.png'
94 + },
95 + 4: {
96 + invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s4.png',
97 + active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s4.png'
98 + },
99 + 5: {
100 + invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s5.png',
101 + active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s5.png'
102 + },
103 + 6: {
104 + invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s6.png',
105 + active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s6.png'
106 + },
107 +};
108 +
109 +const data_list = ref([]);
110 +const all_actived = ref(false); // 全部激活
111 +
112 +onMounted(async () => {
113 + const { code, data } = await getTreeAPI();
114 + if (code) {
115 + let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识
116 + if (index === -1) { // 未全点亮
117 + data.forEach(item => {
118 + item.chip_src = item.is_light === '0' ? TREE_CHIP[item.revision]['invalid'] : TREE_CHIP[item.revision]['active']; // 根据点亮状态，显示碎片地址
119 + });
120 + } else { // 全点亮
121 + all_actived.value = true;
122 + }
123 + //
124 + data_list.value = data;
125 + }
126 +});
127 +
128 +const RefDanmu = ref(null);
72 const show_danmu = ref(false); 129 const show_danmu = ref(false);
73 -const message = ref(''); 130 +const show_danmu_message = ref(false);
131 +const danmu_message = ref('');
74 const add_text = ref({}); 132 const add_text = ref({});
75 133
76 -const img_list = ref([{ 134 +const onChipClick = () => { // 点击碎片回调
77 - src:'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png' , 135 + if (all_actived.value) return false; // 全点亮忽略
78 -}, { 136 + // 调用微信摄像头
79 - src:'https://cdn.ipadbiz.cn/tmp/fx_park/s2.png' ,
80 -}, {
81 - src:'https://cdn.ipadbiz.cn/tmp/fx_park/s3.png' ,
82 -}, {
83 - src:'https://cdn.ipadbiz.cn/tmp/fx_park/s4.png' ,
84 -}, {
85 - src:'https://cdn.ipadbiz.cn/tmp/fx_park/s5.png' ,
86 -}, {
87 - src:'https://cdn.ipadbiz.cn/tmp/fx_park/s6.png' ,
88 -},])
89 -
90 -const onClick = (item) => {
91 wx.scanQRCode({ 137 wx.scanQRCode({
92 needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， 138 needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
93 scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有 139 scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
94 success: function (res) { 140 success: function (res) {
95 - var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果 141 + // let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
96 - console.log("🚀 ~ file: index.vue:73 ~ onClick ~ result:", result); 142 + // 跳转到相应植被介绍页
143 + let result = 'http://oa.allforlove.org.cn/f/carbon/#/intro?revision=1';
144 + let revision = parseQueryString(result).revision;
145 + go('/intro', { revision });
97 }, 146 },
98 fail: function (res) { 147 fail: function (res) {
99 - console.log("🚀 ~ file: index.vue:77 ~ onClick ~ res:", res); 148 + console.error(res);
100 } 149 }
101 }); 150 });
102 } 151 }
103 152
104 const commentsBtn = () => { 153 const commentsBtn = () => {
105 - show_danmu.value = true; 154 + show_danmu_message.value = true;
155 + nextTick(() => {
156 + spaceDiv.value = true;
157 + RefDanmu.value.focus();
158 + });
106 } 159 }
107 160
108 const spaceDiv = ref(false); 161 const spaceDiv = ref(false);
109 162
110 -const sendMessage = () => { 163 +const sendMessage = async () => {
111 - show_danmu.value = false; 164 + const { code, data } = await saveDanmuAPI({ note: danmu_message.value });
112 - console.warn(message.value); 165 + if (code) {
166 + show_danmu_message.value = false;
113 add_text.value = { 167 add_text.value = {
114 - name: '123', 168 + status: '2',
115 - text: message.value 169 + note: danmu_message.value
170 + }
171 + // 清空输入框
172 + danmu_message.value = '';
116 } 173 }
117 - //
118 - message.value = '';
119 } 174 }
120 175
121 -const onBlur = () => { 176 +const onDanmuBlur = (evt) => {
177 + show_danmu_message.value = false;
122 spaceDiv.value = false; 178 spaceDiv.value = false;
123 } 179 }
124 180
181 +const handleEnterPress = (evt) => {
182 + if (evt.keyCode === 13) {
183 + sendMessage();
184 + }
185 +}
186 +
125 const onFocus = () => { 187 const onFocus = () => {
126 - spaceDiv.value = true; 188 + // spaceDiv.value = true;
127 } 189 }
128 190
129 const onCancel = () => { 191 const onCancel = () => {
130 console.warn(0); 192 console.warn(0);
131 } 193 }
132 194
133 -const onShare = () => { 195 +const onShare = () => { // 分享海报按钮
134 go('/finish') 196 go('/finish')
135 } 197 }
136 198
137 const goToAudio = () => { 199 const goToAudio = () => {
138 go('/audio') 200 go('/audio')
139 } 201 }
202 +
203 +const onCloseDanmu = () => {
204 + show_danmu.value = !show_danmu.value;
205 +}
140 </script> 206 </script>
141 207
142 <style lang="less" scoped> 208 <style lang="less" scoped>
......
1 <!-- 1 <!--
2 * @Date: 2024-04-10 16:08:09 2 * @Date: 2024-04-10 16:08:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-04-11 17:10:21 4 + * @LastEditTime: 2024-04-12 10:55:12
5 * @FilePath: /fxPark/src/views/fxPark/intro.vue 5 * @FilePath: /fxPark/src/views/fxPark/intro.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 <div></div> 10 <div></div>
11 <div style="margin: 1rem;"> 11 <div style="margin: 1rem;">
12 <div style="margin-bottom: 1rem;"> 12 <div style="margin-bottom: 1rem;">
13 - <span style="font-size: 1.25rem;">悬铃木</span> 13 + <span style="font-size: 1.25rem;">悬铃木{{ revision }}</span>
14 <span style="font-size: 0.85rem;">智者长老</span> 14 <span style="font-size: 0.85rem;">智者长老</span>
15 </div> 15 </div>
16 <div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;"> 16 <div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;">
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
37 </div> 37 </div>
38 <div class="light-up-text">恭喜您植被已被点亮</div> 38 <div class="light-up-text">恭喜您植被已被点亮</div>
39 <div style="margin: 1rem 1rem 2rem 1rem; color: white; text-align: center;"> 39 <div style="margin: 1rem 1rem 2rem 1rem; color: white; text-align: center;">
40 - <div style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">生成海报</div> 40 + <div @click="goToPoster" style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">生成海报</div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </template> 43 </template>
...@@ -50,12 +50,30 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@ ...@@ -50,12 +50,30 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
50 //import { } from '@/utils/generateModules.js' 50 //import { } from '@/utils/generateModules.js'
51 //import { } from '@/utils/generateIcons.js' 51 //import { } from '@/utils/generateIcons.js'
52 //import { } from '@/composables' 52 //import { } from '@/composables'
53 +import { getTreeAPI } from '@/api/carbon.js';
54 +
53 const $route = useRoute(); 55 const $route = useRoute();
54 const $router = useRouter(); 56 const $router = useRouter();
55 useTitle($route.meta.title); 57 useTitle($route.meta.title);
56 58
57 -const id = $route.query.id; 59 +const revision = $route.query.revision; // revision 植被编号
58 -console.log("🚀 ~ file: intro.vue:58 ~ id:", id); 60 +console.log("🚀 ~ file: intro.vue:58 ~ revision:", revision);
61 +
62 +onMounted(async () => {
63 + const { code, data } = await getTreeAPI();
64 + if (code) {
65 + console.warn(data);
66 + }
67 +});
68 +
69 +const goToPoster = () => {
70 + $router.push({
71 + path: '/poster',
72 + query: {
73 + revision
74 + }
75 + });
76 +};
59 77
60 </script> 78 </script>
61 79
......