hookehuyr

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

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