hookehuyr

✨ feat(我的点赞): API联调

1 import { createApp } from 'vue'; 1 import { createApp } from 'vue';
2 -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 } from 'vant'; 2 +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 } from 'vant';
3 import router from './router'; 3 import router from './router';
4 import App from './App.vue'; 4 import App from './App.vue';
5 // import axios from './utils/axios'; 5 // import axios from './utils/axios';
...@@ -40,6 +40,7 @@ app.use(Swipe); ...@@ -40,6 +40,7 @@ app.use(Swipe);
40 app.use(SwipeItem); 40 app.use(SwipeItem);
41 app.use(Dialog); 41 app.use(Dialog);
42 app.use(ActionSheet); 42 app.use(ActionSheet);
43 +app.use(Loading);
43 44
44 app.use(ConfigProvider); 45 app.use(ConfigProvider);
45 46
......
...@@ -8,16 +8,11 @@ ...@@ -8,16 +8,11 @@
8 </template> 8 </template>
9 9
10 <script setup> 10 <script setup>
11 -import dataList from '@/mock/video_list'
12 import VideoCard from '@/components/VideoCard/index.vue' 11 import VideoCard from '@/components/VideoCard/index.vue'
13 12
14 -import { ref, reactive, onMounted } from 'vue' 13 +import { ref } from 'vue'
15 -import { useRoute, useRouter } from 'vue-router'
16 import axios from '@/utils/axios'; 14 import axios from '@/utils/axios';
17 -import $ from 'jquery'
18 import { Toast } from 'vant'; 15 import { Toast } from 'vant';
19 -const $route = useRoute();
20 -const $router = useRouter();
21 16
22 // 处理书籍下作品列表 17 // 处理书籍下作品列表
23 const prodList = ref([]) 18 const prodList = ref([])
......
1 <template> 1 <template>
2 <div class="book-video-list"> 2 <div class="book-video-list">
3 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 3 + <template v-for="item in prodList" :key="item" style="height: 3rem;">
4 - <template v-for="item in dataList" :key="item" style="height: 3rem;"> 4 + <video-card :item="item"></video-card>
5 - <video-card :item="item"></video-card> 5 + </template>
6 - </template> 6 + <div style="height: 2rem;"></div>
7 - </van-list>
8 </div> 7 </div>
9 </template> 8 </template>
10 9
11 <script setup> 10 <script setup>
12 -import dataList from '@/mock/video_list'
13 import VideoCard from '@/components/VideoCard/index.vue' 11 import VideoCard from '@/components/VideoCard/index.vue'
14 12
15 -import { ref, reactive, onMounted } from 'vue' 13 +import { ref } from 'vue'
16 -import { useRoute, useRouter } from 'vue-router'
17 import axios from '@/utils/axios'; 14 import axios from '@/utils/axios';
18 -import $ from 'jquery'
19 import { Toast } from 'vant'; 15 import { Toast } from 'vant';
20 -const $route = useRoute();
21 -const $router = useRouter();
22 16
23 // 处理书籍下作品列表 17 // 处理书籍下作品列表
24 -const list = ref([]); 18 +const prodList = ref([])
25 -const loading = ref(false); 19 +axios.get('/srv/?a=my_like')
26 -const finished = ref(false); 20 +.then(res => {
27 - 21 + if (res.data.code === 1) {
28 -const onLoad = () => { 22 + prodList.value = res.data.data.prod;
29 - // 异步更新数据 23 + } else {
30 - // setTimeout 仅做示例,真实场景中一般为 ajax 请求 24 + console.warn(res);
31 - setTimeout(() => { 25 + Toast({
32 - for (let i = 0; i < 20; i++) { 26 + icon: 'close',
33 - list.value.push(list.value.length + 1); 27 + message: res.data.msg
34 - } 28 + });
35 - 29 + }
36 - // 加载状态结束 30 +})
37 - loading.value = false; 31 +.catch(err => {
38 - 32 + console.error(err);
39 - // 数据全部加载完成 33 +})
40 - if (list.value.length >= 100) {
41 - finished.value = true;
42 - }
43 - }, 1000);
44 -};
45 -
46 - onMounted(() => {
47 -
48 - })
49 </script> 34 </script>
50 35
51 <script> 36 <script>
......