8000 一大波更新 · sam9831/mpvue-imooc-ebook-docs@ea59c23 · GitHub
[go: up one dir, main page]
Skip to content

Commit ea59c23

Browse files
sam9831sam9831
committed
一大波更新
1 parent a8e43f1 commit ea59c23

File tree

4 files changed

+297
-4
lines changed

4 files changed

+297
-4
lines changed

‎docs/guide/dev/book-list.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# 图书列表
22

3-
> 写作中
3+
复用 SearchTable 组件，详见[搜索开发](http://www.youbaobao.xyz/mpvue-docs/guide/dev/search.html)

‎docs/guide/dev/category-list.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# 分类列表
22

3-
> 写作中
3+
复用 HomeBook 组件，详见[首页开发](http://www.youbaobao.xyz/mpvue-docs/guide/dev/home.html)

‎docs/guide/dev/read.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,35 @@
11
# 阅读器
22

3-
> 写作中
3+
## 学习重点
4+
5+
- `webview` 组件的使用（查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)）
6+
- 阅读器模块的集成方法
7+
8+
## 阅读器组件
9+
10+
<table>
11+
<tr>
12+
<th>组件名称</th>
13+
<th>属性</th>
14+
<th>参数</th>
15+
<th>用途</th>
16+
<th>默认值</th>
17+
</tr>
18+
<tr>
19+
<td rowspan="3">read</td>
20+
<td rowspan="3">data</td>
21+
<td>fileName</td>
22+
<td>图书的唯一标识</td>
23+
<td>-</td>
24+
</tr>
25+
<tr>
26+
<td>opf</td>
27+
<td>图书opf文件地址</td>
28+
<td>-</td>
29+
</tr>
30+
<tr>
31+
<td>navigation</td>
32+
<td>图书目录地址</td>
33+
<td>-</td>
34+
</tr>
35+
</table>

‎docs/guide/dev/shelf.md

Lines changed: 262 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,264 @@
11
# 书架
22

3-
> 写作中
3+
## 学习重点
4+
5+
- API对接：
6+
- 加入时间API
7+
- 书架列表API
8+
9+
## 书架视觉稿
10+
[http://www.youbaobao.xyz/mpvue-design/preview/#artboard6](http://www.youbaobao.xyz/mpvue-design/preview/#artboard6)
11+
12+
## 用户信息面板
13+
14+
<table>
15+
<tr>
16+
<th>组件名称</th>
17+
<th>属性</th>
18+
<th>参数</th>
19+
<th>用途</th>
20+
<th>默认值</th>
21+
</tr>
22+
<tr>
23+
<td rowspan="3">ShelfUserInfo</td>
24+
<td rowspan="3">props</td>
25+
<td>num</td>
26+
<td>书架图书数量</td>
27+
<td>0</td>
28+
</tr>
29+
<tr>
30+
<td>readDay</td>
31+
<td>加入天数</td>
32+
<td>0</td>
33+
</tr>
34+
<tr>
35+
<td>userInfo</td>
36+
<td>用户信息</td>
37+
<td>{}</td>
38+
</tr>
39+
</table>
40+
41+
## 书架列表组件
42+
43+
<table>
44+
<tr>
45+
<th>组件名称</th>
46+
<th>属性</th>
47+
<th>参数</th>
48+
<th>用途</th>
49+
<th>默认值</th>
50+
</tr>
51+
<tr>
52+
<td rowspan="3">ShelfList</td>
53+
<td>props</td>
54+
<td>shelfList</td>
55+
<td>书架列表</td>
56+
<td>[]</td>
57+
</tr>
58+
<tr>
59+
<td rowspan="2">methods</td>
60+
<td>gotoHome</td>
61+
<td>访问首页</td>
62+
<td>-</td>
63+
</tr>
64+
<tr>
65+
<td>gotoBookDetail</td>
66+
<td>访问图书详情</td>
67+
<td>-</td>
68+
</tr>
69+
</table>
70+
71+
## 组件源码
72+
73+
### ShelfUserInfo
74+
75+
```vue
76+
<template>
77+
<div class="user-info-wrapper">
78+
<div class="user-info">
79+
<div class="user-nick-name">{{userInfo.nickName}}</div>
80+
<div class="user-read-time">您已经加入小慕读书{{readDay}}天</div>
81+
<div class="user-avatar-wrapper">
82+
<img class="user-avatar" :src="userInfo.avatarUrl" mode="widthFix">
83+
</div>
84+
</div>
85+
<div class="user-extra">
86+
<div class="user-extra-text">您的书架中共有 {{num}} 本好书</div>
87+
</div>
88+
</div>
89+
</template>
90+
91+
<script>
92+
export default {
93+
props: {
94+
num: Number,
95+
readDay: Number,
96+
userInfo: Object
97+
}
98+
}
99+
</script>
100+
101+
<style lang="scss" scoped>
102+
.user-info-wrapper {
103+
margin: 15px 25px;
104+
background: #F8F9FB;
105+
border-radius: 12px;
106+
padding: 15px 20px;
107+
border: 1px solid #E0E1E2;
108+
109+
.user-info {
110+
position: relative;
111+
height: 60px;
112+
border-bottom: 1px solid #E9E9E9;
113+
114+
.user-nick-name {
115+
font-size: 17px;
116+
font-weight: 500;
117+
color: #333;
118+
}
119+
120+
.user-read-time {
121+
font-size: 12px;
122+
color: #868686;
123+
}
124+
125+
.user-avatar-wrapper {
126+
position: absolute;
127+
right: 0;
128+
top: 0;
129+
130+
.user-avatar {
131+
width: 40px;
132+
border-radius: 50%;
133+
}
134+
}
135+
}
136+
137+
.user-extra {
138+
margin-top: 15px;
139+
140+
.user-extra-text {
141+
font-size: 12px;
142+
color: #666;
143+
font-weight: 500;
144+
}
145+
}
146+
}
147+
</style>
148+
```
149+
150+
### ShelfList
151+
152+
```vue
153+
<template>
154+
<div class="shelf-list-wrapper">
155+
<div class="shelf-list-inner">
156+
<div
157+
class="shelf-book"
158+
v-for="book in shelfList"
159+
:key="book.fileName"
160+
>
161+
<div
162+
class="shelf-book-cover"
163+
v-if="book && book.cover"
164+
@click="() => gotoBookDetail(book)"
165+
>
166+
<ImageView :src="book.cover"></ImageView>
167+
</div>
168+
<div class="shelf-book-title" v-if="book && book.title">{{book.title}}</div>
169+
<div class="shelf-book-add" v-if="!book.title" @click="gotoHome">
170+
<div class="shelf-book-add-wrapper">
171+
<div class="shelf-book-add-x"></div>
172+
<div class="shelf-book-add-y"></div>
173+
</div>
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
</template>
179+
180+
<script>
181+
import ImageView from '../base/ImageView'
182+
export default {
183+
components: { ImageView },
184+
props: {
185+
shelfList: Array
186+
},
187+
methods: {
188+
gotoHome() {
189+
this.$router.push('/pages/index/main')
190+
},
191+
gotoBookDetail(book) {
192+
this.$router.push({ path: '/pages/detail/main', query: { fileName: book.fileName } })
193+
}
194+
}
195+
}
196+
</script>
197+
198+
<style lang="scss" scoped>
199+
.shelf-list-wrapper {
200+
padding: 0 12.5px 20px 12.5px;
201+
202+
.shelf-list-inner {
203+
display: flex;
204+
flex-flow: row wrap;
205+
206+
.shelf-book {
207+
flex: 0 0 33.33%;
208+
width: 33.33%;
209+
padding: 20px 12.5px 0 12.5px;
210+
box-sizing: border-box;
211+
212+
.shelf-book-cover {
213+
width: 100%;
214+
height: 130px;
215+
}
216+
217+
.shelf-book-title {
218+
width: 100%;
219+
font-size: 12px;
220+
color: #333;
221+
overflow: hidden;
222+
text-overflow: clip;
223+
line-height: 14px;
224+
max-height: 28px;
225+
margin-top: 10px;
226+
}
227+
228+
.shelf-book-add {
229+
width: 100%;
230+
height: 130px;
231+
border: 1px solid #CBCBCB;
232+
box-sizing: border-box;
233+
display: flex;
234+
align-items: center;
235+
justify-content: center;
236+
237+
.shelf-book-add-wrapper {
238+
position: relative;
239+
width: 30px;
240+
height: 30px;
241+
242+
.shelf-book-add-x {
243+
position: absolute;
244+
top: 50%;
245+
width: 30px;
246+
height: 2px;
247+
margin-top: -1px;
248+
background: #CACACA;
249+
}
250+
251+
.shelf-book-add-y {
252+
position: absolute;
253+
left: 50%;
254+
width: 2px;
255+
height: 30px;
256+
background: #CACACA;
257+
}
258+
}
259+
}
260+
}
261+
}
262+
}
263+
</style>
264+
```

0 commit comments

Comments
 (0)
0