|
|
@@ -27,15 +27,19 @@
|
|
|
</div>
|
|
|
<div class="book">
|
|
|
<div class="book-list">
|
|
|
- <div v-for="item in book_list" :key="item.id" class="book-list-item">
|
|
|
+ <div
|
|
|
+ v-for="{ is_selected, is_buy, id: book_id, picture_url, name } in book_list"
|
|
|
+ :key="book_id"
|
|
|
+ class="book-list-item"
|
|
|
+ >
|
|
|
<div
|
|
|
- :class="['book-list-item-img', { selected: item.is_selected === 'true' }]"
|
|
|
- @click="addOrRemoveBookToCourse(item.id)"
|
|
|
+ :class="['book-list-item-img', { selected: is_selected === 'true' }, { 'no-buy': is_buy === 'false' }]"
|
|
|
+ @click="addOrRemoveBookToCourse(book_id, is_selected, is_buy)"
|
|
|
>
|
|
|
- <el-image fit="contain" :src="item.picture_url" />
|
|
|
+ <el-image fit="contain" :src="picture_url" />
|
|
|
</div>
|
|
|
<div class="book-list-item-name">
|
|
|
- {{ item.name }}
|
|
|
+ {{ name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -105,13 +109,16 @@ export default {
|
|
|
this.cur_page = newPage;
|
|
|
this.queryBookList();
|
|
|
},
|
|
|
- addOrRemoveBookToCourse(book_id) {
|
|
|
+ addOrRemoveBookToCourse(book_id, is_selected, is_buy) {
|
|
|
+ if (is_selected === 'false' && is_buy === 'false') {
|
|
|
+ return this.$message.warning('请先购买本教材！');
|
|
|
+ }
|
|
|
const data = {
|
|
|
course_id: this.id,
|
|
|
book_id
|
|
|
};
|
|
|
const bookIndex = this.book_list.findIndex(({ id }) => id === book_id);
|
|
|
- if (this.book_list[bookIndex].is_selected === 'true') {
|
|
|
+ if (is_selected === 'true') {
|
|
|
RemoveBookFromCourse(data).then(() => {
|
|
|
this.$message.success(this.$i18n.t('Key350'));
|
|
|
this.book_list[bookIndex].is_selected = 'false';
|
|
|
@@ -225,6 +232,11 @@ export default {
|
|
|
border-top-left-radius: 5px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &.no-buy {
|
|
|
+ background: #c4c4c4;
|
|
|
+ filter: grayscale(0.5);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&-name {
|
