GCLS_Page_Learn/src/views/teacher/create_course/step_table/SelectBook.vue

<template>
  <div class="select-book">
    <step-bar :step-number="1" />
    <div class="select-book-container">
      <div class="select-book-container-title">
        {{ $t('Key49') }}
      </div>
      <div class="select-book-container-table">
        <div class="search">
          <div>
            <el-input
              v-model="search"
              prefix-icon="el-icon-search"
              :placeholder="$t('Key267')"
              class="keyword"
              @keyup.enter.native="queryBookList"
            >
              <el-button slot="append" @click="queryBookList">
                {{ $t('Key131') }}
              </el-button>
            </el-input>
            <!-- <el-button class="buy">去购买</el-button><span class="tip">只能添加已购买的资源</span> -->
          </div>
          <div>
            <!-- <el-button type="info">最新</el-button> -->
          </div>
        </div>
        <div class="book">
          <div class="book-list">
            <div v-for="item in book_list" :key="item.id" class="book-list-item">
              <div
                :class="['book-list-item-img', { selected: item.is_selected === 'true' }]"
                @click="addOrRemoveBookToCourse(item.id)"
              >
                <el-image fit="contain" :src="item.picture_url" />
              </div>
              <div class="book-list-item-name">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="book-bottom">
            <el-pagination
              layout="prev, pager, next"
              :total="total_count"
              :current-page="cur_page"
              :page-size="page_capacity"
              @prev-click="changePage"
              @next-click="changePage"
              @current-change="changePage"
            />
            <div>
              <el-button class="prev-step" @click="prevCourseInfo">
                <i class="el-icon-back" />{{ $t('Key264') }}
              </el-button>
              <el-button type="primary" class="next-step" @click="nextStep">
                {{ $t('Key262') }}<i class="el-icon-right" />
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StepBar from '@/components/StepBar.vue';
import { PageQueryBookList_SelectBookForCourse } from '@/api/list';
import { AddBookToCourse, RemoveBookFromCourse } from '@/api/course';

export default {
  name: 'SelectBook',
  components: {
    StepBar
  },
  data() {
    return {
      id: this.$route.params.id,
      is_template: 'is_template' in this.$route.query ? this.$route.query.is_template === 'true' : false,
      search: '',
      page_capacity: 14,
      cur_page: 1,
      total_count: 0,
      book_list: []
    };
  },
  created() {
    this.queryBookList();
  },
  methods: {
    queryBookList() {
      PageQueryBookList_SelectBookForCourse({
        name: this.search,
        course_id: this.id,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page
      }).then(({ book_list, cur_page, total_count }) => {
        this.cur_page = cur_page;
        this.total_count = total_count;
        this.book_list = book_list;
      });
    },
    changePage(newPage) {
      this.cur_page = newPage;
      this.queryBookList();
    },
    addOrRemoveBookToCourse(book_id) {
      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') {
        RemoveBookFromCourse(data).then(() => {
          this.$message.success(this.$i18n.t('Key350'));
          this.book_list[bookIndex].is_selected = 'false';
        });
      } else {
        AddBookToCourse(data).then(() => {
          this.$message.success(this.$i18n.t('Key351'));
          this.book_list[bookIndex].is_selected = 'true';
        });
      }
    },
    prevCourseInfo() {
      this.$router.push(`/create_course_step_table/course_info?id=${this.id}&is_template=${this.is_template}`);
    },
    nextStep() {
      this.$router.push({
        path: `/create_course_step_table/create_task/${this.id}?is_template=${this.is_template}`
      });
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin';

.select-book {
  @include container;

  margin-top: $step-h;

  &-container {
    width: $basic-width;
    min-width: $basic-width;
    min-height: 674px;
    padding: 24px 32px;
    background-color: #fff;
    border-radius: 8px;

    &-title {
      padding-bottom: 24px;
      font-size: 20px;
      font-weight: 700;
    }

    &-table {
      .search {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;

        .keyword {
          width: 300px;
        }

        .buy {
          margin-left: 16px;
          color: $basic-color;
        }

        .tip {
          margin-left: 16px;
        }
      }

      .book {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(100vh - #{$header-h} - #{$step-h} - 224px);

        &-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          margin-bottom: 50px;

          &-item {
            display: inline-block;
            width: 120px;
            min-height: 192px;
            margin-right: 48px;

            &-img {
              position: relative;
              width: 100%;
              height: 160px;
              cursor: pointer;
              border: 1px solid #c4c4c4;

              .el-image {
                width: 100%;
                height: 100%;
              }

              &.selected {
                border: 2px solid $basic-color;

                &::after {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  display: inline-block;
                  width: 24px;
                  height: 24px;
                  line-height: 30px;
                  color: #fff;
                  text-align: center;
                  content: '√';
                  background-color: $basic-color;
                  border-top-left-radius: 5px;
                }
              }
            }

            &-name {
              margin-top: 8px;
              word-wrap: break-word;
            }

            &:nth-child(7n) {
              margin-right: 0;
            }

            &:nth-child(n + 8) {
              margin-top: 40px;
            }
          }
        }

        &-bottom {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;

          .prev-step .el-icon-back {
            margin-right: 12px;
          }

          .next-step .el-icon-right {
            margin-left: 12px;
          }
        }
      }
    }
  }
}
</style>