Skip to content

Commit 1716773

Browse files
k-waterk-water
committed
featL: add book store edit
1 parent d25c4d5 commit 1716773

File tree

4 files changed

+177
-22
lines changed

4 files changed

+177
-22
lines changed

‎src/app.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ class App extends Component {
1212
config = {
1313
pages: [
1414
// 'subpages/details/bookReview/index',
15+
'pages/book/index',
1516
'pages/index/index',
1617
'pages/class/index',
17-
'pages/book/index',
18+
// 'pages/book/index',
1819
'pages/person/index'
1920
],
2021
subpackages: [

‎src/pages/book/index.js‎

Lines changed: 115 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import Taro, { Component } from '@tarojs/taro'
2-
import { View, Image, Text } from '@tarojs/components'
2+
import {
3+
View,
4+
Image,
5+
Text,
6+
CheckboxGroup,
7+
Checkbox,
8+
Label
9+
} from '@tarojs/components'
10+
import errorIcon from '../../static/icon/error.png'
311
import './index.scss'
412

513
export default class Index extends Component {
@@ -11,7 +19,9 @@ export default class Index extends Component {
1119
super(...arguments)
1220
this.state = {
1321
storeBooks: [],
14-
isLoading: true
22+
isLoading: true,
23+
isEdit: false,
24+
isSelected: []
1525
}
1626
}
1727

@@ -75,35 +85,119 @@ export default class Index extends Component {
7585
})
7686
}
7787

88+
removeBook() {
89+
const { isSelected, isEdit } = this.state
90+
const self = this
91+
if (isSelected.length) {
92+
Taro.showLoading({
93+
title: '移除中...'
94+
})
95+
isSelected.map(item => {
96+
// eslint-disable-next-line no-undef
97+
wx.cloud
98+
.callFunction({
99+
name: 'delBook',
100+
data: {
101+
bookId: item
102+
}
103+
})
104+
.then(() => {
105+
self.getStoreBooks()
106+
self.setState({
107+
isEdit: !isEdit
108+
})
109+
Taro.hideLoading()
110+
Taro.showToast({
111+
title: '已移除'
112+
})
113+
})
114+
.catch(err => {
115+
throw err
116+
})
117+
})
118+
} else {
119+
Taro.showToast({
120+
title: '请先选择书籍',
121+
image: errorIcon
122+
})
123+
}
124+
}
125+
126+
editOrJump(bookId, bookTitle) {
127+
const { isEdit } = this.state
128+
if (!isEdit) {
129+
this.jumpReadBookPage(bookId, bookTitle)
130+
}
131+
}
132+
133+
toggleBookEdit() {
134+
this.setState({
135+
isEdit: !this.state.isEdit
136+
})
137+
}
138+
139+
handleCheckBoxChange(e) {
140+
this.setState({
141+
isSelected: e.detail.value
142+
})
143+
}
144+
78145
render() {
79-
const { storeBooks, isLoading } = this.state
146+
const { storeBooks, isLoading, isEdit } = this.state
80147
const baseImageUrl = 'http://statics.zhuishushenqi.com'
81148
if (!isLoading) {
82149
return (
83150
<View className='book-store'>
84151
<View className='book-header'>
85-
<View className='book-edit'>
86-
<Text>编辑</Text>
152+
<View className='book-edit' onClick={this.toggleBookEdit}>
153+
<Text>{isEdit ? '取消' : '编辑'}</Text>
87154
</View>
88155
</View>
89-
<View className='book-content'>
90-
{storeBooks.map(item => {
91-
return (
92-
<View className='book-info' key={item._id} onClick={this.jumpReadBookPage.bind(this, item.bookId, item.title)}>
93-
<Image
94-
mode='aspectFill'
95-
src={`${baseImageUrl}${item.cover}`}
96-
/>
97-
<View className='book-title'>
98-
{item.title}
99-
</View>
100-
<View className='book-author'>
101-
{item.author}
156+
<View>
157+
<CheckboxGroup
158+
onChange={this.handleCheckBoxChange}
159+
className='book-content'
160+
>
161+
{storeBooks.map(item => {
162+
return (
163+
<View
164+
key={item._id}
165+
className='book-info'
166+
onClick={this.editOrJump.bind(
167+
this,
168+
item.bookId,
169+
item.title
170+
)}
171+
>
172+
<Image
173+
mode='aspectFill'
174+
src={`${baseImageUrl}${item.cover}`}
175+
/>
176+
<View className='book-title'>{item.title}</View>
177+
<View className='book-author'>{item.author}</View>
178+
{isEdit && (
179+
<Label className='book-label'>
180+
<Checkbox
181+
className='book-checkbox'
182+
value={item.bookId}
183+
/>
184+
</Label>
185+
)}
102186
</View>
103-
</View>
104-
)
105-
})}
187+
)
188+
})}
189+
</CheckboxGroup>
106190
</View>
191+
{isEdit && (
192+
<View className='book-action'>
193+
<View className='book-cancel' onClick={this.toggleBookEdit}>
194+
<Text>取消</Text>
195+
</View>
196+
<View className='book-del' onClick={this.removeBook}>
197+
<Text>删除</Text>
198+
</View>
199+
</View>
200+
)}
107201
</View>
108202
)
109203
}

‎src/pages/book/index.scss‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
display: flex;
1414
flex-wrap: wrap;
1515
.book-info {
16+
position: relative;
1617
width: calc(100% / 3);
1718
display: flex;
1819
align-items: center;
@@ -33,6 +34,65 @@
3334
font-size: 11PX;
3435
color: rgb(160, 164, 165);
3536
}
37+
.book-label {
38+
position: absolute;
39+
width: 100%;
40+
height: 100%;
41+
}
42+
.book-checkbox {
43+
position: absolute;
44+
right: 14PX;
45+
bottom: 54PX;
46+
}
47+
checkbox .wx-checkbox-input {
48+
border-radius: 50%;
49+
width: 16PX;
50+
height: 16PX;
51+
}
52+
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
53+
border: none;
54+
background: rgb(24, 144, 255);
55+
}
56+
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
57+
border-radius: 50%;
58+
width: 16PX;
59+
height: 16PX;
60+
line-height: 16PX;
61+
text-align: center;
62+
font-size: 14PX;
63+
color:#fff;
64+
background: transparent;
65+
transform:translate(-50%, -50%) scale(1);
66+
}
67+
}
68+
}
69+
70+
.book-action {
71+
position: fixed;
72+
bottom: 0;
73+
display: flex;
74+
justify-content: space-around;
75+
padding: 10PX 0;
76+
border-top: 1PX solid rgb(225, 227, 228);
77+
background-color: rgb(250, 250, 250);
78+
width: 100%;
79+
View {
80+
width: 40%;
81+
border-radius: 20PX;
82+
height: 38PX;
83+
line-height: 38PX;
84+
text-align: center;
85+
}
86+
Text {
87+
font-size: 16PX;
88+
}
89+
.book-cancel {
90+
background-color: #eeeeee;
91+
color: #000;
92+
}
93+
.book-del {
94+
background-color: rgb(236, 71, 72);
95+
color: #fff;
3696
}
3797
}
3898
}

‎src/static/icon/error.png‎

2.05 KB
Loading

0 commit comments

Comments
 (0)