Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2f3d1d46 1 parent a4aebdd8

✨ feat(教师视频，家长视频): API联调

Expand all
Inline Side-by-side
Showing 5 changed files with 101 additions and 62 deletions
This diff is collapsed. Click to expand it.
...@@ -27,6 +27,7 @@ export const useUnwatchList = () => { ...@@ -27,6 +27,7 @@ export const useUnwatchList = () => {
27 .then(res => { 27 .then(res => {
28 if (res.data.code === 1) { 28 if (res.data.code === 1) {
29 prod_list.value = _.concat(prod_list.value, res.data.data.prod); 29 prod_list.value = _.concat(prod_list.value, res.data.data.prod);
30 + prod_list.value = _.uniqBy(prod_list.value, 'id');
30 offset.value = prod_list.value.length; 31 offset.value = prod_list.value.length;
31 loading.value = false; 32 loading.value = false;
32 // 数据全部加载完成 33 // 数据全部加载完成
......
...@@ -102,6 +102,7 @@ export const useVideoList = ($route) => { ...@@ -102,6 +102,7 @@ export const useVideoList = ($route) => {
102 if (res.data.code === 1) { 102 if (res.data.code === 1) {
103 bookInfo.value = res.data.data; 103 bookInfo.value = res.data.data;
104 prod_list.value = _.concat(prod_list.value, res.data.data.prod_list); 104 prod_list.value = _.concat(prod_list.value, res.data.data.prod_list);
105 + prod_list.value = _.uniqBy(prod_list.value, 'id');
105 offset.value = prod_list.value.length; 106 offset.value = prod_list.value.length;
106 loading.value = false; 107 loading.value = false;
107 // 数据全部加载完成 108 // 数据全部加载完成
......
1 <template> 1 <template>
2 <div class=""> 2 <div class="">
3 <van-tabs v-model:active="active" sticky @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7" 3 <van-tabs v-model:active="active" sticky @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7"
4 - title-active-color="#222222" title-inactive-color="#777777"> 4 + title-active-color="#222222" title-inactive-color="#777777">
5 - <van-tab title="待审核" badge="24" :title-style="titleStyle"> 5 + <van-tab title="待审核" :badge="prod_num" :title-style="titleStyle">
6 <template v-if="!active"> 6 <template v-if="!active">
7 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 7 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
8 - <template v-for="item in dataList" :key="item" style="height: 3rem;"> 8 + <template v-for="item in prod_list" :key="item" style="height: 3rem;">
9 <b-video-card :item="item" status="PENDING"></b-video-card> 9 <b-video-card :item="item" status="PENDING"></b-video-card>
10 </template> 10 </template>
11 </van-list> 11 </van-list>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 <van-tab title="已审核" :title-style="titleStyle"> 14 <van-tab title="已审核" :title-style="titleStyle">
15 <template v-if="active"> 15 <template v-if="active">
16 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 16 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
17 - <template v-for="item in dataList1" :key="item" style="height: 3rem;"> 17 + <template v-for="item in prod_list" :key="item" style="height: 3rem;">
18 <b-video-card :item="item" status="PROCESS"></b-video-card> 18 <b-video-card :item="item" status="PROCESS"></b-video-card>
19 </template> 19 </template>
20 </van-list> 20 </van-list>
...@@ -25,54 +25,98 @@ ...@@ -25,54 +25,98 @@
25 </template> 25 </template>
26 26
27 <script setup> 27 <script setup>
28 -import dataList from '@/mock/video_list'
29 -import dataList1 from '@/mock/video_list1'
30 import BVideoCard from '@/components/BVideoCard/index.vue' 28 import BVideoCard from '@/components/BVideoCard/index.vue'
31 29
32 import { ref, reactive, onMounted } from 'vue' 30 import { ref, reactive, onMounted } from 'vue'
33 import { useRoute, useRouter } from 'vue-router' 31 import { useRoute, useRouter } from 'vue-router'
34 import axios from '@/utils/axios'; 32 import axios from '@/utils/axios';
35 -import $ from 'jquery' 33 +import _ from 'lodash'
36 import { Toast } from 'vant'; 34 import { Toast } from 'vant';
35 +
37 const $route = useRoute(); 36 const $route = useRoute();
38 const $router = useRouter(); 37 const $router = useRouter();
39 38
39 +
40 const titleStyle = { 40 const titleStyle = {
41 fontSize: '1rem' 41 fontSize: '1rem'
42 } 42 }
43 43
44 +
45 +/**
46 + * 重载刷新程序
47 + */
48 +const onReload = (v) => {
49 + status.value = v
50 + offset.value = 0
51 + prod_list.value = []
52 + loading.value = true;
53 + finished.value = false;
54 + onLoad()
55 +}
56 +
44 const active = ref(0) 57 const active = ref(0)
45 let tabStatus = ref('PENDING') 58 let tabStatus = ref('PENDING')
46 -const onClickTab = () => { 59 +
47 - console.warn(0); 60 +const onClickTab = (v) => {
61 + if (!v.name) {
62 + onReload('apply')
63 + } else {
64 + onReload('checked')
65 + }
48 } 66 }
49 67
68 +// 绑定页面数据
69 +const status = ref('apply');
70 +const prod_num = ref('');
71 +const prod_list = ref([]);
72 +const limit = ref(10)
73 +const offset = ref(0)
74 +
50 // 处理书籍下作品列表 75 // 处理书籍下作品列表
51 -const list = ref([]);
52 const loading = ref(false); 76 const loading = ref(false);
53 const finished = ref(false); 77 const finished = ref(false);
54 78
79 +/**
80 + * 向下滚动查询数据
81 + */
55 const onLoad = () => { 82 const onLoad = () => {
56 // 异步更新数据 83 // 异步更新数据
57 - // setTimeout 仅做示例，真实场景中一般为 ajax 请求 84 + axios.get('/srv/?a=check_prod_list', {
58 - setTimeout(() => { 85 + params: {
59 - for (let i = 0; i < 20; i++) { 86 + status: status.value,
60 - list.value.push(list.value.length + 1); 87 + limit: limit.value,
88 + offset: offset.value
61 } 89 }
62 - 90 + })
63 - // 加载状态结束 91 + .then(res => {
64 - loading.value = false; 92 + if (res.data.code === 1) {
65 - 93 + prod_num.value = res.data.data.prod_num;
66 - // 数据全部加载完成 94 + _.each(res.data.data.prod, item => {
67 - if (list.value.length >= 100) { 95 + item.status = item.status.toUpperCase()
68 - finished.value = true; 96 + })
69 - } 97 + prod_list.value = _.concat(prod_list.value, res.data.data.prod);
70 - }, 1000); 98 + prod_list.value = _.uniqBy(prod_list.value, 'id');
99 + offset.value = prod_list.value.length;
100 + loading.value = false;
101 + // 数据全部加载完成
102 + if (!res.data.data.prod.length) {
103 + // 加载状态结束
104 + finished.value = true;
105 + }
106 + } else {
107 + console.warn(res);
108 + Toast({
109 + icon: 'close',
110 + message: res.data.msg
111 + });
112 + }
113 + })
114 + .catch(err => {
115 + console.error(err);
116 + })
71 }; 117 };
72 118
73 - onMounted(() => { 119 +
74 -
75 - })
76 </script> 120 </script>
77 121
78 <script> 122 <script>
...@@ -80,12 +124,12 @@ import mixin from 'common/mixin'; ...@@ -80,12 +124,12 @@ import mixin from 'common/mixin';
80 124
81 export default { 125 export default {
82 mixins: [mixin.init], 126 mixins: [mixin.init],
83 - data () { 127 + data() {
84 return { 128 return {
85 129
86 } 130 }
87 }, 131 },
88 - mounted () { 132 + mounted() {
89 133
90 }, 134 },
91 methods: { 135 methods: {
...@@ -98,7 +142,8 @@ export default { ...@@ -98,7 +142,8 @@ export default {
98 :global(.van-badge--top-right) { 142 :global(.van-badge--top-right) {
99 right: -10px; 143 right: -10px;
100 } 144 }
145 +
101 :global(.van-sticky--fixed) { 146 :global(.van-sticky--fixed) {
102 z-index: 1000; 147 z-index: 1000;
103 } 148 }
104 -</style>
...\ No newline at end of file ...\ No newline at end of file
149 +</style>
......
1 <template> 1 <template>
2 <div class=""> 2 <div class="">
3 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 3 + <template v-for="item in kgProdList" :key="item" style="height: 3rem;">
4 - <template v-for="item in dataList" :key="item" style="height: 3rem;"> 4 + <b-video-card :item="item"></b-video-card>
5 - <b-video-card :item="item"></b-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 BVideoCard from '@/components/BVideoCard/index.vue' 11 import BVideoCard from '@/components/BVideoCard/index.vue'
14 12
15 import { ref, reactive, onMounted } from 'vue' 13 import { ref, reactive, onMounted } from 'vue'
16 import { useRoute, useRouter } from 'vue-router' 14 import { useRoute, useRouter } from 'vue-router'
17 import axios from '@/utils/axios'; 15 import axios from '@/utils/axios';
18 -import $ from 'jquery' 16 +import _ from 'lodash'
19 import { Toast } from 'vant'; 17 import { Toast } from 'vant';
20 const $route = useRoute(); 18 const $route = useRoute();
21 const $router = useRouter(); 19 const $router = useRouter();
22 20
23 // 处理书籍下作品列表 21 // 处理书籍下作品列表
24 -const list = ref([]); 22 +const kgProdList = ref([])
25 -const loading = ref(false); 23 +axios.get('/srv/?a=kg_prod_list')
26 -const finished = ref(false); 24 +.then(res => {
27 - 25 + if (res.data.code === 1) {
28 -const onLoad = () => { 26 + _.each(res.data.data.prod, item => {
29 - // 异步更新数据 27 + item.status = item.status.toUpperCase()
30 - // setTimeout 仅做示例，真实场景中一般为 ajax 请求 28 + })
31 - setTimeout(() => { 29 + kgProdList.value = res.data.data.prod;
32 - for (let i = 0; i < 20; i++) { 30 + } else {
33 - list.value.push(list.value.length + 1); 31 + console.warn(res);
34 - } 32 + Toast({
35 - 33 + icon: 'close',
36 - // 加载状态结束 34 + message: res.data.msg
37 - loading.value = false; 35 + });
38 - 36 + }
39 - // 数据全部加载完成 37 +})
40 - if (list.value.length >= 100) { 38 +.catch(err => {
41 - finished.value = true; 39 + console.error(err);
42 - } 40 +})
43 - }, 1000);
44 -};
45 -
46 - onMounted(() => {
47 -
48 - })
49 </script> 41 </script>
50 42
51 <script> 43 <script>
...@@ -69,4 +61,4 @@ export default { ...@@ -69,4 +61,4 @@ export default {
69 61
70 <style lang="less" scoped> 62 <style lang="less" scoped>
71 63
72 -</style>
...\ No newline at end of file ...\ No newline at end of file
64 +</style>
......