Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a339552d 1 parent 25f75383

✨ feat: 列表页面，新增为空提示页

Inline Side-by-side
Showing 20 changed files with 236 additions and 29 deletions
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 </van-row> 20 </van-row>
21 </div> 21 </div>
22 <div style="height: 4rem;"></div> 22 <div style="height: 4rem;"></div>
23 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" 23 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad"
24 :immediate-check="false"> 24 :immediate-check="false">
25 <template v-for="(item, key) in replyList" :key="key"> 25 <template v-for="(item, key) in replyList" :key="key">
26 <div class="comment-wrapper"> 26 <div class="comment-wrapper">
...@@ -46,6 +46,11 @@ ...@@ -46,6 +46,11 @@
46 </div> 46 </div>
47 </template> 47 </template>
48 </van-list> 48 </van-list>
49 + <van-empty v-if="emptyStatus"
50 + class="custom-image"
51 + :image="no_image"
52 + description="暂无回复"
53 + />
49 </div> 54 </div>
50 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" 55 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser"
51 @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box> 56 @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
...@@ -63,6 +68,7 @@ ...@@ -63,6 +68,7 @@
63 <script setup> 68 <script setup>
64 import CommentBox from '@/components/CommentBox/index.vue' 69 import CommentBox from '@/components/CommentBox/index.vue'
65 import NoticeOverlay from '@/components/NoticeOverlay/index.vue' 70 import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
71 +import no_image from '@images/que-shuju@2x.png'
66 72
67 import icon_x from '@images/x.png' 73 import icon_x from '@images/x.png'
68 import icon_y from '@images/y.png' 74 import icon_y from '@images/y.png'
...@@ -168,6 +174,7 @@ const onSubmit = () => { ...@@ -168,6 +174,7 @@ const onSubmit = () => {
168 path: '/me/index' 174 path: '/me/index'
169 }); 175 });
170 } 176 }
177 +
171 const show = ref(false); 178 const show = ref(false);
172 const listTotal = ref(0) 179 const listTotal = ref(0)
173 const replyList = ref([]) 180 const replyList = ref([])
...@@ -176,6 +183,10 @@ const finished = ref(false) ...@@ -176,6 +183,10 @@ const finished = ref(false)
176 const limit = ref(10) 183 const limit = ref(10)
177 const offset = ref(0) 184 const offset = ref(0)
178 185
186 +// 因为不能让空图标提前出来的写法
187 +const finishedTextStatus = ref(false);
188 +const emptyStatus = ref(false);
189 +
179 const onLoad = () => { 190 const onLoad = () => {
180 // 异步更新数据 191 // 异步更新数据
181 axios.get('/srv/?a=reply_list', { 192 axios.get('/srv/?a=reply_list', {
...@@ -197,6 +208,10 @@ const onLoad = () => { ...@@ -197,6 +208,10 @@ const onLoad = () => {
197 // 加载状态结束 208 // 加载状态结束
198 finished.value = true; 209 finished.value = true;
199 } 210 }
211 + if (!replyList.value.length) {
212 + finishedTextStatus.value = false;
213 + emptyStatus.value = true;
214 + }
200 } else { 215 } else {
201 console.warn(res); 216 console.warn(res);
202 if (!res.data.show) return false; 217 if (!res.data.show) return false;
......
...@@ -3,6 +3,7 @@ import axios from '@/utils/axios'; ...@@ -3,6 +3,7 @@ import axios from '@/utils/axios';
3 import { Toast } from 'vant'; 3 import { Toast } from 'vant';
4 4
5 export const bookFn = ($route) => { 5 export const bookFn = ($route) => {
6 + const emptyStatus = ref(false);
6 const kg_id = $route.query.kg_id ? $route.query.kg_id : ''; 7 const kg_id = $route.query.kg_id ? $route.query.kg_id : '';
7 const kgInfo = ref({ 8 const kgInfo = ref({
8 id: '', 9 id: '',
...@@ -19,6 +20,9 @@ export const bookFn = ($route) => { ...@@ -19,6 +20,9 @@ export const bookFn = ($route) => {
19 .then(res => { 20 .then(res => {
20 if (res.data.code === 1) { 21 if (res.data.code === 1) {
21 kgInfo.value = res.data.data; 22 kgInfo.value = res.data.data;
23 + if (!kgInfo.value.book_list.length) {
24 + emptyStatus.value = true;
25 + }
22 } else { 26 } else {
23 console.warn(res); 27 console.warn(res);
24 if (!res.data.show) return false; 28 if (!res.data.show) return false;
...@@ -38,6 +42,9 @@ export const bookFn = ($route) => { ...@@ -38,6 +42,9 @@ export const bookFn = ($route) => {
38 kgInfo.value = { 42 kgInfo.value = {
39 book_list: res.data.data 43 book_list: res.data.data
40 } 44 }
45 + if (!kgInfo.value.book_list.length) {
46 + emptyStatus.value = true;
47 + }
41 } else { 48 } else {
42 console.warn(res); 49 console.warn(res);
43 if (!res.data.show) return false; 50 if (!res.data.show) return false;
...@@ -53,6 +60,7 @@ export const bookFn = ($route) => { ...@@ -53,6 +60,7 @@ export const bookFn = ($route) => {
53 } 60 }
54 return { 61 return {
55 kg_id, 62 kg_id,
56 - kgInfo 63 + kgInfo,
64 + emptyStatus
57 } 65 }
58 } 66 }
......
...@@ -86,6 +86,10 @@ export const useVideoList = ($route) => { ...@@ -86,6 +86,10 @@ export const useVideoList = ($route) => {
86 const loading = ref(false); 86 const loading = ref(false);
87 const finished = ref(false); 87 const finished = ref(false);
88 88
89 + // 因为不能让空图标提前出来的写法
90 + const finishedTextStatus = ref(false);
91 + const emptyStatus = ref(false);
92 +
89 /** 93 /**
90 * 向下滚动查询数据 94 * 向下滚动查询数据
91 */ 95 */
...@@ -111,6 +115,11 @@ export const useVideoList = ($route) => { ...@@ -111,6 +115,11 @@ export const useVideoList = ($route) => {
111 // 加载状态结束 115 // 加载状态结束
112 finished.value = true; 116 finished.value = true;
113 } 117 }
118 + // 空数据提示
119 + if (!prod_list.value.length) {
120 + finishedTextStatus.value = false;
121 + emptyStatus.value = true;
122 + }
114 } else { 123 } else {
115 // tslint:disable-next-line: no-console 124 // tslint:disable-next-line: no-console
116 console.warn(res); 125 console.warn(res);
...@@ -150,6 +159,8 @@ export const useVideoList = ($route) => { ...@@ -150,6 +159,8 @@ export const useVideoList = ($route) => {
150 checkLocalism, 159 checkLocalism,
151 checkMandarin, 160 checkMandarin,
152 onConfirm, 161 onConfirm,
153 - chooseLanguage 162 + chooseLanguage,
163 + finishedTextStatus,
164 + emptyStatus,
154 } 165 }
155 } 166 }
......
...@@ -4,33 +4,28 @@ ...@@ -4,33 +4,28 @@
4 title-active-color="#222222" title-inactive-color="#777777"> 4 title-active-color="#222222" title-inactive-color="#777777">
5 <van-tab title="待审核" :badge="prod_num" :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="prod_list.length ? '没有更多了' : ''" @load="onLoad"> 7 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
8 <template v-for="item in prod_list" :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" @on-click="onClick"></b-video-card> 9 <b-video-card :item="item" status="PENDING" @on-click="onClick"></b-video-card>
10 </template> 10 </template>
11 </van-list> 11 </van-list>
12 - <van-empty v-if="!prod_list.length"
13 - class="custom-image"
14 - :image="no_image"
15 - description="暂无审核信息"
16 - />
17 </template> 12 </template>
18 </van-tab> 13 </van-tab>
19 <van-tab title="已审核" :title-style="titleStyle"> 14 <van-tab title="已审核" :title-style="titleStyle">
20 <template v-if="active"> 15 <template v-if="active">
21 - <van-list v-model:loading="loading" :finished="finished" :finished-text="prod_list.length ? '没有更多了' : ''" @load="onLoad"> 16 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
22 <template v-for="item in prod_list" :key="item" style="height: 3rem;"> 17 <template v-for="item in prod_list" :key="item" style="height: 3rem;">
23 <b-video-card :item="item" status="PROCESS"></b-video-card> 18 <b-video-card :item="item" status="PROCESS"></b-video-card>
24 </template> 19 </template>
25 </van-list> 20 </van-list>
26 - <van-empty v-if="!prod_list.length" 21 + </template>
22 + </van-tab>
23 + </van-tabs>
24 + <van-empty v-if="emptyStatus"
27 class="custom-image" 25 class="custom-image"
28 :image="no_image" 26 :image="no_image"
29 description="暂无审核信息" 27 description="暂无审核信息"
30 /> 28 />
31 - </template>
32 - </van-tab>
33 - </van-tabs>
34 </div> 29 </div>
35 </template> 30 </template>
36 31
...@@ -129,6 +124,13 @@ const onClick = (id) => { ...@@ -129,6 +124,13 @@ const onClick = (id) => {
129 _.remove(prod_list.value, item => item.id === id); 124 _.remove(prod_list.value, item => item.id === id);
130 } 125 }
131 126
127 +// 因为不能让空图标提前出来的写法
128 +const finishedTextStatus = ref(false);
129 +const emptyStatus = ref(false);
130 +if (!prod_list.value.length) {
131 + finishedTextStatus.value = false;
132 + emptyStatus.value = true;
133 +}
132 </script> 134 </script>
133 135
134 <script> 136 <script>
......
...@@ -68,6 +68,11 @@ ...@@ -68,6 +68,11 @@
68 <template v-for="(item, key) in kgInfo.book" :key="key"> 68 <template v-for="(item, key) in kgInfo.book" :key="key">
69 <book-card :item="item" type="B" :user_id="kgInfo.user_id" @on-click="onClick(item)"></book-card> 69 <book-card :item="item" type="B" :user_id="kgInfo.user_id" @on-click="onClick(item)"></book-card>
70 </template> 70 </template>
71 + <van-empty v-if="emptyStatus"
72 + class="custom-image"
73 + :image="no_image"
74 + description="暂无书籍"
75 + />
71 </div> 76 </div>
72 <div style="height: 1rem;"></div> 77 <div style="height: 1rem;"></div>
73 <shortcut-fixed type="B" :item="['me']"></shortcut-fixed> 78 <shortcut-fixed type="B" :item="['me']"></shortcut-fixed>
...@@ -76,6 +81,7 @@ ...@@ -76,6 +81,7 @@
76 81
77 <script setup> 82 <script setup>
78 import icon_avatar from '@images/que-logo@2x.png' 83 import icon_avatar from '@images/que-logo@2x.png'
84 +import no_image from '@images/que-shuju@2x.png'
79 85
80 import icon_book from '@images/shu@2x.png' 86 import icon_book from '@images/shu@2x.png'
81 import BookCard from '@/components/BookCard/index.vue' 87 import BookCard from '@/components/BookCard/index.vue'
...@@ -99,11 +105,17 @@ const onClick = (item) => { ...@@ -99,11 +105,17 @@ const onClick = (item) => {
99 }); 105 });
100 } 106 }
101 107
108 +// 因为不能让空图标提前出来的写法
109 +const emptyStatus = ref(false);
110 +
102 const kgInfo = ref({}); 111 const kgInfo = ref({});
103 axios.get('/srv/?a=kg_info') 112 axios.get('/srv/?a=kg_info')
104 .then(res => { 113 .then(res => {
105 if (res.data.code === 1) { 114 if (res.data.code === 1) {
106 kgInfo.value = res.data.data; 115 kgInfo.value = res.data.data;
116 + if (!res.data.data.book.length) {
117 + emptyStatus.value = true;
118 + }
107 } else { 119 } else {
108 console.warn(res); 120 console.warn(res);
109 if (!res.data.show) return false; 121 if (!res.data.show) return false;
......
...@@ -5,9 +5,15 @@ ...@@ -5,9 +5,15 @@
5 </template> 5 </template>
6 <div style="height: 2rem;"></div> 6 <div style="height: 2rem;"></div>
7 </div> 7 </div>
8 + <van-empty v-if="emptyStatus"
9 + class="custom-image"
10 + :image="no_image"
11 + description="暂无视频"
12 + />
8 </template> 13 </template>
9 14
10 <script setup> 15 <script setup>
16 +import no_image from '@images/que-shuju@2x.png'
11 import BVideoCard from '@/components/BVideoCard/index.vue' 17 import BVideoCard from '@/components/BVideoCard/index.vue'
12 18
13 import { ref, reactive, onMounted } from 'vue' 19 import { ref, reactive, onMounted } from 'vue'
...@@ -20,6 +26,8 @@ const $router = useRouter(); ...@@ -20,6 +26,8 @@ const $router = useRouter();
20 26
21 // 处理书籍下作品列表 27 // 处理书籍下作品列表
22 const kgProdList = ref([]) 28 const kgProdList = ref([])
29 +// 因为不能让空图标提前出来的写法
30 +const emptyStatus = ref(false);
23 axios.get('/srv/?a=kg_prod_list') 31 axios.get('/srv/?a=kg_prod_list')
24 .then(res => { 32 .then(res => {
25 if (res.data.code === 1) { 33 if (res.data.code === 1) {
...@@ -27,6 +35,9 @@ axios.get('/srv/?a=kg_prod_list') ...@@ -27,6 +35,9 @@ axios.get('/srv/?a=kg_prod_list')
27 item.status = item.status.toUpperCase() 35 item.status = item.status.toUpperCase()
28 }) 36 })
29 kgProdList.value = res.data.data.prod; 37 kgProdList.value = res.data.data.prod;
38 + if (!kgProdList.value.length) {
39 + emptyStatus.value = true;
40 + }
30 } else { 41 } else {
31 console.warn(res); 42 console.warn(res);
32 if (!res.data.show) return false; 43 if (!res.data.show) return false;
...@@ -38,7 +49,8 @@ axios.get('/srv/?a=kg_prod_list') ...@@ -38,7 +49,8 @@ axios.get('/srv/?a=kg_prod_list')
38 }) 49 })
39 .catch(err => { 50 .catch(err => {
40 console.error(err); 51 console.error(err);
41 -}) 52 +});
53 +
42 </script> 54 </script>
43 55
44 <script> 56 <script>
......
...@@ -60,14 +60,19 @@ ...@@ -60,14 +60,19 @@
60 </van-sticky> 60 </van-sticky>
61 61
62 <div class="book-video-list"> 62 <div class="book-video-list">
63 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 63 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
64 <template v-for="item in prod_list" :key="item" style="height: 3rem;"> 64 <template v-for="item in prod_list" :key="item" style="height: 3rem;">
65 <video-card :item="item"></video-card> 65 <video-card :item="item"></video-card>
66 </template> 66 </template>
67 </van-list> 67 </van-list>
68 </div> 68 </div>
69 + <van-empty v-if="emptyStatus"
70 + class="custom-image"
71 + :image="no_image"
72 + description="暂无作品信息"
73 + />
69 </div> 74 </div>
70 - <div style="height: 5rem;"></div> 75 + <div style="height: 6rem;"></div>
71 <div class="book-bar"> 76 <div class="book-bar">
72 <div @click="onSubscribe" class="text"> 77 <div @click="onSubscribe" class="text">
73 <van-icon v-if="!bookInfo.is_subscribe" :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" /> 78 <van-icon v-if="!bookInfo.is_subscribe" :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
...@@ -127,6 +132,7 @@ import icon_up from '@images/icon-guanbi@2x.png' ...@@ -127,6 +132,7 @@ import icon_up from '@images/icon-guanbi@2x.png'
127 import icon_down from '@images/icon-zhankai@2x.png' 132 import icon_down from '@images/icon-zhankai@2x.png'
128 import icon_subscribed from '@images/icon-dingyue01@2x.png' 133 import icon_subscribed from '@images/icon-dingyue01@2x.png'
129 import icon_unsubscribe from '@images/icon-dingyue02@2x.png' 134 import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
135 +import no_image from '@images/que-shuju@2x.png'
130 136
131 import ShortcutFixed from '@/components/ShortcutFixed/index.vue' 137 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
132 import tools from '@/common/tool' 138 import tools from '@/common/tool'
...@@ -141,7 +147,7 @@ import { wxInfo } from '@/utils/tools'; ...@@ -141,7 +147,7 @@ import { wxInfo } from '@/utils/tools';
141 const $route = useRoute(); 147 const $route = useRoute();
142 const $router = useRouter(); 148 const $router = useRouter();
143 149
144 -const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo, showPicker, checkLocalism, checkMandarin, onConfirm, chooseLanguage } = useVideoList($route); 150 +const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo, showPicker, checkLocalism, checkMandarin, onConfirm, chooseLanguage, finishedTextStatus, emptyStatus } = useVideoList($route);
145 const { donateItem } = useDefaultPerf($route.query.id); 151 const { donateItem } = useDefaultPerf($route.query.id);
146 152
147 // 判断是否显示简介的展开图标 153 // 判断是否显示简介的展开图标
......
...@@ -35,8 +35,7 @@ ...@@ -35,8 +35,7 @@
35 <template v-for="(item, key) in kgInfo.book_list" :key="key"> 35 <template v-for="(item, key) in kgInfo.book_list" :key="key">
36 <book-card type="C" :item="item" @on-click="onClick(item)"></book-card> 36 <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
37 </template> 37 </template>
38 - <van-empty 38 + <van-empty v-if="emptyStatus"
39 - v-if="!kgInfo.book_list.length"
40 class="custom-image" 39 class="custom-image"
41 :image="no_image" 40 :image="no_image"
42 description="暂无书籍信息" 41 description="暂无书籍信息"
...@@ -73,7 +72,7 @@ const $router = useRouter(); ...@@ -73,7 +72,7 @@ const $router = useRouter();
73 // 设置页面标题 72 // 设置页面标题
74 useTitle($route.meta.title) 73 useTitle($route.meta.title)
75 74
76 -const { kg_id, kgInfo } = bookFn($route) 75 +const { kg_id, kgInfo, emptyStatus } = bookFn($route)
77 76
78 // 配置快捷跳转条 77 // 配置快捷跳转条
79 const shortcutItem = ref([]); 78 const shortcutItem = ref([]);
......
...@@ -51,6 +51,11 @@ ...@@ -51,6 +51,11 @@
51 <div style="height: 2rem;"></div> 51 <div style="height: 2rem;"></div>
52 </div> 52 </div>
53 </div> 53 </div>
54 + <van-empty v-if="emptyStatus"
55 + class="custom-image"
56 + :image="no_image"
57 + description="暂无作品信息"
58 + />
54 </template> 59 </template>
55 60
56 <script setup> 61 <script setup>
...@@ -59,6 +64,7 @@ import { storeToRefs } from 'pinia' ...@@ -59,6 +64,7 @@ import { storeToRefs } from 'pinia'
59 64
60 import VideoCard from '@/components/VideoCard/index.vue' 65 import VideoCard from '@/components/VideoCard/index.vue'
61 import icon_avatar from '@images/que-touxiang@2x.png' 66 import icon_avatar from '@images/que-touxiang@2x.png'
67 +import no_image from '@images/que-shuju@2x.png'
62 68
63 import { ref, onActivated, onMounted } from 'vue' 69 import { ref, onActivated, onMounted } from 'vue'
64 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router' 70 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
...@@ -70,6 +76,8 @@ const $route = useRoute(); ...@@ -70,6 +76,8 @@ const $route = useRoute();
70 const $router = useRouter(); 76 const $router = useRouter();
71 77
72 const userInfo = ref({}); 78 const userInfo = ref({});
79 +// 因为不能让空图标提前出来的写法
80 +const emptyStatus = ref(false);
73 // 获取表演者信息 81 // 获取表演者信息
74 axios.get('/srv/?a=perf_info', { 82 axios.get('/srv/?a=perf_info', {
75 params: { 83 params: {
...@@ -82,6 +90,9 @@ axios.get('/srv/?a=perf_info', { ...@@ -82,6 +90,9 @@ axios.get('/srv/?a=perf_info', {
82 item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用 90 item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
83 }) 91 })
84 userInfo.value = res.data.data; 92 userInfo.value = res.data.data;
93 + if (!res.data.data.prod.length) {
94 + emptyStatus.value = true;
95 + }
85 } else { 96 } else {
86 console.warn(res); 97 console.warn(res);
87 if (!res.data.show) return false; 98 if (!res.data.show) return false;
...@@ -167,6 +178,7 @@ onBeforeRouteLeave((to, from) => { ...@@ -167,6 +178,7 @@ onBeforeRouteLeave((to, from) => {
167 }) 178 })
168 179
169 /*********************************************************/ 180 /*********************************************************/
181 +
170 </script> 182 </script>
171 183
172 <script> 184 <script>
......
1 <template> 1 <template>
2 <div class=""> 2 <div class="">
3 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"> 3 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad" :immediate-check="false">
4 <template v-for="(item, key) in commentList" :key="key"> 4 <template v-for="(item, key) in commentList" :key="key">
5 <div class="comment-wrapper"> 5 <div class="comment-wrapper">
6 <van-row style="font-size: 0.9rem;"> 6 <van-row style="font-size: 0.9rem;">
...@@ -36,11 +36,17 @@ ...@@ -36,11 +36,17 @@
36 </div> 36 </div>
37 </template> 37 </template>
38 </van-list> 38 </van-list>
39 + <van-empty v-if="emptyStatus"
40 + class="custom-image"
41 + :image="no_image"
42 + description="暂无留言"
43 + />
39 <div style="height: 5rem;"></div> 44 <div style="height: 5rem;"></div>
40 <div class="reply-btn" @click="setComment('', 'comment')"> 45 <div class="reply-btn" @click="setComment('', 'comment')">
41 <div class="text">写下你友善的留言</div> 46 <div class="text">写下你友善的留言</div>
42 </div> 47 </div>
43 </div> 48 </div>
49 +
44 <comment-list :showPopup="showCommentListPopup" :data="commentData" @on-close="closeCommentList"></comment-list> 50 <comment-list :showPopup="showCommentListPopup" :data="commentData" @on-close="closeCommentList"></comment-list>
45 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box> 51 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
46 52
...@@ -60,6 +66,7 @@ import CommentList from '@/components/CommentList/index.vue' ...@@ -60,6 +66,7 @@ import CommentList from '@/components/CommentList/index.vue'
60 import CommentBox from '@/components/CommentBox/index.vue' 66 import CommentBox from '@/components/CommentBox/index.vue'
61 import NoticeOverlay from '@/components/NoticeOverlay/index.vue' 67 import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
62 import icon_avatar from '@images/que-touxiang@2x.png' 68 import icon_avatar from '@images/que-touxiang@2x.png'
69 +import no_image from '@images/que-shuju@2x.png'
63 70
64 import { ref, reactive, onMounted } from 'vue' 71 import { ref, reactive, onMounted } from 'vue'
65 import { useRoute, useRouter } from 'vue-router' 72 import { useRoute, useRouter } from 'vue-router'
...@@ -84,6 +91,10 @@ const offset = ref(0) ...@@ -84,6 +91,10 @@ const offset = ref(0)
84 const reply_limit = ref(3) 91 const reply_limit = ref(3)
85 const commentList = ref([]) 92 const commentList = ref([])
86 93
94 +// 因为不能让空图标提前出来的写法
95 +const finishedTextStatus = ref(false);
96 +const emptyStatus = ref(false);
97 +
87 const onLoad = () => { 98 const onLoad = () => {
88 // 异步更新数据 99 // 异步更新数据
89 axios.get('/srv/?a=comment_list',{ 100 axios.get('/srv/?a=comment_list',{
...@@ -105,6 +116,10 @@ const onLoad = () => { ...@@ -105,6 +116,10 @@ const onLoad = () => {
105 // 加载状态结束 116 // 加载状态结束
106 finished.value = true; 117 finished.value = true;
107 } 118 }
119 + if (!commentList.value.length) {
120 + finishedTextStatus.value = false;
121 + emptyStatus.value = true;
122 + }
108 } else { 123 } else {
109 console.warn(res); 124 console.warn(res);
110 if (!res.data.show) return false; 125 if (!res.data.show) return false;
......
1 <template> 1 <template>
2 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
2 <div v-for="(item, key) in commentList" :key="key"> 3 <div v-for="(item, key) in commentList" :key="key">
3 <div class="comment-wrapper"> 4 <div class="comment-wrapper">
4 <van-row style="font-size: 0.9rem;"> 5 <van-row style="font-size: 0.9rem;">
...@@ -39,6 +40,13 @@ ...@@ -39,6 +40,13 @@
39 </van-row> 40 </van-row>
40 </div> 41 </div>
41 </div> 42 </div>
43 + </van-list>
44 +
45 + <van-empty v-if="emptyStatus"
46 + class="custom-image"
47 + :image="no_image"
48 + description="暂无@我的"
49 + />
42 50
43 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box> 51 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
44 <!-- 写评论时，如果没有实名认证提示弹框 --> 52 <!-- 写评论时，如果没有实名认证提示弹框 -->
...@@ -52,6 +60,7 @@ ...@@ -52,6 +60,7 @@
52 60
53 <script setup> 61 <script setup>
54 // import icon_player from '@images/bofang@2x.png' 62 // import icon_player from '@images/bofang@2x.png'
63 +import no_image from '@images/que-shuju@2x.png'
55 import CommentBox from '@/components/CommentBox/index.vue' 64 import CommentBox from '@/components/CommentBox/index.vue'
56 import NoticeOverlay from '@/components/NoticeOverlay/index.vue' 65 import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
57 import icon_avatar from '@images/que-touxiang@2x.png' 66 import icon_avatar from '@images/que-touxiang@2x.png'
...@@ -76,6 +85,10 @@ const commentList = ref([]) ...@@ -76,6 +85,10 @@ const commentList = ref([])
76 let limit = ref(10); 85 let limit = ref(10);
77 let offset = ref(0) 86 let offset = ref(0)
78 87
88 +// 因为不能让空图标提前出来的写法
89 +const finishedTextStatus = ref(false);
90 +const emptyStatus = ref(false);
91 +
79 const onLoad = () => { 92 const onLoad = () => {
80 axios.get('/srv/?a=my_atme', { 93 axios.get('/srv/?a=my_atme', {
81 params: { 94 params: {
...@@ -98,6 +111,10 @@ const onLoad = () => { ...@@ -98,6 +111,10 @@ const onLoad = () => {
98 // 加载状态结束 111 // 加载状态结束
99 finished.value = true; 112 finished.value = true;
100 } 113 }
114 + if (!commentList.value.length) {
115 + finishedTextStatus.value = false;
116 + emptyStatus.value = true;
117 + }
101 } else { 118 } else {
102 console.warn(res); 119 console.warn(res);
103 if (!res.data.show) return false; 120 if (!res.data.show) return false;
...@@ -112,7 +129,7 @@ const onLoad = () => { ...@@ -112,7 +129,7 @@ const onLoad = () => {
112 }) 129 })
113 } 130 }
114 // 立即执行一次 131 // 立即执行一次
115 -onLoad(); 132 +// onLoad();
116 133
117 const showNotice = ref(false) 134 const showNotice = ref(false)
118 const onClose = () => { // 关闭提示框回调 135 const onClose = () => { // 关闭提示框回调
......
...@@ -5,11 +5,17 @@ ...@@ -5,11 +5,17 @@
5 </template> 5 </template>
6 <div style="height: 2rem;"></div> 6 <div style="height: 2rem;"></div>
7 </div> 7 </div>
8 + <van-empty v-if="emptyStatus"
9 + class="custom-image"
10 + :image="no_image"
11 + description="暂无收藏"
12 + />
8 </template> 13 </template>
9 14
10 <script setup> 15 <script setup>
11 import VideoCard from '@/components/VideoCard/index.vue' 16 import VideoCard from '@/components/VideoCard/index.vue'
12 import Cookies from 'js-cookie' 17 import Cookies from 'js-cookie'
18 +import no_image from '@images/que-shuju@2x.png'
13 19
14 import { ref } from 'vue' 20 import { ref } from 'vue'
15 import axios from '@/utils/axios'; 21 import axios from '@/utils/axios';
...@@ -34,13 +40,18 @@ if (scrollTopCollection) { ...@@ -34,13 +40,18 @@ if (scrollTopCollection) {
34 40
35 // 处理书籍下作品列表 41 // 处理书籍下作品列表
36 const prodList = ref([]) 42 const prodList = ref([])
43 +// 因为不能让空图标提前出来的写法
44 +const emptyStatus = ref(false);
37 axios.get('/srv/?a=my_favor') 45 axios.get('/srv/?a=my_favor')
38 .then(res => { 46 .then(res => {
39 if (res.data.code === 1) { 47 if (res.data.code === 1) {
40 prodList.value = res.data.data.prod; 48 prodList.value = res.data.data.prod;
41 _.each(prodList.value, (item) => { 49 _.each(prodList.value, (item) => {
42 item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用 50 item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
43 - }) 51 + });
52 + if (!res.data.data.prod.length) {
53 + emptyStatus.value = true;
54 + }
44 } else { 55 } else {
45 console.warn(res); 56 console.warn(res);
46 if (!res.data.show) return false; 57 if (!res.data.show) return false;
......
...@@ -34,6 +34,11 @@ ...@@ -34,6 +34,11 @@
34 </div> 34 </div>
35 </template> 35 </template>
36 </div> 36 </div>
37 + <van-empty v-if="!dataList.length"
38 + class="custom-image"
39 + :image="no_image"
40 + description="暂无捐赠信息"
41 + />
37 </div> 42 </div>
38 43
39 <van-overlay :show="show" @click="onHide"> 44 <van-overlay :show="show" @click="onHide">
...@@ -56,6 +61,7 @@ ...@@ -56,6 +61,7 @@
56 import DonateCert from '@/components/DonateCert/index.vue' 61 import DonateCert from '@/components/DonateCert/index.vue'
57 62
58 import icon_lock from '@images/suo@2x.png' 63 import icon_lock from '@images/suo@2x.png'
64 +import no_image from '@images/que-shuju@2x.png'
59 65
60 import { ref, reactive, onMounted, getCurrentInstance, nextTick, watch } from 'vue' 66 import { ref, reactive, onMounted, getCurrentInstance, nextTick, watch } from 'vue'
61 import { useRoute, useRouter } from 'vue-router' 67 import { useRoute, useRouter } from 'vue-router'
......
...@@ -17,11 +17,18 @@ ...@@ -17,11 +17,18 @@
17 </van-row> 17 </van-row>
18 </div> 18 </div>
19 </template> 19 </template>
20 + <van-empty v-if="emptyStatus"
21 + class="custom-image"
22 + :image="no_image"
23 + description="暂无关注"
24 + />
20 </div> 25 </div>
21 <div style="height: 2rem;"></div> 26 <div style="height: 2rem;"></div>
22 </template> 27 </template>
23 28
24 <script setup> 29 <script setup>
30 +import no_image from '@images/que-shuju@2x.png'
31 +
25 import { ref, reactive, onMounted } from 'vue' 32 import { ref, reactive, onMounted } from 'vue'
26 import { useRoute, useRouter } from 'vue-router' 33 import { useRoute, useRouter } from 'vue-router'
27 import axios from '@/utils/axios'; 34 import axios from '@/utils/axios';
...@@ -30,12 +37,17 @@ import icon_avatar from '@images/que-touxiang@2x.png' ...@@ -30,12 +37,17 @@ import icon_avatar from '@images/que-touxiang@2x.png'
30 37
31 const $router = useRouter(); 38 const $router = useRouter();
32 39
40 +// 因为不能让空图标提前出来的写法
41 +const emptyStatus = ref(false);
33 // 关注列表联调 42 // 关注列表联调
34 const followList = ref([]) 43 const followList = ref([])
35 axios.get('/srv/?a=my_follow') 44 axios.get('/srv/?a=my_follow')
36 .then(res => { 45 .then(res => {
37 if (res.data.code === 1) { 46 if (res.data.code === 1) {
38 followList.value = res.data.data; 47 followList.value = res.data.data;
48 + if (!res.data.data.value.length) {
49 + emptyStatus.value = true;
50 + }
39 } else { 51 } else {
40 console.warn(res); 52 console.warn(res);
41 if (!res.data.show) return false; 53 if (!res.data.show) return false;
......
...@@ -48,7 +48,8 @@ ...@@ -48,7 +48,8 @@
48 <my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button> 48 <my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button>
49 </div> 49 </div>
50 <div> 50 <div>
51 - <my-button type="custom" :custom-style="styleObject2" @on-click="handleUser('ADD')">新增儿童</my-button> 51 + <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2" @on-click="handleUser('ADD')">新增儿童</my-button>
52 + <my-button v-else type="custom" :custom-style="styleObject4">新增儿童</my-button>
52 </div> 53 </div>
53 </div> 54 </div>
54 55
...@@ -278,6 +279,11 @@ const styleObject3 = reactive({ ...@@ -278,6 +279,11 @@ const styleObject3 = reactive({
278 color: '#FDD347', 279 color: '#FDD347',
279 borderColor: '#FDD347' 280 borderColor: '#FDD347'
280 }) 281 })
282 +const styleObject4 = reactive({
283 + backgroundColor: '#FFFFFF',
284 + color: '#777777',
285 + borderColor: '#777777'
286 +})
281 287
282 const getFollow = () => { 288 const getFollow = () => {
283 $router.push({ 289 $router.push({
......
...@@ -5,11 +5,17 @@ ...@@ -5,11 +5,17 @@
5 </template> 5 </template>
6 <div style="height: 2rem;"></div> 6 <div style="height: 2rem;"></div>
7 </div> 7 </div>
8 + <van-empty v-if="emptyStatus"
9 + class="custom-image"
10 + :image="no_image"
11 + description="暂无点赞"
12 + />
8 </template> 13 </template>
9 14
10 <script setup> 15 <script setup>
11 import VideoCard from '@/components/VideoCard/index.vue' 16 import VideoCard from '@/components/VideoCard/index.vue'
12 import Cookies from 'js-cookie' 17 import Cookies from 'js-cookie'
18 +import no_image from '@images/que-shuju@2x.png'
13 19
14 import { ref } from 'vue' 20 import { ref } from 'vue'
15 import axios from '@/utils/axios'; 21 import axios from '@/utils/axios';
...@@ -34,6 +40,8 @@ if (scrollTopLike) { ...@@ -34,6 +40,8 @@ if (scrollTopLike) {
34 40
35 // 处理书籍下作品列表 41 // 处理书籍下作品列表
36 const prodList = ref([]) 42 const prodList = ref([])
43 +// 因为不能让空图标提前出来的写法
44 +const emptyStatus = ref(false);
37 axios.get('/srv/?a=my_like') 45 axios.get('/srv/?a=my_like')
38 .then(res => { 46 .then(res => {
39 if (res.data.code === 1) { 47 if (res.data.code === 1) {
...@@ -41,6 +49,9 @@ axios.get('/srv/?a=my_like') ...@@ -41,6 +49,9 @@ axios.get('/srv/?a=my_like')
41 _.each(prodList.value, (item) => { 49 _.each(prodList.value, (item) => {
42 item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用 50 item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
43 }) 51 })
52 + if (!res.data.data.prod.length) {
53 + emptyStatus.value = true;
54 + }
44 } else { 55 } else {
45 console.warn(res); 56 console.warn(res);
46 if (!res.data.show) return false; 57 if (!res.data.show) return false;
......
1 <template> 1 <template>
2 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 2 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
3 <div v-for="(item, key) in commentList" :key="key" class="comment"> 3 <div v-for="(item, key) in commentList" :key="key" class="comment">
4 <div class="comment-wrapper"> 4 <div class="comment-wrapper">
5 <van-row style="font-size: 0.9rem;"> 5 <van-row style="font-size: 0.9rem;">
...@@ -41,10 +41,16 @@ ...@@ -41,10 +41,16 @@
41 </div> 41 </div>
42 </div> 42 </div>
43 </van-list> 43 </van-list>
44 + <van-empty v-if="emptyStatus"
45 + class="custom-image"
46 + :image="no_image"
47 + description="暂无留言"
48 + />
44 </template> 49 </template>
45 50
46 <script setup> 51 <script setup>
47 import icon_player from '@images/bofang@2x.png' 52 import icon_player from '@images/bofang@2x.png'
53 +import no_image from '@images/que-shuju@2x.png'
48 import icon_avatar from '@images/que-touxiang@2x.png' 54 import icon_avatar from '@images/que-touxiang@2x.png'
49 55
50 import { ref, reactive, onMounted, onActivated } from 'vue' 56 import { ref, reactive, onMounted, onActivated } from 'vue'
...@@ -63,6 +69,10 @@ const commentList = ref([]) ...@@ -63,6 +69,10 @@ const commentList = ref([])
63 let limit = ref(10); 69 let limit = ref(10);
64 let offset = ref(0) 70 let offset = ref(0)
65 71
72 +// 因为不能让空图标提前出来的写法
73 +const finishedTextStatus = ref(false);
74 +const emptyStatus = ref(false);
75 +
66 const onLoad = () => { 76 const onLoad = () => {
67 axios.get('/srv/?a=my_comment', { 77 axios.get('/srv/?a=my_comment', {
68 params: { 78 params: {
...@@ -86,6 +96,10 @@ const onLoad = () => { ...@@ -86,6 +96,10 @@ const onLoad = () => {
86 // 加载状态结束 96 // 加载状态结束
87 finished.value = true; 97 finished.value = true;
88 } 98 }
99 + if (!commentList.value.length) {
100 + finishedTextStatus.value = false;
101 + emptyStatus.value = true;
102 + }
89 } else { 103 } else {
90 console.warn(res); 104 console.warn(res);
91 if (!res.data.show) return false; 105 if (!res.data.show) return false;
......
...@@ -4,9 +4,15 @@ ...@@ -4,9 +4,15 @@
4 <book-card type="C" :item="item" @on-click="onClick(item)"></book-card> 4 <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
5 </template> 5 </template>
6 </div> 6 </div>
7 + <van-empty v-if="emptyStatus"
8 + class="custom-image"
9 + :image="no_image"
10 + description="暂无订阅"
11 + />
7 </template> 12 </template>
8 13
9 <script setup> 14 <script setup>
15 +import no_image from '@images/que-shuju@2x.png'
10 import BookCard from '@/components/BookCard/index.vue' 16 import BookCard from '@/components/BookCard/index.vue'
11 import { ref, reactive, onMounted } from 'vue' 17 import { ref, reactive, onMounted } from 'vue'
12 import { useRoute, useRouter } from 'vue-router' 18 import { useRoute, useRouter } from 'vue-router'
...@@ -16,11 +22,17 @@ import { Toast } from 'vant'; ...@@ -16,11 +22,17 @@ import { Toast } from 'vant';
16 const $route = useRoute(); 22 const $route = useRoute();
17 const $router = useRouter(); 23 const $router = useRouter();
18 24
25 +// 因为不能让空图标提前出来的写法
26 +const emptyStatus = ref(false);
27 +
19 const items = ref([]); 28 const items = ref([]);
20 axios.get('/srv/?a=my_subscribe') 29 axios.get('/srv/?a=my_subscribe')
21 .then(res => { 30 .then(res => {
22 if (res.data.code === 1) { 31 if (res.data.code === 1) {
23 items.value = res.data.data; 32 items.value = res.data.data;
33 + if (!res.data.data.length) {
34 + emptyStatus.value = true;
35 + }
24 } else { 36 } else {
25 console.warn(res); 37 console.warn(res);
26 if (!res.data.show) return false; 38 if (!res.data.show) return false;
......
1 <template> 1 <template>
2 <div class="unwatch-list-page"> 2 <div class="unwatch-list-page">
3 <div class="book-video-list"> 3 <div class="book-video-list">
4 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 4 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
5 - <template v-for="item in prod_list" :key="item" style="height: 3rem;"> 5 + <template v-if="prod_list.length" v-for="item in prod_list" :key="item" style="height: 3rem;">
6 <video-card :item="item"></video-card> 6 <video-card :item="item"></video-card>
7 </template> 7 </template>
8 </van-list> 8 </van-list>
9 </div> 9 </div>
10 + <div style="height: 2rem;"></div>
11 + <van-empty v-if="emptyStatus"
12 + class="custom-image"
13 + :image="no_image"
14 + description="暂无关注"
15 + />
10 </div> 16 </div>
11 </template> 17 </template>
12 18
13 <script setup> 19 <script setup>
20 +import no_image from '@images/que-shuju@2x.png'
21 +
14 import { useUnwatchList } from '@/composables/useUnwatchList.js' 22 import { useUnwatchList } from '@/composables/useUnwatchList.js'
15 23
16 import VideoCard from '@/components/VideoCard/index.vue' 24 import VideoCard from '@/components/VideoCard/index.vue'
17 25
18 -import { ref, onActivated } from 'vue' 26 +import { ref, onActivated, computed } from 'vue'
19 import { mainStore } from '@/store' 27 import { mainStore } from '@/store'
20 import { storeToRefs } from 'pinia' 28 import { storeToRefs } from 'pinia'
21 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router' 29 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
...@@ -83,6 +91,13 @@ onBeforeRouteLeave((to, from) => { ...@@ -83,6 +91,13 @@ onBeforeRouteLeave((to, from) => {
83 91
84 /*********************************************************/ 92 /*********************************************************/
85 93
94 +// 因为不能让空图标提前出来的写法
95 +const finishedTextStatus = ref(false);
96 +const emptyStatus = ref(false);
97 +if (!prod_list.value.length) {
98 + finishedTextStatus.value = false;
99 + emptyStatus.value = true;
100 +}
86 </script> 101 </script>
87 102
88 <script> 103 <script>
......
...@@ -5,9 +5,15 @@ ...@@ -5,9 +5,15 @@
5 </template> 5 </template>
6 <div style="height: 2rem;"></div> 6 <div style="height: 2rem;"></div>
7 </div> 7 </div>
8 + <van-empty v-if="emptyStatus"
9 + class="custom-image"
10 + :image="no_image"
11 + description="暂无作品"
12 + />
8 </template> 13 </template>
9 14
10 <script setup> 15 <script setup>
16 +import no_image from '@images/que-shuju@2x.png'
11 import AuditVideoCard from '@/components/AuditVideoCard/index.vue' 17 import AuditVideoCard from '@/components/AuditVideoCard/index.vue'
12 18
13 import { ref } from 'vue' 19 import { ref } from 'vue'
...@@ -16,6 +22,8 @@ import { Toast } from 'vant'; ...@@ -16,6 +22,8 @@ import { Toast } from 'vant';
16 22
17 // 处理书籍下作品列表 23 // 处理书籍下作品列表
18 const prodList = ref([]) 24 const prodList = ref([])
25 +// 因为不能让空图标提前出来的写法
26 +const emptyStatus = ref(false);
19 axios.get('/srv/?a=my_prod') 27 axios.get('/srv/?a=my_prod')
20 .then(res => { 28 .then(res => {
21 if (res.data.code === 1) { 29 if (res.data.code === 1) {
...@@ -24,6 +32,9 @@ axios.get('/srv/?a=my_prod') ...@@ -24,6 +32,9 @@ axios.get('/srv/?a=my_prod')
24 v.path = 'myVideoList' 32 v.path = 'myVideoList'
25 }) 33 })
26 prodList.value = res.data.data.prod; 34 prodList.value = res.data.data.prod;
35 + if (!res.data.data.prod.length) {
36 + emptyStatus.value = true;
37 + }
27 } else { 38 } else {
28 console.warn(res); 39 console.warn(res);
29 if (!res.data.show) return false; 40 if (!res.data.show) return false;
......