Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
97e246bb 1 parent 35550544

✨ feat(客户端): 书籍详情页完善主体结构

Inline Side-by-side
Showing 4 changed files with 179 additions and 9 deletions
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 } 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 } 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';
...@@ -26,6 +26,8 @@ app.use(Tabs); ...@@ -26,6 +26,8 @@ app.use(Tabs);
26 app.use(Overlay); 26 app.use(Overlay);
27 app.use(NumberKeyboard); 27 app.use(NumberKeyboard);
28 app.use(Lazyload); 28 app.use(Lazyload);
29 +app.use(List);
30 +app.use(PullRefresh);
29 31
30 app.use(ConfigProvider); 32 app.use(ConfigProvider);
31 33
......
...@@ -3,11 +3,7 @@ ...@@ -3,11 +3,7 @@
3 <div class="modify-top"></div> 3 <div class="modify-top"></div>
4 <div class="book-detail"> 4 <div class="book-detail">
5 <div style="text-align: center;"> 5 <div style="text-align: center;">
6 - <van-image 6 + <van-image width="220" height="220" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
7 - width="220"
8 - height="220"
9 - src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed"
10 - />
11 </div> 7 </div>
12 <div class="book-intro"> 8 <div class="book-intro">
13 <p class="book-post">逃家小兔绘本</p> 9 <p class="book-post">逃家小兔绘本</p>
...@@ -16,17 +12,83 @@ ...@@ -16,17 +12,83 @@
16 一场爱的捉迷藏就此展开了 12 一场爱的捉迷藏就此展开了
17 </div> 13 </div>
18 <div v-if="hasToggle"> 14 <div v-if="hasToggle">
19 - <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-zhankai%402x.png" /></div> 15 + <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" /></div>
20 - <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-guanbi%402x.png" /></div> 16 + <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" /></div>
21 </div> 17 </div>
22 </div> 18 </div>
19 +
20 + <div class="book-video-title">
21 + <van-row>
22 + <van-col span="12">
23 + 作品演绎
24 + <div style="background-color: #F9D95C; width: 70px; height: 4px;"></div>
25 + </van-col>
26 + <van-col span="12">
27 + <div style="font-size: 1rem; color: #999999; text-align: right;">
28 + <van-icon :name="icon_video" />
29 + 54个作品
30 + </div>
31 + </van-col>
32 + </van-row>
33 + </div>
34 +
35 + <div class="book-video-language">
36 + <van-row>
37 + <van-col span="6">
38 + <div class="uncheck">普通话</div>
39 + </van-col>
40 + <van-col span="6">
41 + <div class="checked">方言</div>
42 + </van-col>
43 + <van-col span="12">
44 + <div class="choose-wrapper">
45 + <div class="text">
46 + &nbsp;所有方言
47 + </div>
48 + <div class="icon">
49 + <van-icon name="arrow-down" />&nbsp;
50 + </div>
51 + </div>
52 + </van-col>
53 + </van-row>
54 + </div>
55 +
56 + <div class="book-video-list">
57 + <van-list
58 + v-model:loading="loading"
59 + :finished="finished"
60 + finished-text="没有更多了"
61 + @load="onLoad">
62 + <div v-for="item in list" :key="item" style="height: 3rem;" >{{ item }}</div>
63 + </van-list>
64 + </div>
65 + </div>
66 + <div style="height: 5rem;"></div>
67 + <div class="book-bar">
68 + <div class="text">
69 + <van-icon :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
70 + <span style="font-size: 0.85rem;">订阅</span>
71 + </div>
72 + <div class="button">
73 + <my-button type="custom" :custom-style="styleObject1">爱心捐书</my-button>
74 + </div>
75 + <div class="button">
76 + <my-button type="custom" :custom-style="styleObject2">上传作品</my-button>
77 + </div>
23 </div> 78 </div>
24 - <div style="height: 1rem;"></div>
25 <to-me @on-click="gotoMe()"></to-me> 79 <to-me @on-click="gotoMe()"></to-me>
26 </div> 80 </div>
27 </template> 81 </template>
28 82
29 <script setup> 83 <script setup>
84 +import MyButton from '@/components/MyButton/index.vue'
85 +
86 +import icon_video from '@images/video.png'
87 +import icon_up from '@images/icon-guanbi@2x.png'
88 +import icon_down from '@images/icon-zhankai@2x.png'
89 +import icon_subscribed from '@images/icon-dingyue01@2x.png'
90 +import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
91 +
30 import ToMe from '@/components/ToMe/index.vue' 92 import ToMe from '@/components/ToMe/index.vue'
31 import tools from '@/common/tool' 93 import tools from '@/common/tool'
32 import { ref, reactive, onMounted } from 'vue' 94 import { ref, reactive, onMounted } from 'vue'
...@@ -37,6 +99,18 @@ import { Toast } from 'vant'; ...@@ -37,6 +99,18 @@ import { Toast } from 'vant';
37 const $route = useRoute(); 99 const $route = useRoute();
38 const $router = useRouter(); 100 const $router = useRouter();
39 101
102 + // 自定义按钮颜色样式
103 + const styleObject1 = reactive({
104 + backgroundColor: '#FFFFFF',
105 + color: '#713610',
106 + borderColor: '#713610'
107 + })
108 + const styleObject2 = reactive({
109 + backgroundColor: '#F9D95C',
110 + color: '#713610',
111 + borderColor: '#F9D95C'
112 + })
113 +
40 const items = reactive([]) 114 const items = reactive([])
41 115
42 const gotoMe = () => { 116 const gotoMe = () => {
...@@ -61,6 +135,29 @@ const $router = useRouter(); ...@@ -61,6 +135,29 @@ const $router = useRouter();
61 }) 135 })
62 } 136 }
63 }) 137 })
138 +
139 + // 处理书籍下作品列表
140 + const list = ref([]);
141 + const loading = ref(false);
142 + const finished = ref(false);
143 +
144 + const onLoad = () => {
145 + // 异步更新数据
146 + // setTimeout 仅做示例，真实场景中一般为 ajax 请求
147 + setTimeout(() => {
148 + for (let i = 0; i < 20; i++) {
149 + list.value.push(list.value.length + 1);
150 + }
151 +
152 + // 加载状态结束
153 + loading.value = false;
154 +
155 + // 数据全部加载完成
156 + if (list.value.length >= 100) {
157 + finished.value = true;
158 + }
159 + }, 1000);
160 + };
64 </script> 161 </script>
65 162
66 <script> 163 <script>
...@@ -110,6 +207,77 @@ export default { ...@@ -110,6 +207,77 @@ export default {
110 font-size: 1rem; 207 font-size: 1rem;
111 } 208 }
112 } 209 }
210 + .book-video-title {
211 + background-color: #F7F7F7;
212 + padding: 1rem 1.5rem;
213 + }
214 + .book-video-language {
215 + padding: 1rem;
216 + .uncheck {
217 + background: #F7F7F7;
218 + border-radius: 15px;
219 + padding: 0.5rem;
220 + text-align: center;
221 + color: #222222;
222 + margin: 0 0.25rem;
223 + }
224 + .checked {
225 + background: #F9D95C;
226 + border-radius: 15px;
227 + padding: 0.5rem;
228 + text-align: center;
229 + color: #222222;
230 + margin: 0 0.25rem;
231 + }
232 + .choose-wrapper {
233 + background: #F7F7F7;
234 + border-radius: 15px;
235 + padding: 0.5rem;
236 + text-align: center;
237 + color: #B0B0B0;
238 + margin: 0 0.25rem;
239 + .text {
240 + display: inline-block;
241 + text-align: left;
242 + width: 80%;
243 + }
244 + .icon {
245 + display: inline-block;
246 + text-align: right;
247 + width: 20%;
248 + }
249 + }
250 + }
251 + .book-video-list {
252 + height: 20rem;
253 + overflow: scroll;
254 + }
255 + }
256 + .book-bar {
257 + position: fixed;
258 + right: 0;
259 + bottom: 0;
260 + left: 0;
261 + display: flex;
262 + align-items: center;
263 + box-sizing: content-box;
264 + background-color: white;
265 + padding: 1rem;
266 + .text {
267 + display: flex;
268 + flex-direction: column;
269 + justify-content: center;
270 + min-width: 3rem;
271 + color: #713610;
272 + text-align: center;
273 + }
274 + .button {
275 + display: flex;
276 + flex-direction: column;
277 + justify-content: center;
278 + flex: 1;
279 + padding: 0 0.5rem;
280 + }
113 } 281 }
114 } 282 }
115 </style> 283 </style>
...\ No newline at end of file ...\ No newline at end of file
......